8px 그리드 시대가 끝나고, 4px 그리드의 시대가 열릴까?

UI에서는 4의 배수를 사용하면 훨씬 더 유연하게 작업할 수 있습니다.

본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. 기획과 UX 디자인을 중점적으로 다루는 블로그 매체 ‘부트캠프(Bootcamp)’의 글을 번역했습니다. 작가 드리스 데 셰퍼(Dries De Schepper)는 글로벌 컨설팅 그룹인 딜로이트 디지털(Deloitte Digital)의 UI 디자이너입니다. 본문은 UI 디자인 측면에서의 그리드를 분석한 내용으로 8포인트와 4포인트 사이에 어떤 차이점이 있을지 함께 생각해볼 수 있겠습니다.

기술이 점점 더 발전하면서 그래픽 디자이너들의 상당수가 UX/UI 디자인으로 전문 분야를 바꾸는 경우가 많아졌습니다. 저는 아트 디렉션(Art Direction)을 전공했기 때문에, 그래픽 디자인의 베이스라인 그리드(baseline grid, 격자 모양의 기준선)가 너무나도 익숙합니다. 그러다 6년 전쯤에 UI 디자인을 시작했을 때, 저는 그리드에 대해서 특별히 어떤 가이드라인을 따라야 하는지를 알 수 없었습니다. 그래서 수많은 모바일 앱과 웹사이트를 찾아서 그들이 간격을 어떻게 사용하고 있는지를 살펴봤는데, 그 방식이 서로 제멋대로라는 사실을 발견했습니다. 수치가 일정치 않고 너무나도 다양했던 것입니다. 여백(margin)이나 채우기(padding) 설정으로 12px, 13px, 15px, 20px 등 거의 아무 값이나 사용하고 있었고, 그런 항목이 그들에게는 전혀 중요하지 않아 보였습니다.

몇 년 전, 저는 브린 잭슨(Bryn Jackson)이 스펙FM(Spec.fm)에 “소프트 그리드” 및 “하드 그리드”라는 두 가지 기법과 8포인트 그리드에 대해서 써놓은 글[1]을 읽었습니다. 아주 세밀한 부분까지 신경 써서 작업하는 저에게는 이 글이 너무나도 반가웠습니다. 이후 저는 그가 설명하는 8포인트 그리드를 모든 디자인에서 적용하기 시작했으며, 다른 사람들이 이런 방식을 따르지 않는 것에 불만을 가졌습니다. 하지만 저는 8포인트 그리드로 작업할 수 있는 패턴에는 한계가 있다는 것을 알게 되었습니다. 특히 각종 문구와 텍스트, 하이퍼링크, 표, 버튼 등이 아주 많은 인터페이스나 기업용 소프트웨어를 만들 때 이러한 제약이 특히 심했습니다. 그래서 거의 아무런 조사도 하지 않고 4포인트 그리드로 바꿔서 작업하기 시작했습니다. 그런데 다행히도, 4포인트 그리드를 사용하는 사람이 저만 있는 것은 아니었습니다.

8px 그리드는 끝났다. 이제는 4px 그리드가 새로운 대세이다.
- 트위터 사용자 벤 클라인(@yocline)

그런데, 8포인트 그리드가 뭔가요?

기본 원칙은 디자인 요소들의 간격이 모두 8의 배수(8, 16, 24, 32, 40, 48,… 80,… 96,…)가 되어야 한다는 것입니다. 예를 들자면, 입력 필드의 높이는 48픽셀, 그리고 다른 입력 필드와의 간격은 16픽셀로 만드는 것입니다.

그런데, 4포인트가 8포인트보다 나은 점이 정확히 뭔가요?

• 선택할 수 있는 옵션이 많아지고, 입상도(granularity)[2]가 좋아집니다. 8픽셀은 너무 작고 16픽셀은 너무 크다면, 대신에 12픽셀을 선택할 수 있는 것입니다. 아이콘의 크기, 여러 요소들 사이의 간격, 텍스트와 아이콘 사이의 수평 간격 등, 우리는 수많은 부분에서 이런 선택을 해야 한다는 점을 생각해보세요.

