웹 디자인 그리드 시스템(Grid System)

 

디자인을 할 때 고민해하는 것 중 그리드 시스템에 대해 한참을 빠져서 고민한 적이 있다. '과연 그리드 시스템은 무엇이지?', '그리드 시스템을 꼭 사용해야 하는건가?' 그것에 대한 답을 찾기 위해 많은 고민을 했고 지금은 나 스스로는 확실한 답을 내린 상태이다. 결론부터 말한다면 그리드 시스템이 없어도 최종 디자인 산출물을 만드는 결과에는 영향이 있지는 않다. 하지만 내 디자인의 퀄리티를 높이고 안정적인 디자인을 하는데는 꼭 필요한 요소라고 생각한다. 

 

그리드 시스템은 무엇일까?

그리드 시스템(Grid System)이란 정보 구조와 배열을 체계적으로 작성하여 정보의 질서를 부여하는 시스템이다. 정보의 질서를 부여하게 되면 정보가 일관성을 갖고 정리되어 보이게 된다. 그러므로 좀 더 체계적인 정보 전달이 가능하고 다양한 해상도 대응이 쉬워 반응형 웹디자인(Responsive Web Design)을 제작하기 용이하다.

 

▶︎  그리드 시스템은 Column(컬럼) 과 Gutter(간격)의 구조로 이루어진다.

 

그리드 시스템을 포털에서 검색하면 12 컬럼 그리드라고 검색 결과가 나오는 것을 확인할 수 있다. 이는 12개의 컬럼이 11개의 간격으로 구조화되어 있는 레이아웃이라고 이해하면 쉬울 것 같다.

 

예) 1170px의 12 그리드이면 그리드 영역의 크기는 1170px이고, Column은 12개, Gutter는 11개, Margin은 Column의 시작과 끝에 좌우 여백을 의미한다.

 

12 그리드 시스템 예시

 

 

그리드 시스템은 어떻게 만들어야 할까?

검색을 해보면 다양한 결과가 검색되지만 어떤게 맞는 건지 어떻게 활용해야 하는지 헷갈린다. 사실 그리드 시스템에 대한 정확한 값이 정형화 되어 있는 것은 아니다. 내가 고려하고 있는 기기의 해상도나 디자인 목적에 맞게 설정해서 사용하면 된다. 물론 남들이 제작하여 공유하고 있는 것을 사용하면 별도의 고민없이 디자인을 시작할 수 있겠지만 본인이 남들이 설정한 해상도나 레이아웃에 맞춰야 하기 때문에 이는 신중하게 선택해야 한다.

 

(※흔히 검색에서 나오는 그리드 시스템은 흔히 사용되는 일반적인 설정이지 절대적인 설정 값은 아닙니다.)

 

가장 먼저 고려해야 될 요소는 바로 '해상도'이다. 출력 장치의 해상도는 그리드 시스템에 매우 중요한 요소이기 때문에 출력 장치의 해상도를 파악하고 이에 적합한 디자인 시스템을 제작하는 것이 필요하다.

 

▶︎ 참고

구분	해상도	비율
HD	1280x720	16:9
FHD	1920x1080	16:9
QHD	2560x1440	16:9
UHD	3840x2160	16:9

※해상도는 이미지/영상 등을 표현하는 데 몇 개의 픽셀(pixel)로 이루어졌는지를 폭넓게 나타내는 말이다.

 

만약 가로 해상도가 1024px인 기기를 대상으로 디자인을 한다면 그리드 시스템의 전체 영역은 1024px를 넘어서는 안되며, 그리드 시스템의 영역(가로 크기)이 정해졌다면 해상도와 정보 구조의 적합도에 따라 컬럼수와 컬럼의 크기, 간격을 설정한다.

 

(※정보 구조에 따라 적합한 Column 숫자를 설정합니다. 2, 4, 8, 12, 16...)

 

 

최근 가장 많이 사용되는 스케치와 피그마에서 어떻게 그리드 시스템을 설정하는지 알아보자

 

그리드 시스템을 제작하기 전 우선 내가 디자인 시 주력으로 대응할 해상도를 설정해 줘야 한다. 특히 반응형 디자인을 할 때는 해상도에 따른 최적화가 더욱 강조되기 때문에 반드시 미리 대응할 해상도의 대표 사이즈를 설정해야 한다. 아래 첨부한 웹사이트 등과 같은 사이트에서 많이 사용되는 해상도를 확인하고 이에 맞게 대응을 하면 된다.

 

https://gs.statcounter.com/

StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

 

해상도 이용 현황

 

