App UI
App UI — 개요
제품(대시보드) 화면의 디자인 언어입니다. 2026-06 External Light로 재스킨되어 마케팅 사이트와 화이트 베이스 · 퍼플 #6B3FF6 · NanumSquare를 공유합니다. 남은 차이는 밀도(8–12px 라운드·14px 본문) · 좌측 사이드바 셸 · 아이콘(uicons, SVG 이전 예정)뿐. 토큰은 assets/css/app.css의 .shell 스코프 CSS 변수입니다.
한눈에
같은 브랜드, 한 디자인 언어. 제품 UI는 마케팅과 색·폰트를 통일하되, 데이터 밀도가 높은 작업 환경이라 더 조밀한 라운드·간격과 좌측 사이드바 셸로 운용합니다.
External UI (마케팅)
App UI (제품)
베이스
White (#FFFFFF)
White — 동일
액센트
Purple #6B3FF6
Purple #6B3FF6 — 동일
하이라이트
Lime #D4FF00
Lime · 시맨틱 그린/앰버/레드
라운드
md 16 · lg 24 · pill
8–12px (제품 밀도, 더 조밀)
폰트
NanumSquare
NanumSquare — 동일 (+ JetBrains Mono)
아이콘
icon() 1.75px 라인 SVG
Flaticon uicons (fi-rr-*) · SVG 이전 예정
셸
site_header 플로팅 글래스
좌측 사이드바 + 상단바 (.shell)
토큰 프리뷰
핵심 색만. 전체 토큰·라운드·폰트·사용 규칙은 컬러 · 토큰 페이지에서.
미리보기
실제 앱 토큰으로 렌더한 화이트 표면 — 카드 · 액센트 버튼 · 활성 내비.
캠페인
12,480 ▲ 8%
bg #F7F7F7 · surface #FFFFFF · accent #6B3FF6 · radius 12 · NanumSquare
구성
App UI 가이드는 차근차근 확장됩니다.
컬러 · 토큰
서피스·액센트·시맨틱·라운드·폰트
타이포그래피
NanumSquare 타입 스케일·웨이트
아이콘
Flaticon uicons(fi-rr-*) 세트
레이아웃 · 셸
204px 사이드바 + 상단바 + 메인
재스킨 브리지
다크→라이트 토큰 브리지·시범 전환
기본 컴포넌트
버튼·폼·카드·표·뱃지·스탯·알림
폼 · 입력
필드·이미지 드롭존·체크박스·auth
내비게이션
세그먼트·서브탭·2차 패널·서브내비
오버레이
드롭다운·팝오버·드로어·토스트
카드 · 리스트
링크 카드·아티스트 카드·미니 리스트
칩 · 태그 · 뱃지
상태 뱃지·태그칩·DEMO·가드레일
대시보드
스탯·액션 카드·벤토·limits·온보딩
데이터 시각화
스파크·도넛·히트맵·바·링
분석 차트
분석 링·매트릭스·퍼널·KPI
애널리틱스 콘솔
콘솔 셸·랭킹 테이블·라디오
RADAR 인텔리전스
HOT100·SALES·FORECAST·INDEX
시뮬레이터 · 모델
시뮬레이터·추산 모델·가이드
패턴
페이지 헤더·빈 상태·액션 행
유통 모듈
카탈로그 표·2패널 에디터
생산성 도구
QR·벌크 큐·애드온·레시피
인증 · 온보딩
로그인·회원가입·2FA·초대
온보딩
아티스트 검색·프로필·심사 대기
팀 · 권한 · 감사
역할 뱃지·초대·RBAC·감사 로그
빌링 · 잔액
잔액 위젯·인보이스·결제 수단