콘텐츠로 이동

Worked example: seller settlement dashboard design

Generated by the dashboard-design route (skills/design-critique, skills/handoff-spec). Demonstrates the canonical data-screen spec format — KPI strip + table-first layout, Korean amount/number conventions, table accessibility (caption, header scope, aria-sort), density and responsive degradation strategy, and export/alert edge cases. Adapted from the dogfood brief in docs/DOGFOOD-DASHBOARD-FINDINGS.md (G-1).

Brief: 커머스 셀러용 정산 대시보드 설계 — 일별 매출·수수료·정산 예정 금액 표, 기간 필터, 엑셀 내보내기, 미정산 알림.

Cite knowledge/patterns/dashboard-composition.md (KPI strip + table-first layout for data-dense B2B screens), knowledge/patterns/money-and-amount.md (Korean 원 formatting, tabular-nums, sign+color conventions), and knowledge/i18n/korean-density-conventions.md (Korean B2B back-office density expectations) as the grounding for this spec.

# 커머스 셀러 정산 대시보드 스펙

> 근거: knowledge/patterns/dashboard-composition.md, knowledge/patterns/money-and-amount.md,
> knowledge/i18n/korean-density-conventions.md, knowledge/patterns/list-and-feed.md,
> knowledge/layout/spacing-and-grid.md, knowledge/typography/type-scale-fundamentals.md, knowledge/PRINCIPLES.md

## 1. 정보 구조와 레이아웃

- 상단 KPI 스트립 4매: 오늘 매출, 이번 주 확정 수수료, 정산 예정 금액, 미정산 건수. 각 카드에 전기간 대비 증감(▲/▼ + 퍼센트, 색+기호 병행).
- 본문은 테이블 우선(한국 B2B 밀도 관례): 일별 정산 내역 테이블이 화면의 주인공. 카드 그리드로 풀지 않는다.
- 기간 필터는 테이블 헤더 위 고정: 프리셋(오늘/7일/이번 달/지난 정산 주기) + 커스텀 범위. 정산 주기 프리셋이 기본값.

## 2. 금액 표기

- 원화 표기: 1,234,567원 — 천 단위 콤마, 통화 기호 대신 '원' 접미. 마이너스(환불·차감)는 -금액 + 적색이 아닌 색+괄호 병행 표기.
- 테이블 금액 컬럼은 우측 정렬(right-aligned), 고정폭 숫자(tabular-nums)로 세로 스캔 정렬 보장. Amount 컬럼은 항상 number format이 일관되어야 한다.
- 수수료는 금액과 요율(%)을 병기하고, 정산 예정 금액 = 매출 − 수수료 − 차감의 산식을 툴팁으로 노출.

## 3. 테이블 구조와 동작

- 테이블에는 `<caption>정산 내역 (기간: 선택된 필터 범위)</caption>`을 명시하고, 각 column header는 `scope="col"`로 마크업한다.
- 컬럼: 날짜, 주문 수, 매출, 수수료, 차감, 정산 예정, 상태(확정/대기/보류). 상태는 색+텍스트 배지.
- 정렬은 날짜 기본 내림차순, 금액 컬럼 정렬 지원 — 정렬 가능한 컬럼 header에는 `aria-sort="ascending"|"descending"|"none"`을 반영해 현재 정렬 상태를 노출한다.
- 페이지네이션 50행, 밀도(density) 토글 제공(기본 촘촘/compact, 여유형 선택 가능).
- 행 클릭 → 일별 상세 드로어(주문 단위 분해). 드로어는 focus trap, Escape 닫기.

## 4. 엑셀 내보내기와 미정산 알림

