Black Friday-Cyber Monday 실시간 대시보드 구축기

Vercel이 자사의 Black Friday-Cyber Monday(BFCM) 실시간 대시보드를 어떻게 구축했는지 설명한다. 테라바이트 단위 데이터를 실시간으로 처리하면서도 수많은 방문자에게 부드러운 UI를 제공하는 게 핵심 과제였고, Next.js ISR + KV 캐싱 + 클라이언트 사이드 숫자 애니메이션으로 해결했다.

핵심 포인트

10초 폴링 + ISR 5초 캐시로 DB 요청을 동시 방문자 수와 무관하게 1회/5초로 제한했다.
테라바이트 DB를 매번 전체 조회하는 대신 5분 롤링 윈도우 + Upstash KV 누적 합산으로 쿼리 비용을 대폭 줄였다.
숫자가 뚝뚝 바뀌는 UX를 requestAnimationFrame 기반 rate-of-change 애니메이션으로 부드럽게 만들고, 실제 값과 오차가 나면 rate를 동적으로 보정해 정확도를 유지했다.
ISR 덕분에 트래픽이 수배 늘어도 DB 부하는 일정하게 유지됐다.

상세 정리

배경: 매년 BFCM 기간 수백만 명이 Vercel 인프라 실시간 지표를 공개 대시보드에서 동시에 보는 상황에서 최신 데이터를 효율적으로 제공해야 했다.
폴링 아키텍처: 클라이언트가 10초마다 서버에 업데이트 요청. WebSocket 대신 단순 폴링을 선택해 확장성을 높이고 구현 복잡도를 낮췄다.
초기 문제: BFCM 시작 시점부터 현재까지 전체 구간을 집계하면 시간이 지날수록 쿼리 비용이 기하급수적으로 증가했다.
롤링 윈도우 + KV 합산: 최근 5분만 DB에서 조회하고, Upstash KV에 저장된 누적 카운트와 합산하는 방식으로 전환해 쿼리 비용을 일정하게 유지했다.
ISR 캐시 적용: Next.js `export const revalidate = 5` 설정으로 5초에 한 번만 DB를 조회하고, 그 사이 모든 방문자는 캐시 응답을 받는다. 동시 접속자가 아무리 늘어도 DB 부하가 증가하지 않는다.
애니메이션 설계: 10초마다 숫자가 점프하면 UX가 나빠진다. 서버 사이드에서 초당 변화율을 계산해 내려주고, 클라이언트에서 requestAnimationFrame으로 매 프레임 조금씩 증가시켜 자연스럽게 보이게 했다.
정확도 보정 메커니즘: rate 기반 증가를 하다 보면 실제 값과 오차가 누적된다. 퍼센트 차이를 계산해 오차가 임계값을 넘으면 rate를 동적으로 재조정해 정확도를 유지했다. 코드로 직접 구현 예시가 포함돼 있다.
결과: 초당 수만 건 트래픽 상황에서도 DB 부하 안정 유지 + 부드러운 실시간 숫자 업데이트 제공.