그리드 시스템

그리드 시스템

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

그리드 시스템의 장점

• 정렬에 도움을 주고 정돈된 결과물을 얻을 수 있다.
• 일관적이고 규칙적인 배치로 통일성이나 일관성을 얻을 수 있다.
• 내부 협업하는 과정에 도움을 주며 기준(Rule)으로 활용한다.
• 반응형 디자인 설계 시 해상도 대응이 용이해진다.

그리드 시스템의 기본 요소

칼럼(Column), 거터(Gutter), 마진(Margin)세 가지 요소로 구성된다.

칼럼 (Column)

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

거터 (Gutter)

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

마진(Margin)

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