그리드시스템

 

그리드 시스템이란?

[참고1] [참고2]

그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자이너는 아래 그림과 같이 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 됩니다.

[참고]

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

그리드 시스템의 기본 요소

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

① 칼럼(Columns)

실제로 컨텐츠를 포함하는 부분은 칼럼이라고 합니다. 칼럼의 넓이는 고정된 값으로 제공되며, 1개 이상의 칼럼이 조합하여 컨텐츠의 크기를 결정합니다. 그리고 하나의 칼럼 안에는 반드시 양 옆에 여백, 즉 거터를 동반합니다. (칼럼은 여러 스크린 사이즈에 유연하게 반응하기 위해 보통 고정 값보다 퍼센트로 정의될 때가 더 많습니다.)

② 거터(Gutters)

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

③ 마진(Margins)

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

그리드 시스템 용어

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