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 |
