CSS 한 줄로 숫자를 깔끔하게 표시하고 정렬하기

프론트엔드 개발자라면 다음과 같은 대화를 한 번 쯤은 나눠본적이 있을 것이다.

💬 디자이너: "이 표 숫자들 왜 이렇게 들쭉날쭉해요? 표마다 너비가 다르잖아요."
개발자: "폰트 때문에 숫자마다 너비가 달라서..."
디자이너: "그럼 꼭 고정폭 폰트를 써야 하나요?"

이제 이 글을 읽고서는 이렇게 대답할 수 있을것이다.

"아니요, font-variant-numeric 한 줄이면 해결됩니다."

font-variant-numeric 속성

font-variant-numeric은 숫자의 표시 방식을 제어하여 특정 숫자 관련 스타일을 적용할 수 있는 CSS 속성이다. 주로 타이포그래피에서 숫자의 모양, 간격, 정렬 등을 세밀하게 조정할 때 사용한다.

너비 제어 (numeric-spacing-values)

tabular-nums: 가변폭 폰트 숫자의 너비를 동일하게 만든다.
css
```
font-variant-numeric: tabular-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231
proportional-nums: 반대로 고정폭 폰트 숫자의 너비를 비례폭으로 만든다.
css
```
font-variant-numeric: proportional-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231

스타일 제어 (numeric-figure-values)

lining-nums: 모든 숫자를 기준선(baseline)에 맞춰 동일한 높이로 표시한다.
css
```
font-variant-numeric: lining-nums;
```
before
0123456789
after
0123456789
oldstyle-nums: 일부 숫자(3, 4, 5, 7, 9)를 소문자처럼 아래로 내려서 표시한다.
css
```
font-variant-numeric: oldstyle-nums;
```
before
0123456789
after
0123456789

분수값 제어 (numeric-fraction-values)

diagonal-fractions: 일반 분수 표기(1/2, 3/4)를 자동으로 대각선 분수(½, ¾)로 변환한다.
css
```
font-variant-numeric: diagonal-fractions;
```
before
밀가루 1/2컵
설탕 3/4컵
after
밀가루 1/2컵
설탕 3/4컵
stacked-fractions: 분수를 위아래로 쌓인 형태로 표시한다.
css
```
font-variant-numeric: stacked-fractions;
```
before
1/2
설탕 3/4
after
1/2
설탕 3/4

기타 유용한 기능

slashed-zero: 숫자 0에 사선을 넣어 알파벳 O와 명확히 구분한다.
css
```
font-variant-numeric: slashed-zero;
```
before
ID: U00123O0
after
ID: U00123O0
ordinal: 1st, 2nd, 3rd와 같은 텍스트를 서수 형식으로 보여준다.
css
```
font-variant-numeric: ordinal;
```
before
1st, 2nd, 3rd
after
1st, 2nd, 3rd

주의 사항

모든 폰트가 앞서 나열한 CSS 속성이 적용되는 것은 아니다. 사용하는 폰트가 해당 OpenType 기능을 지원해야 효과가 나타난다. font-variant-numeric 속성은 OpenType 폰트의 고급 기능을 활용하는 것이기 때문에, 웹 폰트나 시스템 폰트가 이 기능들을 내장하고 있어야만 정상적으로 작동한다. 예를 들어, 오래된 폰트나 기본적인 웹 폰트의 경우 diagonal-fractions나 oldstyle-nums 같은 기능이 지원되지 않을 수 있다.

마무리

이제 디자이너가 "표 숫자 정렬이 왜 이렇게 엉망이에요?"라고 물어봐도 당황하지 말자. font-variant-numeric 한 줄이면 충분하다. 작은 CSS 한 줄이지만, 사용자가 느끼는 완성도의 차이는 크다. 다음 프로젝트에서 숫자가 포함된 UI를 작업할 때, font-variant-numeric을 떠올려보자. 분명 더 나은 사용자 경험을 만들 수 있을 것이다.

참조