그리드 시스템

그리드 시스템이란

그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다.

그리드 시스템의 장점

디자인 레이아웃은 모든 측정값이 동일한 규칙을 따르면 자동으로보다 일관된 UI를 얻게 됩니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 플랫폼, 환경 및 화면 크기에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 도와줍니다. 또한 협업의 목적으로 내부의 기준을 정하는 것에 도움이 되며, 또한 반응형 디자인의 경우 해상도 대응이 쉬워지고 디자이너와 개발자 사이의 쉬운 커뮤니케이션 시스템이 됩니다.

웹디자인에서의 그리드 시스템

그리드 시스템의 기본 요소

그리드는 칼럼(Column), 거터(Gutter), 마진(Margin) 세 가지 요소로 구성됩니다.

① 칼럼(Columns)

실제로 컨텐츠를 포함하는 부분은 칼럼이라고 합니다. 칼럼의 넓이는 고정된 값으로 제공되며, 1개 이상의 칼럼이 조합하여 컨텐츠의 크기를 결정합니다. 그리고 하나의 칼럼 안에는 반드시 양 옆에 여백, 즉 거터를 동반합니다.

② 거터(Gutters)

거터는 칼럼과 칼럼사이의 공간입니다. 1개 이상의 칼럼이 조합된 컨텐츠와 컨텐츠 사이의 간격이 됩니다. 거터의 넓이 역시 고정 값으로 제공하며, 스크린의 너비에 비례하여 넓은 거터는 큰 스크린에 적합니다. 칼럼사이에 공백을 더 많이 생성하기 때문입니다.

③ 마진(Margins)

여백은 내용과 화면의 왼쪽 및 오른쪽 가장자리 사이의 공간입니다. 여백 너비의 넓이도 고정 값으로 정의되며, 여백 역시 큰 여백은 내용의 둘레에 더 많은 공백을 만들기 때문에 큰 스크린에 적합니다.

 

브레이크 포인트의 범위별 컬럼과 마진/가터

브레이크 포인트	가로 사이즈	칼럼	마진/가터
Mobile	360 (psd 720)	4	16
Tablet	768 (psd 1536)	8	16
PC	1280, 1130(N), 1080(D)	12	24

 

그리드 계산기

Width: 1280px / Columns: 12개 / Gutter Width: 24px / Margin: 0

http://gridcalculator.dk/#/1280/12/24/0

http://gridcalculator.dk/

 

grid-system.xd

0.03MB

grid-system.xd

0.03MB

mobile-2배-grid-720.png

0.00MB

mobile-grid-360.png

0.00MB

pc-grid-1536.png

0.00MB

tablet-2배-grid-1280.png

0.00MB

tablet-grid-768.png

0.00MB

 

그리드 시스템을 사용하는 목적

"정보에 질서와 구조를 부여한다" - 베이스라인(Baseline) 기반의 타입 디자인

 

 

 

정보에 질서와 구조를 부여한 웹디자인

프린트 디자인의 다음 세대 매체인 웹/모바일 또한 객관적이고 합리적인 디자인 접근이 필요합니다!

12 컬럼 그리드 시스템

Topbots

 

Black Estate

 

16 컬럼 그리드 시스템

DAUM

 

NATE

 

NAVER

 

 

그리드 시스템 설계/적용 사례 - 웹 디자인

 

 

 

 

 

그리드 시스템 용어

 

 

용어풀이

Margin	마진(외부 여백)
Row	로우(행)
Column	컬럼(열)
Gutter	거터(열 간격)
Flowline	플로우라인(기준선)
Module	모듈(교환 가능한 구성부분)
Spatial Zone	여백(비어있는 공간)

모듈러 그리드 시스템 디자인

모듈(작은 덩어리) 단위로 대상(Object)을 응집하거나 분산함으로 디자인을 완성하는 것입니다.

baseline / rows / columns / modules