Sonagi 디자인 시스템 소개

Sonagi는 비 온 뒤의 맑고 깨끗한 느낌을 디자인 언어로 표현한 디자인 시스템입니다.

디자인 철학

1. 청량함 (Refreshing)

물방울처럼 투명하고 깨끗한 느낌을 시각적으로 전달합니다.

2. 일관성 (Consistency)

디자인 토큰을 통해 모든 컴포넌트가 일관된 스타일을 유지합니다.

3. 접근성 (Accessibility)

모든 사용자가 편하게 사용할 수 있도록 WCAG 2.1 기준을 준수합니다.

핵심 요소

컬러 시스템

/* Primary - 청량한 블루 */
--sonagi-color-primary: #4A90E2;

/* Surface - 부드러운 백그라운드 */
--sonagi-color-surface: #F8F9FA;

타이포그래피

• 명확한 계층 구조
• 높은 가독성
• 한글 최적화

애니메이션

물방울처럼 부드럽고 유기적인 전환 효과

컴포넌트

현재 구현된 컴포넌트:

• Button
• Input
• Card
• Badge
• Tab
• Breadcrumb

계획 중인 컴포넌트:

• Modal
• Tooltip
• Toast
• Drawer

---

자세한 내용은 Sonagi 저장소에서 확인하세요.