4px 기준 그리드 - 현재 (The 4px baseline grid — the present)

이 글은 Ethan WangThe 4px baseline grid — the present글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

저는 2년 이상 4px 기준선 그리드(4px baseline grid)를 사용해 왔으며, 팀에서도 이 그리드를 사용하도록 노력하고 있습니다. 저는 마침내 미루는 것을 극복하고 첫 번째 Medium 글에서 그것에 대해 이야기하기로 결심했어요. 이 방법에 대한 피드백을 구하고 있으니 생각을 알려주세요! 하는데 까지 해봐요.

문제

텍스트 경계 상자(text bounding box)가 거의 항상 실제 텍스트 위나 아래에 여분의 공간을 가져온다는 것이 저를 미치게 합니다. 따라서 경계 상자(bounding box)를 사용하여 공간을 측정하면 의도한 것보다 더 커집니다. 라인 높이(line height)가 클수록 문제가 커집니다. 아래 예에서는 경계 상자 사이의 공간을 측정하여 디자인을 생성했습니다. 모든 간격을 32px(첫 번째 카드에서)로 설정하면 모든 수직 간격은 실제로 32px(두 번째 카드에서 보듯이)보다 훨씬 큽니다. 단, 모두 32px로 설정하여 동일해야 함을 의미했음에도 불구하고 시각적으로 모든 수직 간격은 실제로 32px보다 훨씬 큽니다.
presentation
Photo by Max Delsid on Unsplash

해결책

이 문제 때문에 시각적 정확도를 높이기 위해 4px 기준 그리드를 사용합니다. 다음은 제 프로세스입니다.
  1. 저는 배경에 4px 그리드를 설치했습니다.
  2. 모든 UI 요소와 텍스트 기준선(text baselines)을 기준선 그리드(baseline grid)에 스냅(snap)합니다.
  3. 텍스트의 경계 상자를 사용하는 대신 그리드를 사용하여 텍스트 주위의 수직 공간을 측정합니다. 특히, 문자의 대문자 높이(type’s cap height)에 가장 가까운 그리드 선으로부터 텍스트 위의 공간을 측정하고 텍스트의 기준선에서 텍스트 아래의 공간을 측정합니다.
  4. 또한 Space in Design Systems by Nathan Curtis의 Medium 글에서 영감을 받아 팀이 사용할 공간 값을 정의했습니다.
presentation
모든 기준선이 그리드에 배치되도록 하기 위해 이 접근 방식은 기본적으로 텍스트의 시각적 높이(대문자 높이(cap height)에서 기준선까지)를 4px의 배수(아래 gif에 표시)로 반올림합니다. 이 경우 1~2px의 오차가 발생할 수 있지만 경계 상자를 사용하여 간격을 결정하는 것보다 훨씬 정확합니다.
presentation
텍스트 위의 공간을 가장 가까운 그리드에서 대문자 높이(cap height)까지 측정합니다.
예외는 다음과 같습니다. 대부분의 시간을 개발자가 flexbox를 사용하여 component 또는 container의 중심을 잡을 수 있고, 정적 간격을 사용하여 중앙 집중을 수행하는 것보다 쉽기 때문에, 저는 기본 그리드나 container에 아이콘이나 텍스트를 수직으로 중앙에 배치합니다.
presentation
각 테이블 행의 텍스트는 Sketch의 "Align layer to middle" 명령을 사용하여 중앙에 배치되며 기준선이 그리드에 스냅되지 않는 것이 좋습니다.

이유

기본 그리드는 전통적으로 수직 리듬을 만들기 위해 인쇄 디자인에 사용되어 왔습니다. 웹 경험을 디자인하는 일상적인 작업에서, 저는 정렬을 더 좋게 하기 위해 그러한 리듬이 필요한 많은 사용 사례들을 경험하지 못했습니다.
4px 기준 그리드(4px baseline grid)를 사용하는 것은 시각적 정확도와 디자인 효율성 사이의 균형입니다. 문제가되는 구역에서 텍스트 경계 상자(text bounding box)에서 측정하면 추가 공간이 어떻게 생길지 이야기했습니다. 결국 사용자는 경계 상자(bounding box)를 볼 수 없습니다. 따라서 특히 시각적 불균형을 초래하고 사용자에게 도움이 되지 않는 경우 이 접근 방식을 사용하는 것은 말이 되지 않습니다. 반면, 경계 상자(bounding box)를 무시하고 기준선 그리드를 사용하여 측정하면 시각적 정확도를 높일 수 있습니다. 이 두 가지 접근법을 비교하려면 아래를 참조하세요. 보시다시피 동일한 간격 값(32px, 12px, 32px, 32px)을 사용하는 경우 기준 그리드를 사용하여 측정한 디자인 설계는 의도된 간격을 훨씬 정확하게 반영합니다.
presentation
경계 상자(bounding box)에서 측정한 결과 공간이 너무 많은 경우 첫 번째 카드에서 첫 번째 간격 값을 32px에서 28px 또는 24px로 줄이면 "Seattle"의 상단 및 왼쪽 패딩이 동일하게 보일 수 있습니다. 하지만 이 시점에서, 이것은 추측 게임이 됩니다. 여러분이 픽셀을 세지 않는 한, 여러분은 결코 확신할 수 없을 것입니다. 반면, 4px 그리드 접근 방식은 32px(반올림으로 인한 1~2px 오류)임을 보다 정확하고 예측 가능한 방식으로 알 수 있습니다.
디자인 설계 효율성 측면에서 볼 때 이 작업은 더 많은 작업으로 보일 수 있지만 그리드 때문에 디자인 설계 도구(Sketch 또는 Figma)가 요소를 스냅(snap)하고 기준선을 그리드에 입력하는 데 도움이 되므로 정렬과 간격은 상대적으로 쉬워집니다. 아래는 기준 그리드를 사용하여 텍스트를 배치하는 워크플로우입니다.
presentation
기준 그리드(baseline grid)를 사용하여 텍스트를 배치하는 워크플로우입니다.
또는 그리드를 사용하지 않고 아래 gif에 표시된 것처럼 대문자 높이(cap height)에서 수동으로 측정하도록 선택할 수 있지만 픽셀 그리드를 들어오고 나가는 모든 방법을 확대해야 합니다. 또한 텍스트를 담는 container의 크기가 4px의 배수가 아닐 수도 있습니다.
presentation
위는 대문자 높이(cap height)에서 직접 측정하는 대체 워크플로우입니다.

