대시보드 숫자가 덜덜 떨리는 이유, tabular-nums 한 줄로 잡기

타이머나 계산 결과처럼 실시간으로 바뀌는 숫자를 화면에 올려 본 적 있나요? 값이 갱신될 때마다 숫자가 좌우로 미세하게 떨리고, 옆에 붙은 단위나 버튼까지 같이 밀리는 현상이요. 코드를 아무리 봐도 버그는 없는데 화면만 불안해 보여요.

범인은 비례폭 숫자예요

대부분의 폰트는 숫자를 글자처럼 비례폭으로 그려요. 1은 좁고 8은 넓죠. 그래서 1,111이 8,888로 바뀌면 텍스트 전체 폭이 달라지고, 뒤에 있던 요소가 전부 밀려요. 숫자가 1초마다 갱신되는 화면이라면 이 밀림이 초당 한 번씩 반복되니 떨림처럼 보이는 거예요.

해결은 CSS 한 줄이에요

.stat-number {
  font-variant-numeric: tabular-nums;
}

tabular-nums는 모든 숫자를 같은 폭으로 그리라는 선언이에요. Tailwind를 쓴다면 tabular-nums 유틸리티 클래스가 이미 있고요. 직접 만든 플랜씨(plan-c) 대출이자 계산기에 적용해 봤는데, 슬라이더를 움직일 때마다 월 상환액 숫자가 실시간으로 바뀌는 화면이라 떨림이 유독 눈에 띄었거든요. 이 한 줄을 넣고 돌려 보니 숫자가 제자리에서 착착 바뀌었어요. 적용하는 데 5분도 안 걸렸고요.

적용 전에 확인할 것 두 가지

폰트가 이 기능을 지원하는지 먼저 봐야 해요. tabular-nums는 폰트에 들어 있는 OpenType 피처를 켜는 스위치라서, 폰트에 해당 피처가 없으면 조용히 무시돼요. 1과 8을 나란히 두 줄로 놓고 테스트해 보면 폭이 맞는지 바로 보여요.

적용 범위도 중요해요. 본문 문장 속 숫자까지 전부 고정폭으로 바꾸면 오히려 어색해요. 갱신되는 지표, 표의 숫자 컬럼, 타이머처럼 정렬과 안정이 중요한 자리에만 거는 게 좋아요.

자릿수가 변하는 경우는 따로 잡아야 해요

폭을 고정해도 999가 1,000이 되면 글자 수 자체가 늘어나요. 이건 타이포그래피로 못 막으니 컨테이너에서 잡아야 해요. 저는 예상 최대 자릿수만큼 min-width를 ch 단위로 잡아 두는 방식을 써요. 1ch는 숫자 0 하나의 폭이라, 최대 7자리 숫자라면 쉼표 2개까지 계산해 min-width: 9ch로 자리를 미리 확보하는 식이죠. 여기에 text-align: right를 더하면 표 컬럼도 깔끔하게 정렬돼요.

마무리

떨리는 숫자는 에러 로그에 안 남지만 사용자는 몸으로 느껴요. 혼자 운영하면서 배운 건, 이런 작은 안정감이 화면의 신뢰를 만든다는 점이에요. 갱신되는 숫자가 있는 화면이라면 오늘 tabular-nums 한 줄부터 넣어 보세요.