현재 사용하는 4px 기반의 그리드

Dong-gri
Dong-gri
Jun 6 · 10 min read


문제점

텍스트를 감싸고 있는 상자가 실제 글리프에 딱 맞추어져 이는 것이 아니라, 글리프 위아래에 여분의 공간을 담고 있다는 것은 저를 미치게 합니다. 이를 고려하지 않고 텍스트를 감싸는 상자만을 사용해 사이즈·위치를 측정하면 여러분이 의도한 것보다 더 커지게 됩니다. 이는 line-height(줄간격 혹은 행간)이 클수록 더 심해집니다. 아래의 예시는 텍스트를 감싸는 상자 사이의 공간을 측정해 디자인한 모습입니다. 모든 간격을 32px (첫번째 카드)처럼 설정하면 모든 수직간격을 32px로 설정해 동일하게 공간을 부여했음에도 불구하고 실제의 간격은 두번째 카드에서 보듯이 32px보다 훨씬 큽니다.

Photo by Max Delsid on Unsplash

해결하기

저는 이러한 문제로 인해 4px 기반의 grid 시스템을 사용했고, 이전에 비해 더 정확하게 디자인 할 수 있었습니다. 저의 과정은 다음과 같습니다.

  1. 모든 UI요소와 텍스트 기준선(baseline)을 grid 격자에 맞춥니다.
  2. grid를 사용해 기존처럼 텍스트 감싸는 상자를 사용하는 대신 텍스트 주변의 수직공간을 측정합니다. 특히, 텍스트 기준선에서 텍스트 아래의 높이와 cap-height (한글은 윗선에서 받침밑선 까지의 높이)에 가장 가까운
  3. grid 선을 기준으로 텍스트 위의 공간을 측정합니다.
  4. 추가적으로 저는 미디엄에 기고된 Space in Design Systems by Nathan Curtis 글에 영감을 받아 우리 팀이 사용할 간격의 수치를 정했습니다.
가장 근처에 있는 grid에서 cap-height 까지 글리프 위의 공간을 측정합니다. (의역-하단을 기준으로 베이스라인을 그리드에 맞춰서 기준점을 잡고, 그 위의 cap-heigt 까지 높이를 4px 배수로 측정해서 사이즈를 구합니다.)
표에 있는 각각의 행에 삽입된 텍스트는 Sketch에서 “레이어를 가운데로 정렬(Align layer to middle)”을 통해 중앙에 위치시키며, 이 경우 기준선(baseline)이 gird와 일치하지 않은 것은 상관없습니다.

이유

기준선(baseline) grid는 옛날부터 수직적인 리듬감을 만들기 위해 편집디자인에 사용되었습니다. 웹 경험을 디자인할때 저는 정렬을 더 좋게 하기 위해 이런 리듬을 필요로 적용한 많은 디자인 사례들을 보지 못했습니다.

4px grid를 사용하여 텍스트를 배치하는 모습
cap-height를 하나하나 일일히 직접 측정하는 모습

알려진 문제점 — 디자인에서 개발로 넘길 때

4px gird 기반의 접근방식을 사용해 설계한 레이아웃 디자인은, 개발자가 넘겨받아 레드라인 도구(InVision/Zeplin/Figma)로 살펴볼때 마구잡이식으로 간격을 지정한 것 처럼 보일 수 있습니다.

언어별 현지화는 어떤가요?

저는 언어별 현지화 연구를 통해 Google이 지원하는 8개의 언어 (라틴어, 중국어, 키릴문자, 나가리, 그리스어, 가나 및 태국어)를 살펴보았습니다. 그리고 저는 어떤 측정방법을 사용하던간에 개발자는리디렉션 도구에서 꺼내 CSS에 넣는 값이 Bounding box 간격이라는 것을 알았습니다. 영어 이외의 다른언어에서 사용하는 글꼴에 따라 line-height(줄간격·행간)이 같더라도 라틴 알파벳(영어 알파벳)보다 크거나 작을 수 있습니다. 또한 기준선(baseline)이 달라질 수도 있구요… 따라서 어떤 측정방법을 사용하던간에 언어별로 현지화를 진행할 경우 항상 간격을 조금씩 변경합니다. 아래의 예시에서 볼 수 있듯이 약간씩 변경해도 모든 언어의 텍스트는 여백에 집중되어 있습니다.

영어를 기반으로, 7개의 언어로 현지화 했습니다. Photo by Joshua Sortino on Unsplash

질문있나요?

혹시라도 말이 안된다거나, 질문, 피드백 또는 더 나은 해결방법이 있으면 알려주세요! 저는 오랫동안 이 주제에 대해 고민해왔고 당신의 생각을 듣고 싶습니다! 소통하고 싶다면 제 E-mail (ethanw@microsoft.com) 을 통해 연락해주세요.


guleum

Dong-gri LAB

Dong-gri

Written by

Dong-gri

making a dent in the universe.

guleum

guleum

Dong-gri LAB