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

본 글은 UX Collective에 기제된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Ethan WangUX Collective에 있습니다.)


저는 2년이상 4px 기반의 그리드를 사용해왔고, 팀에도 적용하려 했습니다. 마침내 저는 귀차니즘을 극복하고 미디움에 4px 기반의 그리드 시스템에 대해 이야기하기로 합니다. 저는 제 방법에 대한 의견을 듣고싶습니다. 남의 시선 의식하지 말고 저에게 당신의 생각을 말해주세요.


문제점

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

Photo by Max Delsid on Unsplash
번역 추가설명 — 툴에 따라 혹은 글꼴 설계에 따라 글자(이후 글리프로 칭함)의 크기가 달라집니다. 글쓴이는 이부분에 대한 스트래스를 이야기 하고 있습니다. 특히 포토샵과 CSS 상의 괴리감 (슬로워크 — 웹디자인에서 자간, 행간에 대한 고찰) 에 대한 글을 보시면 이해하기가 쉬워집니다. 보통 글꼴을 만들때 1000 x 1000 이라는 하나의 글자 방을 잡는데, 고정폭이고 그 안에서 글자를 작게만들경우 위의 이미지처럼 여백이 생기기도 합니다.

해결하기

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

  1. background에서 4px gird를 설정합니다.
  2. 모든 UI요소와 텍스트 기준선(baseline)을 grid 격자에 맞춥니다.
  3. grid를 사용해 기존처럼 텍스트 감싸는 상자를 사용하는 대신 텍스트 주변의 수직공간을 측정합니다. 특히, 텍스트 기준선에서 텍스트 아래의 높이와 cap-height (한글은 윗선에서 받침밑선 까지의 높이)에 가장 가까운
  4. grid 선을 기준으로 텍스트 위의 공간을 측정합니다.
  5. 추가적으로 저는 미디엄에 기고된 Space in Design Systems by Nathan Curtis 글에 영감을 받아 우리 팀이 사용할 간격의 수치를 정했습니다.

방금 정의한 방식은, 모든 텍스트 기준선(baseline)이 grid 에 딱 맞춰지게 하기 위해 텍스트의 시각적 높이(cap height 에서 baseline까지)를 4px의 배수(아래 gif에 표시)로 반올림합니다. 이 방식은 1–2px의 오차가 발생할 수 있지만, 기존의 텍스트 경계상자로 간격을 지정하는 것보다 더 정확합니다.

가장 근처에 있는 grid에서 cap-height 까지 글리프 위의 공간을 측정합니다. (의역-하단을 기준으로 베이스라인을 그리드에 맞춰서 기준점을 잡고, 그 위의 cap-heigt 까지 높이를 4px 배수로 측정해서 사이즈를 구합니다.)

물론 예외도 있습니다. 개발자들은 flex-box 혹은 vertical-align을 사용해 강제로 중심을 잡을 수 있기 때문에, 이러한 경우엔 기준선(baseline)을 이용해 gird 위치를 계산하지 않습니다. 그리고 더 쉽구요. 😉

표에 있는 각각의 행에 삽입된 텍스트는 Sketch에서 “레이어를 가운데로 정렬(Align layer to middle)”을 통해 중앙에 위치시키며, 이 경우 기준선(baseline)이 gird와 일치하지 않은 것은 상관없습니다.

이유

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

이 부분은 번역이 어렵습니다. 저는 세로 그리드는 과거 편집디자인에서만 쓰였지, 지금의 웹 디자인에서는 필요하지 않아 사용하지 않는다고 이해 했습니다.

저에게 4px 기반의 grid를 사용하는 것은 시각적인 정확성(사용자)과 디자인을 함에 있어 효율성(디자이너)을 맞추는 과정입니다. 문제제기 부분에서, 텍스트를 감싸는 상자를 기준으로 측정할 때 여분의 공간이 생기는 것에 대해 이야기 했습니다. 사용자는 텍스트를 감싸는 상자를 볼 수 없습니다. (디자인할 때만 보이니까요…) 따라서 시각적 불균형이 크거나 사용자에게 이익을 가져다 주는 것이 아니라면 이러한 방법을 사용할 이유가 없습니다. 반면에 텍스트를 감싸는 상자를 무시하고 4px 그리드에 기반해 디자인 하면 시각적인 정확도를 높일 수 있습니다. 이 두가지 방법을 비교해보려면 아래를 참고하세요. 보다시피 동일한 간격 (32px, 12px, 32px 32px)을 사용하면 4px grid를 사용해 디자인한 결과물이 의도하고자 한 간격을 훨씬 더 정확하게 적용합니다.

