웹 그리드시스템을 위한 가이드

흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다.

그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다.

1. 고려 사항

그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의 디자인과 배치에 도움을 주는 프레임 워크이지만, 모든 것에 두루 적용되지는 않습니다. 기본적으로 내용 구성에 있어서 풀어야 할 문제를 먼저 생각해야 합니다.  

기술적인 제약 및 지침

구글의 Material Design을 보면, 어플리케이션 디자인에서 8dp의 사각형 격자를 기준으로 하는 그리드 시스템을 사용하지만, 타입과 툴 바의 아이콘에는 4dp 사각형 격자 기준의 그리드를 적용합니다. 

웹에서는 그리드 규칙에 더 많은 와일드 카드가 있지만, 반응형 웹에서 그리드가 어떻게 반영되어야 할지도 고민해봐야 합니다.

비즈니스 제약

브랜딩은 주요한 제약 조건입니다. 그리드에 브랜드 자산을 맞춰보았을 때 규칙에 벗어나는 그리드를 만드는 것은 아무 소용이 없습니다. 대부분의 브랜드는 특정한 간격이나 사용 규칙이 있는 로고를 갖고 있는데, 이를 그리드의 유닛에 적용할 수 있습니다. 

콘텐츠 제약

그리드 작업에 앞서, 어떤 콘텐츠가 담기는지 고려해야 합니다. 그 내용이 기사인지, 쇼핑몰인지에 따라 그리드를 다르게 설계해야 합니다. 또한 고정된 광고 영역이 있는지, 요소들의 크기가 변경될 수 있는지 생각해봐야 합니다.

처음에는 이러한 제약 사항들이 귀찮을 수도 있지만, 이것으로 더 쉽게 그리드 시스템을 구축할 수 있습니다. 제약 사항이 곧 그리드의 기준이 될 수 있기 때문입니다. 

2. 그리드 용어

그리드는 칼럼, 베이스 라인처럼 간단하지 않습니다. 사실, 같은 주제를 다루는 많은 책에서 용어의 차이가 있지만, 전반적으로 동일한 것을 설명하고 있습니다.

유닛 (UNITS)

유닛은 페이지에서 가장 작은 수직적 구분으로, 대개 어떤 의미 있는 콘텐츠를 수용하기에는 작지만 그리드를 구축하기 위한 가장 기본적인 그리드입니다.

칼럼, 열 (COLUMNS)

칼럼은 그룹으로 묶인 유닛의 집합입니다. 예를 들어, 기본 12개 유닛의 그리드 시스템에서 6개 씩 2열로 묶거나 4개 씩 3열, 또는 2개 씩 6열로 묶어 나눌 수 있습니다. 칼럼의 크기가 작을수록 다양한 측정이 가능합니다.

영역 (REGIONS)

영역은 페이지 레이아웃의 기초를 형성하는 칼럼의 그룹입니다. 예를 들어, 8개의 칼럼으로 구분된 16 유닛 그리드 시스템은 6개의 칼럼과 2개의 칼럼, 두 영역으로 나눌 수 있습니다. 이렇게 하여 본문과 사이드 영역이 있는 기본적인 페이지 레이아웃을 구성할 수 있습니다.

베이스 라인 (BASELINE)

베이스 라인은 서체가 놓이는 수평선을 가리키는 타이포그래피 시스템입니다. 콘텐츠에 수직 방향의 리듬감을 주며, 그리드에 포함되는 유용한 도구입니다. 

필드 (FIELDS)

필드는 페이지를 수평으로 분할한 것입니다. 요소를 수직적으로 배치하고 섹션을 동일하게 분할하는 기준으로 베이스 라인 그리드를 사용합니다.

거터 (GUTTERS)

거터는 요소 사이의 빈 공간, 유닛과 칼럼, 영역 사이의 수직적 빈 공간, 필드 사이의 수평적 공간을 말합니다. 

3. 그리드를 그리는 방법

이 방법은 최종 개발 단계 보다, 포토샵/스케치에서 그리드를 만드는데 적합합니다. 

첫 번째로 제약 조건을 따져봅니다. 페이지 한 켠에 구글 애드센스의 큰 유닛(336px X 280px)이 있는 블로그의 그리드를 생성하는 예를 들어보겠습니다. 앞서 말한 바와 같이, 이 제약 조건은 그리드 시스템을 만드는데 좋은 출발점이 됩니다. 이 광고 유닛을 중심으로 그리드를 생성합니다. 

