한글 UI 폰트 토큰 설계: 굵기·행간·숫자를 화면에 맞추는 법

폰트를 골랐는데 화면이 정돈되지 않는다면 토큰이 역할을 설명하지 못하는 경우가 많다. 크기 12부터 32까지 숫자만 늘어놓으면 디자이너와 개발자가 같은 값을 보고도 다르게 쓴다. 본문, 보조 정보, 버튼, 페이지 제목처럼 실제 쓰임을 먼저 정하고 필요한 값만 붙이자.

계정 보안을 위해 비밀번호를 변경해 주세요. 마지막 변경일은 2026년 8월 14일입니다.

토큰 이름은 화면의 역할에서 시작한다

text-14, font-500 같은 이름은 값은 알려 주지만 어디에 써야 하는지 말해 주지 않는다. body, label, title, display처럼 역할을 먼저 나누고 각 역할에 크기·굵기·행간을 묶는다. 같은 14px이라도 목록 본문과 버튼 라벨은 필요한 행간과 강조가 다르다.

처음부터 역할을 열 개 만들 필요는 없다. 실제 제품에서 가장 많이 반복되는 본문, 보조 문구, 버튼, 섹션 제목 네 곳을 먼저 잡는다. 예외가 두 화면 이상에서 반복될 때 새 토큰을 추가하면 이름만 다른 같은 값이 늘어나는 일을 줄일 수 있다.

굵기는 400·500·700부터 확인한다

Pretendard는 아홉 굵기와 가변 폰트를 제공한다. 선택지가 많아도 제품에서 아홉 단계를 모두 써야 하는 것은 아니다. 본문 400, 버튼과 짧은 강조 500, 큰 제목 700을 같은 화면에 놓고 차이가 충분한지 본다. 400과 500이 거의 같아 보이는 크기라면 색이나 굵기를 더 늘리기 전에 역할 자체를 다시 나누는 편이 낫다.

가변 폰트를 쓸 때는 CSS의 weight 범위와 실제 요청 파일이 맞는지 확인한다. 브라우저가 없는 굵기를 합성하면 디자인 도구의 시안과 획이 달라질 수 있다. 450처럼 중간값을 쓰려면 그 차이가 제품에 필요한지, 지원하지 않는 환경에서 어떤 값으로 접힐지까지 기록한다.

본문 400 · 버튼 500 · 페이지 제목 700

크기와 행간은 한 쌍으로 조정한다

폰트를 바꾸면 같은 크기에서도 글자의 실제 높이와 문장 폭이 달라진다. 기존 행간을 그대로 두고 크기만 맞추면 받침이 촘촘해지거나 카드가 필요 이상으로 길어진다. 한 줄 라벨, 두 줄 설명, 여섯 줄 본문을 각각 놓고 위아래 잘림과 문단 리듬을 본다.

모바일에서는 접근성 글자 확대도 함께 확인한다. 고정 높이 버튼이나 말줄임표가 본문을 가리지 않는지, 긴 한국어 단어가 컨테이너 밖으로 밀리지 않는지 살핀다. 행간 숫자는 시안 한 장의 인상보다 실제 컴포넌트의 가장 긴 문장으로 정한다.

숫자와 폴백은 별도 표본으로 검사한다

가격, 날짜, 인증번호가 많은 제품이라면 숫자 표본을 따로 둔다. font-variant-numeric: tabular-nums를 썼다는 사실만으로 정렬이 보장되지는 않는다. 선택한 파일과 굵기가 해당 기능을 지원하는지 계산 스타일과 실제 열 정렬로 확인해야 한다.

Pretendard 공식 문서는 시스템 환경을 따르는 폴백과 어디서든 비슷한 환경을 만드는 폴백 예시를 각각 안내한다. 제품의 목표에 맞는 쪽을 택하고, 웹폰트가 늦게 오거나 실패했을 때 버튼 폭과 줄바꿈이 얼마나 바뀌는지 본다. font-display 값은 표시 시점을 조절할 뿐 폴백 차이 자체를 없애지 않는다.

주문번호 HH-2048 · 결제 금액 128,900원 · 남은 시간 09:42

세 가지 상태를 브라우저에서 확인한다

정상 로딩, 느린 네트워크, 웹폰트 실패를 차례로 본다. 네트워크 패널에서는 요청한 굵기와 파일 수를 확인하고, 계산 스타일에서는 실제 적용된 font-family를 읽는다. 마지막으로 320px 안팎의 좁은 화면과 데스크톱에서 같은 문구의 줄 수를 기록한다.

프리텐다드 상세에서 사용할 굵기를 확인하고 폰트 시뮬레이터에 제품 문구를 옮겨 보자. 토큰 표에는 값만 적지 말고 사용 역할, 대표 예문, 폴백 때 허용할 변화까지 남긴다. 다음 화면을 만드는 사람이 같은 기준으로 판단할 수 있어야 토큰이 제 몫을 한다.