▲

컴퓨터 과학 최대의 난제: 요소 중앙 정렬(centering things)

 (tonsky.me)
17P by GN⁺ 2024-04-18 | ★ favorite | 댓글 3개
  • 많은 회사들의 애플리케이션에서 텍스트, 아이콘 등 UI 요소들이 제대로 가운데 정렬되어 있지 않음
  • CSS의 의 flex 와 grid 를 사용하면 쉽게 가운데 정렬을 할 수 있음에도 불구하고
display: flex  
justify-content: center /* 수평 센터링 */  
align-items: center /* 수직 센터링 */

또는

display: grid  
justify-items: center /* 수평 센터링 */  
align-items: center /* 수직 센터링 */

가운데 정렬을 어렵게 만드는 요인들

  • 폰트의 메트릭스가 중요한 역할을 함. 인기있는 폰트들 대부분이 바운딩 박스가 딱 맞지 않고 여백이 있어서 가운데 정렬이 어려움
  • 줄 높이(line-height) 설정의 영향으로 서로 다른 컨테이너에 있는 두 개의 요소를 정렬하는 것이 거의 불가능함
  • 아이콘을 텍스트 옆에 정렬하는 것도 매우 어려운 작업임. CSS의 vertical-align 속성으로는 아이콘을 의미있게 정렬할 수 없음
  • 아이콘을 폰트 파일에 넣어 사용하는 아이콘 폰트는 크기와 패딩 조절이 안되어 정렬이 더 힘들어짐
  • 디자이너들도 아이콘의 모양을 고려하지 않고 기계적으로 가운데 정렬하는 실수를 범함
  • 수평 정렬도 세심한 주의를 기울이지 않으면 잘못될 수 있음

해결 방안

디자이너

  • 폰트의 바운딩 박스를 텍스트에 딱 맞게 조정하면 가운데 정렬이 훨씬 쉬워짐
  • Figma에서는 이 기능을 지원함 (기본값은 아님)
    • Vertical Trim : Cap Height to baseline

폰트 디자이너

  • ascender와 descender 사이의 공간이 cap-height의 2배가 되도록 폰트 메트릭을 설정하면 개발자들이 쉽게 가운데 정렬을 할 수 있음
  • 실제 ascender/descender를 경계까지 연장할 필요는 없고, 숫자만 맞추면 됨

웹 개발자

  • 사용할 폰트를 미리 알고 있어야 함 (폰트 대체 시에는 작동하지 않음)
  • 폰트 메트릭을 이용해 계산한 padding-bottom 값을 추가하여 수직 가운데 정렬을 맞출 수 있음
  • 아이콘 역시 vertical-align: baseline을 설정하고 폰트 메트릭과 아이콘 크기를 이용해 계산한 값만큼 아래로 이동시키면 정렬할 수 있음

아이콘 폰트

  • 아이콘 폰트 사용을 제발 그만두고 일반 이미지 포맷을 사용할 것
  • 너비와 높이가 있는 사각형 두 개를 정렬하는 것보다 쉬운 것은 없음

시각적 보정

  • 개발자는 수학적으로 완벽한 사각형만 정렬할 수 있음. 수동 보정이 필요한 것은 아이콘을 시각적으로 균형 잡히게 사각형 안에 배치할 것

GN⁺의 의견

  • 작은 디테일에 대한 관심으로 UI 품질을 크게 향상시킬 수 있음을 보여줌. 아주 사소한 것으로 여겨질 수 있는 가운데 정렬 하나만으로도 전반적인 느낌이 달라짐
  • 단순히 "디자이너는 디자인만, 개발자는 구현만 신경쓰면 된다" 라는 사고가 아니라, 서로의 영역에 대해 이해하고 협력해야 좋은 결과가 나옴을 시사함
  • 애초에 브라우저별 랜더링 차이가 나지 않고, 디자이너의 의도대로 구현하기 쉽도록 디자이너 단계에서부터 폰트 메트릭을 맞추고 시안을 작업하는 것이 좋을 듯 함
  • 애플, MS, 구글 등 쟁쟁한 회사들의 제품에서도 이런 문제가 발견되는데, 대부분의 사람들은 무심코 지나칠 정도로 관심이 없는 듯 함. 그만큼 꼼꼼한 디테일에 집착하며 만드는 것이 중요함
  • 특히 최근 UI 테스트 자동화 도구 등을 사용하면서 사람의 눈으로 일일이 확인해보는 과정이 생략되면서 이런 문제는 더 빈번해질 수 있으므로 주의가 필요해 보임

함께 보면 좋은 글 β

▲
dormis 2024-04-19  [-]

기계적인 중앙정렬이 정말 좋은건가도 생각해볼 일이네요. 마우스가 좌우대칭보다 약간 좌우가 다르게 어고노믹하게 생긴게 편한것처럼, 전체적인 사용성을 보고 결정할 요소인거 같기도 합니다.

답변달기
▲
jokuhus 2024-04-23  [-]

의도와 다른 결과가 나올 수 있다는게 핵심같아요. 예를 들어 마우스 클릭이 화면상에 화살촉 부분이 아닌 꼬리 부분에서 된다거나 하는 상황같은 거요.

답변달기
▲
GN⁺ 2024-04-18  [-]
Hacker News 의견

요약 내용:

  • CSS 레이아웃은 문제가 많으며, CAD 프로그램, 게임 엔진, 애니메이션 프로그램 등의 2D/3D 도구들이 더 나은 레이아웃 엔진과 제약 조건 시스템을 가지고 있음
  • 정렬에 대한 단일한 정답은 없으며, 디자이너들은 항상 불평할 거리를 찾을 수 있음
    • 정밀한 마진 측정값을 사용해도 시각적으로 비대칭으로 보일 수 있음
    • 글자 모양에 맞춰 조정해도 베이스라인이나 x-높이 등에 맞지 않는다고 불평할 수 있음
  • 글꼴 렌더링은 운영체제와 브라우저에 따라 다르기 때문에 한 환경에서 완벽하게 정렬된 것이 다른 환경에서는 어긋날 수 있음
  • 비 서구권 글꼴의 경우 더욱 까다로움
  • 현실 세계에서도 정렬은 어려운 문제임 (NCAA 농구 코트 그림 예시)
  • 정렬의 기준은 보는 사람에 따라 다름
  • CSS의 justify와 align을 대화형으로 시연해 볼 수 있는 데모 사이트 소개
  • 텍스트 옆 아이콘 배치 시, 글꼴뿐 아니라 텍스트 자체의 "활자 중심"에 맞추라는 디자이너의 조언이 있었으나 실제로는 타협이 필요했음
  • CSS가 테이블의 기능을 따라잡았다는 주장이 10년 넘게 있었지만 여전히 완전하지 않음
답변달기