매출 차트에 확정·대기 구분 서브라인과 발생주의 라벨 추가

관리자 대시보드의 매출 현황 차트에 확정/대기 상태를 구분하는 서브라인과 발생주의 라벨을 추가했다. 단순해 보이는 UI 변경이지만, 재무 데이터 시각화에서는 꽤 중요한 작업이었다.

왜 이 변경이 필요했나

관리자 입장에서 시간축 그래프를 볼 때 전체 합계만 표시되면 실제 의사결정에 필요한 정보가 부족하다. 예를 들어 매출이 100만 원으로 표시되어 있어도, 실제로 확정된 매출이 60만 원이고 대기 중인 매출이 40만 원인지, 아니면 반대인지 알 수 없다는 뜻이다. 특히 발생주의 회계를 적용하는 시스템에서는 이 두 상태의 구분이 중요한데, 차트 상에서 명확하게 드러나지 않으면 운영자가 혼동하기 쉽다.

또한 발생주의라는 개념 자체가 사용자마다 이해도가 다를 수 있다. "발생주의"라는 라벨을 명시적으로 붙임으로써 이 수치가 실제 거래 발생 기준이며, 정산/송금 완료 기준이 아니라는 점을 시각적으로 강조할 수 있다.

구현 관점에서의 고민

시간축 grid 차트에 sub-line을 추가할 때는 몇 가지 고려사항이 있었다.

먼저 데이터 구조 문제다. 기존에는 총합만 전달했다면, 이제는 각 타임스탬프마다 { total, confirmed, pending } 형태로 구성해야 한다. JSP 템플릿 레벨에서 이를 어떻게 표현할지, 차트 라이브러리가 여러 계열의 라인을 그릴 때 색상/스타일을 어떻게 구분할지도 중요하다.

// 기존 구조
[{ date: '2026-04-01', amount: 100 }]

// 변경 후 구조
[{ 
  date: '2026-04-01', 
  confirmed: 60, 
  pending: 40,
  total: 100 
}]

라벨 추가도 마찬가지다. 발생주의라는 말이 적절한지, 아니면 "예상 수익" 같은 더 직관적인 용어를 써야 하는지 고민할 수 있다. 하지만 회계/정산 팀이 이미 내부 정책에서 "발생주의" 기준으로 데이터를 제공하고 있다면, 그 용어를 그대로 쓰는 것이 일관성 면에서 낫다.

시각화에서 자주 겪는 문제들

차트에 정보를 많이 담으려다 보면 오버로드되기 쉽다. 총합 + 확정 + 대기까지 세 개 라인이 겹치면 읽기 어려워질 수 있기 때문에, 보통은 다음과 같은 방법 중 하나를 선택한다:

• 스택 차트: confirmed와 pending을 누적하는 방식. 비율 파악이 직관적.
• 투명도 처리: 메인 라인(확정)은 진하고, 대기는 연하게 표시.
• 범위 차트: 최소(확정)와 최대(확정 + 대기)를 영역으로 표현.
• 별도 토글: 라인 on/off를 선택할 수 있도록 제공.

이 프로젝트에서 선택한 "sub-line" 방식이 뭔지는 commit 메시지만으로는 정확하지 않지만, 어쨌든 여러 상태를 동시에 시각적으로 표현한다는 의도는 명확하다.

회고

이런 종류의 기능 추가는 개발 복잡도 자체는 크지 않을 수 있지만, 운영 관점에서는 의외로 임팩트가 크다. 관리자가 매일 보는 대시보드에 한 두 줄의 정보가 추가되는 것만으로도 의사결정 품질이 달라진다. 특히 재무/정산 영역에서는 "확정" vs "대기"라는 상태 구분이 실제 송금액을 결정하므로, 이를 차트에서 명시하는 것은 실수를 줄이는 좋은 방어선이 된다.

다음 번에 비슷한 작업을 할 때는 라벨뿐 아니라 범례(legend)도 함께 정비해서, 새로운 운영자가 봤을 때 "이 차트가 뭘 의미하는지" 한눈에 파악하도록 개선하면 좋을 것 같다.