위 표를 기준으로 한다면 1920x1080, 1366x768 해상도 정도는 대응을 해줘야 한다. 그렇다면 1920px 보다 작은 1366px 을 기준으로 삼아야 한다. 왜냐하면 더 작은 픽셀로 이루어져 있기 떄문에 1366px 보다 클 시 해당 출력 장치에서 내 디자인이 잘려서 나오는 상황이 발생하게 되기 때문이다. 따라서 좌우 여백까지 고려하여 1366px 보다 작은 크기의 그리드 시스템을 설정해야 한다.

 

 

1) Sketch App

스케치 앱 메뉴에서 View > Canvas > Layout Settings 을 클릭하여 레이아웃 설정 메뉴를 실행한다. 레이아웃 설정 메뉴에서 내가 원하는 그리드 시스템을 설정하여 적용할 수 있다.

 

Sketch App Layout Settings

∙Total Width : 그리드 시스템 전체의 가로폭을 의미한다.(첫번째 컬럼에서 마지막 컬럼까지 가로 길이)

∙Offset : 왼쪽 기준으로 마진(Margin) 값을 설정할 수 있다.(단, 센터로 설정 시 적용 안됨)

∙Number of Columns : 컬럼의 개수를 설정한다.(위에서 12 컬럼으로 얘기를 했지만 디바이스 or 해상도 별로 컬럼수를 조정)

∙Gutter on outside : 해당 메뉴 선택 시 첫 컬럼 이전, 마지막 컬럼 다음 간격을 설정한다.

∙Gutter Width : 컬럼과 컬럼과의 사이 간격을 설정한다.

∙Column Width : 컬럼의 가로 길이를 설정한다.

∙Gutter Height(Rows) : 로우와 로우의 사이 간격을 설정한다.

∙Column Height(Rows) : 로우의 세로 길이를 설정한다.

 

※Column은 세로 수직선을 의미하고, Rows는 가로 수평선을 의미한다.

 

 

 

2) Figma

피그마 우측 메뉴바 Layout grid > +(생성) > Layout grid settings(아이콘) 클릭하여 설정 메뉴를 실행한다. 그리드 시스템은 컬럼과 간격으로 구성되어 있는 기본적인 내용은 동일하기 때문에 위 스케치와 설정하는 것은 거의 동일하다. 메뉴 구조만 다를 뿐이다.

 

 

 

∙Count : 컬럼의 개수를 설정한다.

∙Color : 컬럼의 색상을 설정한다.

∙Type: 정렬 기준을 설정한다. 좌측/우측/중앙 중 1개를 선택한다.

∙With : 컬럼의 가로 크기를 설정한다.

∙Offset : 정렬 기준에 따라 마진(margin)을 설정한다.

∙Gutter : 컬럼과 컬럼 사이의 간격을 설정한다.

 

 

✋🏻 여기서 잠깐!

960px 12column Grid System이 많이 보이는 이유는 무엇일까? 예전 모니터는 HD 해상도로 지금보다 현저히 낮은 해상도를 가지고 있었는데 이를 기준으로 960px 12column Grid System을 많이 사용했다. 하지만 현재는 최소 FHD 모니터를 사용하고 있어 960px 12column Grid System을 사용하는 것이 적합한지는 한 번 생각해 볼 필요가 있다. 출력 장치의 대형화라는 트랜드 맞는 디자인 시스템을 제작하기를 권장한다.

 

 

이렇게 내가 제작할 디자인에 맞춰 반응형 디자인의 그리드 시스템을 설정했다면 아래 이미지처럼 레이아웃 세팅이 된 걸 확인할 수 있다. 설정한 그리드 시스템을 기준으로 정보 구조와 배열을 체계적으로 작성하여 정보의 질서를 부여하면 된다. 하지만 현업 디자이너조차 이를 제대로 적용하거나 그리드 시스템을 사용하지 않는 경우가 대다수이다. 서두에도 얘기했지만 최종 디자인 산출물을 위해 반드시 필요한 필요조건이냐고 묻는다면 '그렇다'라고 말할 수는 없지만 자신에 디자인의 퀄리티를 높이고 정보의 질서를 부여하여 정보 전달력을 높일 수 있는 수단이므로 디자이너라면 한 번 고민해보기를 추천한다.

 

 

 

만약 디자인 시스템 설정이 어렵다면 그리드 시스템 설정 값을 입력하면 자동으로 계산을 해주는 웹사이트도 있으니 이용해보면 조금 더 이해하는데 도움이 될 것 같다. 

 

http://gridcalculator.dk/

Grid Calculator by Nicolaj Kirkgaard Nielsen