## 98. 디자인-개발 핸드오프 문서 ``` Create a comprehensive design-to-development handoff document: **Document Structure**: ``` 📄 Design Handoff: [Feature Name] ├── 1. Overview ├── 2. Design Specifications ├── 3. Component Breakdown ├── 4. Responsive Behavior ├── 5. Interactive States ├── 6. Animations ├── 7. Assets ├── 8. Accessibility └── 9. Edge Cases ``` **1. Overview Section**: ```markdown # Homepage Hero Redesign ## Summary Redesigned hero section with new gradient background, updated typography, and improved CTA visibility. ## Links - Design File: [Pencil.dev/Figma Link] - Prototype: [Interactive Prototype Link] - Related Ticket: JIRA-1234 - Design System: [Storybook Link] ## Team - Designer: @designer-name - Developer: @developer-name - Due Date: Feb 15, 2026 - Status: Ready for Development ``` **2. Design Specifications**: ```markdown ## Layout ### Container - Max-width: 1280px - Padding: 0 32px (desktop), 0 16px (mobile) - Background: Linear gradient 135deg, #667eea → #764ba2 ### Grid - Desktop: 12 columns, 24px gutter - Content area: 6 columns left, 6 columns right - Mobile: Single column, stacked ### Spacing - Section padding: 96px top/bottom (desktop), 64px (mobile) - Content gap: 48px between text and image - Element spacing: See spacing diagram below ## Typography | Element | Font | Size | Weight | Line Height | Color | |------------|-------------|------|--------|-------------|---------| | Headline | Inter | 56px | 700 | 1.1 | #FFFFFF | | Subhead | Inter | 20px | 400 | 1.6 | #E2E8F0 | | CTA Text | Inter | 16px | 600 | 1.0 | #FFFFFF | ## Colors - Background gradient: #667eea → #764ba2 - Primary text: #FFFFFF - Secondary text: #E2E8F0 (slate-200) - CTA button: #FFFFFF bg, #667eea text - CTA hover: #F1F5F9 bg ``` **3. Component Breakdown**: ```markdown ## Components Used ### 1. Hero Container - Full-width wrapper - Gradient background - Min-height: 600px ### 2. Headline (existing: Typography/Heading) - Variant: h1 - Color: white - Props: { level: 1, color: 'white' } ### 3. CTA Button (existing: Button) - Variant: primary-inverted - Size: lg - Props: { variant: 'primary-inverted', size: 'lg' } ### 4. Hero Image (new component) - Floating illustration - Dimensions: 480x480px - Animation: Float up/down 6s ease-in-out infinite ``` **4. Responsive Behavior**: ```markdown ## Breakpoints ### Desktop (≥1024px) - Two-column layout (50/50) - Headline: 56px - Full illustration visible ### Tablet (768px - 1023px) - Two-column layout (60/40) - Headline: 48px - Illustration slightly smaller ### Mobile (<768px) - Single column, stacked - Headline: 36px - Image above text (order reversed) - CTA full-width ## Responsive Diagram ┌─────────────────────────────────────┐ │ Desktop (≥1024px) │ │ ┌───────────┬───────────┐ │ │ │ Text │ Image │ │ │ │ Block │ Block │ │ │ └───────────┴───────────┘ │ └─────────────────────────────────────┘ ┌─────────────────────────────────────┐ │ Mobile (<768px) │ │ ┌───────────────────────┐ │ │ │ Image │ │ │ ├───────────────────────┤ │ │ │ Text │ │ │ │ Block │ │ │ │ [Full CTA] │ │ │ └───────────────────────┘ │ └─────────────────────────────────────┘ ``` **5. Interactive States**: ```markdown ## Button States | State | ... (내용이 길어 일부만 표시됩니다)