와이어프레임: Figma로 화면 설계

1. 랜딩 (마케팅)        - 헤드라인 + CTA + 데모
2. 회원가입/로그인       - Google OAuth + 이메일
3. 대시보드             - 통계 + 최근 작업
4. AI 생성 화면         - 입력 + 결과 (메인)
5. 히스토리             - 목록 + 검색
6. 설정 (프로필)         - 이메일·이름
7. 결제·구독            - Stripe Checkout
8. 사용량 (Usage)        - 무료 5/5 잔여
9. 도움말 / FAQ
10. 404 / 에러

1. Figma 무료 계정
2. 새 파일 → "Wireframe" 템플릿
3. Frame 크기 설정:
   - Desktop: 1440x900
   - Mobile: 375x812 (iPhone 13)
4. Auto Layout: Frame 안에 Frame 쌓기
5. Component: 버튼·인풋·카드 → 재사용

Stage 1 - Low-fi (스케치)
- 박스만, 텍스트 placeholder
- 1시간 안에 10개 완성
- 종이·iPad·Whimsical

Stage 2 - Mid-fi (Figma)
- 그레이스케일
- 실제 텍스트
- 인터랙션 표시 (화살표)

Stage 3 - Hi-fi (디자인)
- 색상·폰트·이미지
- Tailwind 토큰 매칭
- Prototype 모드 → 클릭 시뮬레이션

/* tailwind.config.ts */
colors: {
  primary: '#3b82f6',     // 메인 (CTA)
  accent: '#8b5cf6',      // 보조 (AI)
  neutral: {
    50: '#f9fafb', 100: '#f3f4f6', ..., 900: '#111827'
  },
  success: '#10b981',
  warning: '#f59e0b',
  error: '#ef4444',
}

spacing: { 1: '4px', 2: '8px', ..., 16: '64px' }
borderRadius: { sm: '4px', md: '8px', lg: '12px' }
fontSize: { xs: '12px', sm: '14px', base: '16px', ..., 4xl: '36px' }

375px (iPhone) → 768px (Tablet) → 1440px (Desktop)
- 와이어프레임 첫 화면 = 375px
- Tailwind: `sm:` `md:` `lg:` breakpoint
- Frame 좌우 16px 패딩 (모바일)

Atom    : Button, Input, Label
Molecule: SearchBar (Input + Button)
Organism: Header (Logo + Nav + Auth)
Template: DashboardLayout (Header + Sidebar + Main)
Page    : DashboardPage (Template + Real Data)

- 컴포넌트 이름 = 컴포넌트 파일명 (Button.tsx)
- 색상·폰트 토큰 = Tailwind 클래스
- Inspect 패널 → CSS 추출
- v0.dev: Figma → React 자동 변환