1. 그리드 레이아웃
그리드 시스템(栅格化布局)을 그리드 레이아웃(网格布局)이라고 부르는 것이 더 적절하다고 합니다. '그리드(Grid)'는 가로세로가 교차하는 사각형 격자의 직관적인 느낌을 주는 반면, '격자(栅格)'라는 표현은 개인에 따라 세로 방향의 느낌만 줄 수 있기 때문입니다. 실제로 그리드 레이아웃의 응용은 대개 고정된 열 너비를 사용하는 세로 방향에 집중되어 있지만, 사실 그리드 레이아웃은 행 높이도 고정하여 진정한 의미의 격자(Grid)를 구현할 수 있습니다.
본문 하단에 유용한 온라인 생성 도구와 전형적인 960 너비 24열 그리드 예시를 제공합니다.
2. 기원
1692년, 새로 즉위한 프랑스의 국왕 루이 14세는 프랑스의 인쇄 수준이 기대에 미치지 못한다고 느껴 인쇄를 관리하는 왕립 특별 위원회 설립을 명령했습니다. 그들의 최우선 과제는 과학적이고 합리적이며 기능성을 중시하는 새로운 서체를 설계하는 것이었습니다.
위원회는 수학자 니콜라스 자종(Nicolas Jaugeon)이 이끌었으며, 그들은 로만체를 기초로 사각형 격자를 설계 근거로 삼았습니다. 각 글자 격자는 64개의 기본 단위로 나뉘고, 각 단위는 다시 36개의 작은 격자로 나뉩니다. 이렇게 하여 하나의 인쇄 지면은 2,304개의 작은 격자로 구성되었습니다. 이 엄격한 기하학적 그리드 네트워크 안에서 글자의 형태를 설계하고 지면을 배열하며 전달 기능의 효능을 시험했습니다. 이는 세계 최초로 서체와 지면에 대해 과학적 실험을 수행한 활동이자, 그리드 시스템의 가장 초기 모태가 되었습니다.
그리드 레이아웃은 원래 인쇄 산업에서 사용되었습니다. 예를 들어 신문의 레이아웃은 엄격하게 그리드 레이아웃을 따릅니다. 신문은 크고 작은 콘텐츠 블록으로 나뉘어 있지만, 전체적으로 편안한 느낌을 주며 무질서한 느낌이 없습니다. 한편, 그리드에 기반한 엄격한 레이아웃은 페이지 스타일을 통일하고 서로 다른 페이지 간의 시각적 차이를 줄여줄 수 있습니다.
그리드 레이아웃은 주로 포털 사이트의 메인 페이지와 같이 대량의 정보를 표시하는 웹 페이지에 사용되며, 실제로 신문과 유사한 모습을 보입니다.
3. 960과 그리드 레이아웃
그리드 레이아웃을 조사하다 보면 960이라는 숫자가 반복해서 등장하는 것을 볼 수 있습니다. 어떤 글에서는 960이 황금분할과 관련이 있다고 하지만, 사실은 그렇지 않습니다.
960 너비는 시장의 선택이었습니다. 1024x768 해상도 시대에 960은 거의 전체 화면 너비(엄격히 말하면 뷰포트 너비)였으며, 황금분할과는 별 상관이 없습니다.
2008년경에는 다음과 같이 960 너비의 그리드 레이아웃을 사용하는 사이트가 많았습니다.
| 사이트 | 메인 페이지 너비 px |
|---|---|
| Yahoo! | 950 |
| 타오바오(Taobao) | 950 |
| MySpace | 960 |
| 시나(Sina) | 950 |
| 넷이즈(163) | 960 |
| Live Search | 958 |
| 소후(Sohu) | 950 |
| 요쿠(Youku) | 960 |
| AOL | 960 |
화면이 더 넓어지면(해상도가 높아지면) 더 넓은 폭의 그리드 레이아웃이 등장할 것임을 예측할 수 있습니다.
4. 구현 원리
전체 너비(width)를 W, 열 너비(column width)를 c, 열 간격(column gutter)을 g, 여백(margin)을 m, 열 수(column number)를 N이라고 하면 다음과 같은 식을 얻을 수 있습니다.
W = c * N + g * (N - 1) + 2 * m
일반적으로 거터(Gutter)의 너비는 마진(Margin)의 두 배(g = 2m)입니다. 위 식은 다음과 같이 간소화될 수 있습니다.
W = c * N + g * (N - 1) + g = (c + g) * N
c + g = C라고 하면 식이 매우 간단해집니다.
W = C * N
전형적인 그리드 레이아웃에서 950은 실제 너비(좌우 마진 제외), 960은 전체 너비 W입니다. 매우 간단한 산술식이며 신비로운 것은 없습니다. 가장 흔한 24열(열 너비 40px, 열 간격 8px) 그리드도 이 간단한 식으로 계산된 것입니다.
5. 다다미 레이아웃
다다미는 일본인의 가구(침대)로, 3행 4열의 그리드 레이아웃입니다. 이는 보기에 매우 편안한 레이아웃으로, WP나 Win8 Metro 레이아웃과 유사합니다.
3x4 그리드를 분할하면 3,164가지의 서로 다른 레이아웃을 얻을 수 있으며, 태블릿(PAD)의 콘텐츠 애플리케이션 레이아웃에서 널리 사용됩니다.
6. 황금분할
황금분할은 수학 문제로 요약될 수 있습니다. 길이가 1인 선분을 x와 1 - x의 두 부분으로 나눌 때 다음을 만족합니다.
x / 1 = (1 - x) / x
간단한 이차방정식으로 풀면:
x^2 + x - 1 = 0
양수 해는 다음과 같습니다.
x = (sqrt(5) - 1) / 2 ~= 0.618
황금분할은 디자인에서 상당히 중요한 위치를 차지하며 평면 디자인도 예외는 아닙니다. 그리드 레이아웃에서도 황금분할을 적용할 수 있습니다. 예를 들어 전형적인 960 너비 24열 그리드에서 열 너비 40, 열 간격 10일 때, 황금분할 비율(363/587)에 가장 가까운 2단 분할 방식은 9열(350) + 15열(590)입니다.
아직 댓글이 없습니다