Inter 대신 UI 글꼴을 고르는 두 가지 기준

(news.hada.io)

GeekNews2026년 8월 31일개발자 도구

UI 디자인의 완성도를 결정하는 핵심은 단순히 깔끔한 글꼴을 찾는 것이 아니라, 대문자 중심의 수직 메트릭과 높은 x-height를 갖추어 별도의 보정 없이도 컴포넌트와 완벽하게 정렬되는 기술적 기준을 이해하는 데 있습니다.

이 글의 핵심 포인트

1UI 글꼴 선택의 핵심 기준은 cap-centered vertical metrics와 높은 x-height(대문자의 70~75%)임
2cap-centered metrics는 대문자 상단과 baseline 아래 여백이 동일하여 아이콘과 정렬하기 용이함
3낮은 x-height는 단어가 아래로 처져 보이는 시각적 불안정함을 초래함
4CSS text-box-trim은 수직 여백은 조절할 수 있으나 x-height 자체를 변경할 수는 없음
5Inter, San Francisco와 유사한 기준을 가진 대안으로 Innovator Grotesk, Universal Sans 등이 있음

이 글에 대한 공공지능 분석

왜 중요한가?

UI 디자인에서 텍스트 정렬은 사용자 경험(UX)의 디테일을 결정하며, 적절한 글꼴 선택은 디자인 시스템의 복기도를 낮추는 핵심 요소입니다. 잘못된 글꼴 선택은 컴포넌트마다 서로 다른 패딩 값을 적용하게 만들어 개발 및 유지보수 비용을 증가시킵니다.

어떤 배경과 맥락이 있나?

최근 웹 표준 기술인 CSS `text-box-trim`이 등장하며 수직 여백 문제를 해결하려는 시도가 있으나, 브라우저 호환성 문제와 x-height 자체를 바꿀 수 없다는 근본적 한계가 존재합니다. 따라서 글꼴 자체의 구조적 특성을 이해하고 선택하는 것이 선행되어야 합니다.

업계에 어떤 영향을 주나?

개발자와 디자이너는 폰트의 미적 요소뿐만 아니라 수직 메트릭과 x-height 같은 기술적 사양을 검토해야 합니다. 이는 디자인 시스템의 토큰(Token) 구조를 단순화하고, 다양한 디바이스 환경에서 일관된 UI를 구현하는 데 기여합니다.

한국 시장에 어떤 시사점이 있나?

한글 폰트 역시 영문과 함께 사용되는 경우가 많으므로, 영문 UI 글꼴의 정렬 특성이 한글 텍스트와 결합했을 때의 시각적 균형을 고려해야 합니다. 글로벌 서비스를 지향하는 한국 스타트업은 디자인 시스템의 확장성을 위해 기술적 기준이 명확한 글꼴을 도입해야 합니다.

이 글에 대한 큐레이터 의견

UI 디자인의 완성도는 '보이지 않는 정렬'에서 나옵니다. 많은 창업자와 개발자가 폰트의 스타일(Style)에만 집중할 때, 숙련된 엔지니어는 폰트의 메트릭(Metrics)을 봅니다. 캡-센터링(Cap-centering)과 높은 x-height를 갖춘 글꼴을 사용하는 것은 디자인 시스템의 복잡성을 줄여 개발 생산성을 높이는 매우 실무적인 전략입니다.

물론 모든 상황에서 특정 조건을 갖춘 폰트가 정답은 아닙니다. 브랜드 아이덴티티를 위해 독특한 x-height를 가진 폰트를 선택해야 할 경우, CSS `text-box-trim`과 같은 최신 기술을 활용하거나 디자인 토큰을 세분화하는 운영 비용을 감수해야 하는 트레이드오프가 발생합니다. 따라서 브랜드의 미적 가치와 개발 운영의 효율성 사이에서 적절한 균형점을 찾는 것이 중요합니다.

원문 보기 →