App Data
애널리틱스 콘솔
Charts Analytics 콘솔의 UI 시스템 — 콘솔 셸(카테고리 사이드바) · 차트 랭킹 테이블 패밀리(스트리밍·다운로드·iTunes) · 라디오 추적기. 정본은 app/charts-analytics.php + spotify/itunes/radio-charts. 아래는 전부 샘플(가짜) 데이터로 재현한 정적 목업입니다.
콘솔 셸
허브 크롬 — 페이지 헤더(.pagehead · eyebrow + h1) · 상위 카테고리 레일 · 220px 아이콘 타일 사이드바(.ca-side — 34px .ci 타일 + .ct).
Charts Analytics
.pagehead · .ca-rail(상위 탭) · .ca-side(220px · .ci 34px 타일 · .on=accent)
차트 랭킹 테이블
스트리밍/다운로드 공용 테이블 패밀리(.spv) — 로고 헤더 · 툴바(국가 select + 검색 + meta) · 카드+표 · 등락 뱃지 4상태 · 스트리밍 우측정렬 · 프리미엄/프리 분할 바.
| # | 등락 | 커버 | 제목 | 아티스트 | 스트리밍 | 피크 | 일수 |
|---|---|---|---|---|---|---|---|
| 1 | NEW | Golden Hour | AURORA | 1,284,902 | 1 | 1 | |
| 2 | ▲ 5 | Supernova | NOVA7 | 1,051,338 | 2 | 14 | |
| 3 | – | Neon City | Mirae | 928,470 | 1 | 39 | |
| 4 | ▼ 3 | Afterglow | KARMA | 742,019 | 2 | 22 | |
| 5 | ▲ 2 | Velvet Sky | Lila Sun | 610,556 | 5 | 8 | |
| 6 | ▲ 1 | Midnight Drive | Echo Park | 프리미엄 62% · 프리 38% | |||
등락 뱃지 4상태: NEW · ▲ · ▼ · – · 윈도우 셀렉터 별도
.spv-* (로고 46px · art 42px · streams accent · split prem/free) · .itv-tab · .itv-winbtn · .itv-conf
라디오 추적기
.rc 패밀리 — 포맷 칩 · KPI 스탯 스트립 · 스핀 테이블(추정 청취자 퍼플) · 스테이션 막대 행(.rc-brow). 추정치는 모델 산출.
.rc-stat(.v.red) · .rc-genres · .rc-rank.top · .rc-aud · .rc-brow/.rc-btrack/.rc-bfill
사용 규칙
- · 등락은 4상태 색 일관 — new=accent · up=green · down=red · same=muted
- · 모든 숫자는
tabular-nums정렬 - · 추정 수치는 항상 '추정(모델)' 명시
- · 피크·일수는 우측정렬, 스트리밍은 accent 강조
- · 실데이터·외부 수치를 그대로 노출
- · 로고 자리에 이모지 — 반드시
icon()SVG - · 밝은 배경 위 테이블 배치 (라이트 테마 잔재)
- · 등락 색을 임의로 변경
source: app/charts-analytics.php · spotify/itunes/radio-charts — 샘플 데이터