170 lines
6.0 KiB
Markdown
170 lines
6.0 KiB
Markdown
# WING 디자인 시스템
|
||
|
||
해양 환경 위기대응 통합 솔루션 **WING**의 디자인 시스템.
|
||
|
||
---
|
||
|
||
## 브랜드 (Brand)
|
||
|
||
### 로고
|
||
|
||
해양에서 발생하는 상황을 종합적으로 지원하는 솔루션 WING의 로고.
|
||
|
||
- **파일**: `frontend/public/wing_logo_white.svg`
|
||
- **네이티브 크기**: 280 × 20px (비율 14:1)
|
||
- **색상**: 단색 흰색 (다크 배경 전용)
|
||
|
||
#### 로고 규격
|
||
|
||
| 용도 | 높이 | Tailwind | 비고 |
|
||
|------|------|----------|------|
|
||
| Header | 14px | `h-3.5` | TopBar 52px 높이 내 사용 (현재) |
|
||
| Standard | 24px | `h-6` | 일반 UI, 문서 내 |
|
||
| Large | 32px | `h-8` | 로그인, 랜딩 화면 |
|
||
| **Minimum** | **14px** | `h-3.5` | 이보다 작게 사용 금지 |
|
||
|
||
#### 여백 규칙 (Clear Space)
|
||
|
||
- 최소 여백: 로고 높이의 **50%** (상하좌우)
|
||
- 로고 주변에 다른 텍스트나 아이콘이 침범하지 않도록 유지
|
||
|
||
---
|
||
|
||
## 파운데이션 (Foundations)
|
||
|
||
### 브랜드 컬러 (Brand Color)
|
||
|
||
현재 다크 테마만 구현되어 있으며, 라이트 팔레트는 향후 전환용으로 정의해 둔다.
|
||
|
||
> **현재 상태**: 다크 테마 단일 고정 (테마 전환 인프라 미구축)
|
||
|
||
#### 배경 (Background)
|
||
|
||
| CSS 변수 | Dark | Light | 용도 |
|
||
|----------|------|-------|------|
|
||
| `--bg0` | `#0a0e1a` | `#ffffff` | 최하위 배경 (body, input) |
|
||
| `--bg1` | `#0f1524` | `#f8f9fb` | 패널, 모달, 푸터 배경 |
|
||
| `--bg2` | `#121929` | `#f0f2f5` | 테이블 헤더, elevated 영역 |
|
||
| `--bg3` | `#1a2236` | `#e8ebf0` | 카드, 보조 버튼, 비활성 요소 |
|
||
| `--bgH` | `#1e2844` | `#dde1e8` | 행 hover |
|
||
|
||
#### 텍스트 (Text)
|
||
|
||
| CSS 변수 | Dark | Light | 용도 |
|
||
|----------|------|-------|------|
|
||
| `--t1` | `#edf0f7` | `#1a1d26` | 주 텍스트 (제목, 본문) |
|
||
| `--t2` | `#b0b8cc` | `#4a5568` | 보조 텍스트 (라벨, 설명) |
|
||
| `--t3` | `#8690a6` | `#8690a6` | 비활성/메타 — 양 테마 공유 |
|
||
|
||
#### Accent Color
|
||
|
||
| CSS 변수 | Dark | Light | 용도 |
|
||
|----------|------|-------|------|
|
||
| `--cyan` | `#06b6d4` | `#0891b2` | 주 강조색 — 활성 상태, 링크, CTA |
|
||
| `--blue` | `#3b82f6` | `#2563eb` | 보조 강조색 — 그라데이션 끝점 |
|
||
| **Gradient** | `linear-gradient(135deg, #06b6d4, #3b82f6)` | `linear-gradient(135deg, #0891b2, #2563eb)` | Primary 버튼 |
|
||
|
||
> 라이트 테마에서 강조색을 한 단계 진하게 적용하여 흰 배경 위 가독성을 확보한다.
|
||
|
||
> **보조 컬러 검토**: 필요에 따라 시맨틱 컬러(red `#ef4444`, orange `#f97316`, yellow `#eab308`, green `#22c55e`, purple `#a855f7`)를 보조 컬러로 추가 검토 예정.
|
||
|
||
---
|
||
|
||
### 타이포그래피 (Typography)
|
||
|
||
#### 폰트 패밀리
|
||
|
||
| 토큰 | CSS 변수 | 폰트 | 용도 |
|
||
|------|----------|------|------|
|
||
| `font-sans` | — | Outfit, Noto Sans KR, sans-serif | 기본 UI (body) |
|
||
| `font-korean` | `--fK` | Noto Sans KR, sans-serif | 한글 강조 |
|
||
| `font-mono` | `--fM` | JetBrains Mono, monospace | 수치, 코드 |
|
||
|
||
#### 폰트 스케일
|
||
|
||
| 클래스 | 크기 | Line Height | Weight | 용도 |
|
||
|--------|------|-------------|--------|------|
|
||
| `text-wing-meta` | 9px | 1.4 | 400 | 메타 텍스트, 날짜, 부가 정보 |
|
||
| `text-wing-caption` | 10px | 1.4 | 400 | 캡션, 설명, 라벨 부연 |
|
||
| `text-wing-body` | 11px | 1.5 | 400 | 본문, 라벨, 값 (가장 많이 사용) |
|
||
| `text-wing-heading` | 13px | 1.4 | 700 | 섹션 헤더 |
|
||
| `text-wing-title` | 15px | 1.3 | 700 | 페이지/모달 타이틀 |
|
||
|
||
> 11px(`text-wing-body`)이 기본 본문 크기. 정보 밀도가 높은 운영 시스템 특성에 맞춘 compact 설계.
|
||
|
||
---
|
||
|
||
### 아이콘 (Icons)
|
||
|
||
- **라이브러리**: `lucide-react` (^0.564.0)
|
||
- **스타일**: Stroke 기반, 일관된 2px 선 두께
|
||
|
||
| 크기 | px | 용도 |
|
||
|------|-----|------|
|
||
| Small | 16px | 인라인 텍스트, 버튼 내부 |
|
||
| Default | 18px | 일반 UI 아이콘 |
|
||
| Large | 20px | 강조, 헤더 영역 |
|
||
|
||
```tsx
|
||
import { Search, ChevronDown, X } from 'lucide-react';
|
||
|
||
<Search size={16} /> {/* 인라인 */}
|
||
<ChevronDown size={18} /> {/* 일반 */}
|
||
<X size={20} /> {/* 강조 */}
|
||
```
|
||
|
||
---
|
||
|
||
### 간격 (Spacing)
|
||
|
||
4px 그리드 기반. Tailwind 유틸리티 클래스 사용.
|
||
|
||
| 토큰 | 값 | Tailwind | 주요 사용처 |
|
||
|------|-----|----------|------------|
|
||
| `spacing-1` | 4px | `p-1`, `gap-1` | 최소 간격, 아이콘-텍스트 |
|
||
| `spacing-1.5` | 6px | `py-1.5`, `gap-1.5` | 인풋 수직 패딩, 버튼 수직 패딩 |
|
||
| `spacing-2` | 8px | `p-2`, `gap-2` | 테이블 셀, 버튼 그룹 간격 |
|
||
| `spacing-3` | 12px | `p-3`, `gap-3` | 소형 카드 패딩 |
|
||
| `spacing-4` | 16px | `p-4`, `gap-4` | 카드/섹션 패딩 |
|
||
| `spacing-5` | 20px | `px-5` | 헤더/모달 수평 패딩 |
|
||
|
||
---
|
||
|
||
### 테두리 (Border)
|
||
|
||
#### 색상
|
||
|
||
| CSS 변수 | Dark | Light | 용도 |
|
||
|----------|------|-------|------|
|
||
| `--bd` | `#1e2a42` | `#d0d5dd` | 기본 구분선 |
|
||
| `--bdL` | `#2a3a5c` | `#e0e4ea` | 밝은 테두리 |
|
||
|
||
#### Radius
|
||
|
||
| 토큰 | 값 | Tailwind | 용도 |
|
||
|------|-----|----------|------|
|
||
| `radius-xs` | 4px | `rounded` | 배지, 최소 요소 |
|
||
| `radius-sm` | 6px | `rounded-sm` | 버튼, 인풋, 소형 카드 (가장 많이 사용) |
|
||
| `radius-md` | 10px | `rounded-md` | 카드, 섹션 |
|
||
| `radius-lg` | 12px | `rounded-xl` | 모달 |
|
||
|
||
> `rounded-sm`(6px)이 프로젝트 전반에서 지배적인 기본 반경값.
|
||
|
||
---
|
||
|
||
### 단위 체계 (Units)
|
||
|
||
> **현재 상태**: px 기반 단일 체계
|
||
> **향후 방향**: rem 전환 검토 (접근성/반응성 고려)
|
||
|
||
| 영역 | 현재 단위 | 비고 |
|
||
|------|-----------|------|
|
||
| font-size | px | `9px`~`15px`, Tailwind arbitrary `text-[11px]` |
|
||
| spacing/padding | px | raw CSS `6px 10px` 등 |
|
||
| layout 치수 | px | 패널 280~340px, 모달 400~720px |
|
||
| border-radius | px | `6px`, `10px`, `12px` |
|
||
| html font-size | 미설정 | rem 기준점 없음 (브라우저 기본 16px) |
|
||
|
||
- Tailwind 기본 유틸리티(`px-5`, `text-sm` 등)는 내부적으로 rem을 사용하나, 이는 의도적 설계가 아닌 Tailwind 부산물
|
||
- rem 전환 시 로드맵: `html { font-size }` 기준 설정 → Tailwind config rem 토큰 → wing.css 점진적 전환
|