gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동
d8a5acc1e6
wing-ops/docs/DESIGN-SYSTEM.md

234 lines
8.7 KiB
Markdown
Raw Blame 히스토리

# WING-OPS 디자인 시스템
## 개요
WING-OPS UI 디자인 시스템의 비주얼 레퍼런스 카탈로그.
## Foundations
### 색상 (Color Palette)
#### Primitive Colors
UI 전반에서 사용하는 기본 색조 팔레트. Navy는 배경 전용 5단계, 나머지는 00~100의 11단계 스케일.
**Navy** (배경 전용)
| Step | Hex |
|------|-----|
| 0 | `#0a0e1a` |
| 1 | `#0f1524` |
| 2 | `#121929` |
| 3 | `#1a2236` |
| hover | `#1e2844` |
**Cyan**
| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
|----|----|----|----|----|----|----|----|----|----|----|
| `#ecfeff` | `#cffafe` | `#a5f3fc` | `#67e8f9` | `#22d3ee` | `#06b6d4` | `#0891b2` | `#0e7490` | `#155e75` | `#164e63` | `#083344` |
**Blue**
| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
|----|----|----|----|----|----|----|----|----|----|----|
| `#eff6ff` | `#dbeafe` | `#bfdbfe` | `#93c5fd` | `#60a5fa` | `#3b82f6` | `#2563eb` | `#1d4ed8` | `#1e40af` | `#1e3a8a` | `#172554` |
**Red**
| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
|----|----|----|----|----|----|----|----|----|----|----|
| `#fef2f2` | `#fee2e2` | `#fecaca` | `#fca5a5` | `#f87171` | `#ef4444` | `#dc2626` | `#b91c1c` | `#991b1b` | `#7f1d1d` | `#450a0a` |
**Green**
| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
|----|----|----|----|----|----|----|----|----|----|----|
| `#f0fdf4` | `#dcfce7` | `#bbf7d0` | `#86efac` | `#4ade80` | `#22c55e` | `#16a34a` | `#15803d` | `#166534` | `#14532d` | `#052e16` |
**Orange**
| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
|----|----|----|----|----|----|----|----|----|----|----|
| `#fff7ed` | `#ffedd5` | `#fed7aa` | `#fdba74` | `#fb923c` | `#f97316` | `#ea580c` | `#c2410c` | `#9a3412` | `#7c2d12` | `#431407` |
**Yellow**
| 00 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
|----|----|----|----|----|----|----|----|----|----|----|
| `#fefce8` | `#fef9c3` | `#fef08a` | `#fde047` | `#facc15` | `#eab308` | `#ca8a04` | `#a16207` | `#854d0e` | `#713f12` | `#422006` |
#### Semantic Colors
컨텍스트에 따라 의미를 부여한 토큰. Dark/Light 두 테마 값 병기.
**Text**
| 토큰 | Dark | Light | 용도 |
|------|------|-------|------|
| `text-1` | `#edf0f7` | `#0f172a` | 기본 텍스트, 아이콘 기본 |
| `text-2` | `#c0c8dc` | `#475569` | 보조 텍스트 |
| `text-3` | `#9ba3b8` | `#94a3b8` | 비활성, 플레이스홀더 |
> **TODO: 텍스트 토큰 시맨틱 리네이밍**
>
> Tailwind config의 `colors.text` 키를 `colors.color`로 변경하여 클래스명을 직관적으로 개선한다.
>
> | 현재 | 변경 후 | 용도 |
> |------|---------|------|
> | `text-text-1` | `text-color` (DEFAULT) | 기본 텍스트 |
> | `text-text-2` | `text-color-sub` | 보조 텍스트 |
> | `text-text-3` | `text-color-disabled` | 비활성, 플레이스홀더 |
>
> - 영향 범위: 96개 파일, 2,685회 참조
> - CSS 변수(`--t1/2/3`)도 `--color-default/sub/disabled`로 동기화
> - 기계적 find-and-replace로 처리 가능
**Background**
| 토큰 | Dark | Light | 용도 |
|------|------|-------|------|
| `bg-0` | `#0a0e1a` | `#f8fafc` | 페이지 배경 |
| `bg-1` | `#0f1524` | `#ffffff` | 사이드바, 패널 |
| `bg-2` | `#121929` | `#f1f5f9` | 테이블 헤더 |
| `bg-3` | `#1a2236` | `#e2e8f0` | 카드 배경 |
| `bg-hover` | `#1e2844` | `#cbd5e1` | 호버 상태 |
**Border**
| 토큰 | Dark | Light | 용도 |
|------|------|-------|------|
| `border` | `#1e2a42` | `#cbd5e1` | 기본 구분선 |
| `border-light` | `#2a3a5c` | `#e2e8f0` | 연한 구분선 |
**Accent**
| 토큰 | Dark | Light | 용도 |
|------|------|-------|------|
| `primary-cyan` | `#06b6d4` | `#06b6d4` | 주요 강조, 활성 상태 |
| `primary-blue` | `#3b82f6` | `#0891b2` | 보조 강조 |
| `primary-purple` | `#a855f7` | `#6366f1` | 3차 강조 |
**Status**
| 토큰 | Dark | Light | 용도 |
|------|------|-------|------|
| `status-red` | `#ef4444` | `#dc2626` | 위험, 삭제 |
| `status-orange` | `#f97316` | `#c2410c` | 주의 |
| `status-yellow` | `#eab308` | `#b45309` | 경고 |
| `status-green` | `#22c55e` | `#047857` | 정상, 성공 |
---
### 타이포그래피 (Typography)
#### Font Family
| 이름 | className | Font Stack | 용도 |
|------|-----------|------------|------|
| PretendardGOV | `font-korean` | `'PretendardGOV', sans-serif` | 기본 UI 텍스트, 한국어/영문 콘텐츠 전반 |
| PretendardGOV | `font-mono` | `'PretendardGOV', sans-serif` | 좌표, 수치, 데이터 값 |
| PretendardGOV | `font-sans` | `'PretendardGOV', sans-serif` | body 기본 폰트 |
> Body 기본 스택: `font-family: 'PretendardGOV', sans-serif`
#### Typography Tokens (`.wing-*` 클래스)
| 클래스 | Size | Font | Weight | 용도 | 샘플 |
|--------|------|------|--------|------|------|
| `.wing-title` | 15px | font-korean | Bold (700) | 패널 제목 | 확산 예측 시뮬레이션 |
| `.wing-section-header` | 13px | font-korean | Bold (700) | 섹션 헤더 | 기본 정보 입력 |
| `.wing-label` | 11px | font-korean | Semibold (600) | 필드 레이블 | 유출량 (kL) |
| `.wing-btn` | 11px | font-korean | Semibold (600) | 버튼 텍스트 | 시뮬레이션 실행 |
| `.wing-value` | 11px | font-mono | Semibold (600) | 수치 / 데이터 값 | 35.1284° N, 129.0598° E |
| `.wing-input` | 11px | font-korean | Normal (400) | 입력 필드 | 서해 대산항 인근 해역 |
| `.wing-section-desc` | 10px | font-korean | Normal (400) | 섹션 설명 | 예측 결과는 기상 조건에 따라... |
| `.wing-subtitle` | 10px | font-korean | Normal (400) | 보조 설명 | 최근 업데이트: 2026-03-24 09:00 KST |
| `.wing-meta` | 9px | font-korean | Normal (400) | 메타 정보 | v2.1 \| 해양환경공단 |
| `.wing-badge` | 9px | font-korean | Bold (700) | 뱃지 / 태그 | 진행중 |
---
### Border Radius
#### Radius Tokens
| Tailwind 클래스 | 값 | 비고 |
|-----------------|-----|------|
| `rounded-sm` | 6px | **Custom** (Tailwind 기본값 오버라이드) |
| `rounded` | 4px (0.25rem) | Tailwind 기본 |
| `rounded-md` | 10px | **Custom** (Tailwind 기본값 오버라이드) |
| `rounded-lg` | 8px (0.5rem) | Tailwind 기본 |
| `rounded-xl` | 12px (0.75rem) | Tailwind 기본 |
| `rounded-2xl` | 16px (1rem) | Tailwind 기본 |
| `rounded-full` | 9999px | Tailwind 기본 |
#### 컴포넌트 매핑
| Radius | 값 | 적용 컴포넌트 |
|--------|-----|-------------|
| `rounded-sm` | 6px | `.wing-btn`, `.wing-input`, `.wing-card-sm` |
| `rounded` | 4px | `.wing-badge` |
| `rounded-md` | 10px | `.wing-card`, `.wing-section`, `.wing-tab` |
| `rounded-lg` | 8px | `.wing-tab-bar` |
| `rounded-xl` | 12px | `.wing-modal` |
---
### 레이아웃 (Layout)
#### Breakpoints
| Name | Prefix | Min Width | 사용 | 비고 |
|------|--------|-----------|------|------|
| sm | `sm:` | 640px | - | |
| md | `md:` | 768px | - | |
| lg | `lg:` | 1024px | - | |
| xl | `xl:` | 1280px | **사용 중** | TopBar 탭 레이블/아이콘 토글 |
| 2xl | `2xl:` | 1536px | - | |
> Desktop(≥ 1280px)만 지원. Tablet/Mobile 미지원.
| Device | Width | Columns | Gutter | Margin |
|--------|-------|---------|--------|--------|
| Desktop | ≥ 1280px | flex 기반 가변 | gap-2 ~ gap-6 | px-5 ~ px-8 |
| Tablet | 768px ~ 1279px | - | - | - |
| Mobile | < 768px | - | - | - |
#### Spacing Scale
| Scale | rem | px | 용도 |
|-------|-----|----|------|
| 0.5 | 0.125rem | 2px | 미세 간격 |
| 1 | 0.25rem | 4px | 최소 간격 (gap-1) |
| 1.5 | 0.375rem | 6px | 컴팩트 간격 (gap-1.5) |
| 2 | 0.5rem | 8px | 기본 간격 (gap-2, p-2) |
| 2.5 | 0.625rem | 10px | 중간 간격 |
| 3 | 0.75rem | 12px | 표준 간격 (gap-3, p-3) |
| 4 | 1rem | 16px | 넓은 간격 (p-4, gap-4) |
| 5 | 1.25rem | 20px | 패널 패딩 (px-5, py-5) |
| 6 | 1.5rem | 24px | 섹션 간격 (gap-6, p-6) |
| 8 | 2rem | 32px | 큰 간격 (px-8, gap-8) |
| 16 | 4rem | 64px | 최대 간격 |
#### Z-Index Layers
| Layer | z-index | Color | 설명 |
|-------|---------|-------|------|
| Tooltip | 60 | `#a855f7` | 툴팁, 드롭다운 메뉴 |
| Popup | 50 | `#f97316` | 팝업, 지도 오버레이 |
| Modal | 40 | `#ef4444` | 모달 다이얼로그, 백드롭 |
| TopBar | 30 | `#3b82f6` | 상단 네비게이션 바 |
| Sidebar | 20 | `#06b6d4` | 사이드바, 패널 |
| Content | 10 | `#22c55e` | 메인 콘텐츠 영역 |
| Base | 0 | `#8690a6` | 기본 레이어, 배경 |
#### App Shell Classes
| 클래스 | 역할 | Tailwind 스타일 |
|--------|------|----------------|
| `.wing-panel` | 탭 콘텐츠 패널 | `flex flex-col h-full overflow-hidden` |
| `.wing-panel-scroll` | 패널 내 스크롤 영역 | `flex-1 overflow-y-auto` |
| `.wing-header-bar` | 패널 헤더 | `flex items-center justify-between shrink-0 px-5 border-b` |
| `.wing-sidebar` | 사이드바 | `flex flex-col border-r border-border` |
Reference in New Issue View Git Blame Copy Permalink