App Data

데이터 시각화

대시보드의 데이터 시각화 프리미티브 — 스파크라인 · 진행 바 · 차트 래퍼 · 도넛+범례 · 히트맵 · day pills · 미니 링. 전부 인라인 SVG·CSS로 가볍게 렌더하고, 화이트 표면 위에서 퍼플 액센트로 일관합니다. KPI 숫자는 항상 tabular-nums.

스파크라인

.spark — height 30px · polyline stroke 2 · .area opacity .10. 색은 currentColor라 부모 텍스트색으로 칠해집니다.

데일리 스트림

142,380+8.4%

스마트링크 클릭

31,902+3.1%

사전저장 이탈

2,140-1.7%

진행 바

.bar 트랙(line) + .bar > i 채움(accent). height 8px · 완전 둥근 모서리. 폭은 인라인 width %.

Golden Hour 82%

Supernova 64%

Drama 37%

Magnetic 19%

차트 래퍼 높이

고정 높이 3종 — .ch-sm 120 · .ch-md 180 · .ch-lg 210px. 어떤 차트든 동일 래퍼로 높이를 고정해 레이아웃 점프를 막습니다.

일간 클릭 .ch-sm · 120px

주간 스트림 .ch-md · 180px

월간 차트 순위 .ch-lg · 210px

도넛 + 범례

.donut-wrap — conic-gradient 링(120px) + 중앙 라벨, 우측 .leg 범례. 비율은 그라디언트 stop, 수치는 tabular-nums.

68.2K총 스트림

Spotify47%

Apple Music26%

YouTube Music16%

기타11%

활동 히트맵

.heat 7열 그리드 + .hc 정사각 셀(aspect-ratio 1). 강도는 accent 불투명도로 표현 — 빈 셀은 surface-2.

최근 5주 발매 활동 주간 릴리스

적음 많음

Day Pills

.pills — 요일/기간 필터 칩. 선택 상태는 .on(surface-2 배경 + text). 활성 1개만 강조.

집계 요일

일월화수목금토

기간

오늘7일30일90일전체

미니 링

.bz-ring 44px — conic-gradient 진행 링 + 중앙 surface 펀치아웃(33px)에 % 라벨. 미션·캠페인 달성률 같은 작은 게이지에 사용.

76%

사전저장

달성률

54%

스트리밍

달성률

92%

응모 미션

달성률

38%

달성률

사용 규칙

권장

· 모든 KPI·축 숫자는 tabular-nums로 정렬
· 차트는 .ch-sm/md/lg 래퍼로 높이 고정 — 로딩 점프 방지
· 스파크라인 색은 currentColor로 추세(상승=green·하락=danger) 표현
· 도넛·히트맵 강도는 accent 불투명도 단계로 일관
· 진행/달성률은 .bar 또는 .bz-ring 중 맥락에 맞게

금지

· 밝은 배경 위에 차트 배치 — 데이터비주얼은 항상 라이트 스테이지
· 한 차트에 5색 이상 무의미한 팔레트 남발
· 무거운 차트 라이브러리로 단순 스파크라인 렌더
· 숫자를 비례폭 폰트로 흔들리게 표기
· 마케팅 라임/그린 액센트를 앱 차트에 혼용