실시간 숫자가 깜빡이지 않게, 데이터 화면 플리커 잡는 3가지 패턴

숫자가 실시간으로 바뀌는 화면을 만들어 본 적 있나요? 값이 갱신될 때마다 숫자가 번쩍이고, 옆에 있던 버튼까지 슬쩍 밀려나면 화면 전체가 불안해 보여요.

저도 플랜씨(plan-c) 금융계산기를 만들면서 같은 문제를 겪었어요. 대출 금액이나 이자율을 바꾸면 결과가 바로 다시 계산되는 구조인데, 직접 만들어 보니 이 "바로"가 오히려 문제였어요. 입력할 때마다 결과 숫자가 떨리듯 깜빡였거든요.

혼자 운영하면서 하나씩 고쳐 본 패턴 세 가지를 정리해요.

1. 숫자 폭부터 고정하기

대부분의 폰트는 1이 8보다 좁아요. 그래서 결과가 1,111,111원에서 8,888,888원으로 바뀌면 글자 폭이 달라지고, 옆 레이아웃이 통째로 밀려요.

해결은 CSS 한 줄이에요.

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

모든 숫자가 같은 폭을 갖게 되는 속성이에요. 적용해 봤더니 값이 아무리 바뀌어도 숫자만 조용히 바뀌고 화면은 그대로였어요.

2. 새 값이 올 때까지 이전 값 두기

깜빡임의 가장 큰 원인은 "비우고 다시 채우기"예요. 갱신할 때마다 스피너를 띄우면 값이 바뀔 때마다 화면이 지워졌다 나타나요.

이전 값을 화면에 그대로 두고, 새 값이 준비된 순간에만 교체하면 돼요. 스켈레톤이나 로딩 표시는 첫 로딩 1회만 쓰고, 그 뒤로는 값 교체만 일어나게 하는 거예요.

3. 계산 횟수 자체를 줄이기

키를 누를 때마다 다시 계산하면 리렌더가 계속 이어져요. 입력이 멈춘 뒤 200ms 후에 한 번만 계산하도록 디바운스를 걸어 보세요. 돌려 보니 체감상은 즉시 반응하는데 숫자 떨림은 사라졌어요.

숫자가 들어갈 자리에 min-width로 최소 폭을 잡아 두는 방법도 같이 쓰면 좋아요. 테스트해 보면 값이 짧아졌다 길어져도 주변 요소가 움직이지 않아요.

결국 안 바꿔도 되는 걸 안 바꾸는 일

플리커 억제는 기능을 더하는 작업이 아니라, 바뀌지 않아도 되는 부분을 건드리지 않는 작업이었어요. 세 패턴 모두 작은 수정이지만 화면이 주는 신뢰감이 꽤 달라져요.

플랜씨는 로그인 없이 쓸 수 있는 무료 계산기라, 결과 숫자가 어떻게 갱신되는지 부담 없이 확인해 볼 수 있어요. 실시간 숫자 화면을 만들고 있다면, 오늘은 CSS 한 줄부터 넣어 보세요.