06 · UI Kit & Coverage
UI 킷: 프로덕션 구현 계약
이 챕터는 Omninal DTCG 토큰 소스를 프로덕션 컴포넌트에 연결합니다. Web 프리미티브는 shadcn/ui 구조와 Lucide 아이콘을 유지하면서 상태, 콘텐츠, 접근성, Storybook 동작을 기록합니다. 네이티브 토큰 산출물은 준비되었고 네이티브 컴포넌트 구현은 별도 전달 상태로 표시합니다.
하나의 토큰 소스, 명확한 플랫폼 경계DTCG 2025.10 · primitive → semantic → component · Light / Dark alias
DTCG 2025.10 토큰 파이프라인 준비 완료
- 01Primitive
원시 값이며 제품 UI가 직접 소비하지 않습니다.
- 02Semantic
디자인과 코드가 공유하는 모드 대응 의미 역할.
- 03Component
예측 가능한 컴포넌트 동작을 위한 범위화된 Alias.
globals.css는 이제 생성된 시맨틱 매핑을 소비하며 별도의 진실 공급원이 아닙니다. 하나의 토큰 PR이 아래 모든 대상의 정렬된 산출물을 만듭니다.
플랫폼 가용성
- Web / React13개 프리미티브 준비
- Figma VariablesManifest 준비
- SwiftUI토큰 준비
- Compose토큰 준비
- Android XML토큰 준비
“토큰 준비”는 네이티브 값과 Alias가 생성되었다는 뜻이며 전체 네이티브 컴포넌트 라이브러리의 출시를 뜻하지 않습니다.
현재 컴포넌트 커버리지Web 프리미티브 13개 · 상태 문서화 · WCAG 2.2 AA 자동·수동 픽스처
프로덕션 Web
실제 React 컴포넌트가 이 사이트에서 동작하고 독립된 Storybook Story를 갖습니다.
동작 검증
키보드, 포커스, 비활성, RTL, 긴 문장, 200% 텍스트 픽스처를 포함합니다.
네이티브 경계
SwiftUI, Compose, XML은 현재 토큰을 소비하며 컴포넌트 포팅은 다음 릴리스에서 진행됩니다.
| 컴포넌트 | 문서화 범위 | Web 상태 | 네이티브 상태 |
|---|---|---|---|
Button | 변형 6 · 크기 3 · 로딩 · 비활성 | 준비 완료 | 토큰 계약 |
Badge | 기본 · 보조 · 아웃라인 · 위험 | 준비 완료 | 토큰 계약 |
Alert | 정보 · 위험 · 제목 · 설명 | 준비 완료 | 토큰 계약 |
Card | 헤더 · 콘텐츠 · 푸터 · 금융 데이터 | 준비 완료 | 토큰 계약 |
Checkbox | 미선택 · 선택 · 비활성 · 포커스 | 준비 완료 | 토큰 계약 |
Input | 기본 · 포커스 · 오류 · 비활성 · 도움말 | 준비 완료 | 토큰 계약 |
Label | 컨트롤 연결 · 필수 맥락 | 준비 완료 | 토큰 계약 |
RadioGroup | 선택 · 키보드 · 비활성 | 준비 완료 | 토큰 계약 |
Select | 트리거 · 목록 · 키보드 · 긴 문장 | 준비 완료 | 토큰 계약 |
Separator | 수평 · 수직 · 장식 | 준비 완료 | 토큰 계약 |
Switch | 켜짐 · 꺼짐 · 비활성 · 포커스 | 준비 완료 | 토큰 계약 |
Tabs | 선택 · 순환 포커스 · 패널 | 준비 완료 | 토큰 계약 |
Textarea | 기본 · 포커스 · 오류 · 긴 문장 | 준비 완료 | 토큰 계약 |
커버리지 표현은 엄격합니다: 준비 완료는 실제로 문서화된 Web 컴포넌트가 존재한다는 뜻입니다. 토큰 계약은 네이티브 코드가 같은 값을 소비할 수 있다는 뜻이며 네이티브 컴포넌트 자체의 완료를 의미하지 않습니다.
테마 토큰 전체 맵shadcn 공식 토큰 목록 → Omninal 값 (Light / Dark) — background/foreground 페어
| 토큰 | Light | Dark | 역할 |
|---|---|---|---|
--background / --foreground | #FFFFFF · #181D33 | #0B0F1E · #E9EDF6 | 페이지 그라운드와 기본 텍스트 |
--card / --popover（+fg） | #FFFFFF · #181D33 | #131A32 · #E9EDF6 | 카드 컨테이너 / 오버레이 |
--primary（+fg） | #155DFC · #FFFFFF | #6E9BFF · #0B0F1E | 주요 버튼, 선택, 브랜드 강조 |
--secondary（+fg） | #EEF1F6 · #1A2236 | #1C2540 · #E9EDF6 | 보조 버튼, 낮은 강조 채움 |
--muted（+fg） | #F1F4F9 · #5D6478 | #1B2438 · #8A93AD | 약한 그라운드, 플레이스홀더, 보조 텍스트 |
--accent（+fg） | #E9F0FF · #15439E | rgba(110,155,255,.14) · #B9CDFF | 호버 / 선택 상태 |
--destructive | #DC2626 | #F87171 | 위험 액션, 오류 (다크에서 한 단계 밝게) |
--warning | #F59E0B · #B45309 | #FBBF24 | 공식 @theme inline 방식으로 확장 |
--border / --input / --ring | #E6E9F1 ×2 · #155DFC | #26304A ×2 · #6E9BFF | 스트로크 / 폼 테두리 / 포커스 링 |
--chart-1 … --chart-5 | #155DFC #0D9488 #7C5CFC #EA580C #E3B341 | #6E9BFF #2DD4BF #A78BFA #FB923C #EAC54F | = 컬러 챕터의 데이터 시각화 시퀀스 |
--sidebar（族） | #FAFBFD 族 | #0E1426 族 | 프로덕트 사이드바 전용 세트 |
--radius | 0.625rem（10px） | 0.625rem（10px） | sm 6 / md 8 / lg 10 / xl 14, 공식 파생 |
개발자 셋업 · Install & Theme공식 CLI로 컴포넌트 설치 → Omninal 테마 블록을 붙여 테마 적용
components.json + CLI
{
"style": "base-nova",
"rsc": true,
"tailwind": {
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"iconLibrary": "lucide"
}
npx shadcn@latest init
npx shadcn@latest add button badge card input select \
textarea switch checkbox radio-group tabs table \
dialog dropdown-menu tooltip alert avatar progress \
accordion breadcrumb pagination command slider \
skeleton separator kbd empty sonner공식 기본값은 색을 oklch로 표현합니다. 이 테마 블록은 등가의 hex로 작성했으며 자유롭게 혼용 가능합니다. 다크 모드는 공식 .dark 클래스로 전환합니다 — 이 사이트 헤더의 토글이 실제 사례입니다.
app/globals.css · Omninal 테마 블록
:root {
--radius: 0.625rem;
--background: #ffffff; --foreground: #181d33;
--card: #ffffff; --card-foreground: #181d33;
--popover: #ffffff; --popover-foreground: #181d33;
--primary: #155dfc; --primary-foreground: #ffffff;
--secondary: #eef1f6; --secondary-foreground: #1a2236;
--muted: #f1f4f9; --muted-foreground: #5d6478;
--accent: #e9f0ff; --accent-foreground: #15439e;
--destructive: #dc2626;
--border: #e6e9f1; --input: #e6e9f1; --ring: #155dfc;
--chart-1: #155dfc; --chart-2: #0d9488; --chart-3: #7c5cfc;
--chart-4: #ea580c; --chart-5: #e3b341;
--sidebar: #fafbfd; --sidebar-foreground: #181d33;
--sidebar-primary: #155dfc; --sidebar-primary-foreground: #ffffff;
--sidebar-accent: #e9f0ff; --sidebar-accent-foreground: #15439e;
--sidebar-border: #e6e9f1; --sidebar-ring: #155dfc;
}
.dark {
--background: #0b0f1e; --foreground: #e9edf6;
--card: #131a32; --card-foreground: #e9edf6;
--popover: #131a32; --popover-foreground: #e9edf6;
--primary: #6e9bff; --primary-foreground: #0b0f1e;
--secondary: #1c2540; --secondary-foreground: #e9edf6;
--muted: #1b2438; --muted-foreground: #8a93ad;
--accent: rgba(110,155,255,.14); --accent-foreground: #b9cdff;
--destructive: #f87171;
--border: #26304a; --input: #26304a; --ring: #6e9bff;
--chart-1: #6e9bff; --chart-2: #2dd4bf; --chart-3: #a78bfa;
--chart-4: #fb923c; --chart-5: #eac54f;
--sidebar: #0e1426; --sidebar-foreground: #e9edf6;
--sidebar-primary: #6e9bff; --sidebar-primary-foreground: #0b0f1e;
--sidebar-accent: rgba(110,155,255,.14);
--sidebar-accent-foreground: #b9cdff;
--sidebar-border: #1e2a4a; --sidebar-ring: #6e9bff;
}버튼 · Button6 변형 × 3 크기 × 상태 — 라벨은 동사로 시작해 대상을 명시합니다
변형 Variants
아이콘 · 크기 · 상태
배지 & 상태 · Badge상태 의미는 기능색 토큰을 그대로 씁니다
DefaultSecondaryOutlineDestructive정산 완료승인 대기이동 중
폼 · FormInput · Select · Textarea · Switch · Checkbox · Radio — 도움말은 숫자와 경계를 밝힙니다
건당 한도 $100,000 — 초과분은 승인으로 넘어갑니다.
탭 · 카드 · 알림Tabs · Card · Alert — 오류는 경계를 먼저, 그다음 출구, 마지막으로 자금 안전을 확인합니다
전 계좌의 가용 잔액, 이동 중 거래, 주간 변동 요약. 하나의 사실 원천, 실시간 응답.
Available Balance
전 계좌 · 실시간
$2,485,302.18
↑ 4.2% vs 지난주 · 이동 중 12건
이달 예산 72% 사용
스테이블코인 레일 활성화
USDC 정산이 국경 간 결제의 스마트 라우팅 옵션이 되었습니다.
결제가 건당 한도를 초과합니다
건당 한도는 $100,000입니다. 금액을 조정하거나 승인을 요청하세요. 자금은 이동하지 않았습니다.
토스트 · 정산 성공 영수증
결제 정산 완료
$50,000.00 → SUPPLIER-UID · USDC · 즉시
성공 영수증 = 금액 + 대상 + 레일 + 시점, 전부 대조 가능 — 영수증은 초소형 명세서입니다.
데이터 테이블 · TableAvatar / Badge / 행 액션 포함 — 금액은 우측 정렬 + tabular
| 수취인 | 레일 | 상태 | 금액 | |
|---|---|---|---|---|
| S SUPPLIER-UID | USDC · 스테이블코인 | 정산 완료 | $50,000.00 | |
| P PAYROLL-EU | EUR · SEPA | 승인 대기 | €128,400.00 | |
| A AGENT-PROC-01 | USD · 스마트 라우팅 | 이동 중 | $8,250.00 |
확장 컴포넌트 & 마이크로 인터랙션Skeleton · Empty · Kbd · 차트 토큰 · 정산 모션
Empty · 빈 상태
이동 중인 거래가 없습니다
첫 결제를 보내면 실시간 정산 진행이 여기에 표시됩니다.
Skeleton · 로딩 플레이스홀더
Kbd
⌘ K를 눌러 커맨드 팔레트 열기
차트 토큰 · --chart-1 … --chart-5
마이크로 인터랙션 · 컴포넌트 안의 정산 모티프 (상세는 04장)
전역 로딩
정산 성공
배치 페이아웃 · 이동 중settled.
다크 모드 대조하나의 컴포넌트 트리 · .dark가 토큰을 교체 — 관계는 유지, 값만 변경
Light · 라이트 모드
트레저리 오버뷰
3개 레일 · 실시간
$2,485,302.18
이동 중 12오늘 정산 47
새 결제Dark · 다크 모드
트레저리 오버뷰
3개 레일 · 실시간
$2,485,302.18
이동 중 12오늘 정산 47
새 결제킷은 레시피의 코드화입니다: 모든 컴포넌트 색은 컬러 챕터의 토큰에서 옵니다(chart-1…5 = 데이터 시각화 시퀀스, warning 3종 = 기능색 3단계). 반경은 --radius 0.625rem의 공식 파생 스케일, 간격은 타이포그래피 챕터의 8pt 체계, 포커스 링은 3px 반투명 Omninal Blue, 상태색은 시장 토큰으로 전환됩니다 — 레시피 ⑤ Product UI가 실제 UI 위에서 구동되는 모습입니다.