Foundations
Vortex UI의 디자인 토큰 (Design Tokens) 과 디자인 시스템의 기본 원칙을 소개합니다.
디자인 토큰이란?
디자인 토큰 (Design Tokens) 은 디자인 시스템의 핵심 값들을 정의하는 변수입니다. 색상, 간격, 타이포그래피, 그림자 등 디자인의 모든 요소를 일관되게 관리할 수 있습니다.
Vortex UI는 Tailwind CSS 4.0의 @theme 지시자를 사용하여 디자인 토큰을 CSS Variables로 정의하고 관리합니다.
@theme {
/* Spacing Tokens */
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
/* Color Tokens */
--color-primary-500: #2196f3;
--color-gray-100: #f5f5f5;
}제품별 디자인 토큰
Vortex UI는 Multi-Tenant 아키텍처로 각 제품마다 고유한 브랜딩을 제공합니다:
Foundation
중립적인 기본 디자인 토큰을 제공하며, 프로젝트 요구사항에 맞게 커스터마이징할 수 있습니다.
- 색상: Neutral Gray Scale 중심
- 타이포그래피: 범용적인 폰트 시스템
- 간격/그림자: 일관된 기본값
- 커스터마이징: 완전한 자유도
iCignal
iCignal 브랜드 가이드를 따르는 디자인 토큰을 제공합니다.
- Primary: Blue (#2196f3)
- Secondary: Green (#4caf50)
- Accent: Orange (#ff9800)
- 사용 사례: iCignal 제품 개발
Cals
Cals 예약 플랫폼 전용 디자인 토큰과 예약 상태별 컬러를 제공합니다.
- Primary: Pink (#e91e63)
- Secondary: Blue (#03a9f4)
- Accent: Purple (#9c27b0)
- Booking Status: 예약 상태별 전용 컬러
- 사용 사례: Cals 예약 시스템 개발
Foundations 카테고리
각 제품의 디자인 토큰은 다음 카테고리로 구성됩니다:
1. Colors (색상)
Primary, Secondary, Accent, Neutral, Semantic 컬러 시스템
2. Typography (타이포그래피)
Font Size, Font Weight, Line Height, Font Family
3. Spacing (간격)
Padding, Margin, Gap 등에 사용되는 간격 시스템
4. Shadows (그림자)
Box Shadow, Text Shadow 등 그림자 효과
5. Borders (테두리)
Border Width, Border Radius, Border Color
6. Breakpoints (반응형 브레이크포인트)
Mobile, Tablet, Desktop 반응형 디자인 기준
7. Icons (아이콘)
아이콘 시스템 및 사용 가이드
8. Animations (애니메이션)
Transition, Duration, Easing 애니메이션 설정
9. Accessibility (접근성)
색상 대비, 키보드 네비게이션, 스크린 리더 지원
10. Dark Mode (다크 모드)
다크 모드 지원 현황 및 로드맵
디자인 토큰 사용하기
CSS Variables로 사용
.my-component {
padding: var(--spacing-md);
color: var(--color-primary-500);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}Tailwind Utility Classes로 사용
<div className="p-md text-primary-500 rounded-md shadow-sm">Content</div>TypeScript/TSX에서 사용
import { Button } from "@vortex/ui-foundation";
export default function MyComponent() {
return (
<Button variant="primary" size="md">
Click me
</Button>
);
}일관성의 중요성
디자인 토큰을 사용하면 다음과 같은 이점이 있습니다:
- ✅ 일관성: 모든 컴포넌트가 동일한 디자인 언어 사용
- ✅ 유지보수성: 한 곳에서 값을 변경하면 전체에 반영
- ✅ 확장성: 새로운 컴포넌트 추가 시 기존 토큰 재사용
- ✅ 협업: 디자이너와 개발자가 동일한 토큰 참조
- ✅ 접근성: WCAG 기준을 준수하는 색상 대비 보장
다음 단계
원하는 제품의 디자인 토큰 문서를 확인하세요: