4배수 디자인의 시대

8px 그리드 디자인이 아닌 4px 그리드 디자인이 대세인 이유

한윤석 (DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

새로운 서비스 런칭을 위한 디자인 업무를 하면서 grid system에 대하여 논의를 하게 되었습니다. 8배수로 디자인 할 것이냐 4배수로 디자인할 것이냐 다른 이해관계자를 어떻게 설득할 것이냐 등의 이야기가 나오는 도중 왜 4배수 디자인을 해야하는지 정리해보았습니다.

8배수 디자인 보다 4배수 디자인이 대세인 이유

배경지식

왜 8px 그리드 디자인을 사용했을까?

아래의 이미지를 확인하시면 8px 그리드는 모든 디스플레이가 커버 가능하다는 것을 알 수 있습니다.

8px 그리드는 모든 디스플레이가 커버 가능하여 유연하고 일관되게 작업할 수 있는 작업하기 좋은 기본단위로 사용되어 왔습니다.

8px 그리드는 이처럼 일관된 UI 시스템 개발과 결정하는데 시간이 적게 드는 장점 때문에 널리 사용되어 왔습니다.

본론

왜 이제는 4px 그리드 디자인이 더 널리 사용될까?

8px 그리드는 충분히 훌륭하지만 텍스트, 텍스트 필드, 하이퍼링크, 테이블 등이 있는 UI에서 제약사항이 발생합니다. 그래서 이러한 제약사항 때문에 디자이너들은 점차 8px 보다는 더 구체적인 4px 그리드 시스템을 사용하게 되었습니다.

8px 그리드는 끝났고 4px 그리드가 대체할 것이다.

-Ben Cline

8px에 비교하여 4px 그리드의 장점 첫번째는 세분화입니다.

아이콘 크기, 요소 사이의 간격, 텍스트 사이의 간격 등 모든 요소를 세분화 시킬 수 있습니다. 선택할 수 있는 옵션이 많아 지는데, 예를 들어 8px이 8, 16, 24, 32 ...라면 4px은 4, 8, 16, 20, 24, 28, 32로 늘어납니다.

두번째 장점은 깔끔한 타이포그래피 작업입니다.

텍스트를 사용할 때 8px 그리드에 맞추려면 글줄의 텍스트가 빽뺵해지거나 커진다는 문제가 생깁니다. 줄 높이(line-height)가 4배수인 4의 베이스라인 그리드에 텍스트를 정렬하게 되면 더 깔끔한 타이포그래피 작업을 할 수 있습니다.

예를들어 14px의 폰트에서 16px, 20px, 24px의 줄높이(line-height)를 작업할 수 있습니다. 4배수 디자인이 아니였다면 20px의 줖높이는 선택할 수 없었을 것입니다.

 

그리드 가이드는 절대 깨지면 안되는 것 일까?

UI 디자인을 할 때, 40px인 프레임 안에서 20px의 버튼을 디자인하게 되면 버튼 위아래 각각 10px의 간격이 생깁니다. 10px은 4배수 디자인이 아니기 때문에 가이드를 지키지 못했지만 이러한 불가피한 상황에서 가이드를 지키지 않는건 문제가 되진 않습니다. 가끔은 유연하게 가이드를 지키는게 좋습니다. 

결론

많은 디자이너들이 기존 8 point grid에서 더 유연하고 편한 작업을 위해 더 세분화된 4 point grid 디자인을 하고 있습니다. 

8 point에서 4point 그리드로 세분화 된 이유도 더 유연한 디자인 때문인 것처럼 제약 조건은 보편적이고 때로는 필요하지만 결국엔 가이드에만 딱딱 맞추는 기계적인 디자인은 할 수 없습니다. 필요할 때는 유연한 디자인을 지향하는게 좋습니다.