- 내보내기는 현재 필터 범위를 그대로 반영, 파일명에 기간 포함(정산내역_2026-06-01_2026-06-30.xlsx). 생성 중 pending 상태(버튼 비활성+진행 라벨), 완료 토스트.
- 미정산 알림: 정산 예정일 초과 건은 KPI 카드와 테이블 행에 경고 배지, 알림 센터 푸시. 배지는 색+아이콘+텍스트.
- **엣지 케이스 — 내보내기 실패**: 생성 실패(네트워크 error) 시 인라인 에러 배너 + 재시도 버튼을 노출하고, 실패 사유를 요약 문구로 안내한다. 데이터 재요청 전까지 이전 필터 상태는 보존한다.
- **엣지 케이스 — 빈 결과**: 필터 범위에 데이터가 없으면 테이블 본문을 "해당 기간에 정산 내역이 없어요" 안내로 대체하고, 내보내기 버튼은 비활성화한다.

## 5. 접근성

- 테이블에 캡션과 컬럼 헤더 `scope`, 정렬 상태 `aria-sort`를 위 3장 기준대로 적용한다. 상태 배지는 색만으로 구분하지 않는다(색+텍스트+아이콘 병행).
- keyboard: 필터 프리셋은 Tab 순회 + Enter/Space로 선택, 테이블 행은 Enter로 드로어 열기, 드로어는 focus trap 유지 후 Escape로 닫힘(닫히면 트리거로 focus 복귀). 정렬 가능한 header도 Tab으로 도달 가능해야 한다.
- screen reader: KPI 증감은 `aria-label`에 방향 포함("전주 대비 12% 증가"), 내보내기 완료는 `aria-live="polite"`로 스크린 리더에 안내.
- 대비(contrast): 본문 텍스트와 금액 숫자는 최소 **4.5:1 contrast ratio** (WCAG AA) 확보. 밀도 높은 테이블일수록 이 기준을 더 엄격히 지키며, 행 hover 배경도 동일 대비를 유지한다. 경고 배지 텍스트도 동일 기준(4.5:1) 적용.

## 6. 반응형 동작

- Desktop 우선(셀러 백오피스, 1280px+). Tablet(768–1024px): KPI 2×2 그리드, 테이블은 가로 스크롤 + 고정 첫 컬럼(날짜)으로 강등한다.
- Mobile(360–430px): 테이블을 일자별 카드 리스트로 강등(demote)하되 금액은 우측 정렬을 유지하고, 내보내기 기능은 그대로 제공한다.
- breakpoint 전환 시 정렬/필터 상태는 유지되며 재요청하지 않는다.

## Don't

- Don't: KPI를 6개 이상 늘어놓지 않는다 — 정산 의사결정과 무관한 지표는 별도 리포트로 분리한다.
- Don't: 미확정 금액을 확정처럼 굵게 표기하지 않는다 — 상태별 시각 위계(확정>예정>보류)를 지킨다.
- Don't: 엑셀 내보내기를 전체 기간 기본값으로 걸지 않는다 — 대용량 생성 남용을 방지하기 위해 현재 필터 범위를 기본으로 한다.
- Avoid: 상태 배지를 색상만으로 구분하는 디자인 — 색각 이상 사용자에게 상태 정보가 사라진다.

Why this is a good dashboard-design example

  • Amount/number-format evidence is explicit — 원 표기, 천 단위 콤마, 우측 정렬, tabular-nums, number format 일관성, matching route --check dashboard-design's money-format requirement.
  • Table accessibility is concrete — <caption>, scope="col", aria-sort on sortable headers, matching the table-a11y requirement.
  • Density and responsive degradation are explicit — density/compact toggle plus a named demote/강등 strategy per breakpoint (tablet horizontal scroll + sticky column, mobile card-list demotion), matching the density-responsive requirement.
  • Grounding is load-bearing — every section traces back to dashboard-composition.md, money-and-amount.md, or korean-density-conventions.md, cited in the header.
  • Accessibility is concrete beyond the table — keyboard traversal, focus trap, aria-live, explicit 4.5:1 contrast ratio.
  • Edge cases are named — export failure, empty result set — not just the happy path.
  • A Don't section closes the spec — four concrete anti-patterns tied to rules stated earlier.

Cross-reference