• 타이포그래피(typography)가 좋아집니다. 저는 예전에 모든 텍스트를 8포인트의 베이스라인 그리드에 정렬시키곤 했습니다. 그러면 텍스트의 양이 많아질 경우에 줄 간격이 너무 비좁거나, 아니면 너무 넓다는 느낌이 들었습니다. 요즘에는 텍스트를 4포인트의 베이스라인 그리드 위에 정렬시키고, 줄 높이(line height)[3]도 4의 배수로 설정합니다. 줄 높이 작업을 할 때는 프란 페레스(Fran Pérez)가 만든 도구[4]가 상당히 좋기 때문에 강력히 추천하는 바입니다. 아무튼 이에 대해서는 몇 가지 예시를 통해서 설명해보겠습니다.

위의 예시에서, 저는 줄 높이로는 20픽셀이 완벽하다고 생각합니다. 16픽셀의 줄 높이는 너무 비좁고, 24픽셀은 너무 넓어서 제 취향에는 맞지 않습니다. 만약 4포인트 그리드 방식이 아니라면, 16픽셀과 24픽셀 둘 중에서만 선택해야 할 것입니다. 아래의 그림은 두 번째에 있는 예시에서 사용한 여러 간격에 대한 자세한 정보입니다.

보시다시피, 저는 바운딩 박스(bounding box)[5]를 텍스트의 베이스라인이 아니라 그리드에 정렬시키고 있는데, 그 이유는 이 텍스트가 CSS(스타일시트)에서 실행될 것이기 때문입니다. 그리고 물론 많은 디자이너들은 시각적인 여백 정렬(optical margin alignment)[6]원칙에 따라서 바운딩 박스보다는 베이스라인 그리드에 텍스트를 정렬한다는 것도 알고 있습니다.

이런 그리드의 원칙을 어겨도 될까?

아래의 예시에서는 4의 배수가 아닌 수치들을 볼 수 있습니다. 높이가 40픽셀인 표 안에서 14픽셀의 텍스트에 20픽셀의 줄 높이를 사용함으로써, 텍스트의 위아래에 각각 10픽셀의 간격이 생겼습니다. 두 번째 예시에서는 표의 높이를 44픽셀로 늘렸는데, 여기에서도 체크 아이콘의 위아래에 14픽셀의 간격이 생겼습니다. 이 두 경우 모두, 그리드를 지키지 않았지만 전혀 문제가 되지 않습니다.

“글자는 그 중심이 버튼이나 리스트 아이템과 같은 컴포넌트의 내부에 있을 때에는 4포인트 그리드의 바깥에 위치할 수도 있다. 그리드의 바깥에 있지만 중심은 컴포넌트의 안에 있다면, 텍스트는 여전히 세로 방향에서는 중앙에 정렬된 것처럼 보일 수 있다.” – 구글 매터리얼 디자인(Google Material Design)

결론

규칙이나 제약이라는 것은 언제나 존재하기 마련이며, 때로는 필요하기도 합니다. 그렇지만 디자이너라면 그러한 제약이 적은 것을 원하지 않나요? 4포인트 그리드는 UI 작업에서 좀 더 유연성을 발휘할 수 있게 해 줍니다. 그리고 간격을 설정할 때 8픽셀이나 16픽셀이 아니라 12픽셀을 사용하는 경우가 상당히 많다는 걸 알게 된다면 여러분도 분명 놀랄 것입니다.

[1] https://spec.fm/specifics/8-pt-grid

[2] 어떤 객체(오브젝트)의 상대적 크기, 비율, 자세한 정도, 표현의 깊이 등을 일컫는 디자인 용어

[3] 텍스트에서 인접한 줄 사이의 간격

[4] https://www.thegoodlineheight.com/

[5] 객체의 외곽 전체를 직사각형 모양으로 감싸는 경계 상자

[6] 텍스트를 정렬할 때 특정한 글자의 튀어나온 부분이나 문장부호 등이 글상자의 바깥에 돌출되는 것을 허용해서 좀 더 가지런하게 정렬된 것처럼 보이게 하는 방식