알려진 문제 — design-dev handoff

기준선 그리드(baseline grid) 접근 방식을 사용하여 측정한 레이아웃은 개발자가 디자인 설계를 검사(inspect)하기 위해 redlining 도구(InVision/Zeplin/Figma)를 사용할 때 랜덤하게 보이는 간격 수치를 가집니다. 아래 설계는 기준선 그리드(baseline grid)를 사용하여 작성되었습니다. 이 숫치들은 redlining 도구에서 얻을 수 있는 것을 보여줍니다.
presentation
위의 디자인 시스템 내 공간(Space in Design Systems) 글을 간략하게 언급했습니다. CSS 클래스를 사용하여 간격 값을 표시하는 방법에 대해 설명합니다. 이 클래스는 디자이너와 개발자 모두의 일관성을 강화하는 데 도움이 됩니다. 안타깝게도, 기준선 그리드 접근 방식을 사용하면 다른 유형의 조합과 함께 제공되는 랜덤성 때문에 간격 수치를 CSS 클래스의 집합으로 나타내는 것은 거의 불가능합니다.
또한 많은 사람들이 랜덤성 문제를 완화하기 위해 제안하는 인기 있는 기법을 살펴보았습니다. 이 기법은 라인 상자(line box)에 보정 간격을 적용하는 CSS pseudo-elements 이전 및 이후입니다. 하지만, 제 코드 닌자 남자친구 Chris Caruso는 제게 이렇게 말했습니다.
이 솔루션은 글꼴, 브라우저, 운영 체제 및 화면 해상도 간에 일관성이 없기 때문에 이상적이지 않습니다. 단일 조합을 대상으로 지정하면 다른 조합의 간격 문제가 발생할 수 있습니다. 개발자의 관점에서, 이 기술은 음의 여백을 사용하고 DOM에 관련 없는 요소를 적용하기 때문에 좋은 코딩 관행을 따르지 않습니다. 이 두 가지 모두 의도하지 않은 부작용을 초래할 수 있습니다. 따라서 프로덕션 애플리케이션에서 이 기술은 위험을 감수할 가치가 없습니다. 😑

현지화(localization)는요?

한번은 현지(localization) 조사를 해 본 적이 있는데, 우리 제품이 지원하는 8개의 필기 스크립트(라틴어, 중국어, 키릴어, 데바나가리, 그리스어, 한글, 가나, 태국어)를 살펴보았습니다. 그리고 나서 저는 어떤 측정 방법을 사용하든 결국 개발자가 redlining 도구에서 꺼내 CSS에 넣는 것이 경계 상자(bounding box) 간격이라는 것을 깨달았습니다. 영어 이외의 다른 언어에 사용하는 글꼴에 따라 줄 높이가 같더라도 유형의 시각적 높이가 라틴 문자보다 크거나 작을 수 있습니다. 기준선도 이동할 수 있습니다. 따라서 어떤 측정 방식을 사용하든 국소화(localization)는 항상 간격을 약간 변경합니다. 그러나 아래 예에서 볼 수 있듯이, 모든 언어의 텍스트는 이러한 사소한 변경에도 불구하고 상대적으로 화이트 스페이스에 집중되어 있었습니다.
(아직은 라틴어가 아닌 글쓰기 대본에 대해서는 잘 모르지만, 더 많은 것을 배우고 싶습니다. 위에서 수행한 관측 중 정확하지 않거나 개선할 수 있는 것이 있으면 알려 주십시오. 저는 영어와 중국어밖에 몰라요. 이 대사를 다른 언어로 번역하는 것을 도와준 직장 친구들에게 소리쳐요!)
presentation
디자인 설계는 영어로 작성되고 다른 7개의 쓰기 스크립트로 지역화됩니다. Joshua SortinoUnsplash에서 찍은 사진입니다.

질문이 있나요?

이치에 맞지 않는 부분이 있거나 질문, 피드백 또는 더 나은 해결책이 있다면 알려주십시오! 저는 이 주제에 대해 오랫동안 연구를 해왔기 때문에, 여러분의 생각을 듣고 싶어요! 채팅하고 싶으시면 이메일 (ethanw@microsoft.com)을 통해 직접 연락주세요!
Chris Caruso씨 덕분입니다.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp