Next.js 대시보드 숫자 카드 로딩 UI 설계

대시보드의 숫자 카드는 작은 화면 요소지만, 1인 브랜드의 운영 인상을 크게 좌우해요. 방문자 수, 콘텐츠 발행 수, 전환 수처럼 숫자가 갱신될 때 카드 폭과 높이가 계속 바뀌면 서비스 전체가 아직 정리되지 않은 듯 보일 수 있어요. 라이프케어로그처럼 여러 제품을 운영하는 브랜드라면 운영 화면의 안정감도 신뢰를 쌓는 접점이 됩니다.

4개의 숫자 카드로 작은 화면을 직접 만들어 보니, 문제는 데이터가 아니라 빈 상태를 다루는 방식에서 먼저 생겼어요. 로딩 중에 0을 먼저 넣고 실제 값을 바꾸면 숫자 자릿수에 따라 카드 내부가 움직였어요. 대신 처음부터 카드의 높이와 숫자 영역을 고정해 두니, 데이터가 늦게 도착해도 화면의 골격은 유지됐어요.

고정된 카드 틀→로딩 자리표시자→실제 숫자 갱신

숫자 영역에는 세 가지 상태를 분리하는 편이 좋아요. 아직 데이터를 요청하지 않은 상태, 요청 중인 상태, 마지막 값을 표시하는 상태예요. 요청 중에는 숫자 대신 같은 폭의 자리표시자를 보여 주고, 실패했을 때는 카드 높이를 유지한 채 짧은 안내 문구를 넣어요. 값이 없다는 의미의 0과 아직 모른다는 의미의 빈 상태를 섞지 않는 것이 핵심입니다.

적용해 봤더니 숫자 자릿수도 별도 변수였어요. 999에서 1,000으로 바뀌는 순간을 대비해 숫자에 고정 폭 글꼴을 적용하거나, 최소 너비를 5ch처럼 잡아 둘 수 있어요. 5ch는 5개 문자 정도의 폭을 예약하는 방식이라, 값이 4자리에서 5자리로 변할 때 옆의 라벨이 밀리는 일을 줄여 줍니다. 카드 간 간격도 16px처럼 일정하게 두면 갱신 빈도가 높은 화면에서 리듬이 유지돼요.

테스트해 보면 1초마다 값을 갱신하는 경우보다, 사용자가 행동한 뒤 필요한 카드만 갱신하는 경우가 브랜드 운영에 더 읽기 편한 때가 많아요. 예를 들어 콘텐츠를 발행한 뒤 발행 수 카드만 다시 불러오고, 나머지 카드는 이전 값을 유지하는 식이에요. 모든 수치를 한꺼번에 깜빡이게 하지 않아도 됩니다.

• ✓값과 로딩 상태 분리
• ✓숫자 폭 예약
• ✓필요한 카드만 갱신

돌려 보니 로딩 애니메이션도 2가지 원칙이면 충분했어요. 카드 전체를 사라지게 하지 않고, 숫자가 놓일 자리만 부드럽게 바꾸는 것. 그리고 애니메이션은 200ms 안팎으로 짧게 두는 것이에요. 긴 움직임은 갱신 사실보다 효과 자체를 먼저 보게 만들 수 있습니다.

플랜비(plan-b)의 멤버와 회비처럼 운영자가 자주 확인하는 숫자도 같은 원리로 다룰 수 있어요. 숫자는 단순한 결과 표시가 아니라, 브랜드가 일을 정돈해 두었다는 신호입니다.