매출 대시보드 폴링 시 결제 항목 라벨과 데이터 불일치 해결

관리자 대시보드의 매출 요약 화면에서 실시간 데이터 갱신과 라벨 정합 문제를 함께 해결했다.

대시보드 폴링과 데이터 동기화의 어려움

운영 대시보드는 실시간 지표를 보여줘야 하는데, 특히 매출 통계처럼 시간대별로 변하는 데이터는 사용자가 화면을 열어둔 상태에서도 최신 정보를 받아야 한다. 이걸 구현하는 방식은 크게 두 가지인데, 웹소켓 같은 양방향 통신은 인프라 비용이 크므로 보통 주기적인 폴링(polling)으로 처리한다. 클라이언트가 N초마다 서버에 최신 데이터를 요청하는 식이다.

이 작업은 sub-line(아마도 인증비와 PG 수수료 같은 세부 항목)의 폴링 갱신이 제대로 동작하지 않고 있었던 부분을 고쳤다. 화면에 표시되는 라벨과 서버에서 내려오는 실제 데이터의 매핑이 안 맞아서 사용자 입장에선 혼동이 생길 수 있는 상황이었다.

폴링 갱신과 라벨 정합의 동시 처리

대시보드 매출 요약 화면에서 하나의 총합 지표만 보여주는 게 아니라 그 아래 여러 sub-line이 분해돼서 나타난다. 예를 들면:
- 총 매출액
- 순수 거래액
- 인증비 (또는 수수료)
- PG 수수료
- 기타

이런 구조에서 갱신이 일어날 때마다 각 항목의 값뿐 아니라 라벨이 일관되게 유지돼야 한다. 만약 폴링으로 데이터는 새로운 값이 들어오는데 라벨은 예전 것이 남아있으면, 사용자는 "어? 이게 뭐 하는 항목이었지?" 하는 혼동을 겪는다. 특히 결제 관련 항목들(인증비, PG 수수료 등)은 용어가 이미 헷갈리기 쉬워서 더 주의가 필요했다.

JSP 템플릿 레벨의 동적 처리

이건 JSP 파일 단계에서 처리하는 작업이었다. 서버에서 보내는 JSON이나 데이터 모델이 바뀌면, 화면에 렌더링하는 부분도 같이 업데이트돼야 한다. 예를 들어, JSTL이나 자바스크립트로 동적으로 라벨을 그리고 있다면, 폴링 요청으로 받은 새 데이터에 맞춰 그 라벨도 다시 그려야 한다.

<!-- 갱신 전: 라벨과 데이터가 분리돼서 렌더링 -->
<c:forEach items="${summaryData}" var="item">
  <span>${labelMap[item.type]}</span>
  <span>${item.amount}</span>
</c:forEach>

<!-- 개선 후: 폴링 응답 데이터에 라벨까지 포함해서 처리 -->
<script>
function refreshTotalSummary() {
  fetch('/api/summary/total')
    .then(r => r.json())
    .then(data => {
      // 라벨과 데이터를 한 묶음으로 갱신
      updateSubLines(data.subLines);
    });
}
</script>

회고: 실시간 지표의 일관성 유지

대시보드 같은 운영 도구에서 가장 신뢰받지 못하는 순간은 "데이터가 이상해 보일 때"다. 정확한 금액이 아니어도 괜찮지만, 라벨과 숫자가 안 맞으면 사용자는 그 화면 자체를 의심하기 시작한다. 이번 작업은 그런 맥락에서 중요했다.

또한 폴링 방식에서 자주 빠뜨리는 부분이 "일부 항목만 갱신되는" 케이스다. 메인 지표는 갱신되는데 상세 항목(sub-line)은 남겨진다거나, 라벨은 안 바뀌는 식이다. 이런 부분을 찾아내려면 실제로 폴링이 발생하는 순간을 화면에서 관찰하고, 개발자 도구로 네트워크 요청과 DOM 변화를 추적해야 한다.

앞으로 유사한 대시보드 작업을 할 때는 폴링 갱신 테스트를 처음부터 체크리스트에 넣고, 라벨/메타데이터와 실제 데이터를 같은 응답에 포함시키는 패턴을 선호하게 됐다.