텍스트를 감싸는 상자에서 측정해야 할 공간이 너무 많은 경우, 예를 들어, 첫번째 카드에서 간격값을 32px에서 28px 또는 24px로 줄이면 “Seattle”의 상단 여백과, 왼쪽 여백이 같아 보인다고 말할 수 있지만 추측일 뿐입니다. 당신이 직접 px을 하나하나 세지 않는 한 모르니까요. 반면, 4px 그리드 기반의 접근방식은 ~32px 정도이겠다는 식의 유추보다 정확하게 측정할 수 있습니다. (반올림으로 인한 1~2px 오차 포함).

디자인 설계의 효율적인 측면에서 해야할게 많아 번거로워보일 수 있지만, 설계도구(Sketch 혹은 Figma)가 grid에 요소와 기준선을 조절할때 자석처럼 달라붙기 때문에 상대적으로 쉽게 작업할 수 있습니다. 아래는 4px grid를 사용해 텍스트를 배치하는 모습입니다.

4px grid를 사용하여 텍스트를 배치하는 모습

대신 4px 기반의 gird를 사용하지 않고 아래의 gif와 같이 cap-height를 수동으로 측정 할 수도 있지만 확대·축소하면서 px 하나하나 세야 합니다. 또한 텍스트를 감싸는 컨테이너의 크기가 4px의 배수가 아닐 수도 있습니다.

cap-height를 하나하나 일일히 직접 측정하는 모습

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

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

저는 간단하게 Space in Design Systems (디자인 시스템에서의 공간)에서 언급한 적이 있습니다. 해당 글에서는 CSS Class을 사용해 간격 수치를 표현할 수 있는 방법에 대해 설명합니다. 이는 일관성을 유지하는데 디자이너 개발자 모두에게 도움이 됩니다. 안타깝게 4px grid 기반의 접근법을 사용하면서 글자조합에 따른 일정하지 못한 수치때문에 CSS Class로 나타내는 것은 불가능에 가깝습니다.

우리는 많은 사람들이 이러한 문제를 해결하기 위해 제안한 인기있는 기술을 보았습니다. ::before와 ::after 등의 CSS 가상선택자를 사용해 텍스트를 감싸는 상자를 자르는 것(상자에 보정 간격을 적용)입니다. 하지만 코드계의 닌자인 제 남자친구 Chris Caruso은 저에게 말합니다.

글꼴, 브라우저, 운영체제, 해상도에 따라 다 달라지기 때문에 CSS 가상선택자(::before, ::after)을 사용하는 것은 적절하지 않아. 이걸 하나의 체계로 만들어서 여러곳에 적용하면 하나로 일관되는게 아니라 각각 간격이 다 다르게 나오는 문제가 생길 수 있어. 개발자의 관점에서 이러한 트릭은 마이너스 여백을 사용하고 DOM에 없는 요소를 사용하기 때문에 일반적인 코딩관행이 아니야. 따라서 둘다 의도치 않은 결과가 나올 수 있어. 다시말해 굳이 위험을 감수하면서 쓸 필요가 없다는 것이지 😑

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

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

Bounding box를 검색해봤지만, 무엇을 가리키는지 모르겠습니다. 혹시라도 아시는 분은 알려주시면 수정하겠습니다.
영어를 기반으로, 7개의 언어로 현지화 했습니다. Photo by Joshua Sortino on Unsplash

질문있나요?

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


해당 글의 댓글에 웹·앱을 떠나 어떤 방식으로든 문제에 대한 다른 해결책이 있느냐는 질문과 함께 실제 프로젝트에 적용하기엔 부적합하지 않냐는 글이 달려있었습니다.

이에 글쓴이는 하드코딩으로 간격값을 지정한다고 답하고, 추가 링크를 첨부했습니다. 혹시라도 관심이 가신다면 아래의 링크도 참고해보세요.