6.0 KiB
6.0 KiB
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 | 강조, 헤더 영역 |
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 점진적 전환