현재 사용하는 4px 기반의 그리드
본 글은 UX Collective에 기재된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만, 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Ethan Wang과 UX Collective에 있습니다.)
저는 2년 이상 4PX 기반의 그리드를 사용해 왔고, 팀에도 적용하려 했습니다.
마침내 저는 귀차니즘을 극복하고
미디움에 4PX 기반의 그리드 시스템에 관해 이야기하기로 합니다.
저는 제 방법에 대한 의견을 듣고 싶습니다.
남의 시선 의식하지 말고 저에게 당신의 생각을 말해주세요.
문제점
텍스트를 감싸고 있는 상자가 실제 글리프에 딱 맞추어져 이는 것이 아니라, 글리프 위아래에 여분의 공간을 담고 있다는 것은 저를 미치게 합니다.
이를 고려하지 않고 텍스트를 감싸는 상자만을 사용해 사이즈·위치를 측정하면 여러분이 의도한 것보다 더 커지게 됩니다.
이는 line-height(줄 간격 혹은 행간)가 클수록 더 심해집니다.
아래의 예시는 텍스트를 감싸는 상자 사이의 공간을 측정해 디자인한 모습입니다.
모든 간격을 32PX (첫 번째 카드)처럼 설정하면 모든 수직 간격을 32PX로 설정해 동일하게 공간을 부여했음에도 불구하고 실제의 간격은 두 번째 카드에서 보듯이 32PX보다 훨씬 큽니다.
번역 추가설명 —
툴에 따라 혹은 글꼴 설계에 따라 글자(이후 글리프로 칭함)의 크기가 달라집니다.글쓴이는 이 부분에 대한 스트레스를 이야기하고 있습니다.
특히 포토샵과 CSS 상의 괴리감 (슬로워크 — 웹디자인에서 자간, 행간에 대한 고찰) 에 대한 글을 보시면 이해하기가 쉬워집니다.보통 글꼴을 만들 때 1000X1000 이라는 하나의 글자 방을 잡는데, 고정폭이고 그 안에서 글자를 작게 만들 경우 위의 이미지처럼 여백이 생기기도 합니다.
해결하기
저는 이러한 문제로 인해 4PX 기반의 grid 시스템을 사용했고, 이전에 비해 더 정확하게 디자인할 수 있었습니다. 저의 과정은 다음과 같습니다.
background에서 4PX gird를 설정합니다.
모든 UI 요소와 텍스트 기준선(text baseline)을 grid 격자에 맞춥니다.
grid를 사용해 기존처럼 텍스트 감싸는 상자를 사용하는 대신 텍스트 주변의 수직 공간을 측정합니다. 특히, 텍스트 기준선에서 텍스트 아래의 높이와 cap-height (한글은 윗선에서 받침 아랫선까지의 높이)에 가장 가까운
grid 선을 기준으로 텍스트 위의 공간을 측정합니다.
추가로 저는 미디엄에 기고된 Space in Design Systems by Nathan Curtis 글에 영감을 받아 우리 팀이 사용할 간격의 수치를 정했습니다.
방금 정의한 방식은, 모든 텍스트 기준선(baseline)이 grid에 딱 맞춰지게 하기 위해 텍스트의 시각적 높이(cap height에서 baseline까지)를 4PX의 배수(아래 gif에 표시)로 반올림합니다. 이 방식은 1–2PX의 오차가 발생할 수 있지만, 기존의 텍스트 경계 상자로 간격을 지정하는 것보다 더 정확합니다.
물론 예외도 있습니다. 개발자들은 flex-box 혹은 vertical-align을 사용해 강제로 중심을 잡을 수 있기 때문에, 이러한 경우엔 기준선(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를 사용하여 텍스트를 배치하는 모습
cap-height를 하나하나 일일이 직접 측정하는 모습
대신 4PX 기반의 gird를 사용하지 않고 아래의 영상과 같이 cap-height를 수동으로 측정할 수도 있지만 확대·축소하면서 픽셀을 하나하나 세야 합니다. 또한 텍스트를 감싸는 컨테이너의 크기가 4PX의 배수가 아닐 수도 있습니다.
알려진 문제점 — 디자인에서 개발로 넘길 때
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를 검색해 봤지만, 무엇을 가리키는지 모르겠습니다.
혹시라도 아시는 분은 알려주시면 수정하겠습니다.
질문 있나요?
혹시라도 말이 안 된다거나, 질문, 피드백 또는 더 나은 해결 방법이 있으면 알려주세요! 저는 오랫동안 이 주제에 대해 고민해 왔고 당신의 생각을 듣고 싶습니다! 소통하고 싶다면 제 E-mail (ethanw@microsoft.com)을 통해 연락해 주세요.
해당 글의 댓글에 웹·앱을 떠나 어떤 방식으로든 문제에 대한 다른 해결책이 있느냐는 질문과 함께 실제 프로젝트에 적용하기엔 부적합하지 않냐는 글이 달려있었습니다.
이에 글쓴이는 하드코딩으로 간격값을 지정한다고 답하고, 추가 링크를 첨부했습니다. 혹시라도 관심이 가신다면 아래의 링크도 참고해 보세요.
![[css-inline] Leading control at start/end of block · Issue #3240 · w3c/csswg-drafts](https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1a0589fe-0b1c-453d-871f-071a17088f91_1080x255.png "[css-inline] Leading control at start/end of block · Issue #3240 · w3c/csswg-drafts")