웹 그리드 시스템 #1

1. 그리드 시스템의 이해

무선 공책과 유선 공책에 글을 써 보자. 무선 공책에 글을 반듯하게 쓰기란 생각만큼 쉽지 않다. 반대로 유선 공책은 일정한 간격으로 선이 그어져 있어 조금만 신경 쓰면 반듯하게 글을 쓸 수 있다. 그리드는 우리가 흔히 사용하는 유선 공책에 있는 선과 같은 역할을 한다. 그리드를 이용하면 문서 작업을 더 쉽고 빠르게 할 수 있기 때문이다. 웹 디자인을 할 때도 그리드 시스템을 적용하면 시각적 질서와 일관성을 유지시켜 주므로 보기 좋은 웹 사이트를 제작할 수 있다.

 

■ 그리드 시스템의 개념

그리드(Grid)는 사전적으로는 격자나 바둑판 모양의 눈금을 뜻하며, 일반적으로는 수직과 수평으로 면이 분할된 것을 뜻한다. 디자인에서도 기본적으로는 같은 의미로 쓰이지만 쫌 더 구체적으로 쓰인다. 그리드 시스템(Grid System)은 디자인의 모든 요소, 즉 타이포그래피, 사진 그림 등을 디자인 결과물로 융화시킬 수 있는 요소이며, 디자인에 질서를 도입하는 수단이다.

 

■ 웹 디자인에서 그리드가 중요한 이유

웹 페이지는 시각적 요소가 중요한데 그리드 개념을 적용하면 웹 사이트를 방문하는 사용자에게  최적의 리딩 시스템(Reading System)을 제공할 수 있다. 웹 디자인에서는 주로 폭을 960~1200px, 칼럼 그리드를 12~16개 사용한다. 웹 디자인에 그리드 시스템을 적용하면 웹 사이트가 시각적 질서와 일관성을 유지할 수 있어 보기에도 좋지만 사용하기도 편해진다. 그리드 시스템은 편집 디자인에서도 많이 사용되지만 웹 디자인에서도 체계적인 웹 사이트를 제작하기 위한 수단으로 사용된다.

 

■ 그리드의 주요 용어

그리드의 주요 용어에는 유닛, 칼럼, 영역, 베이스라인, 거터, 마진 등이 있다.

 

① 유닛 : 유닛(Units)은 페이지에서 가장 작은 수직적 구분이다. 의미 있는 콘텐츠를 수용하기에는 작지만 그리드를 구축할 때 가장 기본이 되는 그리드이다. 웹 그리드 시스템에서 사용하는 가장 작은 구성단위는 수직적 형태를 가진 유닛이다.

 

② 칼럼 : 칼럼(Columns)은 레이아웃을 구성할 때 여러 시각적 요소를 배치하는 기본적인 뼈대로 가는 선이나 여백으로 분리된 세로 기둥을 말한다. 일반적으로 칼럼은 '단' 이라고도 부르며, 칼럼 개수에 따라 1단, 2단, 3단.. 그리드로 부른다. 글과 이미지가 많거나 내용이 복잡해지면 칼럼 개수를 늘려 효율적으로 사용할 수 있다. 유닛이 열두 개인 기본 그리드 시스템에서 유닛을 여섯 개씩 2열로 묶거나 네 개씩 3열, 두 개씩 6열로 묶어 나눌 수 있다. 칼럼 크기가 작을수록 다양하게 측정할 수 있다.

 

③ 영역 : 영역(Regions)은 페이지 레이아웃의 기초를 형성하는 칼럼의 묶음이다. 예를 들어, 칼럼 네 개로 구분된 유닛이 열두개 개인 그리드 시스템은 칼럼 세 개와 칼럼 한 개를 두 영역으로 나눌 수 있다. 두 영역은 본문 영역과 사이드 영역으로 구분하여 기본적인 페이지 레이아웃을 구성할 수 있다.

 

④ 베이스라인 : 베이스라(Baseline)은 글자가 놓이는 수평선을 가리키는 타이포그래피 시스템이다. 그리드에 포함 되는 유용한 도구로 콘텐츠에 수직 방향의 리듬감을 준다. 반응형 웹 페이지를 제작할 때는 베이스라인도 같이 지켜서 디자인해야 화면을 확대하거나 축소해도 원하는 결과를 얻을 수 있다.

 

⑤ 거터 : 거터(Gutters)는 요소 사이의 빈 공간, 즉 유닛, 칼럼, 영역 사이의 수직적 빈 공간과 필드 사이의 수 평적 빈 공간을 말한다.

 

⑥ 마진 : 마진(Margin)은 지면에서 위, 아래, 왼쪽, 오른쪽의 가장자리 여백을 말한다.

 

그리드 시스템에서는 마진에 대한 규정이 따로 없지만, 상하좌우 간격이 같으면 독서를 할 때 규칙적인 반복 흐름을 주어 글줄을 읽을 때 능률적이다. 반대로 칼럼 안의 요소들이 그리드를 벗어나 페이지의 가장자리를 차지하거나 상하좌우 간격이 달라지면 시각적 긴장감이 생겨 변화를 줄 수 있지만 그만큼 각 페이지의 기준선을 찾기 힘들어지므로 가독성이 떨어진다.

 

■ 웹에서의 그리드 시스템

웹 디자인에서는 과거부터 table 태그를 이용해 그리드 시스템을 적용하였다. 그리드 구조가 일관성이 없고 부족해지면 웹 페이지의 타이포그래퍼와 그래픽이 시각적으로 혼란스러워지고 중요도에 걸맞은 계층 구조를 만들기 어려워진다. 일관성이 없는 그래픽과 글자가 결합되면서 가독성도 떨어진다. 이럴 때 그리드 시스템을 사용하면 정보를 정리하여 보여줄 수 있어 웹 사이트가 전반적으로 안정돼 보인다. 안정감 있는 웹 사이트를 사용자에게 신뢰를 줄 수 있으므로 매우 중요한 부분이다.

 

 

2. 그리드 시스템의 종류

그리드 시스템의 종류에는 칼럼, 그리드 계층 그리드, 박스·리스트형 그리드가 있다.

 

■ 칼럼 그리드

칼럼 그리드(Column Grid)는 페이지에 열을 여러 개 배치할 때 사용하는 그리드이다. 성격이 다른 콘텐츠는 서로 다른 칼럼에 배치하는 것이 좋다

 

■ 계층 그리드

계층 그리드(Hierarchy Grid)는 웹 사이트에서 일반적으로 발견되는 그리드로 콘텐츠 정리형 그리드 라고도 부른다. 주로 칼럼 그리드를 확장하여 영역별로 그룹을 지어 그리드를 완성한다. 계층 그리드에서는 가장 큰 요소를 비주얼 영역에 배치하고, 나머지 요소를 기본 칼럼 안에 크기순이나 중요도 순으로 배치한다. 콘텐츠가 다양하고 많을 때 주로 사용된다.

 

■ 박스·리스트형 그리드

박스·리스트형 그리드는 바둑판 모양 그리드이다. 주로 포트폴리오나 사진 이미지를 보여 줄 때 사용된다. 한 조각의 작은 칼럼에 이미지, 타이틀, 콘텐츠가 배치되는 형태이다. 자칫 조잡해 보일 수 있으므로 통일성이 무너지지 않도록 구성해야 한다. 반응형 웹 레이아웃으로 가장 많이 사용된다.  박스·리스트형 그리드를 변형하여 웹 디자인을 하기도 한다.