그리드 시스템(Grid System)

그리드 시스템(Grid System)

그리드(Grid)는 화면 요소를 배치하기 위한 수평선(Horizontal lines)과 수직선(Vertical lines)의 패턴을 의미하며, 화면 요소에 시각적 순서를 부여하기 위한 일종의 가이드라인 역할을 수행한다. 그리고 이러한 그리드를 체계적으로 설계하기 위해 필요한 것이 바로 그리드 시스템이다. 그리드 시스템(Grid System)은 보다 효과적인 커뮤니케이션을 위해 논리적인 화면 구조를 제공하는 설계 체계(Design System)이다.

정보설계를 통해 구조화된 정보들을 담기 위해선 시각화된 화면 구조(Screen Structure)가 필요하며, 이 화면 구조의 기초를 제공하는 것이 바로 그리드 시스템이다. 따라서 그리드 시스템은 정보설계 이후 단계인 인터페이스 설계 단계에서 개발되어야 하며, 디자인 스타일 가이드라인이 아닌 UI 디자인 가이드라인에 포함시키는 것이 바람직하다.

그리드 시스템은 디자이너를 ‘그리드’라는 엄격한 규칙에 가두는 것이 아니라 핵심적인 문제에 좀더 창의적으로 다가갈 수 있도록 돕는다. 따라서 내용을 그리드에 담는 것이 아니라 좀더 효과적인 커뮤니케이션을 위해 정보를 규칙화하고 일관성을 높이기 위해 필요한 것이다(Designing Visual Interface, Kevin Mullet, Darrell Sano).

즉, 화면을 몇 개의 기초 단위로 나누고 중요한 요소들을 일관되게 배치하며, 화면 요소를 일정한 패턴으로 묶음으로써 시각적 조직화(Visual organization)를 통한 화면의 단순성 및 일관성과 시각적 규칙성(Visual Repetition)을 통한 학습용이성을 달성할 수 있게 된다.

그리드 시스템 개발을 위해선 여러 디자인 원칙 중 다음과 같은 원칙이 우선적으로 고려되어야 한다.

• 강조(Emphasis)
  
  그리드 시스템은 효과적인 커뮤니케이션을 지원해야 하므로 초점 영역(Focal area)을 통해 핵심 요소(Dominant elements)가 강조될 수 있어야 한다. 정보의 우선순위를 표현하는 데에는 화면 내에서의 배치순서, 대비, 크기, 색, 형상 등의 시각적 특성을 복합적으로 이용해야 하는데, 기본적으로는 정보의 우선순위나 조작절차에 따라서 위에서 아래로, 왼쪽에서 오른쪽으로 배치하는 것이 일반적이다. 또한 우선순위만 고려하는 것은 아니고, 사용자의 동기부여나 시선유도를 위해서는 더 중요한 정보나 유도의 계기가 되는 정보를 한층 더 시각적으로 강조할 필요가 있다. 이 때 강조할 때에 주의할 점은 강조하는 부분이 너무 많아지지 않도록 유의해야 한다(GUI 디자인 가이드, 일본인간공학회, 안그라픽스).
  
  
• 정렬(Alignment)
  
  그리드 시스템을 통해 구성 요소 간 기능적·심미적 측면의 시각적 연계성을 부여하여 한 요소로부터 다른 요소로 이동하기 위한 항행 단서(Navigational cues)를 제공해야 하며, 사용자의 시선을 통제하여 의도적인 시각적 흐름(Visual flow)을 만들어야 한다. 시각적인 정렬 효과는 다양한 요소들의 시각적 활동을 연결해주면서 각 요소들의 역할에 관계없이 함께 묶어 주는 일을 수행한다.
  
  
• 일관성(Consistency)
  
  그리드 시스템을 통해 규칙적인 패턴을 제공함으로써 사용자가 화면을 보다 신속하게 이해하고 보다 쉬운 항행(navigating)을 지원할 수 있도록 해야 한다. 단일 화면에 정보가 아무리 잘 배치되어 있어도, 화면을 전개할 때에 표시 위치나 구성이 변화하면, 사용자는 그때마다 정보를 찾아야 하며, 포인팅 디바이스도 빈번하게 움직이게 된다. 되도록 같은 역할을 하는 정보는 일정한 장소에 표시하도록 한다. 그러나 상황에 따라서는 같은 정보가 가지는 의미나 중요도가 변화하는 경우도 있으므로 정보의 순서나 조작의 흐름에 따라서 동적으로 고려되어야 한다(GUI 디자인 가이드, 일본인간공학회, 안그라픽스).
  
  
• 통일성(Unity)
  
  그리드 시스템에 의해 구성 요소 간의 시각적 연관성이 부여됨으로써 부분보다 전체가 두드러져 보일 수 있어야 한다. 시각적 구조는 아주 다른 성격의 디자인 요소들이라 할지라도 목표하는 커뮤니케이션을 향해 서로 묶어줌으로써 디자인 요소가 조화롭게 어울릴 수 있도록 해야 한다.

그리드 시스템은 다음과 같은 구성 요소를 갖는다.

• 시축(Visual Axis): 시선의 이동 방향
  
• 거터(Gutter): 컬럼 사이의 여백으로써 영역을 구분시킴
  
• 그리드 유닛(Grid unit): 행(Row)과 열(Column)에 의해 만들어진 영역
  
• 마진(Margin): 레이아웃 영역과 윈도우 사이의 여백
  
• 핵심 요소(Dominant Element): 화면 요소 중 지배적인 위상을 갖는 요소
  
• 초점 영역(Focal area): 시선이 집중되는 영역
  
• 안전영역 구분선(The folder): 구분선 윗쪽은 스크롤하지 않고 화면을 볼 수 있으며, 구분선 아래쪽은 스크롤해야만 화면을 볼 수 있음

그리드 시스템은 다음과 같은 설계 프로세스를 갖는다.

1. 화면 특성과 목적을 분석하여 화면 구조와 구성에 대한 전략적 방향성을
    수립함
2. 화면의 기본 또는 공통 요소를 정의함
3. 화면의 시축(Visual axis)을 분석함
4. 그리드 레이아웃을 설계함
5. 수직적 단위를 설계함
    ① 수직적 모듈 개수를 결정함
    ② 화면을 수직적으로 분할함
    ③ 모듈 간 넓이 비율을 결정함(또는 대칭/비대칭 여부를 결정함)
    ④ 모듈을 메인과 서브로 분할함
    ⑤ 각각의 모듈 크기를 설정함
    ⑥ 거터 넓이(Gutter width)를 설정함
6. 수평적 단위를 설계함
    ① 수평적 모듈 개수를 결정함
    ② 화면을 수직적으로 분할함
    ③ 모듈 간 넓이 비율을 결정함(또는 대칭/비대칭 여부를 결정함)
    ④ 모듈을 메인과 서브로 분할함
    ⑤ 각각의 모듈 크기를 설정함
    ⑥ 거터 넓이(Gutter width)를 설정함

제공 : 코리아인터넷닷컴, a 2007년 07월 24일
저자 : 노주환