UI/UX 디자인 원칙, 테마, 애니메이션 가이드
"Premium & Trustworthy" 금융 서비스에 걸맞은 신뢰감 있는 디자인과 현대적인 마이크로 인터랙션을 결합하여 최상의 사용자 경험을 제공한다.
우리는 Shadcn UI의 CSS 변수 시스템을 사용하며, HSL 색상 공간을 기반으로 한다. (사용자가 요청한 임의의 테마: "Deep Ocean" - 신뢰, 안정, 깊이감)
| Token | Light Mode (값) | Dark Mode (값) | 설명 |
|---|---|---|---|
| Primary | 220 50% 20% (Deep Navy) | 210 100% 65% (Electric Blue) | 주요 액션, 활성 상태, 브랜드 컬러 |
| Background | 210 20% 98% (Ice White) | (Deep Space) |
222 47% 11%| 앱 배경색 |
| Surface | 0 0% 100% (Pure White) | 217 33% 17% (Slate Gray) | 카드, 모달 등 컨테이너 배경 |
| Destructive | 0 84% 60% (Soft Red) | 0 62% 30% (Muted Red) | 위험, 삭제, 부정적 상태 |
| Muted | 210 40% 96% | 217 33% 17% | 비활성 요소, 보조 배경 |
| Accent | 210 40% 96% | 217 33% 17% | 호버 효과, 강조 배경 |
Family: Inter (Google Fonts)
가독성과 모던함을 최우선으로 한다.
| Role | Class | Specs | Usage |
|---|---|---|---|
| Display | font-bold text-3xl tracking-tight | 30px / 700 / -0.02em | 메인 페이지 헤드라인 |
| Heading | font-semibold text-xl tracking-tight | 20px / 600 / -0.01em | 섹션 제목, 카드 타이틀 |
| Body | text-base text-foreground | 16px / 400 / Normal | 일반 본문 텍스트 |
| Label | text-sm font-medium text-muted-foreground | 14px / 500 / Normal | 폼 라벨, 보조 텍스트 |
| Code | font-mono text-sm | 14px / 400 / Normal | 티커 기호, 수치 데이터 |
rounded-xl (12px 이상 권장)shadow-md (부드러운 깊이감)border border-border/50 (아주 얇고 투명한 테두리)h-10 or h-12 (터치 타겟 확보)ring-2 ring-primary/20 (부드러운 글로우 효과)transition-all duration-200rounded-lg (8px-10px)active:scale-95 (클릭 시 미세한 축소 효과)bg-primary 사용)rgba(197, 203, 206, 0.2) (매우 연한 그리드, 데이터 방해 금지)lineColor는 Primary 컬러와 일치시킬 것.transparent) 처리하여 컨테이어 색상과 조화.framer-motion을 사용하여 자연스러운 흐름을 만듭니다.
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: "easeOut" }}
>
0.1s 간격1.5s (너무 빠르지 않은 은은한 펄스)bg-mutedfocus-visible 스타일을 가져야 함.Select 또는 aria-label 속성 포함.