Grid system
체계적인 화면 UI Layout 구성을 위한 도구
와이어프레임 레벨의 UI 디자인 작업은 다분히 체계적인 접근을 요구하며, 화면의 구성에서도 마찬가지다. 체계적인 화면의 구성은 사용자에게 디자인의 크고 작은 일관성을 유지하여 더욱 견고한 디자인을 제공할 수 있으며, 이러한 일관성은 와이어프레임 단계 뿐 아니라 Visual Design 단계에서도 매우 중요하다. UI 디자이너에게는 아래와 같은 장점을 제공한다.
쉽고 빠르게 전체 화면 및 세부적인 요소를 구성할 수 있도록 도와준다
두 사람 이상이 협업할 경우 일관적인 구성 요소를 가질 수 있도록 도와준다
디자인을 수정할 때 유지 보수가 쉬워진다
Visual Designer와의 Gap(간격)을 줄일 수 있다
체계적인 화면 Layout을 구성하는 일은 디자인에서 Grid System을 정의하는 것을 의미한다. Grid 시스템 자체도 여러 의미와 개념을 포함하는데, 혼동을 피하기 위하여 아래의 두 가지로 구분하여 이야기하고자 한다.
Point Grid System
세부 요소의 디자인을 위한 가로/세로 격자 틀. Google Material Design의 baseline grid는 8dp (point와 유사한 개념)를 기준으로 하는 격자에 대한 가이드를 보여준다.
Layout (Column) Grid System
화면 전체의 콘텐츠 레이아웃 정렬을 위한 틀로 특히 다양한 가로 해상도에 대응해야 하는 디자인 측면에서 많이 활용된다.
Point Grid System (Google material design baseline grids)
Layout Grid System (Josef Müller-Brockmann)
Point Grid System
Point Grid System에서 많이 활용하는 방법이 8-point 그리드이다. 화면 내의 마진이나 간격, 버튼 크기 등을 8 point의 배수 단위로 구성하는 방법이다. Google Material Design Guide를 보면 버튼의 크기, 버튼과 다른 요소 사이의 간격, 화면 좌우 모서리의 마진 등이 8의 배수로 구성됨을 볼 수 있다(16, 24, 40, 48 등). 이와 같이 화면을 구성하는 개별 구성 요소 및 위치를 8 point의 배수로 구성하는 것이 8-point grid system이다.
Material Design - 화면 Layout의 구성
Material Design - 아이콘 크기 및 마진
왜 10 point나 5 point가 아니라 8 point인가? Reference의 글들을 참고하면 도움이 되겠지만 요약하자면 다음과 같다.
디바이스가 그래픽을 렌더링 하는데 홀수의 경우 오프셋 되는 등의 어려움이 있기 때문에 짝수로 처리되어야 한다.
8의 경우 1.5배 등과 같이 0.5배의 증분시에도 짝수의 값이 유지된다.
일반적인 많은 화면의 해상도가 8의 배수이다. (320, 480, 640, 1280, 1920 등) Point의 개념이 Pixel을 나누는 개념이므로 8로 나누는 경우 많은 화면에 대응이 편리해진다.
폰트 시스템이나 더 정교한 디자인의 경우 4 point system을 적용하기도 하지만, 4 point는 너무 조밀하고 일관성을 맞추기 더 어렵다.
따라서 화면의 UI를 디자인하는 경우에는 전체 화면의 해상도를 기준으로 8-point Grid System이 적용될 수 있도록 문서의 템플릿을 정하고 Navigation Bar와 같은 기본적인 구성 요소의 위치를 정의한 후 작업을 시작해야 한다. 또한 문서에 포함하는 icon 및 사이즈 등의 요소들을 8-point 단위로 맞추는 노력이 필요하다.
Layout Grid System
Point Grid System이 디테일한 요소의 크기를 정의하는 기준이라면, Layout Grid System은 화면 전체의 균형을 맞추기 위한 목적으로 활용할 수 있다.
주로 다양한 모니터의 해상도에 대응해야 하는 web 디자인에서 많이 활용하는 개념이다. 지금까지 웹 사이트의 경우 12 컬럼 또는 16 컬럼을 갖는 960-Grid를 기준으로 화면을 구성하는 것이 일반적인 기준으로 적용하고 있다.
960 Grid with 12 columns
화면의 해상도가 점점 증가하면서 기준으로 적용하는 크기 및 컬럼 등이 점차 변화하고 있다. 구글 Material Design 에서는 해상도별 기준이 되는 컬럼의 개수를 가이드하고 있다.
Google Material Breakpoints
Layout Grid를 정하기 위하여 필요한 것은 여백을 고려한 전체 가로 해상도, 컬럼의 개수, 컬럼과 컬럼 사이의 공간 (Gutter)의 크기이다.
Columns and Gutters (https://zellwk.com/blog/designing-grids/)
모바일의 경우 PC 웹보다 가로 해상도가 작기 때문에 Grid가 크게 중요하지 않지만 협업 등의 목적으로 내부의 기준을 정하는 것은 도움이 될 수 있다. 보편적인 기준은 없지만 3~6 Column Grid Guide를 적용한다. Layout Grid System은 절대적인 규칙이 아니며 화면 구성에 참고할 수 있는 가이드라는 수준으로 적용하는 것이 중요하다.
마무리하며
Visual Design을 직접 하지 않더라도 디자인에 대한 시스템을 이해하고 여기에 맞춰 UI를 디자인 하는 것은 중요하다. 정교한 와이어프레임 디자인은 Visual Designer가 더욱 좋은 그래픽 결과물을 만들어내는데 큰 도움을 제공하기 때문이다. Grid System은 정교한 UI 디자인을 위한 기본이다.
포토샵이나 스케치 등의 그래픽 도구에서는 Grid System을 쉽게 정의할 수 있는 기능을 제공하며, 이러한 그래픽 툴에서 적용할 수 있는 수많은 자료들을 쉽게 구할 수 있다. 그러나 아직 많은 사람들이 UI 디자인에 이용하는 파워포인트에서 쉽게 활용할 수 있는 템플릿이 없고, 파워포인트의 경우 pixel이나 point 기준이 아니라 mm 단위로 도형을 정의하기 때문에 쉽게 적용하기 어렵다. 조만간 파워포인트에 적용할 수 있는 템플릿 작업을 소개할까 한다.
지금까지 티스토리에 아주 드물게 글을 올렸는데 이미지를 붙이는게 편리해서 브런치를 쓰게 되었다. 불편한 점도 없지는 않겠지만 가끔 정리하는 글들을 남기려고 한다.
References
(https://spec.fm/specifics/8-pt-grid)
(https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)
(https://builttoadapt.io/8-point-grid-vertical-rhythm-90d05ad95032)
(https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints)
(https://brunch.co.kr/@blackindigo-red/8)
