파트너 정산 현황을 관리자 대시보드 첫 화면에 올렸다

파트너 정산 카드, 결국 첫 화면에 다 박았음

이번 작업은 관리자 대시보드 첫 화면에 파트너 정산/매출 현황 카드를 붙이는 일이었음. 원래 정산 정보는 메뉴 두세 단계 들어가야 보이는 구조였는데, 운영팀이 매일 아침마다 그 깊은 화면을 새로고침하고 있다는 얘기 듣고 한숨 나옴. "왜 첫 화면 아님?" 한마디로 시작됨.

카드에 뭘 올릴지 추리는 게 절반

처음엔 욕심이 많았음. 일/주/월 추이 그래프, 정산 대기, 미수금, 환불, 파트너 랭킹… 다 넣고 싶었는데 와이어프레임 그려보니 손바닥만 한 카드 영역이 너무 빽빽함. 결국 "아침에 딱 보고 끝낼 정보"만 추림.

전일 대비 증감률은 숫자 대신 색 한 칸으로만 표현. 숫자보다 색이 훨씬 빨리 읽힘.

시간 다 잡아먹은 건 쿼리였음

진짜 잡아먹은 건 화면이 아니라 집계 쿼리. 정산 대기 건은 결제대행사별로 정산 시점이 달라서, 카드 결제는 D+3, 가상계좌는 D+0~+2 식으로 케이스가 갈림.

• 단일 쿼리로 다 합치니 → 인덱스 안 타고 풀스캔
• 상태별로 쪼개서 PENDING/CONFIRMED/CANCELLED 따로 뽑고 합산
• 5분 캐시 한 번 입히니 1초 → 80ms

-- 의사 코드
SELECT status, SUM(amount)
FROM 정산내역
WHERE 정산예정일 = :today
GROUP BY status;

상태별 합산만 캐시하고 카드 렌더는 캐시 키만 바꿔치움. 운영팀이 새로고침 연타해도 DB가 비명 안 지르게 함.

CSS 한 줄에 30분 날아감

카드 그림자가 다크모드에서 까맣게 죽어버림. 디자인 시스템 변수 안 쓰고 하드코딩된 색이 한 줄 박혀 있었음. 변수로 바꾸고 끝. 별거 아닌데 30분 사라짐.

회고

• 운영팀의 "매일 아침 새로고침" = 가장 정확한 우선순위 신호였음
• 카드는 욕심내면 망함. 빼는 게 디자인
• 집계 쿼리는 처음부터 캐시 가능 단위로 쪼갤 것
• 다크모드는 변수 안 쓰면 어디선가 무조건 터짐
• 첫 화면에 올라오는 한 줄이 메뉴 깊숙한 페이지 열 개보다 가치 있음

다음