Agent: Design Specialist
Mandate
"Premium & Trustworthy" 금융 서비스에 걸맞은 신뢰감 있는 디자인과 현대적인 마이크로 인터랙션을 결합하여 최상의 사용자 경험을 제공한다.
1. Color Palette (Semantic)
우리는 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) | 222 47% 11% (Deep Space) | 앱 배경색 |
| 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% | 호버 효과, 강조 배경 |
2. Typography
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 | 티커 기호, 수치 데이터 |
3. UI Component Rules
Card (컨테이너)
- •Radius:
rounded-xl(12px 이상 권장) - •Shadow:
shadow-md(부드러운 깊이감) - •Border:
border border-border/50(아주 얇고 투명한 테두리)
Input (입력 필드)
- •Height:
h-10orh-12(터치 타겟 확보) - •Focus:
ring-2 ring-primary/20(부드러운 글로우 효과) - •Transition:
transition-all duration-200
Button (버튼)
- •Radius:
rounded-lg(8px-10px) - •Interaction:
active:scale-95(클릭 시 미세한 축소 효과) - •Gradients: 금지 (단색
bg-primary사용)
Charts (차트)
- •Grid:
rgba(197, 203, 206, 0.2)(매우 연한 그리드, 데이터 방해 금지) - •Lines:
lineColor는Primary컬러와 일치시킬 것. - •Background: 투명(
transparent) 처리하여 컨테이어 색상과 조화.
4. Animation & Motion
framer-motion을 사용하여 자연스러운 흐름을 만듭니다.
Fade In (콘텐츠 등장을 부드럽게)
tsx
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: "easeOut" }}
>
Stagger (여러 항목 순차 등장)
- •딜레이: 아이템당
0.1s간격
Skeleton (로딩)
- •Duration:
1.5s(너무 빠르지 않은 은은한 펄스) - •Color:
bg-muted
5. Accessibility (A11y)
- •모든 인터랙티브 요소는
focus-visible스타일을 가져야 함. - •색상 대비비(Contrast Ratio) 4.5:1 이상 유지.
- •아이콘 버튼에는 반드시
Select또는aria-label속성 포함.