3.1Spacing and Grids

피그마에서 그리드 작업하기

What is a grid?

The grid is a structure comprising of a series of lines that divide the page into columns, for design purposes.

그리드는 디자인 목적으로 페이지를 여러개 컬럼들로 분할한 구조이다.

Grid의 역사

그리드 시스템은 처음엔 종이에 적히는 글들의 가독성을 높이기 위해 쓰였다. 르네상스 시기에 많은 예술가들은 균형잡힌 레이아웃의 그림을 그렸고, 이를 위해 그리드가 쓰였다. 디자이너들은 자신의 메시지를 보다 가독성 있게 전달하기 위해 그리드를 써야만 했다.

Grid의 기본

그리드 시스템은 Base unit(기초 단위) 설정으로 시작한다. 한 개의 격자를 얼마 크기로 설정할 것인가?

Base unit을 설정하면, 모든 UI component는 해당 단위의 배수 크기로 만들어야한다. 이 규칙은 패딩에도 적용된다.

그리드의 구성 요소는 column(격자의 너비), gutter(column 간의 간격), margin(column의 끝과 frame의 끝) 이다. 이 요소들의 조합으로 그리드 시스템이 결정된다.

Column Grid 시스템은 보통 12개의 column을 화면에 배치한다. 12개인 이유는 약수가 많기 때문에 n개 크기의 컴포넌트를 만들어 배치하기 편하기 때문이다.

피그마에서 그리드 작업하기

shift + g를 누르거나 또는 오른쪽 UI 상단에서 layout grid를 체크하면 그리드 설정창을 볼 수 있다.

view grid — layout grid를 체크하고 그리드를 추가하면 그리드를 볼 수 있다.

그리드를 만들려면, 직접 상자를 그리거나 하는게 아니라, 그리드 보기를 하면 오른쪽 UI에 새로 생기는 Layout Grid 패널에서 추가를 눌러 너비, 타입, 개수 등을 지정함으로 쉽게 그릴 수 있다.

그리드에는 Fixed Grid와 Fluid Grid가 있다. Fixed Grid는 프레임의 크기를 변경해도 column, gutter는 유지되고 margin만 커지고 줄어드는 방식이다. Fluid Grid는 % 단위로 길이를 저장하므로, 프레임의 크기를 변경하면 column, gutter도 함께 크기가 변한다.

Fluid Grid는 다양한 디바이스에 responsive하게 대응할 디자인을 만들기에 좋다. 하지만 말 그대로 모든 디바이스 크기를 감안해서 디자인을 다 다르게 할 수는 없으므로, Breakpoint 라고 부르는 변곡점들을 잡고 해당되는 화면에 대해 디자인한다.

breakpoints — 다양한 디바이스에 대응하기 위해 breakpoint에 따른 grid를 준비해야 한다.

만들어둔 그리드들은 이름을 붙인 style로 지정해서 저장해두고 다른 프레임들에도 빠르게 적용할 수 있다. 스타일은 프레임에 하나만 적용이 되므로, 만약 row + column 식의 그리드를 활용하고 싶다면 스타일이 있는 프레임에서 Detach style을 눌러 스타일을 해제한 후 row를 추가하여 다시 style로 지정한다.