모바일보다도 오히려 최대 너비의 디바이스를 기준으로 두는 것이 좋습니다. 보통, 모바일에서는 하나의 컬럼에 콘텐츠를 쌓는 구조로 만들기 때문에, 보다 그리드를 고민해야하 하는 큰 디바이스에 콘텐츠를 배치하는 것이 좋습니다. 

이번 예에서는 사이트의 컨테이너 폭을 표준 모니터 크기(1280px * 1024px)에 적절하고 기수 4로 잘 분할할 수 있는 크기인 1200px로 가정해보겠습니다.

기수 4는 사이트에 사용되는 모든 계산에서 16px(4 * 4 = 16)의 표준 em 크기로 나눌 수 있어야 한다는 디자인 개념입니다. 예를 들면, 1em(16px)인 글꼴의 line height는 글꼴 크기의 150%인 24px(4*6=24)이어야 한다는 규칙이 있습니다.

1200은 기수 4로 아주 깔끔하게 나뉩니다 :  

1200/4 = 300, 1200/8 = 150, 1200/12 = 100, 1200/16 = 75 

유닛의 가로폭 계산을 위해 간단한 공식을 사용할 수 있습니다.

(전체 페이지 너비 / 유닛의 수) - 거터 폭 = 합

((합 * 유닛의 수) - 거터 폭) / 유닛의 수 = 유닛의 폭

8개의 유닛으로 나뉘고 16px의 거터로 구성된 전체 1200px 너비의 페이지를 예로 들면,  다음처럼 계산할 수 있습니다 : 

(1200 / 8) - 16 = 134

최종적으로 유닛의 폭을 구하려면 유닛의 수로 합계를 나눠야 합니다. 유닛의 폭은 132px인 것을 알 수 있습니다.

((134 * 8) - 16) / 8 = 132

이제 페이지에 고정된 제약 요건인 광고 유닛을 16px의 거터와 4개의 컬럼을 사용하는 가장 기본적인 그리드에 배치할 수 있습니다.

두 개의 칼럼 영역에 광고 배너가 자리잡았습니다.  그러나 두 개의 칼럼을 합친 영역 너비와 실제 광고 영역의 너비가 맞지 않아 여백이 많이 생기게 됩니다. 이 그리드를 8개의 칼럼, 12개의 칼럼으로 바꿔봅시다. 

12개로 변경한 결과, 유닛의 폭이 소수점으로 떨어집니다. 이럴 때는 거터를 16px에서 12px로 줄여 유닛의 가로폭을 정수로 얻을 수 있습니다. 

더 균형 있는 모습을 위해 유닛들을 크게 3개의 칼럼으로 나눠 칼럼 2개는 본문 영역으로, 나머지 칼럼은 aside로 사용할 수 있습니다. 

목표는, 가능한 가장 간단한 그리드(가장 적은 수의 유닛 / 칼럼 / 영역)를 사용하여 그리드를 만드는 것입니다. 우리는 16/20/24 등으로 유닛을 늘릴 수 있지만, 콘텐츠를 배치할 때 너무 많은 경우의 수를 주는 것이 오히려 함정이 될 수 도 있습니다. 디자인에서 말하는 less is more는 여기에서도 적용됩니다. 

4. 그리드 생성을 돕는 도구 

웹 페이지의 그리드 생성을 돕는 도구도 있습니다. 수식 계산이 필요 없이 간단하게 원하는 너비와 칼럼 수로 그리드를 만들어줍니다.

Grid.guide는 그리드 생성을 돕는 좋은 온라인 리소스입니다. 단순히 전체 폭과 열의 수를 입력하면 자동적으로 거터 너비 별로 그리드의 수치를 계산하여 보여줍니다. 

Guide Guide는 포토샵 익스텐션으로, 원하는 다양한 설정으로 포토샵에서 그리드를 쉽게 생성할 수 있습니다.

그리드를 생성하는 방식이 다소 복잡해 보일 수도 있지만, 충분히 고민해 볼 부분입니다. 디자인 초기 단계에서 그리드 시스템을 사용한다면, 보다 일관되고 정보 전달에 효과적인 레이아웃을 설계할 수 있으며, 웹 페이지 제작을 빠르고 쉽게 할 수 있습니다.

출처 : Tom Newton Blog

by 비숑 발자국