대시보드 숫자가 흔들려 보일 때, tabular-nums 한 줄

운영 대시보드를 들여다보다 이상한 위화감을 느낀 적이 있어요. 숫자가 1초마다 갱신되는데, 값이 바뀔 때마다 컬럼 전체가 좌우로 살짝 밀리는 것처럼 보이더라고요. 처음엔 애니메이션을 잘못 걸었나 싶어 트랜지션부터 뒤졌는데, 원인은 훨씬 아래쪽에 있었어요.

폰트가 숫자마다 폭을 다르게 줘요

대부분의 본문용 폰트는 프로포셔널 폰트예요. 글자마다 고유한 폭을 가지죠. 1은 좁고 0이나 8은 넓어요. 그래서 11,000과 88,888은 같은 여섯 글자인데도 렌더링 폭이 달라져요.

한 줄짜리 문구라면 아무도 눈치 못 채요. 문제는 세로로 쌓였을 때예요. 표에서 열 개 행이 오른쪽 정렬로 붙어 있으면, 각 행의 숫자 시작점이 미묘하게 어긋나요. 값이 실시간으로 바뀌는 대시보드라면 그 어긋남이 매 갱신마다 재배치되니까 떨리는 것처럼 보이고요.

해결은 CSS 속성 하나예요

.metric-cell {
  font-variant-numeric: tabular-nums;
}

이 한 줄이면 폰트가 가진 고정폭 숫자 글리프 세트를 대신 써요. 모든 숫자가 동일한 폭을 갖게 되니까 자릿수가 바뀌어도 열이 밀리지 않아요. 실제로 적용해 보니 다섯 글자에서 여섯 글자로 넘어가는 순간의 튐이 사라졌어요. 폰트 파일을 바꿀 필요도, 숫자 전용 폰트를 따로 불러올 필요도 없었고요.

주의할 점 하나는 폰트가 이 기능을 지원해야 한다는 거예요. 한글 본문에 자주 쓰는 Pretendard나 영문 Geist처럼 요즘 만들어진 폰트는 대부분 지원하는데, 확신이 안 서면 두 자릿수와 다섯 자릿수를 나란히 놓고 브라우저에서 직접 비교해 보는 게 제일 빨라요. 10초면 확인돼요.

어디에 적용할지가 더 중요해요

전역 스타일에 걸어버리고 싶은 유혹이 생기는데, 저는 그렇게 안 했어요. 고정폭 숫자는 본문 문장 안에서는 오히려 어색하게 벌어져 보이거든요. "3년 동안"처럼 문장에 섞인 숫자는 프로포셔널이 자연스러워요.

그래서 적용 범위를 네 군데로 한정했어요. 표의 수치 컬럼, 실시간 카운터, 금액, 차트 축 레이블. 이 네 곳만 손봐도 화면이 훨씬 안정적으로 보여요.

계산기 화면에서 특히 체감돼요

이 문제를 체감하기 제일 좋은 건 금액이 계속 바뀌는 화면이에요. 플랜씨(plan-c)에서 대출이자 계산기를 쓸 때 금리 슬라이더를 움직여 보면, 월 상환액 숫자가 자릿수를 넘나들며 갱신돼요. 여기에 고정폭 숫자가 안 걸려 있으면 슬라이더 조작 내내 숫자가 춤추듯 흔들려요. 로그인 없이 바로 쓸 수 있으니 한번 움직여 보면서 숫자 컬럼이 어떻게 버티는지 관찰해 보셔도 좋아요.

정리하면 이래요. 원인은 폰트의 숫자 폭 차이고, 해결은 CSS 속성 한 줄이고, 판단이 필요한 부분은 어디에 적용할지예요. 코드는 1분이면 쓰는데 적용 범위를 정하는 데 더 오래 걸렸어요. 그게 보통 맞는 비율인 것 같기도 하고요.