Pencil.dev 프로페셔널 프론트엔드 디자인 프롬프트 100선
사용법: 각 프롬프트를 Pencil.dev 캔버스에서 스케치한 후, Cursor AI에 해당 프롬프트를 입력하여 production-ready 코드를 생성합니다.
섹션 1: UI/UX 기본 컴포넌트 (1-20)

1. 랜딩 페이지 히어로 섹션

Design a hero section with the following specifications:

**Layout**: Full-viewport height (100vh), centered content with asymmetric grid (60/40 split)
**Typography**: 
  - Headline: 56px/64px line-height, font-weight 700, letter-spacing -0.02em
  - Subheadline: 20px/32px, font-weight 400, max-width 540px
**Visual Elements**:
  - Gradient mesh background (subtle purple to blue, 15% opacity)
  - Floating 3D illustration on right (preserve space: 480x480px)
  - Animated gradient orb behind CTA (blur: 120px)
**CTA Buttons**:
  - Primary: 16px padding-y, 32px padding-x, 8px border-radius, filled
  - Secondary: Ghost style with 2px border, same dimensions
**Responsive**: Stack vertically at 768px breakpoint, reduce headline to 40px
**Animation**: Fade-up on scroll (stagger: 100ms between elements)

Tech: React + Tailwind CSS + Framer Motion

2. 반응형 네비게이션 바

Create a responsive navigation bar component:

**Desktop (>1024px)**:
  - Height: 72px, max-width: 1280px centered
  - Logo: Left-aligned, 32px height, clickable to home
  - Nav links: Center-aligned, 16px font, 600 weight, 32px gap
  - Hover state: Underline animation (expand from center, 2px height, 200ms ease)
  - CTA button: Right-aligned, primary style

**Scroll Behavior**:
  - Sticky positioning with backdrop-blur(12px) on scroll
  - Background: rgba(255,255,255,0.8) when scrolled
  - Subtle box-shadow: 0 1px 3px rgba(0,0,0,0.1)

**Mobile (<1024px)**:
  - Hamburger icon: 24px, 3 lines with 6px gap
  - Full-screen overlay menu on toggle
  - Menu animation: Slide from right (300ms cubic-bezier)
  - Nav links: 24px font, stacked, 24px gap

**Accessibility**: 
  - aria-expanded on hamburger
  - Focus-visible outlines (2px offset)
  - Escape key closes mobile menu

Tech: React + Tailwind + Headless UI

cubic-bezier 이란, 커브 비어셔 함수를 말합니다. 커브 비어셔 함수는 애니메이션의 속도를 조절하는 함수를 말합니다.

3. 푸터 컴포넌트

Design a comprehensive footer component:

**Structure** (4-column grid on desktop):
  - Column 1: Logo + company description (max 280px) + social icons
  - Column 2-3: Link groups (Product, Company, Resources, Legal)
  - Column 4: Newsletter signup form

**Styling**:
  - Background: slate-900 (#0f172a)
  - Text: slate-400 for body, white for headings
  - Link hover: white with 150ms transition
  - Social icons: 20px, 16px gap, hover scale(1.1)

**Newsletter Form**:
  - Input + button inline on desktop
  - Input: dark background, subtle border, white text
  - Button: Primary accent color, "Subscribe" text
  - Success/error states with icon feedback

**Bottom Bar**:
  - Border-top: 1px slate-800
  - Copyright left, legal links right
  - Responsive: stack at 640px

**Responsive Grid**:
  - Desktop: 4 columns
  - Tablet: 2x2 grid
  - Mobile: single column, accordion for link groups

Tech: React + Tailwind CSS

4. 모바일 햄버거 메뉴

Create an animated hamburger menu with full-screen navigation:

**Hamburger Icon**:
  - Size: 24x18px tap target: 44x44px (accessibility)
  - 3 horizontal lines: 2px height, 24px width, 6px gap
  - Animation to X: top/bottom rotate ±45deg, middle fade out
  - Transition: 300ms cubic-bezier(0.4, 0, 0.2, 1)

**Overlay Menu**:
  - Full viewport coverage with backdrop
  - Background: white or brand dark color
  - Entry animation: clipPath circle expand from hamburger position
  - Exit: reverse animation

**Menu Content**:
  - Nav links: 32px font, bold, stacked center
  - Stagger animation: 50ms delay between items
  - Each link slides up + fades in
  - Active state: accent color underline

**Interaction**:
  - Body scroll lock when open
  - Click outside or X to close
  - Escape key support
  - Focus trap within menu

Tech: React + Framer Motion + @headlessui/react

5. 카드 컴포넌트 그리드

Design a responsive card grid system:

**Card Component**:
  - Aspect ratio: 4:3 image container (object-fit: cover)
  - Padding: 24px content area
  - Border-radius: 12px
  - Background: white
  - Shadow: 0 1px 3px rgba(0,0,0,0.1)
  - Hover: translateY(-4px) + shadow elevation increase

**Card Content Structure**:
  - Category tag: 12px, uppercase, tracking-wide, accent color
  - Title: 18px/24px, font-weight 600, 2-line clamp
  - Description: 14px/20px, slate-600, 3-line clamp
  - Meta footer: Author avatar (32px) + name + date

**Grid Layout**:
  - Desktop: 3 columns, 32px gap
  - Tablet: 2 columns, 24px gap  
  - Mobile: 1 column, 16px gap
  - Max-width container: 1200px

**Loading State**:
  - Skeleton with shimmer animation
  - Preserve exact dimensions

Tech: React + Tailwind CSS + CSS Grid

- Skeleton with shimmer animation 
이란, 카드가 로딩되는 동안 화면에 흐릿한 카드 이미지를 보여주는 것을 말합니다. shimmer animation 은 카드가 로딩되는 동안 화면에 흐릿한 카드 이미지를 보여주는 애니메이션을 말합니다.


6. 버튼 시스템

Create a comprehensive button component system:

**Size Variants**:
  - xs: 28px height, 12px padding-x, 12px font
  - sm: 32px height, 14px padding-x, 13px font
  - md: 40px height, 20px padding-x, 14px font
  - lg: 48px height, 28px padding-x, 16px font
  - xl: 56px height, 36px padding-x, 18px font

**Style Variants**:
  - Primary: Brand color fill, white text
  - Secondary: Gray-100 fill, gray-900 text
  - Outline: 2px border, transparent fill
  - Ghost: No border, hover background
  - Destructive: Red-600 fill for dangerous actions
  - Link: Underline style, inline display

**States** (for each variant):
  - Default, Hover (+10% darker), Active (+15% darker)
  - Focus: 2px ring offset-2 brand color
  - Disabled: 50% opacity, cursor-not-allowed
  - Loading: Spinner icon replacing text, maintain width

**Icon Support**:
  - Leading icon: 8px gap before text
  - Trailing icon: 8px gap after text
  - Icon-only: Square aspect ratio

Tech: React + CVA (class-variance-authority) + Tailwind

7. 폼 입력 필드 세트

Design a form input system with all states:

**Text Input**:
  - Height: 44px (touch-friendly)
  - Padding: 12px horizontal
  - Border: 1px gray-300, radius 8px
  - Font: 16px (prevents iOS zoom)
  - Placeholder: gray-400

**States**:
  - Focus: border-brand-500, ring-2 ring-brand-500/20
  - Error: border-red-500, ring-red-500/20, red helper text
  - Success: border-green-500, green checkmark icon
  - Disabled: gray-100 background, gray-400 text

**Label**:
  - Position: Above input, 8px margin-bottom
  - Font: 14px, font-weight 500, gray-700
  - Required indicator: red asterisk

**Helper/Error Text**:
  - Position: Below input, 4px margin-top
  - Font: 13px, gray-500 (helper) or red-600 (error)
  - Error icon: 16px, inline before text

**Variants**:
  - With leading icon (search, email, etc.)
  - With trailing action (password toggle, clear)
  - Textarea: min-height 120px, resize-y
  - Select dropdown with custom chevron

**Accessibility**:
  - Proper label association (htmlFor)
  - aria-describedby for helper text
  - aria-invalid for error state

Tech: React + React Hook Form + Tailwind

8. 모달/다이얼로그 컴포넌트

Create an accessible modal dialog system:

**Overlay**:
  - Background: rgba(0,0,0,0.5) with backdrop-blur(4px)
  - Click to close (configurable)
  - Fade in: 150ms ease-out

**Modal Container**:
  - Max-width variants: sm(400px), md(500px), lg(640px), xl(800px), full
  - Max-height: calc(100vh - 48px)
  - Background: white, border-radius 16px
  - Shadow: 0 25px 50px -12px rgba(0,0,0,0.25)
  - Animation: scale(0.95) + opacity → scale(1) + opacity(1)

**Structure**:
  - Header: Title (18px semibold) + optional close X button
  - Body: Scrollable content area, 24px padding
  - Footer: Action buttons right-aligned, 16px gap

**Close Button (X)**:
  - Position: absolute top-16px right-16px
  - Size: 36x36px, hover background gray-100
  - Icon: 20px

**Accessibility**:
  - Focus trap (tab cycles within modal)
  - Escape key closes
  - aria-modal="true"
  - Return focus to trigger on close
  - Body scroll lock

**Animation Variants**:
  - Fade + scale (default)
  - Slide up from bottom (mobile sheets)
  - Slide from right (side panels)

Tech: React + @headlessui/react Dialog + Framer Motion

9. 탭 네비게이션

Design a tab navigation component:

**Tab List Container**:
  - Display: flex, gap: 0
  - Border-bottom: 2px gray-200
  - Overflow-x: auto on mobile (hide scrollbar)

**Individual Tab**:
  - Padding: 12px 24px
  - Font: 14px, font-weight 500
  - Color: gray-600 default, gray-900 active
  - Position: relative (for indicator)

**Active Indicator**:
  - Position: absolute bottom -2px
  - Height: 2px, background: brand color
  - Animation: width + left transition (300ms spring)
  - Use layoutId for Framer Motion shared layout

**Tab Variants**:
  - Underline (default): indicator below
  - Pills: rounded background on active, 8px radius
  - Boxed: border around active tab, connected

**Content Panel**:
  - Padding-top: 24px
  - Animation: fade + slight slide (150ms)
  - Preserve height during transition (optional)

**Keyboard Navigation**:
  - Arrow keys move between tabs
  - Home/End for first/last
  - Enter/Space activates tab

**Responsive**:
  - Horizontal scroll with gradient fade edges on mobile
  - Or convert to dropdown at breakpoint

Tech: React + @headlessui/react Tab + Framer Motion

10. 브레드크럼 네비게이션

Create a breadcrumb navigation component:

**Structure**:
  - Horizontal list with separator icons
  - Semantic: <nav aria-label="Breadcrumb"> + <ol>
  - Current page: aria-current="page"

**Styling**:
  - Font: 14px, gray-600
  - Link hover: gray-900, underline
  - Current (last item): gray-900, font-weight 500, no link
  - Separator: chevron-right icon, 16px, gray-400

**Separator Options**:
  - Chevron (default)
  - Slash
  - Arrow
  - Custom icon support

**Truncation (long paths)**:
  - Show: Home > ... > Parent > Current
  - Ellipsis is a dropdown showing hidden items
  - Max visible items configurable

**Responsive**:
  - Mobile: Show only "← Back to [Parent]" link
  - Or horizontal scroll with hidden overflow

**Schema.org Markup**:
  - Include structured data for SEO
  - itemListElement with position

Tech: React + Tailwind + Radix DropdownMenu (for truncated)

11. 페이지네이션

Design a pagination component:

**Layout**:
  - Centered or left-aligned (configurable)
  - Flex with 4px gap between items

**Elements**:
  - Previous/Next buttons with arrow icons
  - Page numbers with ellipsis truncation
  - Optional: "Page X of Y" text
  - Optional: Items per page selector

**Number Display Logic**:
  - Always show: first, last, current, ±1 from current
  - Ellipsis when gap > 1 page
  - Example: 1 ... 4 5 [6] 7 8 ... 20

**Button Styling**:
  - Size: 40x40px (square)
  - Border-radius: 8px
  - Default: gray-100 bg, gray-700 text
  - Hover: gray-200 bg
  - Current: brand-500 bg, white text
  - Disabled (prev/next at bounds): opacity 50%

**Variants**:
  - Simple: Previous/Next only
  - Compact: Current/Total only (Page 5 of 20)
  - Full: All features

**Accessibility**:
  - nav aria-label="Pagination"
  - Current: aria-current="page"
  - Disabled: aria-disabled="true"

Tech: React + Tailwind

12. 검색 바 + 필터 UIDesign a search interface with filters:

**Search Input**:
  - Width: 100% of container, max-width 600px
  - Height: 48px
  - Leading search icon (20px, gray-400)
  - Trailing clear button (appears when has value)
  - Placeholder: "Search products, categories..."
  - Debounced input (300ms)

**Search Suggestions Dropdown**:
  - Position: absolute below input
  - Max-height: 400px, overflow-y auto
  - Sections: Recent, Suggested, Categories
  - Highlight matching text in results
  - Keyboard navigation support

**Filter Bar** (horizontal, below search):
  - Filter chips: scrollable horizontal on mobile
  - Each filter: dropdown or popover on click
  - Active filters: filled chip with X to remove
  - "Clear all" link when filters active

**Filter Types**:
  - Single select dropdown
  - Multi-select with checkboxes
  - Range slider (price)
  - Date range picker

**Mobile Adaptation**:
  - Filters button opens bottom sheet
  - Full-screen filter panel
  - "Apply" and "Reset" buttons

Tech: React + @headlessui/react + react-select + Tailwind

13. 드롭다운 메뉴

Create a dropdown menu component:

**Trigger**:
  - Button with text + chevron-down icon
  - Chevron rotates 180deg when open
  - Focus-visible ring styling

**Menu Panel**:
  - Position: absolute, below trigger
  - Min-width: match trigger width or 200px
  - Background: white
  - Border: 1px gray-200
  - Border-radius: 12px
  - Shadow: 0 10px 15px -3px rgba(0,0,0,0.1)
  - Padding: 4px

**Menu Items**:
  - Padding: 10px 12px
  - Border-radius: 8px (inside panel padding)
  - Hover: gray-100 background
  - Focus: same as hover + focus ring
  - With icon: 20px icon, 12px gap, text
  - Destructive: red-600 text + icon

**Sections**:
  - Divider: 1px gray-200, 4px margin-y
  - Section header: 12px gray-500, uppercase, padding 8px 12px

**Submenu Support**:
  - Chevron-right icon on parent item
  - Nested panel appears on hover/focus
  - Position: right of parent panel

**Animation**:
  - Entry: fade + scale from 95% + slight Y offset
  - Duration: 150ms ease-out
  - Exit: fade out 100ms

**Accessibility**:
  - Role: menu, menuitem
  - Arrow key navigation
  - Type-ahead search
  - Escape closes

Tech: React + @headlessui/react Menu + Framer Motion

14. 토스트/알림 메시지

Design a toast notification system:

**Toast Container**:
  - Position: fixed, configurable (top-right default)
  - Z-index: 9999
  - Stack direction: newest on top
  - Gap: 12px between toasts
  - Max visible: 5 (older ones queue)

**Toast Component**:
  - Min-width: 300px, max-width: 420px
  - Padding: 16px
  - Border-radius: 12px
  - Shadow: 0 10px 15px -3px rgba(0,0,0,0.1)
  - Background: white (or dark variant)

**Variants**:
  - Info: blue-500 accent, info icon
  - Success: green-500 accent, check-circle icon
  - Warning: amber-500 accent, alert-triangle icon
  - Error: red-500 accent, x-circle icon

**Structure**:
  - Icon (24px) | Title + Description | Close X
  - Title: 14px semibold
  - Description: 13px gray-600
  - Optional action button (text link style)

**Behavior**:
  - Auto-dismiss: 5000ms (configurable)
  - Progress bar at bottom showing time remaining
  - Hover pauses timer
  - Swipe to dismiss on mobile
  - Close button always visible

**Animation**:
  - Enter: slide in from right + fade
  - Exit: slide out to right + fade
  - Stack reorder: smooth layout animation

Tech: React + Sonner library (or custom with Framer Motion)

15. 프로그레스 인디케이터

Create progress indicator components:

**Linear Progress Bar**:
  - Height: 8px (configurable: 4px thin, 12px thick)
  - Border-radius: full (pill shape)
  - Background track: gray-200
  - Fill: brand gradient or solid color
  - Animation: width transition 300ms ease-out
  - Indeterminate: sliding animation left-to-right

**Circular Progress**:
  - SVG-based for crisp rendering
  - Sizes: sm(32px), md(48px), lg(64px)
  - Stroke-width proportional to size
  - Background track: gray-200
  - Progress arc: brand color
  - Rotation: -90deg start (12 o'clock)
  - Animation: stroke-dashoffset transition
  - Center text option: percentage number

**Progress with Label**:
  - Bar + percentage text right-aligned
  - Or bar + "Step 2 of 5" format
  - Below label: current task description

**Step Progress** (multi-step wizard):
  - Horizontal: circles connected by lines
  - States: completed (check), current (filled), upcoming (outline)
  - Labels below each step
  - Responsive: hide labels on mobile, keep icons

**Loading Spinner**:
  - SVG animated spinner
  - Sizes: 16, 20, 24, 32, 48px
  - Color: currentColor (inherits)
  - Smooth infinite rotation

Tech: React + Tailwind + SVG animations

16. 툴팁 컴포넌트

Design a tooltip system:

**Trigger Behavior**:
  - Hover: show after 200ms delay, hide immediately on leave
  - Focus: show on focus, hide on blur
  - Touch: show on long-press, hide on tap outside

**Tooltip Panel**:
  - Background: gray-900 (dark theme)
  - Text: white, 13px
  - Padding: 8px 12px
  - Border-radius: 6px
  - Max-width: 240px
  - Arrow: 8px pointing to trigger

**Positioning**:
  - Configurable: top, bottom, left, right
  - Auto-flip when near viewport edge
  - 8px offset from trigger
  - Arrow centered on trigger

**Variants**:
  - Simple: text only
  - Rich: with title + description
  - Interactive: can hover into tooltip (for links)

**Animation**:
  - Fade + slight scale from 95%
  - Duration: 100ms ease-out
  - Transform origin: from arrow direction

**Content Types**:
  - Plain text string
  - JSX for rich content
  - Keyboard shortcut badges

**Accessibility**:
  - role="tooltip"
  - aria-describedby linking
  - Not announced on hover (visual only)

Tech: React + @floating-ui/react + Framer Motion1

7. 아바타 컴포넌트

Create an avatar component system:

**Size Variants**:
  - xs: 24px
  - sm: 32px
  - md: 40px
  - lg: 48px
  - xl: 64px
  - 2xl: 96px

**Shape Variants**:
  - Circle (default)
  - Rounded square (radius: 20% of size)

**Content Priority**:
  1. Image if src provided (object-fit: cover)
  2. Initials if name provided (1-2 letters)
  3. Default user icon fallback

**Initials Styling**:
  - Background: generated from name (consistent hash to color)
  - Text: white, font-weight 600
  - Font-size: 40% of avatar size

**Status Indicator**:
  - Position: bottom-right
  - Size: 25% of avatar, min 8px
  - Ring: 2px white border
  - Colors: green (online), gray (offline), amber (away), red (busy)

**Avatar Group**:
  - Overlap: -8px margin (25% of size)
  - Max display: configurable (e.g., 4)
  - Overflow: "+5" indicator with count
  - Hover: slight lift with tooltip

**With Badge**:
  - Notification dot: top-right
  - Count badge: number in red circle

**Loading State**:
  - Skeleton pulse animation
  - Preserve size

Tech: React + Tailwind + boring-avatars (for placeholder generation)

18. 태그/뱃지 시스템

Design a tag and badge component system:

**Badge (status indicators)**:
  - Height: 22px, inline-flex
  - Padding: 0 8px
  - Border-radius: full (pill)
  - Font: 12px, font-weight 500
  - Dot variant: 6px circle + text

**Color Variants**:
  - Gray (default), Red, Yellow, Green, Blue, Purple, Pink
  - Each has: background (100), text (700)
  - Outline variant: border + transparent bg

**Tag (user-applied labels)**:
  - Similar to badge but interactive
  - Optional X button to remove
  - Hover state for clickable tags
  - Focus ring for keyboard

**Input Tag**:
  - Multi-value input field
  - Type + Enter/comma to create
  - Backspace to delete last
  - Autocomplete suggestions dropdown

**Size Variants**:
  - sm: 18px height, 10px font
  - md: 22px height, 12px font (default)
  - lg: 28px height, 14px font

**With Icon**:
  - Leading icon: 12-14px, color matches text
  - 4px gap between icon and text

**Max Width**:
  - Text truncate with ellipsis
  - Tooltip on hover showing full text

Tech: React + Tailwind + react-tag-input

19. 별점/평점 컴포넌트Create a star rating component:

**Display Mode** (read-only):
  - 5 stars in a row, 4px gap
  - Filled: brand amber/yellow color
  - Empty: gray-300 outline or filled
  - Partial fill: CSS clip-path or gradient for 3.5 stars
  - Size variants: sm(16px), md(20px), lg(24px)

**Interactive Mode** (input):
  - Hover preview: fill up to hovered star
  - Click to set value
  - Cursor: pointer
  - Keyboard: arrow keys to adjust, enter to confirm

**With Text**:
  - Pattern: ★★★★☆ 4.2 (128 reviews)
  - Rating number: font-weight 600
  - Review count: gray-500, linked

**Half-Star Support**:
  - Click on left half = 0.5, right half = 1.0
  - Or hover areas define precision

**Accessibility**:
  - Role: radiogroup with radio items
  - aria-label: "Rating: 4 out of 5 stars"
  - Focus visible on interactive stars

**Variants**:
  - Stars (default)
  - Hearts
  - Thumbs up/down (binary)
  - Numeric scale (1-10)

**Animation**:
  - On selection: subtle scale bounce
  - Fill transition: 150ms ease

Tech: React + Tailwind CSS


20. 토글 스위치

Design a toggle switch component:

**Dimensions**:
  - Track: 44px × 24px (touch-friendly)
  - Thumb: 20px circle
  - Thumb position: 2px from edges

**States**:
  - Off: track gray-200, thumb white with shadow
  - On: track brand-500, thumb white
  - Disabled: opacity 50%, cursor-not-allowed
  - Focus: ring-2 around track

**Transition**:
  - Thumb position: 150ms ease
  - Background color: 150ms ease
  - Smooth thumb slide animation

**With Label**:
  - Label left, switch right (or reversed)
  - Optional description text below label
  - Label click toggles switch

**Size Variants**:
  - sm: 36px × 20px track, 16px thumb
  - md: 44px × 24px track, 20px thumb (default)
  - lg: 56px × 32px track, 28px thumb

**With Icons**:
  - Sun/moon for dark mode toggle
  - Icons inside track, switch reveals one

**Loading State**:
  - Spinner replacing thumb
  - Prevent interaction during loading

**Accessibility**:
  - Role: switch
  - aria-checked: true/false
  - Keyboard: Space to toggle
  - Clear focus indicator

Tech: React + @headlessui/react Switch + Tailwind섹션 2: 페이지 전체 레이아웃 (21-35)

21. SaaS 랜딩 페이지

Design a complete SaaS landing page layout:

**Global**:
  - Max-width: 1280px content, full-bleed backgrounds
  - Section padding: 96px vertical desktop, 64px mobile
  - Typography scale: Inter or system font stack

**Hero Section**:
  - Announcement banner: dismissible, linked
  - Headline + subheadline + dual CTAs
  - Product screenshot/mockup with subtle shadow
  - Background: subtle gradient or pattern
  - Social proof: "Trusted by X companies" + logos

**Features Grid**:
  - Section title + subtitle centered
  - 3-column grid of feature cards
  - Each: icon (48px) + title + description
  - Hover: subtle card elevation

**Product Tour** (alternating):
  - Left text / Right image, then alternate
  - Screenshot with browser chrome mockup
  - Feature list with check icons

**Testimonials**:
  - Carousel or 3-column grid
  - Quote + author photo + name + role + company logo
  - Optional: video testimonial thumbnails

**Pricing Table**:
  - 3 tiers side by side
  - Recommended tier highlighted
  - Feature comparison checkmarks
  - Monthly/Annual toggle with discount badge

**CTA Section**:
  - Full-width dark background
  - Centered headline + CTA button
  - Optional: email capture form

**Footer**:
  - 4-column links + newsletter
  - Social icons + legal links

Tech: Next.js + Tailwind CSS + Framer Motion

22. 블로그 목록 페이지

Design a blog listing page:

**Page Header**:
  - Page title: "Blog" or "Articles", 40px bold
  - Subtitle: brief description
  - Optional: search input

**Category Filter**:
  - Horizontal pill tabs
  - "All" + category names
  - Active state: filled background
  - Scroll horizontal on mobile

**Featured Post** (hero):
  - Full-width card at top
  - Large image (16:9 aspect)
  - Category tag + title (28px) + excerpt + author + date
  - Hover: image subtle zoom

**Post Grid**:
  - 3 columns desktop, 2 tablet, 1 mobile
  - 32px gap
  - Each card: image (4:3) + category + title (18px) + excerpt + meta
  - Hover: card lift + shadow increase

**Post Card Meta**:
  - Author avatar (32px) + name
  - Publish date
  - Read time estimate
  - Optional: view count

**Load More / Pagination**:
  - "Load More" button (infinite scroll option)
  - Or traditional pagination
  - Loading skeleton for new items

**Sidebar** (optional):
  - Newsletter signup
  - Popular posts list
  - Tag cloud
  - Social follow buttons

Tech: Next.js + Tailwind + MDX support

23. 블로그 상세 페이지

Design a blog article page:

**Article Header**:
  - Category link (breadcrumb style)
  - Title: 40-48px, max-width 720px
  - Subtitle/excerpt: 20px, gray-600
  - Author: avatar + name (linked) + date + read time
  - Hero image: full-width, 16:9, with caption

**Article Body**:
  - Max-width: 720px (optimal reading width)
  - Centered with generous margins
  - Typography: 18px/1.75 body text
  - Heading hierarchy: h2(30px), h3(24px), h4(20px)
  - Paragraph spacing: 1.5em margin-bottom

**Content Elements**:
  - Blockquotes: left border, italic, larger font
  - Code blocks: syntax highlighting, copy button
  - Images: full-width with captions
  - Callout boxes: tip, warning, info variants
  - Tables: responsive with horizontal scroll
  - Lists: custom bullet/number styling

**Progress Indicator**:
  - Fixed top bar showing read progress
  - 3px height, brand color fill

**Sticky Sidebar** (desktop):
  - Table of contents with active section highlight
  - Social share buttons
  - Bookmark/save button

**Author Bio Box**:
  - After article content
  - Large avatar + bio + social links

**Related Posts**:
  - 3-column grid below article
  - Based on category/tags

**Comments Section** (optional):
  - Nested reply structure
  - Or link to external discussion

Tech: Next.js + Tailwind + @tailwindcss/typography

24. 포트폴리오 갤러리 페이지

Design a portfolio/gallery page:

**Page Header**:
  - Name/title + brief intro
  - Filter/category tabs

**Filter System**:
  - Category pills: All, Web, Mobile, Branding, etc.
  - Active filter: filled style
  - Animation: items filter with fade + layout shift

**Gallery Grid**:
  - Masonry or fixed-ratio grid
  - Gap: 24px
  - Responsive: 3 → 2 → 1 columns

**Project Card**:
  - Image: hover reveals overlay
  - Overlay: semi-transparent dark + title + category
  - Click: opens project detail modal or page
  - Optional: play icon for video projects

**Project Quick View** (modal):
  - Large image carousel
  - Project title + year + category
  - Brief description
  - Technologies/tools used (icon badges)
  - Links: Live site, GitHub, Case study

**Image Lightbox**:
  - Full-screen image view
  - Navigation arrows
  - Counter (1 of 5)
  - Keyboard navigation
  - Pinch-zoom on mobile

**Case Study Link**:
  - "View Full Case Study" CTA
  - Links to detailed project page

**Animation**:
  - Scroll-triggered fade-in for cards
  - Filter transition: layout animation

Tech: Next.js + Tailwind + Framer Motion + Lightbox library

25. 가격 정책 페이지

Design a pricing page:

**Page Header**:
  - Title: "Simple, transparent pricing"
  - Subtitle: value proposition
  - Billing toggle: Monthly / Annual (with discount badge)

**Pricing Cards** (3 tiers):
  - Width: equal columns, 24px gap
  - Popular tier: scaled slightly larger, colored border, "Popular" badge

**Card Structure**:
  - Plan name: 20px bold
  - Price: 48px bold + /month or /year
  - Description: 14px gray-600
  - CTA button: full-width
  - Feature list: checkmarks + text

**Feature List**:
  - Check icon (green) for included
  - X icon (gray) for not included
  - Hover: tooltip with feature explanation
  - Group features by category with headers

**Feature Comparison Table** (below cards):
  - Full feature comparison matrix
  - Sticky header with plan names
  - Category groupings
  - Mobile: horizontal scroll or accordion

**FAQ Section**:
  - Accordion style
  - Common pricing/billing questions
  - Link to full FAQ page

**Enterprise CTA**:
  - Full-width section
  - "Need custom solution?"
  - Contact sales button

**Trust Elements**:
  - Money-back guarantee badge
  - Security certifications
  - Payment method logos

Tech: React + Tailwind + Headless UI (for toggle, accordion)

26. About/팀 소개 페이지

Design a company about page:

**Hero Section**:
  - Large headline: company mission/tagline
  - Background: office photo or abstract
  - Key stats: Founded, Team size, Users, etc.

**Story Section**:
  - Two-column: text left, timeline right
  - Company origin story
  - Key milestones timeline
  - Founder quote with portrait

**Mission & Values**:
  - 3-4 value cards
  - Icon + title + description
  - Grid layout

**Team Section**:
  - Section title: "Meet the team"
  - Grid of team member cards
  - Each: photo, name, role, social links

**Team Card**:
  - Photo: 1:1 aspect, grayscale default, color on hover
  - Name: 16px semibold
  - Role: 14px gray-600
  - Social icons: appear on hover
  - Optional: hover reveals fun fact/bio

**Team Filters** (large teams):
  - Department tabs
  - Or expandable sections per department

**Office/Culture Gallery**:
  - Image grid/masonry
  - Office, team events, culture photos
  - Click to expand lightbox

**Careers CTA**:
  - "Join our team" section
  - Open positions count
  - Link to careers page
  - Benefits highlight icons

**Contact Section**:
  - Office addresses with maps
  - Contact information
  - Social media links

Tech: Next.js + Tailwind + Image optimization

27. 연락처 페이지

Design a contact page:

**Page Layout**:
  - Two-column: form left, info right
  - Mobile: stacked, info first then form

**Contact Form**:
  - Fields: Name, Email, Subject (dropdown), Message
  - Subject options: General, Support, Sales, Partnership
  - Message: textarea, 4 rows minimum
  - File upload: optional attachment
  - Submit button with loading state
  - Success/error feedback messages

**Form Validation**:
  - Real-time validation on blur
  - Email format check
  - Required field indicators
  - Error messages below fields

**Contact Information**:
  - Email: linked, copy button
  - Phone: linked for mobile click-to-call
  - Address: with "Open in Maps" link
  - Business hours

**Social Links**:
  - Icon buttons for each platform
  - Hover: brand color fill

**Map Integration**:
  - Embedded map (Google Maps or Mapbox)
  - Custom marker with company logo
  - Map style: grayscale or custom theme
  - Clickable for directions

**Multiple Offices** (if applicable):
  - Tabs or cards per location
  - Each with address + map

**FAQ Quick Links**:
  - "Before you contact us, have you checked our FAQ?"
  - 3-4 common question links

**Response Time Expectation**:
  - "We typically respond within 24 hours"
  - Optional: live chat widget integration

Tech: React + React Hook Form + Mapbox GL + Tailwind

28. 404 에러 페이지

Design a 404 error page:

**Layout**:
  - Centered content, vertically
  - Minimal, focused design
  - Max-width: 540px

**Visual Element**:
  - Option A: Large "404" text (120px+, creative typography)
  - Option B: Illustration (lost astronaut, broken robot, etc.)
  - Option C: Animated/interactive element
  - Subtle animation loop

**Message Content**:
  - Headline: "Page not found" or creative alternative
  - Description: "The page you're looking for doesn't exist or has been moved."
  - Friendly, on-brand tone

**Actions**:
  - Primary CTA: "Go to Homepage" button
  - Secondary: "Go Back" (browser history)
  - Search bar: "Or try searching for something"

**Helpful Links**:
  - Quick links to popular/important pages
  - Recent blog posts or products
  - Support/help center link

**Brand Consistency**:
  - Use brand colors
  - Include header/footer (or at least logo)
  - Match overall site typography

**Easter Egg** (optional):
  - Hidden interaction
  - Mini game
  - Animated character

**Technical**:
  - Proper 404 HTTP status code
  - Meta: noindex
  - Error tracking/logging

Tech: Next.js custom 404 page + Tailwind + Lottie (for animation)

29. 로그인/회원가입 페이지

Design authentication pages:

**Page Layout Options**:
  - A: Centered card on subtle background
  - B: Split screen (form left, image/branding right)
  - Mobile: Full-width form, stacked

**Login Form**:
  - Email field with validation
  - Password field with show/hide toggle
  - "Remember me" checkbox
  - "Forgot password?" link
  - Primary login button (full-width)
  - Divider: "or continue with"
  - Social login buttons (Google, Apple, GitHub)
  - Footer: "Don't have an account? Sign up"

**Signup Form**:
  - Name field (or split: First, Last)
  - Email field
  - Password field with strength indicator
  - Confirm password (or remove for simplicity)
  - Terms checkbox: "I agree to Terms and Privacy Policy"
  - Primary signup button
  - Social signup options
  - Footer: "Already have an account? Log in"

**Password Strength Indicator**:
  - 4-segment bar below password
  - Colors: red → orange → yellow → green
  - Requirements checklist below

**Forgot Password Flow**:
  - Email input only
  - Submit → "Check your email" confirmation
  - Reset form: new password + confirm

**Form States**:
  - Loading: button spinner
  - Error: shake animation, red border
  - Success: redirect or confirmation

**Security Features**:
  - CSRF protection
  - Rate limiting indication
  - Secure password requirements
  - Optional: 2FA prompt

Tech: Next.js + NextAuth.js + React Hook Form + Tailwind

30. 대시보드 메인 화면

Design a dashboard home/overview page:

**Layout Structure**:
  - Sidebar: fixed left, 240px wide
  - Header: sticky top, 64px height
  - Main: scrollable content area
  - Mobile: bottom nav or collapsible sidebar

**Header**:
  - Search bar (expandable)
  - Notifications bell with badge
  - User avatar dropdown
  - Breadcrumb or page title

**Sidebar Navigation**:
  - Logo at top
  - Navigation groups with section headers
  - Icons + labels for each item
  - Active state: filled background, accent color
  - Collapse to icon-only mode
  - Bottom: settings, help, user profile

**Welcome Section**:
  - Greeting: "Good morning, [Name]"
  - Date/time
  - Quick actions or tips

**KPI Cards Row**:
  - 4 cards showing key metrics
  - Each: icon, label, value, trend (↑12%)
  - Trend: green up, red down
  - Sparkline chart optional

**Primary Chart**:
  - Large area/line chart
  - Time range selector: 7d, 30d, 90d, 1y
  - Hover tooltips with exact values
  - Legend for multiple series

**Secondary Widgets** (2-3 column grid):
  - Recent activity feed
  - Tasks/to-dos list with checkboxes
  - Team members online
  - Quick links/shortcuts

**Data Tables**:
  - Recent orders/transactions
  - Sortable columns
  - Quick actions per row
  - "View all" link

Tech: Next.js + Tailwind + Recharts + Tanstack Table

31. 설정 페이지

Design a settings page:

**Layout**:
  - Sidebar navigation: settings categories
  - Main content: selected category form
  - Mobile: category dropdown or tabs

**Settings Categories**:
  - Profile: name, email, avatar, bio
  - Account: username, password, 2FA
  - Notifications: email, push, in-app preferences
  - Appearance: theme, language, timezone
  - Privacy: data sharing, visibility
  - Billing: plan, payment method, invoices
  - Integrations: connected apps
  - API: keys, webhooks

**Profile Settings**:
  - Avatar upload with crop
  - Name fields
  - Email (with verification status)
  - Bio/about textarea
  - Social links

**Notification Settings**:
  - Toggle switches per notification type
  - Group by category
  - Email digest frequency dropdown

**Appearance Settings**:
  - Theme: Light/Dark/System toggle
  - Accent color picker
  - Language dropdown
  - Timezone dropdown

**Form Behavior**:
  - Auto-save with "Saving..." indicator
  - Or explicit "Save changes" button
  - Unsaved changes warning on navigation
  - Success toast on save

**Danger Zone**:
  - Red bordered section at bottom
  - Actions: Deactivate, Delete account
  - Confirmation modal required
  - Type confirmation text to proceed

Tech: React + React Hook Form + Tailwind + Sonner (toasts)

32. 프로필 편집 페이지

Design a user profile edit page:

**Avatar Section**:
  - Current avatar: 120px circle
  - Hover overlay: "Change photo"
  - Upload: click or drag-and-drop
  - Crop tool: square crop with preview
  - "Remove photo" option

**Basic Information Form**:
  - First name, Last name (side by side)
  - Display name / Username
  - Email (may be read-only with change flow)
  - Phone number (with country code selector)
  - Date of birth (date picker)

**Bio/About**:
  - Textarea: 500 char limit
  - Character counter
  - Formatting tips

**Social Links**:
  - Dynamic field list
  - Platform selector + URL input
  - Add/remove links
  - Validation per platform format

**Location**:
  - Country dropdown
  - City autocomplete
  - Timezone auto-detect option

**Professional Info**:
  - Job title
  - Company
  - Industry dropdown
  - Website URL

**Form Layout**:
  - Logical sections with headers
  - Two-column where appropriate
  - Clear visual hierarchy

**Actions**:
  - "Save changes" primary button
  - "Cancel" secondary button
  - "Discard changes" if unsaved edits

**Privacy Indicators**:
  - Per-field visibility settings
  - Public/private/contacts-only toggles

Tech: React + React Hook Form + Cropper.js + Tailwind

33. 검색 결과 페이지Design a search results page:

**Search Header**:
  - Large search input (prefilled with query)
  - Search button
  - Query display: 'Results for "search term"'
  - Result count: "142 results found"

**Search Filters** (sidebar or top bar):
  - Content type: All, Products, Articles, Users
  - Category/department
  - Date range
  - Price range (if applicable)
  - Active filters as removable chips

**View Toggle**:
  - List view / Grid view buttons
  - Sort dropdown: Relevance, Newest, Price, etc.

**Results List View**:
  - Each result: thumbnail + title + description + meta
  - Title: link, highlight matching terms
  - Description: truncated, highlight matches
  - Meta: category, date, price
  - Quick actions: Save, Share

**Results Grid View**:
  - Card layout: image + title + brief meta
  - Equal height cards
  - Responsive columns

**No Results State**:
  - Clear message: "No results found for..."
  - Suggestions: check spelling, try different terms
  - Popular searches links
  - Browse categories links

**Loading State**:
  - Skeleton results matching layout
  - Search input disabled with spinner

**Pagination/Infinite Scroll**:
  - Page numbers or "Load more"
  - Back-to-top button

**Recent/Saved Searches**:
  - Dropdown on empty search focus
  - Clear history option

Tech: Next.js + Tailwind + Algolia/Meilisearch

34. FAQ 페이지

Design an FAQ page:

**Page Header**:
  - Title: "Frequently Asked Questions"
  - Search bar: "Search FAQ..."
  - Subtitle: "Find answers to common questions"

**Category Navigation**:
  - Horizontal tabs or sidebar
  - Categories: General, Billing, Account, Product, etc.
  - Mobile: dropdown or scrollable pills

**Search Functionality**:
  - Real-time filtering of questions
  - Highlight matching text
  - "No results" with suggestions

**FAQ Accordion**:
  - Question: 16px semibold, full-width clickable
  - Expand icon: plus/minus or chevron
  - Answer: collapsible, padding 16px
  - Multiple open or single open mode

**Question Item Styling**:
  - Border-bottom separator
  - Hover: slight background tint
  - Focus: visible outline
  - Open state: highlighted styling

**Answer Content**:
  - Rich text support
  - Links to related articles
  - Images/screenshots if needed
  - Video embeds for tutorials

**Additional Elements**:
  - "Was this helpful?" Yes/No feedback per answer
  - Related questions links
  - "Still need help? Contact us" CTA

**Schema Markup**:
  - FAQPage structured data
  - Question/Answer schema

**Side Panel** (optional):
  - Table of contents
  - Contact support card
  - Popular articles

Tech: Next.js + Tailwind + Headless UI Disclosure

35. 타임라인/연혁 페이지

Design a timeline/history page:

**Layout Options**:
  - A: Single column with alternating sides
  - B: Vertical line with nodes
  - C: Horizontal timeline (scrollable)
  - Responsive: single column on mobile

**Timeline Structure**:
  - Central vertical line (desktop)
  - Nodes/dots on the line for each event
  - Cards alternating left/right
  - Mobile: all cards on one side

**Timeline Node**:
  - Circle: 16px, filled brand color
  - Current/active: larger, pulsing
  - Connecting line: 2px, gray-300

**Event Card**:
  - Date/year: prominent, 14px bold
  - Title: 18px semibold
  - Description: 14px body text
  - Optional: image or icon
  - Hover: subtle elevation

**Date Markers**:
  - Year headers breaking timeline
  - Or date inside node

**Card Styling**:
  - Background: white
  - Border: 1px gray-200
  - Shadow: subtle
  - Border-radius: 12px
  - Connecting pointer to line

**Animation**:
  - Scroll-triggered: fade + slide in
  - Stagger animation between cards
  - Line draws as user scrolls

**Navigation** (long timelines):
  - Sticky year navigator
  - Jump to year buttons
  - Scroll progress indicator

**Content Types**:
  - Milestones
  - Product launches
  - Company events
  - Team growth

Tech: React + Tailwind + Framer Motion + Intersection Observer섹션 3: 대시보드 & 데이터 시각화 (36-50)

36. KPI 카드 그리드

Design KPI metric cards for dashboard:

**Card Layout**:
  - Grid: 4 columns desktop, 2 tablet, 1 mobile
  - Gap: 24px
  - Equal height cards

**Card Structure**:
  - Padding: 24px
  - Background: white
  - Border-radius: 12px
  - Shadow: 0 1px 3px rgba(0,0,0,0.1)

**Card Content**:
  - Top row: Icon (40px in colored circle) + overflow menu
  - Label: 14px gray-600, uppercase tracking-wide
  - Value: 32px bold
  - Trend: arrow icon + percentage + vs. previous period
  - Sparkline: mini chart at bottom (optional)

**Trend Indicators**:
  - Up (positive): green-500, arrow-up icon
  - Down (negative): red-500, arrow-down icon
  - Neutral: gray-500, minus icon
  - With comparison text: "vs last month"

**Icon Categories**:
  - Revenue: dollar sign
  - Users: user-group
  - Conversion: chart-bar
  - Custom per metric

**Interactive Elements**:
  - Click card: expands or links to detail
  - Overflow menu: view details, export, share
  - Hover: subtle lift effect

**Loading State**:
  - Skeleton with exact dimensions
  - Shimmer animation

**Variants**:
  - Compact: smaller padding, no sparkline
  - With target: progress bar to goal
  - With mini chart: sparkline included

Tech: React + Tailwind + Recharts (sparklines)

37. 차트 위젯 시스템

Design a chart widget component system:

**Widget Container**:
  - White background, 12px border-radius
  - Header: title + description + time range selector
  - Overflow menu: export, refresh, fullscreen
  - Body: chart area with padding
  - Optional footer: legend or summary

**Line Chart**:
  - Multiple series support
  - Smooth curves (tension: 0.4)
  - Gradient fill below line (20% opacity)
  - Grid lines: horizontal only, dashed, gray-100
  - Axis labels: gray-500, 12px
  - Hover tooltip: vertical line + all values

**Bar Chart**:
  - Vertical or horizontal variant
  - Grouped or stacked options
  - Border-radius on bars (4px top)
  - Hover: highlight bar, dim others
  - Value labels: above bars option

**Pie/Donut Chart**:
  - Donut: 65% inner radius
  - Center: total value or icon
  - Legend: right side or below
  - Hover: slice lifts out slightly
  - Labels: outside with lines

**Area Chart**:
  - Stacked area variant
  - Gradient fill
  - Semi-transparent for overlapping

**Tooltip Design**:
  - Background: gray-900
  - Text: white
  - Border-radius: 8px
  - Shadow: lg
  - Arrow pointing to data point

**Time Range Selector**:
  - Preset buttons: 7D, 30D, 90D, 1Y, All
  - Custom date range picker

**Legend**:
  - Horizontal below chart or vertical right
  - Colored dot + label
  - Click to toggle series visibility

Tech: React + Recharts (or Victory/Chart.js) + Tailwind

38. 데이터 테이블

Design an advanced data table component:

**Table Container**:
  - Horizontal scroll wrapper for overflow
  - Sticky header on scroll
  - Border: 1px gray-200, radius-12px

**Header Row**:
  - Background: gray-50
  - Font: 12px uppercase, gray-600, tracking-wide
  - Padding: 12px 16px
  - Sortable: icon indicator, click to sort
  - Resizable columns: drag handle

**Sort Indicators**:
  - Unsorted: both arrows, gray-300
  - Ascending: up arrow, gray-900
  - Descending: down arrow, gray-900

**Body Rows**:
  - Alternating: white / gray-50 (optional)
  - Hover: gray-100 background
  - Selected: blue-50 background
  - Border-bottom: 1px gray-100
  - Padding: 16px

**Cell Types**:
  - Text: default, truncate with tooltip
  - Number: right-aligned, monospace font
  - Date: formatted, relative option
  - Status badge: colored pill
  - Avatar + name combo
  - Actions: icon buttons or dropdown

**Selection**:
  - Checkbox column (sticky left)
  - Select all in header
  - Bulk actions bar appears on selection

**Pagination**:
  - Bottom bar: items per page + page nav
  - "Showing 1-10 of 142 results"
  - Items per page: 10, 25, 50, 100

**Column Features**:
  - Show/hide columns toggle
  - Drag to reorder
  - Pin columns left/right

**Empty State**:
  - Illustration + message
  - "No data found" + clear filters action

**Loading State**:
  - Skeleton rows
  - Or overlay spinner

Tech: React + TanStack Table + Tailwind

39. 사이드바 네비게이션

Design a dashboard sidebar navigation:

**Container**:
  - Width: 240px expanded, 72px collapsed
  - Height: 100vh, fixed position
  - Background: white or gray-900 (dark variant)
  - Border-right: 1px gray-200
  - Transition: width 200ms ease

**Logo Area**:
  - Padding: 20px
  - Logo + wordmark expanded
  - Logo icon only collapsed
  - Collapse toggle button

**Navigation Groups**:
  - Section header: 11px uppercase, gray-500
  - 8px gap between groups
  - Divider line between major sections

**Nav Item**:
  - Height: 44px
  - Padding: 0 12px
  - Border-radius: 8px
  - Icon (20px) + label + badge/count

**Nav Item States**:
  - Default: gray-600 text
  - Hover: gray-900 text, gray-100 bg
  - Active: brand color text, brand-50 bg, left border
  - Disabled: gray-400, cursor-not-allowed

**Nested Navigation**:
  - Collapsible with chevron
  - Child items indented 32px
  - Parent remains highlighted when child active

**Badge/Count**:
  - Right-aligned
  - Red dot for notifications
  - Number badge for counts

**Collapsed State**:
  - Icons only
  - Hover: tooltip with label
  - Nested: expand on hover as mini-menu

**User Section** (bottom):
  - Avatar + name + role
  - Dropdown: profile, settings, logout
  - Collapsed: avatar only

**Mobile**:
  - Overlay sidebar
  - Hamburger trigger from header
  - Backdrop click to close

Tech: React + Headless UI + Tailwind + Framer Motion

40. 알림 센터 드롭다운

Design a notification center dropdown:

**Trigger Button**:
  - Bell icon: 24px
  - Badge: red dot or count
  - Position: header, right area

**Dropdown Panel**:
  - Width: 380px
  - Max-height: 480px
  - Position: right-aligned below trigger
  - Shadow: xl
  - Border-radius: 12px

**Header**:
  - Title: "Notifications"
  - Actions: "Mark all read", Settings icon
  - Filter tabs: All, Unread, Mentions

**Notification Item**:
  - Padding: 16px
  - Border-bottom: 1px gray-100
  - Hover: gray-50 background
  - Unread: blue dot indicator, bold title

**Item Structure**:
  - Avatar/icon (40px) left
  - Content middle: title, description, time
  - Action button right (optional)
  - Swipe to dismiss (mobile)

**Notification Types**:
  - User mention: avatar + "mentioned you in..."
  - System: colored icon + message
  - Action required: with CTA button
  - Success/error: status icon

**Time Display**:
  - Relative: "2 min ago", "1 hour ago"
  - Group by: Today, Yesterday, This Week

**Empty State**:
  - Illustration
  - "All caught up!" message

**Footer**:
  - "View all notifications" link
  - Links to notification settings

**Animations**:
  - New notification: slide in from top
  - Mark read: fade transition
  - Dropdown: fade + scale

Tech: React + Headless UI Popover + Tailwind

41. 활동 피드

Design an activity feed component:

**Feed Container**:
  - Vertical timeline layout
  - Left: timeline line with nodes
  - Right: activity cards

**Timeline Line**:
  - Vertical line: 2px, gray-200
  - Nodes: 10px circles on line
  - Node color: based on activity type

**Activity Item**:
  - Avatar (32px) or icon
  - Actor name (bold) + action + target
  - Description/preview text
  - Timestamp: relative format
  - Attachments: image thumbnails, file icons

**Activity Types & Icons**:
  - Comment: message-circle, blue
  - Upload: upload-cloud, green
  - Edit: edit, amber
  - Delete: trash, red
  - Status change: refresh, purple
  - Mention: at-sign, teal

**Activity Text Format**:
  - "[User] commented on [Document]"
  - "[User] uploaded 3 files to [Folder]"
  - "[User] changed status to [Done]"
  - Links highlighted, clickable

**Grouped Activities**:
  - Collapse similar: "You made 5 edits"
  - Expand to see details
  - Time range for group

**Filters**:
  - By activity type
  - By user
  - Date range

**Pagination**:
  - "Load more" button
  - Or infinite scroll
  - Date headers as section breaks

**Real-time Updates**:
  - New activity badge
  - Click to load new items
  - Or auto-prepend with animation

Tech: React + Tailwind + date-fns + WebSocket for real-time

42. 캘린더 뷰

Design a calendar component:

**View Modes**:
  - Month view (default)
  - Week view
  - Day view
  - Agenda/list view

**Header**:
  - Navigation: < > arrows for prev/next
  - Current: "January 2026"
  - View mode toggle buttons
  - "Today" quick button

**Month View Grid**:
  - 7 columns (days of week)
  - Day headers: Mon, Tue, Wed...
  - Weeks as rows
  - Day cells: number + event indicators

**Day Cell**:
  - Date number: top-left
  - Today: blue circle highlight
  - Selected: blue fill
  - Other month: gray-400 text
  - Events: max 3 visible + "+2 more"

**Event Display**:
  - Small pill/chip in day cell
  - Color-coded by category
  - Truncated text
  - Click: opens event detail

**Week/Day View**:
  - Time slots on left: 12am-11pm
  - Events as positioned blocks
  - Overlapping events side by side
  - Current time: red line indicator

**Event Creation**:
  - Click + drag to create on calendar
  - Quick add modal/popover
  - Form: title, time, description, color

**Event Detail Popover**:
  - Event title and time
  - Description
  - Attendees
  - Actions: edit, delete
  - Click outside to close

**Mini Calendar** (sidebar):
  - Compact month view
  - Navigate main calendar
  - Selected date highlighted

Tech: React + date-fns + @dnd-kit (for drag) + Tailwind

43. 칸반 보드

Design a Kanban board interface:

**Board Layout**:
  - Horizontal scroll container
  - Columns: fixed width (300px) or flexible
  - Gap: 16px between columns
  - Full height layout

**Column**:
  - Header: title + card count + add button + menu
  - Background: gray-100 (subtle)
  - Border-radius: 8px
  - Padding: 12px
  - Max-height with scroll

**Column Header**:
  - Title: 14px semibold, editable on double-click
  - Count badge: gray pill
  - Add card button: + icon
  - Menu: rename, color, delete, collapse

**Column Colors**:
  - Colored top border (4px)
  - Or full header background
  - Predefined: gray, blue, green, yellow, red, purple

**Card**:
  - Background: white
  - Border-radius: 8px
  - Shadow: sm
  - Padding: 12px
  - Margin-bottom: 8px

**Card Content**:
  - Title: 14px, 2-line clamp
  - Labels: colored chips, top or bottom
  - Description preview: 13px gray-600
  - Attachments count + comments count
  - Assignees: avatar stack (max 3)
  - Due date: with overdue styling

**Drag and Drop**:
  - Drag handle or entire card
  - Visual feedback: card lifts, shadow increases
  - Drop placeholder: dashed outline
  - Between cards and between columns

**Card Quick Actions**:
  - Hover reveals: edit, archive, delete
  - Or right-click context menu

**Add Card**:
  - Inline at bottom of column
  - Quick add: just title
  - Or "+ Add card" opens modal

**Card Detail Modal**:
  - Full edit capabilities
  - Comments section
  - Activity log
  - Attachment upload

Tech: React + @dnd-kit + Tailwind + Headless UI

44. 파일 매니저

Design a file manager interface:

**Layout**:
  - Sidebar: folder tree
  - Main: file list/grid
  - Header: breadcrumb + actions

**Sidebar Folder Tree**:
  - Hierarchical expandable list
  - Folder icons
  - Active folder highlighted
  - Right-click: context menu
  - Drag to move files

**Header Bar**:
  - Breadcrumb navigation
  - Search input
  - View toggle: list/grid/details
  - Sort dropdown
  - Actions: upload, new folder

**List View**:
  - Columns: name, size, modified, owner
  - File icon based on type
  - Row selection with checkbox
  - Sortable columns

**Grid View**:
  - Large thumbnails for images
  - Icon for other file types
  - File name below (truncated)
  - Hover: checkbox appears

**File Item**:
  - Icon/thumbnail
  - Name (editable on rename)
  - File type indicator
  - Size formatted (KB, MB)
  - Modified date

**Selection**:
  - Click to select
  - Ctrl+click multi-select
  - Shift+click range select
  - Select all checkbox

**Context Menu** (right-click):
  - Open, Download
  - Cut, Copy, Paste
  - Rename, Delete
  - Share, Get link
  - Properties

**Drag and Drop**:
  - Drag files to move
  - Drag to folders in tree
  - Multi-select drag
  - Drop zone highlighting

**Upload**:
  - Drag files onto window
  - Upload progress modal
  - Queue for multiple files

**Empty State**:
  - Illustration
  - "This folder is empty"
  - Upload or create folder CTA

Tech: React + @tanstack/react-table + @dnd-kit + Tailwind

45. 실시간 모니터링 대시보드

Design a real-time monitoring dashboard:

**Layout**:
  - Full-width, minimal padding
  - Dark theme (better for monitoring)
  - Grid of widgets

**Status Overview Bar** (top):
  - System status: operational / degraded / down
  - Colored indicator (green/yellow/red)
  - Uptime percentage
  - Last updated timestamp

**Real-time Line Chart**:
  - Auto-scrolling X-axis (time)
  - Y-axis: metric value
  - Multiple series overlay
  - Threshold lines (warning, critical)
  - Area above threshold: red fill

**Metric Gauges**:
  - Circular progress gauges
  - CPU, Memory, Disk usage
  - Color zones: green → yellow → red
  - Numeric value in center

**Server/Service List**:
  - List with status dots
  - Quick metrics per service
  - Click to expand details
  - Sorting by status (issues first)

**Log Stream**:
  - Real-time scrolling logs
  - Color-coded by level
  - Timestamp + service + message
  - Filter by level/service
  - Pause auto-scroll on hover

**Alert Panel**:
  - Active alerts list
  - Severity: critical, warning, info
  - Acknowledge action
  - Link to incident details

**Time Controls**:
  - Live mode toggle
  - Historical time range
  - Auto-refresh interval

**Data Refresh**:
  - WebSocket for real-time
  - Connection status indicator
  - Reconnection handling

Tech: React + Recharts + WebSocket + Tailwind (dark theme)

46. 멀티 탭 워크스페이스

Design a multi-tab workspace interface:

**Tab Bar**:
  - Horizontal, scrollable overflow
  - Height: 40px
  - Background: gray-100
  - Position: below header

**Tab Item**:
  - Max-width: 200px
  - Padding: 8px 16px
  - Icon + title (truncate)
  - Close X button (appears on hover)
  - Active: white background, no border-bottom

**Tab States**:
  - Active: elevated, connected to content
  - Inactive: subtle background
  - Hover: slightly lighter
  - Modified: dot indicator (unsaved)

**Tab Actions**:
  - Drag to reorder
  - Middle-click to close
  - Right-click: context menu
  - Double-click: rename

**Context Menu**:
  - Close tab
  - Close others
  - Close tabs to right
  - Duplicate tab
  - Pin tab
  - Split view

**Pinned Tabs**:
  - Show only icon
  - Fixed to left
  - Cannot be closed without unpin
  - Different style

**Overflow Handling**:
  - Scroll buttons when overflow
  - Or dropdown showing all tabs
  - Tab list keyboard shortcut

**New Tab**:
  - + button at end
  - Keyboard shortcut: Ctrl+T
  - Opens new workspace or menu

**Tab Content Area**:
  - Full remaining height
  - Content per tab maintained
  - Smooth transition (optional)

**Split View**:
  - Horizontal or vertical split
  - Resizable divider
  - Drag tab to split

Tech: React + @dnd-kit + Tailwind + zustand (state)

47. 드래그 앤 드롭 위젯 그리드

Design a customizable widget dashboard:

**Grid System**:
  - Responsive grid: 12 columns
  - Row height: 100px base unit
  - Gap: 16px
  - Widgets span: 1-12 columns, 1-4+ rows

**Widget Container**:
  - Background: white
  - Border-radius: 12px
  - Shadow: sm
  - Resize handles: corners and edges

**Widget Header**:
  - Drag handle area
  - Title
  - Actions: refresh, configure, remove
  - Collapse/expand toggle

**Edit Mode**:
  - Toggle edit mode button
  - Widgets show drag handles
  - Resize handles visible
  - Grid lines visible
  - Add widget button

**Drag Behavior**:
  - Drag by header or handle
  - Ghost preview while dragging
  - Other widgets shift/resize
  - Snap to grid

**Resize Behavior**:
  - Corner and edge handles
  - Min/max size per widget type
  - Maintain aspect ratio option
  - Preview size while resizing

**Add Widget**:
  - Opens widget library modal
  - Categorized widget options
  - Preview of each widget
  - Drag from library to grid

**Widget Library**:
  - KPI cards
  - Charts (line, bar, pie)
  - Activity feed
  - Calendar
  - Tasks list
  - Notes

**Persistence**:
  - Save layout to user preferences
  - Layout presets/templates
  - Reset to default option

Tech: React + react-grid-layout + Tailwind

48. 데이터 필터 패널

Design a data filter panel:

**Panel Types**:
  - A: Sidebar (always visible)
  - B: Collapsible panel (expand/collapse)
  - C: Modal (mobile-friendly)

**Panel Header**:
  - Title: "Filters"
  - Clear all link/button
  - Close button (collapsible/modal)
  - Applied count badge

**Filter Groups**:
  - Collapsible sections
  - Section header + count
  - Dividers between groups

**Filter Types**:

**Search/Text**:
  - Input with clear button
  - Debounced value

**Single Select** (radio/dropdown):
  - Radio buttons
  - Or dropdown for many options
  - "Any" default option

**Multi-Select** (checkboxes):
  - Checkbox list
  - Select all / clear all
  - Search within options (many items)
  - Show more / less for long lists

**Range Slider**:
  - Two handles for min/max
  - Input fields synced with slider
  - Histogram behind (optional)

**Date Range**:
  - Preset buttons: Today, 7 days, 30 days, Custom
  - Date picker for custom range
  - Clear date button

**Nested Filters**:
  - Parent-child relationship
  - Select parent shows children
  - Indented checkboxes

**Active Filter Chips**:
  - Show above results
  - Removable individual chips
  - Clear all button

**Apply Behavior**:
  - Auto-apply on change
  - Or explicit "Apply Filters" button
  - Reset button

Tech: React + React Hook Form + Tailwind + Radix UI

49. 비교 뷰

Design a comparison view interface:

**Layout**:
  - Side-by-side columns (2-4 items)
  - Sticky header with item identifiers
  - Scrollable comparison area
  - Mobile: swipe between items or stacked

**Header Section**:
  - Item image/icon
  - Item title
  - Key identifier (price, rating)
  - Remove from comparison X
  - Add item button (if < max)

**Comparison Table**:
  - Attribute rows spanning all columns
  - Category groupings with headers
  - Values aligned per column

**Attribute Row**:
  - Attribute name (left or spanning)
  - Value per item
  - Highlight differences
  - Match indicator: ✓ same, ✗ different

**Value Formatting**:
  - Numbers: right-aligned
  - Boolean: check/x icons
  - Text: left-aligned
  - Missing: dash or "N/A"

**Highlighting**:
  - Best value: green highlight
  - Worst value: red or gray
  - Toggle highlighting on/off

**Sticky Columns**:
  - Attribute name column sticks left
  - Item headers stick top

**Empty Slots**:
  - "+ Add to compare" placeholder
  - Opens item selector modal

**Item Selector**:
  - Search/filter items
  - Recently viewed
  - Quick add buttons

**Actions**:
  - Print comparison
  - Share comparison link
  - Export as PDF/image

**Mobile Adaptation**:
  - Horizontal swipe between items
  - Or "Show differences only" toggle
  - Collapsible categories

Tech: React + Tailwind + Framer Motion (swipe)

50. 인사이트/요약 카드 섹션

Design an insights summary section:

**Section Layout**:
  - Horizontal scroll or grid
  - Cards with consistent height
  - Gap: 24px
  - "View all insights" link

**Insight Card**:
  - Width: 300-400px
  - Background: white
  - Border-left: 4px colored accent
  - Border-radius: 8px
  - Padding: 20px

**Card Structure**:
  - Icon/emoji indicator
  - Insight type label: "Trend", "Alert", "Opportunity"
  - Headline: 16px semibold, main insight
  - Supporting text: 14px gray-600
  - Metric highlight: large number if relevant
  - Action link: "View details →"

**Insight Types & Colors**:
  - Positive/Opportunity: green border, trending-up icon
  - Negative/Alert: red border, alert icon
  - Neutral/Info: blue border, info icon
  - Warning: amber border, warning icon

**Content Examples**:
  - "Revenue up 23% vs last month"
  - "3 tasks overdue this week"
  - "New feature adoption at 45%"
  - "Customer churn risk detected"

**AI-Generated Badge** (if applicable):
  - Small "AI" badge
  - Tooltip: "Generated by AI analysis"

**Dismissal**:
  - X button to dismiss
  - "Don't show again" option
  - Dismissed state persisted

**Auto-refresh**:
  - Updates periodically
  - "Updated 5 min ago" timestamp
  - Manual refresh button

**Empty State**:
  - "No new insights"
  - Tips for generating insights

Tech: React + Tailwind + Framer Motion (carousel)섹션 4: 모바일 앱 UI (51-65)

51. iOS 탭 바 네비게이션

Design an iOS-style bottom tab bar:

**Tab Bar Container**:
  - Position: fixed bottom
  - Height: 83px (including safe area)
  - Background: white/blur with translucency
  - Border-top: 0.5px gray-200
  - Safe area padding for notch devices

**Tab Item**:
  - Flex: 1, evenly distributed
  - Touch target: full height
  - Layout: icon above label, centered

**Icon**:
  - Size: 28px
  - SF Symbols style (line weight consistent)
  - Inactive: gray-500
  - Active: brand blue or tinted

**Label**:
  - Size: 10px
  - Font: SF Pro (or system)
  - Inactive: gray-500
  - Active: matches icon color

**Badge** (notifications):
  - Position: top-right of icon
  - Red circle with count
  - No count: just dot

**States**:
  - Default: gray icon/label
  - Selected: colored, filled icon variant
  - Pressed: slight opacity reduction

**Tab Transitions**:
  - No animation on tab switch (iOS standard)
  - Or subtle cross-fade

**Items**:
  - Maximum 5 tabs
  - Common: Home, Search, Add/Create, Activity, Profile

**"More" Tab** (if >5):
  - Opens list of additional items
  - Edit order capability

**Special Center Button** (optional):
  - Larger, floating above bar
  - For primary action (post, add)
  - Different shape (circle)

Tech: React Native / Expo + NativeWind

52. Android Material 바텀 시트

Design a Material Design bottom sheet:

**Sheet Container**:
  - Position: bottom, full width
  - Background: white, radius 28px top corners
  - Elevation: 8dp shadow
  - Max-height: 90% of screen

**Handle/Drag Indicator**:
  - Width: 32px, height: 4px
  - Background: gray-300
  - Border-radius: full
  - Center top, 12px from edge

**Sheet States**:
  - Collapsed: shows peek content (header only)
  - Half-expanded: 50% screen height
  - Expanded: full/max height

**Gestures**:
  - Drag handle to expand/collapse
  - Swipe down to dismiss
  - Tap outside to close
  - Velocity-based snap points

**Content Structure**:
  - Header: title, close X optional
  - Scrollable content area
  - Footer: sticky actions if needed

**Persistent Bottom Sheet**:
  - Always visible at peek height
  - Content scrolls within

**Modal Bottom Sheet**:
  - Has scrim/overlay behind
  - Blocks content underneath
  - Dismiss on outside tap

**Animation**:
  - Spring physics (damping, stiffness)
  - Smooth interpolation
  - 300ms typical duration

**Peek Content**:
  - Preview of content (map pin info, player controls)
  - Minimal actions
  - Clear affordance to expand

Tech: React Native + react-native-reanimated + react-native-gesture-handler

53. 스와이프 카드 인터페이스

Design a Tinder-style swipeable card interface:

**Card Stack**:
  - 3 cards visible (top + peek of next 2)
  - Stacked with slight offset and scale
  - Top card at full size

**Card Design**:
  - Full screen minus margins
  - Border-radius: 16px
  - Shadow: lg
  - Image background (full bleed)
  - Content overlay at bottom

**Card Content**:
  - Gradient overlay: bottom 40%, black→transparent
  - Title: large white text
  - Subtitle/details: smaller text
  - Badges/tags if applicable

**Swipe Gestures**:
  - Left: reject/pass (red X appears)
  - Right: accept/like (green heart appears)
  - Up: super action (star appears)
  - Down: dismiss/skip

**Visual Feedback During Swipe**:
  - Card rotates toward swipe direction
  - Opacity change on action icon
  - Background card scales up
  - Threshold indicator (icon grows)

**Animation**:
  - Swipe away: fly off screen with rotation
  - New card: scale up from stack
  - Spring back: if swipe not committed
  - Duration: 300ms, spring physics

**Action Buttons** (alternative to swipe):
  - Left: X button
  - Center: special action
  - Right: heart button
  - Positioned below card

**Undo Feature**:
  - Bring back last swiped card
  - Reverse animation

**Empty State**:
  - "No more cards"
  - Refresh or adjust filters CTA

Tech: React Native + react-native-reanimated + Gesture Handler

54. 온보딩 스크린 시퀀스

Design a mobile onboarding flow:

**Screen Structure**:
  - Full screen height
  - Skip button: top-right
  - Main content: centered
  - Pagination dots: bottom
  - CTA button: bottom

**Content Layout**:
  - Illustration: 40% top, centered
  - Title: 24px bold, centered
  - Description: 16px gray-600, centered, max 3 lines
  - Adequate spacing between elements

**Pagination Dots**:
  - Number = screen count (3-5)
  - Active: brand color, larger or filled
  - Inactive: gray-300, smaller
  - Dot size: 8px, gap: 8px

**Navigation**:
  - Swipe left/right between screens
  - Dots tappable for jump
  - Next/Continue button advances

**Screen Progression**:
  1. Value proposition
  2. Key feature 1
  3. Key feature 2
  4. Get started (with action)

**Final Screen**:
  - Main CTA: "Get Started" / "Create Account"
  - Secondary: "Already have an account? Sign in"
  - Remove skip button

**Animations**:
  - Cross-fade or parallax between screens
  - Illustration elements animate on enter
  - Dot scale animation on change

**Skip Behavior**:
  - Skips to final screen or main app
  - Store completion state
  - Don't show again

**First-time Only**:
  - Check if user completed onboarding
  - Redirect returning users to main app

Tech: React Native + react-native-onboarding-swiper + Reanimated

55. 모바일 채팅 인터페이스

Design a mobile messaging/chat interface:

**Screen Layout**:
  - Header: recipient info, back button
  - Message list: scrollable, full height
  - Input bar: fixed bottom

**Header**:
  - Back arrow
  - Avatar (40px)
  - Name + status (online/offline/typing)
  - Actions: call, video, menu

**Message List**:
  - Grouped by date (Today, Yesterday)
  - Reverse scroll (newest at bottom)
  - Pull to load older messages

**Message Bubble**:
  - Sent: right-aligned, brand color
  - Received: left-aligned, gray-100
  - Border-radius: 18px
  - Max-width: 70% of screen
  - Padding: 10px 14px

**Message Types**:
  - Text: variable height
  - Image: thumbnail with tap to expand
  - Voice: waveform + duration + play
  - Link: preview card
  - Reply: quoted message above

**Bubble Details**:
  - Timestamp: below bubble or on tap
  - Read receipts: checkmarks or "Seen"
  - Delivery status: sent, delivered, read

**Sent Message States**:
  - Sending: opacity, clock icon
  - Sent: single check
  - Delivered: double check
  - Read: blue double check

**Input Bar**:
  - Attachment button (left)
  - Text input: expandable
  - Emoji button
  - Send button (right, hidden when empty)
  - Voice record button (when empty)

**Typing Indicator**:
  - "User is typing..."
  - Animated dots in bubble

**Long Press Actions**:
  - Copy, Reply, Forward, Delete
  - React with emoji

Tech: React Native + react-native-gifted-chat + Reanimated

56. 상품 상세 페이지 (모바일)

Design a mobile product detail page:

**Image Gallery**:
  - Full-width swipeable carousel
  - Aspect ratio: 4:3 or 1:1
  - Pagination dots below
  - Tap to open fullscreen with zoom
  - Video thumbnail support

**Product Info** (below gallery):
  - Brand name: linked, gray-600
  - Product name: 20px bold
  - Rating: stars + count linked to reviews
  - Price: large, bold + compare-at-price

**Variant Selection**:
  - Color: swatches with border on selected
  - Size: button group
  - Quantity: stepper (- / count / +)
  - Stock status: "In stock" or "Only 3 left"

**Add to Cart**:
  - Sticky bottom bar
  - Full-width primary button
  - Price on left, button on right (optional)
  - Animation: button states

**Accordion Sections**:
  - Description
  - Specifications/details
  - Shipping info
  - Return policy
  - Collapsible with chevron

**Reviews Section**:
  - Average rating prominently
  - Rating breakdown bars
  - Recent reviews (3-5)
  - "View all X reviews" link
  - Write review CTA

**Related Products**:
  - Horizontal scroll carousel
  - Product cards
  - "You may also like" heading

**Sticky Elements**:
  - Buy button always visible
  - Or reveal on scroll direction

**Actions**:
  - Wishlist heart button
  - Share button
  - Store pickup check

Tech: React Native + NativeWind + react-native-snap-carousel

57. 모바일 결제 플로우

Design a mobile checkout flow:

**Progress Indicator**:
  - Top bar showing steps
  - Steps: Cart → Shipping → Payment → Confirm
  - Current step highlighted

**Step 1: Cart Review**:
  - Item cards: image, name, variant, qty, price
  - Edit quantity or remove
  - Promo code input
  - Order summary: subtotal, discounts, total
  - Continue button

**Step 2: Shipping**:
  - Saved addresses list with radio selection
  - Add new address button → form modal
  - Delivery method options with prices
  - Delivery date estimates
  - Continue button

**Address Form**:
  - Full name
  - Address line 1, 2
  - City, State, Postal code
  - Phone number
  - Save as default checkbox

**Step 3: Payment**:
  - Saved payment methods with selection
  - Add new card → form or card scanner
  - Digital wallets: Apple Pay, Google Pay
  - Billing same as shipping toggle
  - Continue button

**Payment Form**:
  - Card number with icon detection
  - Expiry (MM/YY)
  - CVV with info tooltip
  - Save card checkbox

**Step 4: Review & Confirm**:
  - Order summary
  - Shipping address (edit link)
  - Payment method (edit link)
  - Items list
  - Total breakdown
  - Place Order button (prominent)

**Success Screen**:
  - Confirmation animation (checkmark)
  - Order number
  - Email confirmation note
  - Continue shopping / Track order buttons

Tech: React Native + React Hook Form + Stripe SDK

58. 모바일 지도 인터페이스

Design a mobile map interface:

**Map View**:
  - Full screen map
  - Interactive: pan, zoom, rotate
  - Markers for locations

**UI Overlay Elements**:
  - Search bar: top, floating
  - Filter chips: below search, scrollable
  - Location button: right side
  - Zoom controls: optional (pinch native)

**Search Bar**:
  - White card with shadow
  - Search icon + input
  - Tap: expands or opens full search
  - Recent searches dropdown

**Map Markers**:
  - Custom styled pins
  - Cluster markers for density
  - Selected state: larger, elevated
  - Category colors/icons

**Bottom Sheet** (location details):
  - Collapsed: shows preview card
  - Expanded: full details
  - Peek height: 120px
  - Full height: 60% screen

**Location Card** (peek state):
  - Name + category
  - Rating + distance
  - Quick action buttons: directions, call

**Location Details** (expanded):
  - Photo gallery
  - Full address
  - Hours, phone, website
  - Reviews summary
  - Directions button
  - Save/share actions

**My Location Button**:
  - Floating right side
  - Tap: center on user
  - User location: blue pulsing dot

**Directions Mode**:
  - Route line overlay
  - Turn-by-turn card at bottom
  - ETA prominently displayed
  - Travel mode tabs: drive, walk, transit

**Filter/Category Chips**:
  - Horizontal scroll
  - Active: filled style
  - Tap: filter markers

Tech: React Native + react-native-maps + Bottom Sheet + MapBox

59. 소셜 피드 인터페이스

Design a social media feed:

**Feed Container**:
  - Full-screen scrolling list
  - Pull-to-refresh
  - Infinite scroll pagination

**Post Card**:
  - No border, separated by spacing
  - Background: white
  - Vertical layout

**Post Header**:
  - Avatar (40px)
  - Username (bold) + handle or timestamp
  - Follow button (if not following)
  - More menu (...)

**Post Content**:
  - Text: expandable if long, "...more"
  - Hashtags/mentions: highlighted, tappable
  - Link previews: card format

**Media Types**:
  - Single image: full width, tap to expand
  - Multiple images: grid or carousel
  - Video: auto-play muted, tap for sound
  - Story preview: circular thumbnail

**Image Grid**:
  - 2 images: side by side
  - 3 images: 1 large + 2 small
  - 4+ images: 2x2 grid + "+N" overlay

**Engagement Bar**:
  - Like: heart icon + count
  - Comment: bubble icon + count
  - Share/repost: arrow icon
  - Save/bookmark: flag icon
  - Spacing: icons left, save right

**Like Animation**:
  - Double-tap: large heart overlay
  - Heart fills red with scale animation

**Comments Preview**:
  - 1-2 top comments shown
  - "View all X comments" link
  - Add comment input teaser

**Stories Row** (top):
  - Horizontal scroll
  - Circular avatars with gradient ring
  - "Your story" with + icon first
  - Tap: opens fullscreen story viewer

**New Posts Indicator**:
  - "New posts" pill button
  - Appears when new content available
  - Tap scrolls to top and loads

Tech: React Native + FlashList + Reanimated

60. 플로팅 액션 버튼

Design a Floating Action Button (FAB) system:

**Primary FAB**:
  - Size: 56dp
  - Position: bottom-right, 16dp from edges
  - Shape: circle
  - Shadow: elevation 6dp
  - Color: brand primary

**Icon**:
  - Size: 24dp
  - Color: white or contrast
  - Centered

**States**:
  - Default: resting elevation
  - Pressed: increased elevation
  - Disabled: gray, no shadow

**Extended FAB**:
  - Pill shape with icon + label
  - Min-width: 80dp
  - Shrinks to icon-only on scroll

**Mini FAB**:
  - Size: 40dp
  - For secondary actions
  - Often paired with primary

**Speed Dial** (expandable):
  - Primary FAB at base
  - Tap: reveals 3-6 action buttons
  - Actions animate up sequentially
  - Labels appear beside each
  - Backdrop overlay (optional)

**Speed Dial Animation**:
  - Primary: rotates (+ to x)
  - Actions: scale + fade in, staggered 50ms
  - Close: reverse animation

**Action Items**:
  - Mini FABs (40dp)
  - Label to left of each
  - Colored or matching primary

**Scroll Behavior**:
  - Hide on scroll down
  - Show on scroll up
  - Or always visible

**Position Variants**:
  - Bottom-right (default)
  - Bottom-center
  - Avoid safe areas/nav bars

**Accessibility**:
  - Min 48dp touch target
  - Clear labels for actions
  - Announced by screen readers

Tech: React Native + Reanimated + Portal for overlay

61. Pull-to-Refresh 인디케이터

Design pull-to-refresh interactions:

**Standard Implementation**:
  - Pull threshold: 80px
  - Indicator appears from top
  - Release to refresh

**Indicator Types**:

**Spinner Style**:
  - Circular progress spinner
  - Rotates continuously during refresh
  - Scales in as pulled

**Progress Arc Style**:
  - Arc fills as user pulls
  - Complete at threshold
  - Converts to spinner on release

**Custom Animation**:
  - Branded character/icon
  - Animation plays on pull
  - Completes during refresh

**Pull Phases**:
  1. Initial: nothing visible
  2. Pulling: indicator appears, grows
  3. Threshold: indicator fully visible, haptic feedback
  4. Refreshing: loading animation
  5. Complete: success state, hides

**Visual Feedback**:
  - Pull distance affects indicator size
  - Resistance curve near threshold
  - Snap at threshold point
  - Haptic at threshold (if available)

**Content Offset**:
  - Content moves down with pull
  - Indicator in revealed space
  - Or indicator overlays content

**States**:
  - pulling: scale based on distance
  - canRefresh: full size, "Release to refresh"
  - refreshing: spinning, "Refreshing..."
  - complete: checkmark, "Updated"

**Lottie Animation Option**:
  - Custom branded animation
  - Scrubbing based on pull distance
  - Play on refresh phase

Tech: React Native + react-native-reanimated + FlatList

62. 제스처 힌트 오버레이

Design gesture education overlays:

**Overlay Container**:
  - Full screen semi-transparent
  - Dark: rgba(0,0,0,0.8)
  - Spotlights on relevant UI areas

**Spotlight Effect**:
  - Cut-out circle/rect on overlay
  - Exposes actual UI beneath
  - Border or glow around cut-out

**Gesture Indicator**:
  - Animated hand/finger icon
  - Shows the gesture motion
  - Swipe: finger moves across
  - Tap: finger presses with ripple
  - Long press: finger holds with rings

**Text Instruction**:
  - Brief: "Swipe left to delete"
  - Position: near gesture area
  - Background: contrast pill
  - Font: 16px, readable

**Multi-step Tutorial**:
  - Sequential gestures
  - Next button or auto-advance
  - Progress dots
  - Skip all option

**Animation Details**:
  - Hand appears, performs gesture
  - Loops 2-3 times
  - Subtle fade between loops
  - Interactive elements pulse

**Dismissal**:
  - "Got it" button
  - Tap anywhere to dismiss
  - Complete the gesture to dismiss

**Trigger Conditions**:
  - First-time feature use
  - After update with new features
  - Manual "Help" menu access

**Remember Dismissal**:
  - Don't show again toggle
  - Store in user preferences
  - Reset in settings

**Gesture Types to Show**:
  - Swipe actions (delete, archive)
  - Pull to refresh
  - Pinch to zoom
  - Double-tap to like
  - Long-press for options

Tech: React Native + Reanimated + react-native-svg (for spotlight)

63. 모바일 폼 레이아웃

Design mobile-optimized forms:

**Form Container**:
  - Padding: 16px horizontal
  - Scroll view for long forms
  - Keyboard-aware scrolling

**Input Fields**:
  - Full width
  - Height: 56px (touch-friendly)
  - Font: 16px (prevents iOS zoom)
  - Padding: 16px horizontal

**Field Layout**:
  - Label above input
  - Or floating label (Material style)
  - Required indicator: asterisk
  - Margin between fields: 20px

**Floating Label**:
  - Rests in input when empty
  - Animates up and shrinks on focus
  - Stays up when filled

**Keyboard Types**:
  - email-address: for email fields
  - phone-pad: for phone numbers
  - decimal-pad: for prices
  - url: for website fields

**Autofill Support**:
  - textContentType for iOS
  - autoComplete for Android
  - Enable password managers

**Input Accessories**:
  - Keyboard toolbar: Next/Previous/Done buttons
  - Navigate between fields
  - Done dismisses keyboard

**Validation**:
  - Real-time on blur
  - Error text below field
  - Red border on error
  - Shake animation optional

**Submit Button**:
  - Full width at bottom
  - Fixed above keyboard when visible
  - Or scroll to button

**Form Sections**:
  - Group related fields
  - Section headers
  - Visual dividers

**Long Forms**:
  - Progress indicator
  - Save draft capability
  - Multi-step wizard

Tech: React Native + React Hook Form + KeyboardAvoidingView

64. 앱 스플래시 스크린

Design an app splash/launch screen:

**Static Splash** (native):
  - Shows immediately on launch
  - Single static image
  - Matches app icon style
  - Logo centered

**Design Elements**:
  - Logo: centered, appropriate size
  - Background: brand color or gradient
  - Optional: tagline below logo
  - No interactive elements

**Sizing**:
  - Multiple resolutions for device sizes
  - Safe area consideration
  - Logo scales proportionally

**Animated Splash** (JS layer):
  - Appears after native splash
  - Logo animation
  - Smooth transition to app

**Animation Ideas**:
  - Logo fade in + scale up
  - Logo draws/morphs into shape
  - Background color transitions
  - Particles or pattern reveal

**Transition to App**:
  - Fade out splash
  - Slide up to reveal content
  - Logo moves to header position
  - Duration: 500-800ms

**Loading State**:
  - If app needs to load data
  - Progress indicator below logo
  - "Loading..." text optional
  - Don't show if load is fast

**Best Practices**:
  - Keep total time < 3 seconds
  - Match native to animated seamlessly
  - Use same background color
  - Consider system dark mode

**Technical**:
  - iOS: LaunchScreen.storyboard
  - Android: splash XML + themes
  - react-native-splash-screen library

Tech: React Native + react-native-splash-screen + Lottie

65. 권한 요청 다이얼로그

Design permission request screens:

**Pre-permission Screen** (before system prompt):
  - Full screen or modal
  - Illustration of feature
  - Clear benefit explanation
  - Primary: "Continue" → triggers system prompt
  - Secondary: "Not now" → skip

**Content Structure**:
  - Icon/illustration: feature-related
  - Title: "Allow notifications?" or custom
  - Description: why this helps user
  - Benefits: bullet points optional
  - Buttons at bottom

**Permission Types & Messaging**:

**Notifications**:
  - "Stay updated on new messages"
  - "Get alerts for important events"
  - Show notification preview mockup

**Camera**:
  - "Take photos and scan codes"
  - Camera viewfinder illustration
  - Privacy reassurance

**Location**:
  - "Find nearby stores"
  - "Get local recommendations"
  - Map with pin illustration

**Photos/Media**:
  - "Save and share images"
  - "Choose profile picture"
  - Gallery grid illustration

**Microphone**:
  - "Send voice messages"
  - "Use voice search"
  - Waveform illustration

**Denied State Handling**:
  - Explain feature is limited
  - "Open Settings" button
  - Link directly to app settings
  - Graceful degradation

**Contextual Requests**:
  - Ask when feature is first used
  - Not on app first launch
  - Explain in context of action

**Design Best Practices**:
  - Don't show if already granted
  - Friendly, non-scary tone
  - Benefit-focused, not demand
  - Respect "Not now" choice

Tech: React Native + react-native-permissions + Custom UI섹션 5: 이커머스 (66-75)

66. 상품 카드 그리드

Design an ecommerce product card grid:

**Grid Layout**:
  - Desktop: 4 columns
  - Tablet: 3 columns
  - Mobile: 2 columns
  - Gap: 24px desktop, 16px mobile

**Card Container**:
  - Background: white
  - Border-radius: 12px
  - Overflow: hidden
  - Hover: shadow elevation + translateY(-4px)

**Product Image**:
  - Aspect ratio: 1:1 or 4:3
  - Object-fit: cover
  - Lazy loading
  - Hover: secondary image swap (optional)

**Quick Actions** (on image hover):
  - Quick view button centered
  - Wishlist heart top-right
  - Add to cart bottom
  - Semi-transparent overlay

**Product Info**:
  - Padding: 16px
  - Brand: 12px gray-500, uppercase
  - Name: 14px semibold, 2-line clamp
  - Rating: stars + count (optional)
  - Price: 16px bold

**Pricing Display**:
  - Current price: bold, dark
  - Compare-at: strikethrough, gray
  - Discount badge: red/green pill, "-20%"

**Badge System**:
  - Position: top-left of image
  - Types: New, Sale, Bestseller, Low Stock
  - Colors: distinct per type
  - Multiple badges stack

**Color Swatches** (if variants):
  - Small circles below image
  - Max 4-5 visible + "+3" indicator
  - Hover: changes product image

**Out of Stock**:
  - Dimmed card
  - "Sold Out" overlay
  - Notify me CTA

Tech: Next.js + Tailwind + Image optimization

67. 상품 상세 페이지 (웹)

Design a product detail page:

**Layout**:
  - Two columns: images left (55%), info right (45%)
  - Max-width: 1400px
  - Mobile: stacked, images on top

**Image Gallery**:
  - Main image: large, zoomable
  - Thumbnails: vertical strip left or horizontal below
  - Zoom: hover magnifier or lightbox
  - Video thumbnail with play icon

**Main Image Features**:
  - Click: opens lightbox gallery
  - Hover: zoom lens effect
  - Swipe on mobile
  - Image counter: 1/5

**Product Title Section**:
  - Brand: linked
  - Product name: 28px bold
  - SKU/product ID: small, gray

**Reviews Summary**:
  - Star rating (filled + half stars)
  - Review count: "(128 reviews)"
  - Click: scrolls to review section

**Price Block**:
  - Sale price: 32px bold
  - Original: strikethrough, smaller
  - Discount: percentage or amount saved
  - Price per unit if applicable

**Variant Selection**:
  - Color: swatches with name on hover
  - Size: button group with stock indication
  - Out of stock: disabled with strikethrough
  - Size guide link

**Quantity Selector**:
  - Minus / count / plus buttons
  - Input for direct entry
  - Max: stock available

**Add to Cart**:
  - Large primary button, full width
  - "Adding..." loading state
  - Success: "Added! View Cart"
  - Sticky on mobile scroll

**Secondary Actions**:
  - Wishlist: "Add to Wishlist" with heart
  - Share: opens share modal

**Delivery Info**:
  - Estimated delivery date
  - Shipping cost or free threshold
  - Pickup availability checker

**Accordion Details**:
  - Description
  - Specifications (table format)
  - Shipping & Returns
  - Care Instructions

**Reviews Section** (below):
  - Summary: average + distribution bars
  - Sort/filter reviews
  - Review cards with photo support
  - Pagination
  - Write review CTA

Tech: Next.js + Tailwind + react-medium-image-zoom

68. 장바구니 사이드 패널

Design a slide-out cart drawer:

**Trigger**:
  - Cart icon in header
  - Badge with item count
  - Click: opens drawer

**Drawer Container**:
  - Position: fixed right
  - Width: 400px (or 100% mobile)
  - Height: 100vh
  - Background: white
  - Shadow: xl

**Overlay**:
  - Semi-transparent backdrop
  - Click to close

**Header**:
  - "Your Cart (3 items)"
  - Close X button
  - Continue shopping link

**Cart Items List**:
  - Scrollable area
  - Product cards stacked

**Cart Item Card**:
  - Image: 80x80px thumbnail
  - Product name (linked)
  - Variant info: size, color
  - Quantity selector (compact)
  - Price per item
  - Remove button (trash or X)

**Quantity Selector**:
  - Compact: select dropdown or small stepper
  - Update triggers recalculation

**Item Removal**:
  - Swipe to delete (mobile)
  - Confirm or undo option
  - Animation: slide out

**Empty Cart State**:
  - Illustration
  - "Your cart is empty"
  - "Continue Shopping" CTA
  - Recently viewed items

**Promo Code Input**:
  - Collapsible section
  - Input + Apply button
  - Success/error feedback
  - Applied code shows with remove

**Order Summary**:
  - Subtotal
  - Discount amount
  - Shipping estimate or "Free"
  - Tax (if applicable)
  - Total: largest, bold

**Checkout CTA**:
  - Full-width primary button
  - "Checkout - $149.99"
  - Trust badges below

**Upsells/Cross-sells**:
  - "You might also like"
  - 2-3 product cards
  - Quick add button

Tech: React + Headless UI Dialog + Framer Motion

69. 체크아웃 단계 UI

Design a multi-step checkout flow:

**Progress Indicator**:
  - Horizontal stepper at top
  - Steps: Information, Shipping, Payment, Review
  - Icons or numbers
  - Current: filled, Past: check, Future: outline

**Step Indicator Design**:
  - Circles connected by lines
  - Active step: brand color fill
  - Completed: green check
  - Connecting line: fills as progress

**Step 1: Customer Information**:
  - Contact info: email, phone
  - Or "Continue as Guest" option
  - Sign in link for returning customers

**Step 2: Shipping Address**:
  - Saved addresses (if logged in)
  - Address form with autocomplete
  - Address validation feedback
  - Ship to different address toggle

**Step 3: Shipping Method**:
  - Radio list of options
  - Carrier + name + delivery estimate
  - Price for each option
  - Free shipping threshold message

**Step 4: Payment**:
  - Saved cards (if logged in)
  - Credit card form
  - Digital wallets (Apple Pay, etc.)
  - Billing same as shipping toggle

**Step 5: Review & Place Order**:
  - Order summary
  - Edit links for each section
  - Terms checkbox
  - Place Order button

**Order Summary Sidebar** (desktop):
  - Persistent on right side
  - Item list with images
  - Collapsible on mobile
  - Running total updates

**Trust Elements**:
  - Security badges
  - SSL indicator
  - Money-back guarantee
  - Customer support info

**Mobile Optimization**:
  - Single column
  - Sticky continue button
  - Collapsible order summary

Tech: Next.js + React Hook Form + Stripe Elements + Tailwind

70. 주소 폼

Design an address input form:

**Form Layout**:
  - Single column
  - Logical grouping
  - Clear labels

**Fields**:

**Country/Region**:
  - Dropdown with search
  - Flag icons (optional)
  - First field: affects other field formats

**Full Name**:
  - Single field (or split First/Last)
  - Auto-capitalize

**Street Address**:
  - Address line 1: required
  - Address line 2: optional, "Apt, suite, etc."
  - Autocomplete: google places integration

**City**:
  - Text input
  - Autocomplete from address service

**State/Province**:
  - Dropdown for countries with states
  - Text input for others
  - Dynamic based on country

**Postal/ZIP Code**:
  - Text input
  - Format hint based on country
  - Validation per country format

**Phone Number**:
  - Country code selector
  - Phone input with formatting
  - "For delivery updates"

**Address Autocomplete**:
  - Google Places integration
  - Suggestions as user types
  - Auto-populate all fields on select
  - Manual entry option

**Validation**:
  - Real-time format validation
  - Address verification service
  - Suggest corrections if invalid

**Save Address Options**:
  - "Save for future orders" checkbox
  - "Set as default" checkbox
  - Address nickname field

**Multiple Addresses**:
  - List saved addresses
  - Select to use
  - Edit/delete options
  - "Add new address" button

Tech: React + React Hook Form + Google Places API + Tailwind

71. 결제 수단 선택 UI

Design a payment method selection interface:

**Saved Payment Methods** (returning users):
  - List of saved cards
  - Card brand icon + last 4 digits
  - Expiry date
  - Default badge
  - Radio selection
  - Edit/delete actions

**Card Display Format**:
  - Icon: Visa, Mastercard, Amex, etc.
  - Number: •••• •••• •••• 4242
  - Expiry: Expires 12/26
  - Cardholder name

**Add New Card Section**:
  - Card number input with icon detection
  - Expiry: MM/YY format
  - CVV: 3-4 digits with info tooltip
  - Name on card
  - Save card checkbox

**Card Input Formatting**:
  - Auto-spacing: 4444 5555 6666 7777
  - Card brand detection on first digits
  - Icon updates as user types
  - Validation: Luhn check

**Digital Wallets**:
  - Apple Pay button (Safari/iOS)
  - Google Pay button
  - PayPal button
  - Shop Pay, etc.
  - Styled per brand guidelines

**Wallet Button Display**:
  - Separate section: "Express checkout"
  - Branded buttons
  - Or option within payment method list

**Billing Address**:
  - "Same as shipping" toggle (default on)
  - If off: show address form
  - Or minimal fields if needed

**Security Indicators**:
  - Lock icon near card inputs
  - "Secured by [provider]" badge
  - PCI compliance note

**Error Handling**:
  - Card declined message
  - Retry or try different card
  - Contact support link

**Split Payment** (optional):
  - Gift card + credit card
  - Gift card balance shown
  - Remaining charged to card

Tech: React + Stripe Elements + React Hook Form + Tailwind

72. 주문 완료 페이지

Design an order confirmation page:

**Success Header**:
  - Green checkmark icon/animation
  - "Thank you for your order!"
  - Order number: #ORD-12345
  - Confirmation email note

**Order Summary Card**:
  - Order date
  - Items ordered (collapsible if many)
  - Each: image, name, qty, price
  - Subtotal, shipping, tax, total

**Delivery Information**:
  - Shipping address
  - Estimated delivery date
  - Shipping method chosen

**Payment Information**:
  - Payment method used (last 4)
  - Billing address
  - Transaction ID (optional)

**Next Steps Section**:
  - "Track your order" button → tracking page
  - Download receipt/invoice
  - Order history link

**Account Prompt** (guest checkout):
  - "Create an account to track orders"
  - Pre-fill email from order
  - Just needs password

**Support Information**:
  - "Questions about your order?"
  - Contact email/phone
  - FAQ link
  - Return policy link

**Recommendations**:
  - "Customers also bought"
  - Related products
  - Subtle, not aggressive

**Social Sharing** (optional):
  - "Share your purchase"
  - Social icons
  - Or "Share your experience"

**Animations**:
  - Confetti or celebration effect
  - Checkmark draw animation
  - Subtle, delightful

**Print/Download**:
  - Print confirmation link
  - PDF download option

Tech: Next.js + Tailwind + Lottie (for animation)

73. 위시리스트 페이지

Design a wishlist/favorites page:

**Page Header**:
  - Title: "My Wishlist" or "Saved Items"
  - Item count
  - Share wishlist button (optional)
  - Clear all (with confirmation)

**List View Options**:
  - Grid view / List view toggle
  - Sort: Date added, Price, Name

**Product Card** (in wishlist):
  - Product image
  - Product name (linked)
  - Price (current + sale indicator)
  - Stock status
  - Remove button (heart or X)
  - "Add to Cart" button
  - Move to different list (if multiple lists)

**Out of Stock Items**:
  - Dimmed styling
  - "Out of Stock" badge
  - "Notify when available" CTA
  - Keep in list option

**Price Changes**:
  - Indicator if price dropped
  - "Price dropped $X" badge
  - Highlighted in some way

**Empty State**:
  - Heart illustration
  - "Your wishlist is empty"
  - "Start saving items you love"
  - Browse/shop CTA

**Multiple Wishlists** (advanced):
  - Create new list
  - Name lists (Birthday, Home, etc.)
  - Move items between lists
  - List selector/tabs

**Quick Add to Cart**:
  - Select variant if needed
  - Direct add button
  - Success feedback

**Share Wishlist**:
  - Generate shareable link
  - Copy link button
  - Social share options
  - Privacy: public/private toggle

**Mobile Optimizations**:
  - Swipe to remove
  - Compact list view
  - Sticky "Add all to cart"

Tech: Next.js + Tailwind + localStorage (or backend)

74. 프로모션/쿠폰 코드 UI

Design a promo code input system:

**Input Location**:
  - Cart/checkout summary section
  - Collapsible: "Have a promo code?"
  - Expands to show input

**Input Design**:
  - Text input + Apply button
  - Button: inline right or below
  - Placeholder: "Enter code"
  - Loading state on apply

**Success State**:
  - Green check icon
  - Code displayed: "SAVE20 applied"
  - Discount amount shown
  - Remove link

**Error States**:
  - Invalid code: red text below
  - Expired code message
  - Minimum not met: "Spend $X more"
  - Already applied message

**Discount Display** (in summary):
  - Line item: "Discount (SAVE20)"
  - Amount: -$20.00 in green
  - Before total

**Multiple Codes** (if allowed):
  - List of applied codes
  - Each removable
  - Input for additional

**Auto-Apply**:
  - URL parameter support: ?promo=SAVE20
  - Auto-apply on page load
  - Show success message

**Code Suggestions** (logged in):
  - "Available codes" dropdown
  - Show user's available promos
  - Click to apply

**Visual Feedback**:
  - Spinner during validation
  - Success animation
  - Total updates smoothly

**Gift Card vs Promo**:
  - Separate inputs if different
  - Gift card: shows remaining balance
  - Can combine: gift card + promo

**Mobile Considerations**:
  - Full-width input
  - Clear tap targets
  - Keyboard dismiss on apply

Tech: React + React Hook Form + Tailwind

75. 리뷰 작성 폼

Design a product review submission form:

**Trigger/Location**:
  - "Write a Review" CTA on product page
  - Post-purchase email link
  - Order history page

**Form Container**:
  - Modal or dedicated page
  - Product context: image + name

**Rating Input**:
  - 5 stars, large and tappable
  - Hover: preview rating
  - Click: sets rating
  - Required field
  - Mobile: tap each star

**Star Labels** (on selection):
  - 1: Poor
  - 2: Fair
  - 3: Good
  - 4: Very Good
  - 5: Excellent

**Review Title**:
  - Text input
  - Placeholder: "Sum up your experience"
  - Max 100 characters
  - Optional or required

**Review Body**:
  - Textarea
  - Placeholder: "Tell others about..."
  - Min 50 characters
  - Max 2000 characters
  - Character counter

**Photo Upload**:
  - "Add photos" button
  - Multiple file select
  - Image previews with remove
  - Max 5 photos
  - File size/type restrictions

**Attribute Ratings** (optional):
  - Quality, Value, Fit, etc.
  - Mini star ratings or scale
  - Product category specific

**Reviewer Info**:
  - Display name (auto if logged in)
  - Location (optional)
  - Verified purchase badge (auto)

**Recommendation**:
  - "Would you recommend?"
  - Yes/No buttons
  - Thumbs icons

**Terms/Guidelines**:
  - Link to review guidelines
  - Checkbox: "I confirm..."

**Submit Button**:
  - Primary button
  - Loading state
  - "Submit Review"

**Success State**:
  - Thank you message
  - "Review submitted for moderation"
  - Return to product link

Tech: React + React Hook Form + Cloudinary/S3 (uploads) + Tailwind섹션 6: 인터랙션 플로우 시각화 (76-85)

76. 사용자 가입 플로우

Design a user registration flow diagram:

**Flow Overview**:
Landing → Sign Up Form → Email Verification → Profile Setup → Dashboard

**Entry Points**:
  - Header CTA: "Sign Up"
  - Homepage hero button
  - Pricing page "Get Started"
  - Feature page CTAs

**Sign Up Form Screen**:
  - Email input
  - Password (with requirements)
  - Terms acceptance
  - OR social auth (Google, Apple)
  - "Already have account? Log in"

**Social Auth Branch**:
  - OAuth popup/redirect
  - Permission consent
  - Returns with profile data
  - Skip email verification

**Email/Password Branch**:
  - Submit → Validation
  - Success → Verification sent
  - Error → Show field errors

**Email Verification**:
  - Check email message
  - Verification link
  - Resend option (rate limited)
  - Link clicked → Verified

**Profile Setup** (optional):
  - Step 1: Basic info (name, avatar)
  - Step 2: Preferences/interests
  - Step 3: Workspace/team setup
  - Skip options available

**Dashboard Landing**:
  - First-time welcome message
  - Onboarding checklist
  - Feature tour prompt

**Error Branches**:
  - Email exists → Login prompt
  - Weak password → Requirements hint
  - Verification expired → Resend flow

**Flow Visualization**:
  - Swimlanes: User, System, Email
  - Decision diamonds for branches
  - Success/error paths colored

Tech: Mermaid/Lucidchart diagram → Pencil.dev canvas

77. 결제 프로세스 플로우

Design a payment processing flow diagram:

**Happy Path**:
Cart → Checkout → Payment → Processing → Success → Confirmation

**Detailed Steps**:

**1. Cart**:
  - Review items
  - Update quantities
  - Apply promo code
  - Continue to checkout

**2. Checkout Information**:
  - Contact info
  - Shipping address
  - Delivery method
  - Continue to payment

**3. Payment Entry**:
  - Select payment method
  - Enter card details
  - Billing address
  - Submit payment

**4. Payment Processing** (system):
  - Validate cart (items, stock)
  - Apply discounts
  - Send to payment gateway
  - 3D Secure auth (if required)

**5a. Payment Success**:
  - Create order record
  - Reserve inventory
  - Send confirmation email
  - Show success page

**5b. Payment Failure**:
  - Identify error type
  - Display user-friendly message
  - Retry option
  - Alternative payment suggestion

**Error Types**:
  - Card declined
  - Insufficient funds
  - Fraud detection
  - Network error
  - 3DS authentication failed

**Fraud Check Branch**:
  - Risk score evaluation
  - Manual review queue (high risk)
  - Auto-approve (low risk)
  - Customer verification needed

**Inventory Check**:
  - Item out of stock during checkout
  - Notify user
  - Suggest alternatives
  - Update cart

**Flow Elements**:
  - User actions: rectangles
  - System processes: rounded
  - Decisions: diamonds
  - Data stores: cylinders
  - External services: clouds

Tech: Flowchart in Pencil.dev → reference for UI

78. 에러 처리 분기

Design an error handling flow diagram:

**Error Categories**:
  - Client errors (validation, network)
  - Server errors (API, database)
  - Third-party errors (payment, services)
  - User errors (permissions, auth)

**Client-Side Validation Errors**:
  - Input validation failed
  - Show inline error message
  - Focus on first error field
  - Highlight field
  - Enable submit when fixed

**Network Errors**:
  - No connection detected
  - Show offline indicator
  - Queue action for retry
  - Retry on reconnection
  - Persist form data locally

**API Error Responses**:

**400 Bad Request**:
  - Parse error details
  - Show specific field errors
  - Log for debugging

**401 Unauthorized**:
  - Token expired?
  - Try refresh token
  - If refresh fails → login redirect
  - Preserve intended destination

**403 Forbidden**:
  - Show permission denied
  - Suggest upgrade/contact admin
  - Log access attempt

**404 Not Found**:
  - Show 404 page
  - Suggest alternatives
  - Search functionality

**500 Server Error**:
  - Generic error message
  - "Try again" button
  - Report issue option
  - Log full error details

**Timeout Errors**:
  - Show timeout message
  - Auto-retry with backoff
  - Manual retry button
  - Status check endpoint

**Recovery Flows**:
  - Retry with exponential backoff
  - Fallback to cached data
  - Graceful degradation
  - Support contact

**Error Logging**:
  - Error boundary catch
  - Send to error service
  - Include context
  - User session info

Tech: Mermaid diagram → implementation reference

79. 페이지 네비게이션 맵

Design a site navigation/sitemap diagram:

**Homepage Hub**:
  - Main entry point
  - Branches to all major sections
  - Quick links to key pages

**Main Navigation Sections**:

**Products**:
  - All Products (listing)
    - Category pages
      - Product detail pages
  - New Arrivals
  - Best Sellers
  - Sale

**About**:
  - Our Story
  - Team
  - Careers
    - Job listings
    - Job detail
    - Application form
  - Press

**Support**:
  - Help Center
    - Category
    - Article
  - Contact Us
  - FAQ
  - Shipping Info
  - Returns

**Account** (authenticated):
  - Dashboard
  - Orders
    - Order detail
  - Wishlist
  - Settings
    - Profile
    - Security
    - Notifications
  - Logout

**Auth Flow**:
  - Login
  - Register
  - Forgot Password
  - Reset Password

**Utility Pages**:
  - Cart
  - Checkout (multi-step)
  - Search Results
  - 404 Error
  - Privacy Policy
  - Terms of Service

**Visual Representation**:
  - Tree structure
  - Color code by section
  - Indicate auth-required pages
  - Show main vs footer nav

**Navigation Types**:
  - Primary: main header nav
  - Secondary: subnavigation
  - Footer: utility links
  - Breadcrumb paths

Tech: Sitemap diagram in Pencil.dev

80. 조건부 UI 표시 로직

Design conditional UI logic flowchart:

**User State Conditions**:

**Authentication**:
  - Logged in → Show user menu, dashboard link
  - Logged out → Show login/signup buttons
  - Verified email → Full access
  - Unverified → Show verification banner

**User Role**:
  - Admin → Show admin panel link
  - Member → Standard features
  - Guest → Limited features, upgrade prompts
  - Premium → Hide upgrade CTAs

**User Preferences**:
  - Dark mode → Apply dark theme
  - Language → Localized content
  - Currency → Price display format
  - Notifications → Badge visibility

**Content Conditions**:

**Data State**:
  - Loading → Show skeleton/spinner
  - Empty → Empty state illustration
  - Data exists → Render content
  - Error → Error message component

**Item State**:
  - In stock → "Add to Cart" active
  - Out of stock → "Notify Me" shown
  - Limited stock → "Only X left" badge
  - Pre-order → "Pre-order" button

**Cart State**:
  - Empty → "Start shopping" CTA
  - Has items → Show item count badge
  - Has promo → Show discount

**Feature Flags**:
  - Feature enabled → Show feature
  - Feature disabled → Hide/fallback
  - A/B test variant → Variant component

**Device Conditions**:
  - Mobile → Mobile nav, touch targets
  - Desktop → Desktop layout
  - Tablet → Adaptive components

**Time-Based**:
  - Sale active → Sale banner, badges
  - Limited time → Countdown timer
  - After hours → Chat offline state

**Flow Format**:
  - Decision trees
  - If/else branches
  - Multiple conditions combined

Tech: Logic diagram → React conditional rendering

81. 드래그 앤 드롭 상호작용

Design drag and drop interaction flow:

**Interaction States**:

**1. Idle State**:
  - Draggable items visible
  - Drop zones defined
  - Cursor: grab on draggables
  - Visual affordance (handle icon)

**2. Drag Start**:
  - User clicks/touches and holds
  - Item becomes "dragging"
  - Clone/ghost created
  - Original dims or shows placeholder
  - Cursor: grabbing

**3. During Drag**:
  - Ghost follows cursor/touch
  - Valid drop zones highlight
  - Invalid zones show restrictions
  - Scroll triggers near edges
  - Other items shift to make space

**4. Over Valid Drop Zone**:
  - Zone highlight intensifies
  - Drop indicator shows position
  - Snap preview of placement
  - Accessibility: announce zone

**5. Drop Success**:
  - Ghost animates to position
  - Item settles in new location
  - Old position closes up
  - Success feedback (optional)

**6. Drop Canceled**:
  - Item animates back to origin
  - All highlights removed
  - Original state restored

**Keyboard Interaction**:
  - Space/Enter: pick up item
  - Arrow keys: move position
  - Space/Enter: drop item
  - Escape: cancel drag

**Touch Interaction**:
  - Long press: initiate drag
  - Move finger: drag item
  - Release: drop item
  - Haptic feedback at threshold

**Accessibility Flow**:
  - Screen reader announcements
  - "Item picked up"
  - "Moved to position X"
  - "Item dropped in [zone]"

**Edge Cases**:
  - Drag outside window
  - Touch accidentally released
  - Multiple drag sources
  - Nested drop zones

Tech: Interaction storyboard → @dnd-kit implementation

82. 무한 스크롤 시퀀스

Design infinite scroll loading sequence:

**Initial Load**:
  - Fetch first page (10-20 items)
  - Show loading skeleton
  - Render items
  - Observe scroll position

**User Scrolls Down**:
  - Track scroll position
  - Calculate distance to bottom
  - Trigger threshold: 200-500px before end

**Load More Trigger**:
  - Threshold reached
  - Check if more pages exist
  - If yes: fetch next page
  - Show loading indicator

**Loading Indicator**:
  - Spinner at bottom of list
  - Or skeleton items
  - Or pulsing animation
  - Maintain scroll position

**New Items Loaded**:
  - Append to existing list
  - Smooth height transition
  - Remove loading indicator
  - Update page counter

**End of Content**:
  - All items loaded
  - Hide loading trigger
  - Show "End of list" message
  - Optional: back to top button

**Error During Load**:
  - Show error message
  - "Retry" button
  - Preserve loaded items
  - Can continue scrolling up

**Empty Initial State**:
  - No items to show
  - Empty state illustration
  - CTA if applicable

**Refresh Flow** (pull-to-refresh):
  - Pull down at top
  - Fetch fresh first page
  - Replace all items
  - Reset pagination

**Performance Considerations**:
  - Virtualization for large lists
  - Debounce scroll handler
  - Cancel pending on new trigger
  - Cache previous pages

**Visual Sequence Diagram**:
  1. User reaches threshold
  2. Request sent
  3. Loading shown
  4. Response received
  5. Items appended
  6. Ready for next trigger

Tech: Sequence diagram → react-virtual + Intersection Observer

83. 폼 유효성 검사 피드백 흐름

Design form validation feedback flow:

**Validation Timing**:

**On Change** (real-time):
  - Validate as user types
  - Show feedback immediately
  - Good for: format hints, password strength
  - Debounce for expensive checks

**On Blur** (field leave):
  - Validate when field loses focus
  - Less intrusive than real-time
  - Show error if invalid
  - Clear error if valid

**On Submit** (form submit):
  - Validate all fields
  - Show all errors
  - Focus first error field
  - Prevent submission if invalid

**Field States Flow**:

**1. Untouched**:
  - Default styling
  - No validation feedback
  - User hasn't interacted

**2. Touched (focused)**:
  - Focus ring
  - May show requirements
  - No error yet

**3. Touched (blurred)**:
  - Validate
  - If valid: success style (optional)
  - If invalid: error style + message

**4. Validating** (async):
  - Show spinner in field
  - Disable submit button
  - Check server (email exists, etc.)

**5. Valid**:
  - Green border (optional)
  - Check icon (optional)
  - No error message

**6. Invalid**:
  - Red border
  - Error message below
  - Error icon in field

**Error Message Display**:
  - Position: below field
  - Color: red-600
  - Icon: warning/error symbol
  - Clear, specific message

**Message Examples**:
  - "Email is required"
  - "Please enter a valid email"
  - "Password must be 8+ characters"
  - "This email is already registered"

**Multi-field Errors**:
  - After submit: all errors shown
  - Error count summary
  - Jump to error links

**Form-level Messages**:
  - Top of form alert box
  - Success: green banner
  - Error: red banner with summary

**Accessibility**:
  - aria-invalid on fields
  - aria-describedby for errors
  - Error announced to screen readers
  - Focus management on submit

Tech: React Hook Form + Zod schema → feedback states

84. 다크모드 전환 상태

Design dark mode toggle transition:

**Toggle UI**:
  - Switch component
  - Or icon button (sun/moon)
  - Position: settings or header

**State Sources**:
  - User preference (stored)
  - System preference (OS)
  - Time-based (auto-switch)

**Preference Priority**:
  1. Explicit user choice
  2. System preference (if no choice)
  3. Default: light mode

**Theme States**:
  - Light theme active
  - Dark theme active
  - System preference (follows OS)

**Toggle Flow**:
  1. User clicks toggle
  2. Update state/store
  3. Apply CSS class to root
  4. Transition animations
  5. Persist preference

**CSS Implementation**:
  - `html.dark` class on root
  - Or CSS variables switching
  - Or data-theme attribute

**Transition Animation**:
  - Color transition: 200-300ms
  - All elements transition smoothly
  - No flash of wrong theme

**Component Changes**:
  - Background colors invert
  - Text colors adjust
  - Shadows adapt (lighter in dark)
  - Images/icons may swap

**Icon Animation**:
  - Sun morphs to moon
  - Or rotation with fade
  - Smooth, delightful

**Persistence**:
  - localStorage preference
  - Or user account setting
  - Read on initial load

**Server Rendering**:
  - Avoid flash: inline script
  - Cookie for server hint
  - Match client preference

**Edge Cases**:
  - System changes while app open
  - Embedded content (iframes)
  - Third-party widgets

**Accessibility**:
  - Respect prefers-reduced-motion
  - Maintain contrast ratios
  - Focus indicators visible

Tech: State diagram → next-themes / Tailwind dark mode

85. 애니메이션 트랜지션 타이밍

Design animation timing guidelines:

**Duration Guidelines**:

**Micro-interactions** (50-150ms):
  - Button hover states
  - Checkbox toggle
  - Icon color change
  - Opacity changes

**Small Elements** (150-300ms):
  - Dropdowns opening
  - Tooltips appearing
  - Card hovers
  - Menu items

**Medium Elements** (300-500ms):
  - Modal open/close
  - Sidebar expand
  - Page section reveals
  - Card flip

**Large Elements** (400-700ms):
  - Page transitions
  - Full-screen overlays
  - Complex sequences
  - Route changes

**Easing Functions**:

**ease-out** (deceleration):
  - Elements entering view
  - Dropdown opens
  - Modals appearing
  - "Coming from off-screen"

**ease-in** (acceleration):
  - Elements leaving view
  - Dropdown closes
  - Modals dismissing
  - "Going off-screen"

**ease-in-out** (smooth):
  - Position changes
  - Size changes
  - On-screen movements
  - State transitions

**spring** (bouncy):
  - Playful interactions
  - Notifications arriving
  - Button feedback
  - Delight moments

**Stagger Sequences**:
  - List items: 30-50ms delay each
  - Grid items: 50-100ms delay
  - Maximum total: 400-600ms
  - Enter from same direction

**Concurrent Animations**:
  - Fade + scale simultaneously
  - Position + opacity
  - Orchestrated sequences

**Properties to Animate** (performant):
  - transform (translate, scale, rotate)
  - opacity
  - Avoid: width, height, margin, padding

**Reduced Motion**:
  - Respect prefers-reduced-motion
  - Instant transitions or minimal
  - Essential motion only

**Animation Tokens**:
  - duration-fast: 150ms
  - duration-normal: 300ms
  - duration-slow: 500ms
  - ease-bounce: cubic-bezier(...)

Tech: Timing chart → Framer Motion / CSS transitions섹션 7: 컴포넌트 라이브러리 구축 (86-95)

86. 디자인 시스템 컬러 팔레트

Define a comprehensive color system:

**Primary Colors**:
  - Primary: Main brand color
  - Generate scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
  - 500 = base, lighter above, darker below

**Secondary Colors**:
  - Accent/Secondary brand color
  - Same scale generation
  - Used for secondary actions, highlights

**Neutral/Gray Scale**:
  - From white to black
  - 50 (near white) to 950 (near black)
  - Used for text, backgrounds, borders
  - Choose warm, cool, or pure gray

**Semantic Colors**:

**Success (Green)**:
  - 50-950 scale
  - 500: main success green
  - Use: confirmations, positive feedback

**Warning (Amber/Yellow)**:
  - 50-950 scale
  - 500: main warning color
  - Use: cautions, alerts

**Error (Red)**:
  - 50-950 scale
  - 500: main error red
  - Use: errors, destructive actions

**Info (Blue)**:
  - 50-950 scale
  - 500: informational blue
  - Use: information, tips

**Background Colors**:
  - background: main page background
  - surface: cards, elevated elements
  - overlay: modal backdrops

**Text Colors**:
  - foreground: primary text
  - muted: secondary text
  - disabled: disabled state text

**Border Colors**:
  - border: default borders
  - ring: focus rings
  - divider: separators

**Dark Mode Mappings**:
  - Each color has light/dark variant
  - Or invert the scale
  - Semantic colors adjust accordingly

**Color Tokens (CSS Variables)**:
```css:root {
--color-primary-500: #3b82f6;
--color-success-500: #22c55e;
/* etc. */
}

**Accessibility**:
  - Contrast ratios documented
  - AA minimum (4.5:1 text)
  - AAA preferred (7:1)

Tech: Tailwind config + CSS variables

87. 타이포그래피 스케일

Define typography system:

**Font Families**:
  - sans: Inter, system-ui, sans-serif
  - serif: Georgia, serif (if used)
  - mono: JetBrains Mono, monospace

**Font Size Scale**:
  - xs: 12px / 0.75rem
  - sm: 14px / 0.875rem
  - base: 16px / 1rem
  - lg: 18px / 1.125rem
  - xl: 20px / 1.25rem
  - 2xl: 24px / 1.5rem
  - 3xl: 30px / 1.875rem
  - 4xl: 36px / 2.25rem
  - 5xl: 48px / 3rem
  - 6xl: 60px / 3.75rem

**Line Heights**:
  - none: 1
  - tight: 1.25
  - snug: 1.375
  - normal: 1.5
  - relaxed: 1.625
  - loose: 2

**Recommended Pairings**:
  - Body text: 16px/1.5 (base/normal)
  - Small text: 14px/1.5 (sm/normal)
  - Headings: size/tight or snug
  - Large display: 48px+/tight

**Font Weights**:
  - light: 300
  - normal: 400
  - medium: 500
  - semibold: 600
  - bold: 700
  - extrabold: 800

**Letter Spacing**:
  - tighter: -0.05em
  - tight: -0.025em
  - normal: 0
  - wide: 0.025em
  - wider: 0.05em
  - widest: 0.1em

**Heading Styles**:
  - h1: 48px/1.1, bold
  - h2: 36px/1.2, bold
  - h3: 30px/1.25, semibold
  - h4: 24px/1.3, semibold
  - h5: 20px/1.4, medium
  - h6: 18px/1.4, medium

**Body Styles**:
  - body-lg: 18px/1.6
  - body: 16px/1.6
  - body-sm: 14px/1.5

**Special Styles**:
  - caption: 12px/1.4, gray-600
  - overline: 12px/1, uppercase, tracking-wider
  - code: 14px, mono, gray-800

**Responsive Typography**:
  - Scale down headings on mobile
  - h1: 48px → 32px on mobile
  - Maintain readability

Tech: Tailwind typography config + CSS custom properties

88. 스페이싱/그리드 시스템

Define spacing and layout system:

**Spacing Scale** (base: 4px):
  - 0: 0px
  - px: 1px
  - 0.5: 2px
  - 1: 4px
  - 1.5: 6px
  - 2: 8px
  - 2.5: 10px
  - 3: 12px
  - 3.5: 14px
  - 4: 16px
  - 5: 20px
  - 6: 24px
  - 7: 28px
  - 8: 32px
  - 9: 36px
  - 10: 40px
  - 11: 44px
  - 12: 48px
  - 14: 56px
  - 16: 64px
  - 20: 80px
  - 24: 96px
  - 32: 128px

**Common Usage**:
  - Inline elements gap: 8px (2)
  - Stack elements gap: 16px (4)
  - Section padding: 24-32px (6-8)
  - Card padding: 16-24px (4-6)
  - Page margin: 16-24px mobile, 32px+ desktop

**Container Widths**:
  - sm: 640px
  - md: 768px
  - lg: 1024px
  - xl: 1280px
  - 2xl: 1536px
  - Full: 100%

**Grid System**:
  - 12 columns
  - Gap: 16px mobile, 24px tablet, 32px desktop
  - Responsive breakpoints

**Breakpoints**:
  - sm: 640px
  - md: 768px
  - lg: 1024px
  - xl: 1280px
  - 2xl: 1536px

**Layout Patterns**:
  - Single column: max-width centered
  - Two column: 60/40, 50/50, sidebar layouts
  - Three column: equal or varied
  - Grid: 2, 3, 4 column responsive

**Component Spacing**:
  - Form field gap: 20px vertical
  - Button gap: 12px horizontal
  - Card margin: 24px
  - Section margin: 64-96px

**Z-Index Scale**:
  - base: 0
  - dropdown: 10
  - sticky: 20
  - fixed: 30
  - modal-backdrop: 40
  - modal: 50
  - popover: 60
  - tooltip: 70
  - toast: 80

Tech: Tailwind spacing config + CSS Grid + Flexbox

89. 아이콘 시스템

Define an icon system:

**Icon Library Choice**:
  - Lucide Icons (recommended)
  - Or: Heroicons, Phosphor, Feather
  - Consistent style throughout

**Icon Sizes**:
  - xs: 12px
  - sm: 16px
  - md: 20px (default)
  - lg: 24px
  - xl: 32px
  - 2xl: 48px

**Stroke Width**:
  - Consistent: 1.5px or 2px
  - Match across all icons
  - Scale if needed for sizes

**Icon Colors**:
  - currentColor (inherits text color)
  - Semantic: success, warning, error
  - Muted: gray-500
  - Interactive: hover state

**Icon Categories**:
  - Navigation: menu, arrow, chevron
  - Actions: edit, delete, save, share
  - Status: check, x, alert, info
  - Objects: user, file, folder, image
  - Communication: mail, chat, phone
  - Media: play, pause, volume

**Icon + Text Pairing**:
  - Leading icon: icon before text
  - Trailing icon: icon after text
  - Gap: 8px (2)
  - Vertical align: center

**Button Icons**:
  - Size: 16-20px in buttons
  - Color: matches button text
  - Position: leading or trailing

**Icon-Only Buttons**:
  - Minimum touch target: 44x44px
  - Icon centered
  - Accessible label required

**Animated Icons**:
  - Loading spinner
  - Success checkmark draw
  - Menu to X transformation
  - Chevron rotation

**Custom Icons**:
  - SVG format
  - Same grid/size as library
  - Consistent stroke weight
  - No fills (outline style)

**Icon Component**:
```tsx<Icon 
name="settings" 
size="md" 
color="muted"
className="..."
/>

**Accessibility**:
  - aria-hidden if decorative
  - aria-label if meaningful
  - Role="img" for standalone

Tech: Lucide React + Tailwind + SVG sprites

90. 버튼 Variants 매트릭스

Define complete button variant matrix:

**Size × Style Matrix**:

|         | Primary | Secondary | Outline | Ghost | Destructive | Link |
|---------|---------|-----------|---------|-------|-------------|------|
| xs      | ✓       | ✓         | ✓       | ✓     | ✓           | ✓    |
| sm      | ✓       | ✓         | ✓       | ✓     | ✓           | ✓    |
| md      | ✓       | ✓         | ✓       | ✓     | ✓           | ✓    |
| lg      | ✓       | ✓         | ✓       | ✓     | ✓           | ✓    |
| xl      | ✓       | ✓         | ✓       | ✓     | ✓           | ✓    |

**Size Specifications**:
  - xs: h-7 (28px), px-2.5, text-xs
  - sm: h-8 (32px), px-3, text-sm
  - md: h-10 (40px), px-4, text-sm
  - lg: h-11 (44px), px-6, text-base
  - xl: h-14 (56px), px-8, text-lg

**Style Specifications**:

**Primary**:
  - bg: brand-600
  - text: white
  - hover: brand-700
  - active: brand-800

**Secondary**:
  - bg: gray-100
  - text: gray-900
  - hover: gray-200
  - active: gray-300

**Outline**:
  - bg: transparent
  - border: gray-300
  - text: gray-900
  - hover: gray-50

**Ghost**:
  - bg: transparent
  - text: gray-600
  - hover: gray-100

**Destructive**:
  - bg: red-600
  - text: white
  - hover: red-700

**Link**:
  - bg: transparent
  - text: brand-600
  - hover: underline

**States for All**:
  - Default
  - Hover
  - Active/Pressed
  - Focus (ring)
  - Disabled (50% opacity)
  - Loading (spinner)

**Icon Buttons**:
  - icon-only variant
  - Square aspect ratio
  - Same sizes, center icon

**Full Width**:
  - w-full modifier
  - For CTAs in cards/forms

**Button Groups**:
  - Connected buttons
  - Border-radius: first/last only
  - Divider between

Tech: CVA (class-variance-authority) + Tailwind

91. 입력 필드 상태 가이드

Define input field state specifications:

**Base Input Styling**:
  - Height: 40px (touch-friendly: 44px)
  - Padding: 12px horizontal
  - Border: 1px solid gray-300
  - Border-radius: 8px
  - Font-size: 16px
  - Background: white

**State: Default**:
  - Border: gray-300
  - Background: white
  - Text: gray-900
  - Placeholder: gray-400

**State: Hover** (not focused):
  - Border: gray-400
  - Cursor: text
  - Subtle background tint optional

**State: Focus**:
  - Border: brand-500
  - Ring: 2px brand-500/20
  - Outline: none (custom ring)
  - Label: may float/change color

**State: Filled** (has value):
  - Same as default visually
  - Or success indicator if validated

**State: Valid**:
  - Border: green-500
  - Icon: check in field (optional)
  - Helper text: green (optional)

**State: Error/Invalid**:
  - Border: red-500
  - Ring: 2px red-500/20 on focus
  - Icon: warning in field
  - Helper text: red, below field

**State: Disabled**:
  - Background: gray-100
  - Text: gray-400
  - Cursor: not-allowed
  - Border: gray-200

**State: Read-only**:
  - Background: gray-50
  - Text: gray-900 (readable)
  - No interaction styles

**State: Loading** (async validation):
  - Spinner icon in field
  - Input may be disabled
  - Placeholder: "Checking..."

**Input Variants**:

**With Icon**:
  - Leading icon: left padding increased
  - Trailing icon: right padding increased
  - Icon color: gray-400, focus: gray-600

**With Addon**:
  - Prefix: "https://" or "$" attached
  - Suffix: ".com" or unit attached
  - Border joins to addon

**Textarea**:
  - Min-height: 100px
  - Resize: vertical
  - Same states as input

**Select**:
  - Custom chevron icon
  - Same dimensions as input
  - Dropdown styling separate

Tech: Tailwind + React Hook Form + CVA

92. 그림자/엘리베이션 스케일

Define shadow/elevation system:

**Shadow Scale**:

**shadow-xs**:
  - Use: subtle separation
  - Value: 0 1px 2px rgba(0,0,0,0.05)

**shadow-sm**:
  - Use: cards at rest
  - Value: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)

**shadow** (default):
  - Use: dropdowns, popovers
  - Value: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)

**shadow-md**:
  - Use: cards on hover
  - Value: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)

**shadow-lg**:
  - Use: modals, dialogs
  - Value: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)

**shadow-xl**:
  - Use: floating elements, notifications
  - Value: 0 25px 50px -12px rgba(0,0,0,0.25)

**shadow-2xl**:
  - Use: highest elevation
  - Value: 0 35px 60px -15px rgba(0,0,0,0.3)

**shadow-inner**:
  - Use: inset elements, pressed states
  - Value: inset 0 2px 4px rgba(0,0,0,0.06)

**shadow-none**:

92번부터 100번까지 전문가 수준의 상세 프롬프트를 작성해드리겠습니다.

---

## 92. 그림자/엘리베이션 스케일

```
Define a comprehensive shadow/elevation system:

**Shadow Scale**:

**shadow-xs**:
  - Use case: Subtle separation, input fields at rest
  - Value: 0 1px 2px rgba(0,0,0,0.05)
  - Elevation: 1dp equivalent

**shadow-sm**:
  - Use case: Cards at rest, buttons
  - Value: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
  - Elevation: 2dp equivalent

**shadow** (default):
  - Use case: Dropdowns, popovers, hover states
  - Value: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
  - Elevation: 4dp equivalent

**shadow-md**:
  - Use case: Cards on hover, floating elements
  - Value: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)
  - Elevation: 6dp equivalent

**shadow-lg**:
  - Use case: Modals, dialogs, navigation drawers
  - Value: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)
  - Elevation: 8dp equivalent

**shadow-xl**:
  - Use case: Notifications, toasts, floating panels
  - Value: 0 25px 50px -12px rgba(0,0,0,0.25)
  - Elevation: 12dp equivalent

**shadow-2xl**:
  - Use case: Highest elevation, spotlight elements
  - Value: 0 35px 60px -15px rgba(0,0,0,0.3)
  - Elevation: 16dp equivalent

**shadow-inner**:
  - Use case: Inset elements, pressed states, input fields
  - Value: inset 0 2px 4px rgba(0,0,0,0.06)

**shadow-none**:
  - Use case: Remove shadow, flat design elements
  - Value: none

**Elevation Mapping**:
  | Level | Token      | Use Case              |
  |-------|------------|----------------------|
  | 0     | none       | Flat surface         |
  | 1     | shadow-xs  | Subtle separation    |
  | 2     | shadow-sm  | Card at rest         |
  | 3     | shadow     | Dropdown, hover      |
  | 4     | shadow-md  | Elevated card        |
  | 5     | shadow-lg  | Modal, dialog        |
  | 6     | shadow-xl  | Toast, notification  |
  | 7     | shadow-2xl | Spotlight element    |

**Dark Mode Shadows**:
  - Reduce opacity by 40-50%
  - Add subtle light border (1px rgba(255,255,255,0.05))
  - Consider glow effect instead:
    - shadow-glow-sm: 0 0 15px rgba(brand,0.15)
    - shadow-glow-md: 0 0 30px rgba(brand,0.2)

**Colored Shadows** (for buttons, accents):
  - Primary glow: 0 4px 14px rgba(brand-500, 0.25)
  - Success glow: 0 4px 14px rgba(green-500, 0.25)
  - Error glow: 0 4px 14px rgba(red-500, 0.25)
  - Use sparingly for emphasis

**Interactive Elevation Transitions**:
  - Card default → hover: shadow-sm → shadow-md + translateY(-2px)
  - Card hover → active: shadow-md → shadow-sm (pressed feel)
  - Button default → hover: shadow → shadow-md
  - Duration: 150-200ms ease-out

**CSS Variables**:
```css
:root {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.dark {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  /* Reduced for dark mode */
}
```

Tech: Tailwind shadow config + CSS custom properties
```

---

## 93. 반응형 브레이크포인트 시스템

```
Define a comprehensive responsive breakpoint system:

**Breakpoints** (mobile-first approach):
  | Name | Width  | Target Devices                    |
  |------|--------|----------------------------------|
  | xs   | 0      | Small phones (default)           |
  | sm   | 640px  | Large phones, landscape          |
  | md   | 768px  | Tablets portrait                 |
  | lg   | 1024px | Tablets landscape, small laptops |
  | xl   | 1280px | Desktops                         |
  | 2xl  | 1536px | Large desktops, wide screens     |

**Container Widths**:
  | Breakpoint | Max-Width | Padding   |
  |------------|-----------|-----------|
  | xs         | 100%      | 16px (px-4) |
  | sm         | 640px     | 24px (px-6) |
  | md         | 768px     | 24px (px-6) |
  | lg         | 1024px    | 32px (px-8) |
  | xl         | 1280px    | 32px (px-8) |
  | 2xl        | 1400px    | 32px (px-8) |

**Grid Column Adaptations**:
  | Layout Type    | xs | sm | md | lg | xl  |
  |----------------|----|----|----|----|-----|
  | Product Grid   | 1  | 2  | 2  | 3  | 4   |
  | Blog Grid      | 1  | 1  | 2  | 3  | 3   |
  | Feature Cards  | 1  | 1  | 2  | 3  | 3   |
  | Gallery        | 2  | 2  | 3  | 4  | 5   |
  | Dashboard KPIs | 1  | 2  | 2  | 4  | 4   |

**Typography Scaling**:
  | Element | xs    | sm    | md    | lg    | xl    |
  |---------|-------|-------|-------|-------|-------|
  | h1      | 32px  | 36px  | 40px  | 48px  | 56px  |
  | h2      | 24px  | 28px  | 30px  | 36px  | 40px  |
  | h3      | 20px  | 22px  | 24px  | 28px  | 30px  |
  | body    | 16px  | 16px  | 16px  | 16px  | 18px  |

**Component Adaptations**:

**Navigation**:
  - xs-md: Hamburger menu, full-screen overlay
  - lg+: Horizontal nav bar with all links visible

**Sidebar**:
  - xs-md: Hidden, toggle as overlay drawer
  - lg+: Fixed sidebar, collapsible to icons

**Tables**:
  - xs-sm: Card layout (stacked key-value pairs)
  - md+: Traditional table with horizontal scroll

**Modals**:
  - xs-sm: Full screen (100vh, 100vw)
  - md+: Centered with max-width, rounded corners

**Cards**:
  - xs: Full width, stacked vertically
  - sm-md: 2-column grid
  - lg+: 3-4 column grid with hover effects

**Forms**:
  - xs-sm: Single column, full-width inputs
  - md+: Multi-column where appropriate (name fields side-by-side)

**Spacing Scale by Breakpoint**:
  | Token         | xs   | sm   | md   | lg   |
  |---------------|------|------|------|------|
  | section-y     | 48px | 64px | 80px | 96px |
  | card-padding  | 16px | 20px | 24px | 24px |
  | grid-gap      | 16px | 20px | 24px | 32px |

**CSS Media Query Syntax**:
```css
/* Mobile-first approach */
.element { /* xs styles */ }

@media (min-width: 640px) { /* sm+ */ }
@media (min-width: 768px) { /* md+ */ }
@media (min-width: 1024px) { /* lg+ */ }
@media (min-width: 1280px) { /* xl+ */ }
@media (min-width: 1536px) { /* 2xl+ */ }
```

**Testing Checklist**:
  - 320px: iPhone SE, smallest supported
  - 375px: iPhone standard
  - 414px: iPhone Plus/Max
  - 768px: iPad portrait
  - 1024px: iPad landscape
  - 1280px: Standard laptop
  - 1440px: MacBook Pro 15"
  - 1920px: Full HD desktop

Tech: Tailwind responsive prefixes + CSS Container Queries (for components)
```

---

## 94. 컴포넌트 조합 예시

```
Design component composition patterns:

**Card Compositions**:

**1. Profile Card**:
```
┌─────────────────────────────┐
│ ┌──────┐                    │
│ │Avatar│  Name (16px bold)  │
│ │ 64px │  Role (14px gray)  │
│ └──────┘                    │
│                             │
│ Bio text (14px, 3-line max) │
│                             │
│ ┌─┐ ┌─┐ ┌─┐ ┌─┐            │
│ │f│ │t│ │in│ │g│  (socials) │
│ └─┘ └─┘ └─┘ └─┘            │
│                             │
│ [  Follow  ] [  Message  ]  │
└─────────────────────────────┘
```
  - Components: Avatar(lg) + Text + IconButtons + Button(primary) + Button(secondary)

**2. Product Card**:
```
┌─────────────────────────────┐
│ [Badge: SALE]    [♡]        │
│ ┌─────────────────────────┐ │
│ │                         │ │
│ │      Product Image      │ │
│ │        (1:1 ratio)      │ │
│ │                         │ │
│ └─────────────────────────┘ │
│ Brand Name (12px gray)      │
│ Product Title (14px bold)   │
│ ★★★★☆ (128) (rating)       │
│ $99.00  $149.00 (price)    │
│ ● ● ● ○ (color swatches)   │
└─────────────────────────────┘
```
  - Components: Badge + IconButton + Image + Text + Rating + Price + ColorSwatches

**3. Stat/KPI Card**:
```
┌─────────────────────────────┐
│ ┌────┐              [⋮]     │
│ │ 📈 │                      │
│ └────┘                      │
│ Total Revenue (label)       │
│ $84,254 (32px bold)        │
│ ↑ 12.5% vs last month      │
│ ▁▂▃▄▅▆▇ (sparkline)        │
└─────────────────────────────┘
```
  - Components: IconCircle + Text + TrendIndicator + Sparkline + DropdownMenu

**Form Compositions**:

**1. Login Form**:
```
┌─────────────────────────────┐
│         [Logo]              │
│    Welcome back (h2)        │
│                             │
│ Email                       │
│ ┌─────────────────────────┐ │
│ │ ✉  email@example.com    │ │
│ └─────────────────────────┘ │
│                             │
│ Password                    │
│ ┌─────────────────────────┐ │
│ │ 🔒  ••••••••••    👁   │ │
│ └─────────────────────────┘ │
│                             │
│ ☑ Remember me    Forgot?   │
│                             │
│ [      Sign In           ]  │
│                             │
│ ──────── or ────────        │
│                             │
│ [G] Continue with Google    │
│ [🍎] Continue with Apple    │
│                             │
│ Don't have account? Sign up │
└─────────────────────────────┘
```
  - Components: Logo + Heading + Input(email) + Input(password) + Checkbox + Link + Button(primary) + Divider + Button(social) + TextLink

**2. Search + Filter Composition**:
```
┌─────────────────────────────────────────────────┐
│ ┌─────────────────────────────────┐ [🔍 Search] │
│ │ 🔍 Search products...           │             │
│ └─────────────────────────────────┘             │
├─────────────────────────────────────────────────┤
│ [Category ▼] [Price ▼] [Rating ▼] [Sort ▼]     │
├─────────────────────────────────────────────────┤
│ Active: [Electronics ✕] [Under $100 ✕] [Clear] │
└─────────────────────────────────────────────────┘
```
  - Components: SearchInput + Button + Select/Dropdown × 4 + FilterChip × n + TextLink

**Navigation Compositions**:

**1. Header Navigation**:
```
┌──────────────────────────────────────────────────────────┐
│ [Logo]   Products▼  Solutions▼  Pricing  Blog   [🔍][👤] │
└──────────────────────────────────────────────────────────┘
```
  - Components: Logo + NavLink × n + DropdownMenu × n + IconButton × n

**2. Dashboard Sidebar Item**:
```
┌─────────────────────────────┐
│ 📊 Analytics         [12]   │
│    ├── Overview             │
│    ├── Reports              │
│    └── Real-time       •    │
└─────────────────────────────┘
```
  - Components: Icon + Text + Badge + NestedList + StatusDot

**Data Display Compositions**:

**1. User List Row**:
```
┌────────────────────────────────────────────────────────┐
│ ☐ │ [Avatar] Name         │ Admin  │ Active │ [⋮]     │
│   │          email@...    │ (badge)│ (dot)  │         │
└────────────────────────────────────────────────────────┘
```
  - Components: Checkbox + Avatar + TextStack + Badge + StatusIndicator + DropdownMenu

**2. Notification Item**:
```
┌─────────────────────────────────────────────┐
│ • [Avatar] John mentioned you in "Project"  │
│            "Can you review this section..." │
│            2 hours ago                      │
└─────────────────────────────────────────────┘
```
  - Components: UnreadDot + Avatar + RichText + Timestamp

**Modal/Dialog Compositions**:

**Confirmation Dialog**:
```
┌─────────────────────────────────────┐
│                 [✕]                 │
│         ⚠️ (warning icon)          │
│                                     │
│     Delete this item? (h3)          │
│                                     │
│  This action cannot be undone.      │
│  The item will be permanently       │
│  removed from your account.         │
│                                     │
│      [Cancel]    [Delete]           │
└─────────────────────────────────────┘
```
  - Components: CloseButton + Icon + Heading + Text + Button(secondary) + Button(destructive)

Tech: React compound components + Tailwind + CVA for variants
```

---

## 95. 접근성 색상 조합 테스트

```
Define accessible color combinations with WCAG compliance:

**WCAG Contrast Requirements**:
  | Level | Normal Text (<18px) | Large Text (≥18px bold, ≥24px) |
  |-------|--------------------|---------------------------------|
  | AA    | 4.5:1 minimum      | 3:1 minimum                     |
  | AAA   | 7:1 minimum        | 4.5:1 minimum                   |

**Light Mode - Text on White (#FFFFFF)**:
  | Color       | Hex     | Ratio  | AA Normal | AA Large | AAA |
  |-------------|---------|--------|-----------|----------|-----|
  | gray-950    | #030712 | 20.8:1 | ✓         | ✓        | ✓   |
  | gray-900    | #111827 | 16.9:1 | ✓         | ✓        | ✓   |
  | gray-800    | #1f2937 | 12.6:1 | ✓         | ✓        | ✓   |
  | gray-700    | #374151 | 10.1:1 | ✓         | ✓        | ✓   |
  | gray-600    | #4b5563 | 7.3:1  | ✓         | ✓        | ✓   |
  | gray-500    | #6b7280 | 5.3:1  | ✓         | ✓        | ✗   |
  | gray-400    | #9ca3af | 3.1:1  | ✗         | ✓        | ✗   |
  | gray-300    | #d1d5db | 1.8:1  | ✗         | ✗        | ✗   |

**Recommended Text Colors**:
  - Primary text: gray-900 (#111827) - 16.9:1 ✓ AAA
  - Secondary text: gray-600 (#4b5563) - 7.3:1 ✓ AAA
  - Tertiary/muted: gray-500 (#6b7280) - 5.3:1 ✓ AA only
  - Disabled text: gray-400 with visual indicator (not color alone)

**Brand Colors on White** (verify your brand):
  | Color        | Hex     | Ratio | Status | Recommendation           |
  |--------------|---------|-------|--------|--------------------------|
  | blue-600     | #2563eb | 4.5:1 | ✓ AA   | Safe for links, buttons  |
  | blue-700     | #1d4ed8 | 6.1:1 | ✓ AA   | Better for small text    |
  | green-600    | #16a34a | 3.2:1 | ✗      | Use green-700 instead    |
  | green-700    | #15803d | 4.6:1 | ✓ AA   | Safe for success text    |
  | red-600      | #dc2626 | 4.0:1 | ✗      | Use red-700 for text     |
  | red-700      | #b91c1c | 5.5:1 | ✓ AA   | Safe for error text      |
  | amber-600    | #d97706 | 3.1:1 | ✗      | Use amber-700 or darker  |
  | amber-700    | #b45309 | 4.6:1 | ✓ AA   | Safe for warning text    |

**Dark Mode - Text on gray-900 (#111827)**:
  | Color       | Hex     | Ratio  | AA Normal | AA Large |
  |-------------|---------|--------|-----------|----------|
  | white       | #ffffff | 16.9:1 | ✓         | ✓        |
  | gray-50     | #f9fafb | 15.5:1 | ✓         | ✓        |
  | gray-100    | #f3f4f6 | 14.1:1 | ✓         | ✓        |
  | gray-200    | #e5e7eb | 11.6:1 | ✓         | ✓        |
  | gray-300    | #d1d5db | 9.5:1  | ✓         | ✓        |
  | gray-400    | #9ca3af | 5.7:1  | ✓         | ✓        |
  | gray-500    | #6b7280 | 3.4:1  | ✗         | ✓        |

**Interactive Element Colors**:

**Focus Rings**:
  - Light mode: brand-500 with 2px offset
  - Dark mode: brand-400 or lighter variant
  - Ensure 3:1 contrast against adjacent colors

**Links**:
  - Default: blue-600 (#2563eb) on white
  - Visited: purple-600 (#9333ea) - distinguish from unvisited
  - Always underline or provide non-color indicator

**Buttons**:
  | Variant     | Background | Text    | Ratio |
  |-------------|------------|---------|-------|
  | Primary     | brand-600  | white   | ≥4.5:1|
  | Secondary   | gray-100   | gray-900| 16.9:1|
  | Destructive | red-600    | white   | 4.5:1 |
  | Ghost       | transparent| gray-700| 10.1:1|

**Form States**:
  - Error border: red-500 (#ef4444) - 3.9:1 against white
  - Error text: red-700 (#b91c1c) - 5.5:1 ✓ AA
  - Success: green-700 (#15803d) - 4.6:1 ✓ AA
  - Focus: 2px ring with brand color

**Color Blindness Considerations**:
  - Never use color alone to convey information
  - Always pair with: icons, patterns, text labels, shape
  - Test with: Protanopia, Deuteranopia, Tritanopia simulators

**Don't Rely Only On**:
  - Red/Green for error/success → Add ✗ and ✓ icons
  - Color badges → Add text labels
  - Colored charts → Add patterns or labels

**Testing Tools**:
  - WebAIM Contrast Checker
  - Chrome DevTools Accessibility panel
  - Stark (Figma/Sketch plugin)
  - axe DevTools browser extension

**Documentation Template**:
```
| Combination          | Foreground | Background | Ratio | WCAG |
|---------------------|------------|------------|-------|------|
| Body text           | gray-900   | white      | 16.9:1| AAA  |
| Secondary text      | gray-600   | white      | 7.3:1 | AAA  |
| Link text           | blue-600   | white      | 4.5:1 | AA   |
| Error message       | red-700    | white      | 5.5:1 | AA   |
| Button primary      | white      | brand-600  | X.X:1 | AA   |
```

Tech: Contrast testing tools + automated a11y testing + documentation
```

---

## 96. 디자인 Git 워크플로우

```
Design a comprehensive Git workflow for design files in Pencil.dev:

**Branch Strategy**:

```
main (production)
  │
  └── develop (integration)
        │
        ├── feature/homepage-redesign
        ├── feature/checkout-flow-v2
        ├── feature/mobile-navigation
        └── fix/button-alignment
```

**Branch Types**:
  | Type    | Pattern              | Purpose                        | Merge To |
  |---------|---------------------|--------------------------------|----------|
  | main    | main                | Production-ready designs       | -        |
  | develop | develop             | Integration & staging          | main     |
  | feature | feature/[name]      | New designs/components         | develop  |
  | fix     | fix/[issue]         | Design corrections             | develop  |
  | hotfix  | hotfix/[issue]      | Urgent production fixes        | main     |
  | release | release/v[x.x.x]    | Release preparation            | main     |

**Branch Naming Convention**:
  - feature/homepage-hero-section
  - feature/user-profile-redesign
  - fix/button-padding-mobile
  - fix/color-contrast-accessibility
  - hotfix/nav-dropdown-overlap

**Commit Message Format**:
```
<type>(<scope>): <description>

[optional body]

[optional footer]
```

**Commit Types for Design**:
  | Type     | Use Case                              |
  |----------|---------------------------------------|
  | design   | New design work                       |
  | update   | Modify existing design                |
  | fix      | Correct design issues                 |
  | refactor | Reorganize without visual change      |
  | docs     | Update design documentation           |
  | style    | Code formatting (CSS/tokens)          |

**Commit Examples**:
```
design(hero): add new landing page hero section

- Full-width layout with gradient background
- Responsive breakpoints for mobile/tablet
- Animation on scroll implemented

Figma: [link]
Related: #142
```

```
fix(buttons): correct padding on mobile breakpoint

- Changed px-4 to px-3 for sm breakpoint
- Aligned with design system specs

Fixes #89
```

**Workflow Steps**:

1. **Start New Work**:
   ```bash
   git checkout develop
   git pull origin develop
   git checkout -b feature/component-name
   ```

2. **Design in Pencil.dev**:
   - Open project in Pencil.dev
   - Make design changes
   - Auto-save commits to branch

3. **Regular Commits** (manual for significant changes):
   ```bash
   git add .
   git commit -m "design(cards): add hover state variations"
   ```

4. **Push & Create PR**:
   ```bash
   git push origin feature/component-name
   # Create PR in GitHub
   ```

5. **Review & Merge**:
   - Team reviews PR
   - Address feedback
   - Squash and merge to develop

**Pull Request Template**:
```markdown
## 🎨 Design Changes

### Summary
Brief description of what changed and why.

### Screenshots/Recordings

#### Before
[Screenshot or note "N/A for new design"]

#### After
[Screenshot of new design]

### Design Specs
- [ ] Responsive breakpoints tested
- [ ] Dark mode variant included
- [ ] Accessibility reviewed (contrast, focus states)
- [ ] Component states documented (hover, active, disabled)

### Related Links
- Figma/Pencil.dev: [link]
- Issue: #123
- Design System Docs: [link]

### Checklist
- [ ] Self-reviewed the design
- [ ] Tested on multiple viewport sizes
- [ ] Updated design tokens if needed
- [ ] Added to component library (if applicable)

### Notes for Reviewers
Any specific areas to focus on or questions.
```

**Code Review Guidelines for Design PRs**:
  - Visual diff comparison
  - Check responsive behavior
  - Verify accessibility compliance
  - Ensure design system consistency
  - Test dark mode (if applicable)

**Release Process**:
```bash
# Create release branch
git checkout develop
git checkout -b release/v1.2.0

# Update version, final testing
# Merge to main
git checkout main
git merge release/v1.2.0

# Tag release
git tag -a v1.2.0 -m "Release v1.2.0 - Dashboard redesign"
git push origin v1.2.0
```

**Changelog Format**:
```markdown
## [1.2.0] - 2026-01-29

### Added
- New dashboard KPI cards design
- Dark mode for settings page

### Changed
- Updated button hover states
- Refined typography scale

### Fixed
- Navigation dropdown z-index issue
- Color contrast on warning badges
```

Tech: Git + GitHub + Pencil.dev auto-save + Conventional Commits
```

---

## 97. Before/After 비교 캔버스

```
Design a before/after comparison canvas for design reviews:

**Layout Options**:

**Option A: Side-by-Side**:
```
┌─────────────────┬─────────────────┐
│     BEFORE      │      AFTER      │
│    (v1.0.0)     │    (v1.1.0)     │
├─────────────────┼─────────────────┤
│                 │                 │
│   [Design A]    │   [Design B]    │
│                 │                 │
│                 │                 │
└─────────────────┴─────────────────┘
```
  - 50/50 split with labels
  - Synced zoom/pan
  - Same viewport dimensions

**Option B: Slider Comparison**:
```
┌─────────────────────────────────────┐
│                 │◀─────────────▶│   │
│   BEFORE        │       AFTER      │
│   [Design A]    │    [Design B]    │
│                 │                  │
│                 │                  │
└─────────────────────────────────────┘
         ◀══════[Drag Handle]══════▶
```
  - Draggable divider
  - Reveals before/after on drag
  - Touch-friendly handle

**Option C: Toggle/Flip View**:
```
┌─────────────────────────────────────┐
│  [Before ○] [After ●]               │
├─────────────────────────────────────┤
│                                     │
│            [Design B]               │
│          (with fade animation)      │
│                                     │
└─────────────────────────────────────┘
```
  - Toggle button switches view
  - Fade or flip animation
  - Keyboard: arrow keys to switch

**Option D: Overlay Diff**:
```
┌─────────────────────────────────────┐
│  Opacity: [────●────] 50%           │
├─────────────────────────────────────┤
│                                     │
│    [Before at 50% over After]       │
│     Differences highlighted         │
│                                     │
└─────────────────────────────────────┘
```
  - Opacity slider for overlay
  - Highlight pixels that differ
  - Color-coded changes

**Annotation System**:
```
┌─────────────────────────────────────┐
│     BEFORE          AFTER           │
│  ┌─────────┐     ┌─────────┐       │
│  │  Old    │ ──▶ │  New    │  [1]  │
│  │  Button │     │  Button │       │
│  └─────────┘     └─────────┘       │
│                                     │
│  [1] Changed: padding 12px → 16px   │
│      Reason: Better touch targets   │
└─────────────────────────────────────┘
```

**Annotation Marker Types**:
  | Type     | Color  | Icon | Use Case                    |
  |----------|--------|------|-----------------------------|
  | Added    | Green  | +    | New elements                |
  | Removed  | Red    | -    | Deleted elements            |
  | Modified | Blue   | ~    | Changed properties          |
  | Moved    | Purple | ↔    | Repositioned elements       |
  | Note     | Yellow | !    | General callouts            |

**Change Description Panel**:
```
┌─────────────────────────────────────┐
│ Changes Summary                     │
├─────────────────────────────────────┤
│ [+] Added hero illustration         │
│ [~] Modified: Button padding        │
│     - Before: 8px 16px              │
│     - After: 12px 24px              │
│ [~] Modified: Heading size          │
│     - Before: 32px                  │
│     - After: 40px                   │
│ [-] Removed: Decorative border      │
│                                     │
│ Rationale:                          │
│ Improved visual hierarchy and       │
│ accessibility (larger touch targets)│
└─────────────────────────────────────┘
```

**Metadata Display**:
  - Before version: v1.0.0, Jan 15, 2026
  - After version: v1.1.0, Jan 29, 2026
  - Author: Designer Name
  - Related ticket: #142

**Export Options**:
  | Format           | Use Case                          |
  |------------------|-----------------------------------|
  | Static PNG/JPG   | Documentation, presentations      |
  | Animated GIF     | Quick comparison for Slack/Teams  |
  | Interactive HTML | Stakeholder review (shareable)    |
  | PDF Report       | Formal design review documents    |

**Keyboard Shortcuts**:
  - `1/2`: Switch between before/after
  - `←/→`: Move slider (slider mode)
  - `+/-`: Zoom in/out
  - `Space`: Reset to fit view
  - `A`: Add annotation

**Canvas Controls**:
```
┌─────────────────────────────────────────────┐
│ [◀▶ Side-by-Side] [⬚ Slider] [↔ Toggle]    │
│ [🔍 100%  ▼] [⊞ Fit] [📥 Export ▼]         │
│ [📝 Add Note] [💬 Comment] [✓ Approve]      │
└─────────────────────────────────────────────┘
```

Tech: Canvas API / React + Framer Motion + Export libraries
```

---

## 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    | Background | Text Color | Border | Other          |
|----------|------------|------------|--------|----------------|
| Default  | #FFFFFF    | #667eea    | none   | -              |
| Hover    | #F1F5F9    | #5a67d8    | none   | cursor:pointer |
| Active   | #E2E8F0    | #4c51bf    | none   | scale(0.98)    |
| Focus    | #FFFFFF    | #667eea    | none   | ring-2 #667eea |
| Disabled | #94A3B8    | #64748B    | none   | opacity: 0.6   |
```

**6. Animations**:
```markdown
## Animations

### Hero Image Float
- Animation: translateY(0) → translateY(-20px) → translateY(0)
- Duration: 6s
- Easing: ease-in-out
- Iteration: infinite

### Text Fade In (on load)
- Animation: opacity 0→1, translateY(20px→0)
- Duration: 600ms
- Easing: ease-out
- Stagger: 100ms between elements

### CTA Hover
- Animation: background-color transition
- Duration: 150ms
- Easing: ease

## Animation Code
```css
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
```

**7. Assets**:
```markdown
## Required Assets

| Asset              | Format | Size       | Location              |
|--------------------|--------|------------|-----------------------|
| hero-illustration  | SVG    | 480x480    | /assets/hero/         |
| hero-illustration  | PNG    | 480x480@2x | /assets/hero/         |
| background-pattern | SVG    | Tileable   | /assets/backgrounds/  |

## Icon Requirements
- None (uses existing icon set)

## Font Requirements
- Inter (already in system)
- Weights needed: 400, 600, 700
```

**8. Accessibility**:
```markdown
## Accessibility Requirements

### Color Contrast
- White text on gradient: 8.5:1 ✓ AAA
- Button text on white: 4.8:1 ✓ AA

### Focus States
- All interactive elements must have visible focus
- Focus ring: 2px solid #FFFFFF with 2px offset

### Screen Reader
- Headline: Use semantic <h1>
- Image: aria-hidden="true" (decorative)
- CTA: Descriptive text "Get started free"

### Motion
- Respect prefers-reduced-motion
- Disable float animation if reduced motion preferred

### Keyboard Navigation
- Tab order: Headline (if linked) → CTA button
- CTA accessible via Enter/Space
```

**9. Edge Cases**:
```markdown
## Edge Cases

### Long Headline
- Max 2 lines on desktop
- Truncate with ellipsis if longer
- Full text in tooltip

### Slow Loading
- Show skeleton for image
- Text loads first (critical)

### No JavaScript
- Static image fallback
- No animations, but fully functional

### RTL Languages
- Mirror layout horizontally
- Text alignment right-to-left
```

Tech: Markdown/Notion + Zeplin/Figma Specs + Storybook
```

---

## 99. 팀 피드백 주석 시스템

```
Design a feedback annotation system for design reviews:

**Annotation Types**:

| Type       | Icon | Color   | Use Case                          |
|------------|------|---------|-----------------------------------|
| Comment    | 💬   | Blue    | General feedback, discussions     |
| Question   | ❓   | Yellow  | Needs clarification               |
| Issue      | ⚠️   | Red     | Problem identified, needs fix     |
| Suggestion | 💡   | Green   | Improvement idea                  |
| Approved   | ✅   | Green   | Section approved                  |
| Rejected   | ❌   | Red     | Does not meet requirements        |

**Pin Placement Interface**:
```
┌─────────────────────────────────────────────┐
│ Design Canvas                               │
│                                             │
│      ┌─────────────┐                       │
│      │   Button    │◀── [1] 💬            │
│      └─────────────┘                       │
│                        [2] ❓               │
│   ┌────────────────────────┐               │
│   │      Card Content      │               │
│   │                        │◀── [3] ⚠️    │
│   └────────────────────────┘               │
│                                             │
└─────────────────────────────────────────────┘
```
  - Click canvas to place pin
  - Pin connects to nearest element
  - Drag to reposition
  - Number shows order/priority

**Comment Thread Structure**:
```
┌─────────────────────────────────────────────┐
│ [1] 💬 Comment on: Button                   │
├─────────────────────────────────────────────┤
│ ┌───────────────────────────────────────┐   │
│ │ 👤 Sarah (Designer) • 2 hours ago     │   │
│ │                                       │   │
│ │ The button padding looks tight on     │   │
│ │ mobile. Can we increase to 12px?      │   │
│ │                                       │   │
│ │ [Attach Image] [@ Mention]            │   │
│ └───────────────────────────────────────┘   │
│                                             │
│ ┌───────────────────────────────────────┐   │
│ │ 👤 Mike (Dev) • 1 hour ago            │   │
│ │                                       │   │
│ │ @Sarah Good catch! Updated in latest  │   │
│ │ commit. Check branch feature/buttons  │   │
│ │                                       │   │
│ │ 📎 screenshot.png                     │   │
│ └───────────────────────────────────────┘   │
│                                             │
│ ┌───────────────────────────────────────┐   │
│ │ ✍️ Add reply...                       │   │
│ └───────────────────────────────────────┘   │
│                                             │
│ Status: [Open ▼] → [In Progress] [Resolved] │
│ Assignee: [Unassigned ▼]                    │
│                                             │
│ [Mark Resolved]                             │
└─────────────────────────────────────────────┘
```

**Comment Input Features**:
```
┌─────────────────────────────────────────────┐
│ ✍️ Add a comment...                         │
├─────────────────────────────────────────────┤
│                                             │
│ Great work on the hero section! A few       │
│ suggestions:                                │
│                                             │
│ 1. Consider reducing headline size on       │
│    mobile by 4px                            │
│ 2. The CTA button could use more           │
│    breathing room                           │
│                                             │
│ @mike can you check the implementation?     │
│                                             │
├─────────────────────────────────────────────┤
│ [B] [I] [🔗] [📎] [@] [😀]    [Post Comment]│
└─────────────────────────────────────────────┘
```

**Comment Capabilities**:
  - Rich text formatting (bold, italic, lists)
  - @mention team members → notification
  - Attach images/files
  - Link to external resources
  - Emoji reactions
  - Code snippets for implementation notes

**Status Workflow**:
```
[Open] → [In Progress] → [Resolved]
                      → [Won't Fix]
```

| Status      | Description                    | Action By     |
|-------------|--------------------------------|---------------|
| Open        | New feedback, needs attention  | Automatic     |
| In Progress | Being addressed                | Assignee      |
| Resolved    | Fixed and verified             | Author/Assignee|
| Won't Fix   | Declined with reason           | Assignee      |

**Filter/View Options**:
```
┌─────────────────────────────────────────────┐
│ Annotations (12)                            │
├─────────────────────────────────────────────┤
│ Show: [All ▼]  [💬5] [❓3] [⚠️2] [💡2]      │
│                                             │
│ Status: [● Open (7)] [○ Resolved (5)]       │
│                                             │
│ Author: [All ▼]                             │
│                                             │
│ [□ Show resolved] [□ Hide approved]         │
└─────────────────────────────────────────────┘
```

**Notification System**:
  - Email on new comment in your thread
  - Email when @mentioned
  - Email when assigned
  - In-app real-time badge updates
  - Daily digest option (configurable)

**Export Comments**:
```markdown
# Design Review Comments Export
Generated: Jan 29, 2026

## Summary
- Total comments: 12
- Open: 7
- Resolved: 5

## Comments

### [1] Issue - Button Padding (RESOLVED)
**Author:** Sarah (Designer)
**Date:** Jan 28, 2026 14:30
**Assigned:** Mike
**Content:** The button padding looks tight on mobile...

**Resolution:** Fixed in commit abc123

---

### [2] Question - Font Size (OPEN)
...
```

**Keyboard Shortcuts**:
  - `C`: New comment at cursor
  - `Q`: New question
  - `I`: New issue
  - `R`: Reply to selected comment
  - `E`: Resolve selected comment
  - `N`: Next comment
  - `P`: Previous comment

Tech: Real-time database (Firebase/Supabase) + Canvas overlay + WebSocket
```

---

## 100. A/B 테스트 디자인 버전 관리

```
Design an A/B test variant management system:

**Variant Structure**:
```
📁 A/B Test: Checkout CTA Button
├── 📄 Test Plan
├── 🎨 Variant A (Control)
├── 🎨 Variant B (Larger CTA)
├── 🎨 Variant C (Green CTA)
├── 📊 Results
└── 📝 Decision Log
```

**Test Plan Document**:
```markdown
# A/B Test: Checkout CTA Button

## Hypothesis
If we increase the CTA button size by 20% and change color
to green, then checkout conversion rate will increase by 5%
because the button will be more visible and associated with
positive action.

## Test Details
| Field            | Value                           |
|------------------|---------------------------------|
| Test ID          | ABT-2026-042                    |
| Start Date       | Feb 1, 2026                     |
| End Date         | Feb 14, 2026                    |
| Traffic Split    | 33% / 33% / 34%                 |
| Sample Size Goal | 10,000 users per variant        |
| Confidence Level | 95%                             |

## Primary Metric
- Checkout completion rate

## Secondary Metrics
- Add to cart rate
- Time to checkout
- Button click-through rate

## Guardrail Metrics
- Page load time (should not increase)
- Error rate (should not increase)
- Bounce rate (should not increase significantly)

## Targeting
- All users
- Desktop and mobile
- Excluding: returning customers with 3+ orders
```

**Variant Canvas Setup**:
```
┌─────────────────────────────────────────────────────────┐
│ ABT-2026-042: Checkout CTA Button                       │
├───────────────────┬───────────────────┬─────────────────┤
│ Variant A         │ Variant B         │ Variant C       │
│ (Control)         │ (Larger)          │ (Green)         │
├───────────────────┼───────────────────┼─────────────────┤
│                   │                   │                 │
│  ┌───────────┐    │  ┌─────────────┐  │  ┌───────────┐  │
│  │ Checkout  │    │  │  Checkout   │  │  │ Checkout  │  │
│  │   $99     │    │  │    $99      │  │  │   $99     │  │
│  └───────────┘    │  └─────────────┘  │  └───────────┘  │
│   h: 48px         │    h: 56px        │   h: 48px       │
│   bg: blue-600    │    bg: blue-600   │   bg: green-600 │
│                   │                   │                 │
└───────────────────┴───────────────────┴─────────────────┘
```

**Variant Documentation**:
```markdown
## Variant A: Control (Current Design)
- **Description:** Current checkout button
- **Button specs:**
  - Height: 48px
  - Padding: 12px 24px
  - Background: blue-600 (#2563EB)
  - Font: 16px, semibold
- **Screenshot:** [variant-a.png]

## Variant B: Larger CTA
- **Description:** 20% larger button
- **Changes from Control:**
  - Height: 48px → 56px (+17%)
  - Padding: 12px 24px → 16px 32px
  - Font: 16px → 18px
- **Hypothesis:** Larger target = easier to click
- **Screenshot:** [variant-b.png]

## Variant C: Green CTA
- **Description:** Green color variant
- **Changes from Control:**
  - Background: blue-600 → green-600 (#16A34A)
  - No size changes
- **Hypothesis:** Green = "go" = positive action
- **Screenshot:** [variant-c.png]
```

**Naming Convention**:
```
[Test ID]-[Variant Letter]-[Description]

Examples:
ABT-2026-042-A-control
ABT-2026-042-B-larger-cta
ABT-2026-042-C-green-cta
```

**Git Branch Structure**:
```
main
└── ab-tests/ABT-2026-042
    ├── variant-a-control (base)
    ├── variant-b-larger
    └── variant-c-green
```

**Implementation Tracking Specs**:
```markdown
## Analytics Implementation

### Events to Track
| Event Name           | Trigger              | Properties            |
|---------------------|----------------------|-----------------------|
| checkout_cta_view   | Button in viewport   | variant, page, device |
| checkout_cta_click  | Button clicked       | variant, page, device |
| checkout_started    | Checkout page loaded | variant               |
| checkout_completed  | Order confirmed      | variant, order_value  |

### Variant Assignment
```javascript
// Pseudo-code for variant assignment
const variant = assignVariant({
  testId: 'ABT-2026-042',
  variants: ['A', 'B', 'C'],
  weights: [33, 33, 34],
  userId: user.id
});

// Track exposure
analytics.track('experiment_exposure', {
  test_id: 'ABT-2026-042',
  variant: variant,
  timestamp: Date.now()
});
```

**Results Recording Template**:
```markdown
# A/B Test Results: ABT-2026-042

## Test Duration
- Start: Feb 1, 2026
- End: Feb 14, 2026
- Duration: 14 days

## Sample Sizes
| Variant | Users  | Conversions | Rate   |
|---------|--------|-------------|--------|
| A       | 10,234 | 512         | 5.00%  |
| B       | 10,156 | 598         | 5.89%  |
| C       | 10,389 | 541         | 5.21%  |

## Statistical Analysis
| Comparison | Lift    | Confidence | Significant |
|------------|---------|------------|-------------|
| B vs A     | +17.8%  | 98.2%      | ✓ Yes       |
| C vs A     | +4.2%   | 72.1%      | ✗ No        |
| B vs C     | +13.0%  | 96.4%      | ✓ Yes       |

## Winner: Variant B (Larger CTA)

## Guardrail Metrics
| Metric          | Control | Variant B | Status |
|-----------------|---------|-----------|--------|
| Page Load Time  | 1.2s    | 1.2s      | ✓ Pass |
| Error Rate      | 0.1%    | 0.1%      | ✓ Pass |
| Bounce Rate     | 32.1%   | 31.8%     | ✓ Pass |

## Recommendation
Roll out Variant B to 100% of traffic.
```

**Decision Log**:
```markdown
# Decision Log: ABT-2026-042

## Decision
**Roll out Variant B (Larger CTA) to production**

## Rationale
- Statistically significant lift of 17.8%
- 98.2% confidence level exceeds 95% threshold
- No negative impact on guardrail metrics
- Estimated annual revenue impact: +$X,XXX

## Stakeholder Approval
- [x] Product Manager: @pm-name (Feb 15)
- [x] Design Lead: @design-lead (Feb 15)
- [x] Engineering Lead: @eng-lead (Feb 15)

## Implementation Plan
1. Merge variant-b branch to main
2. Deploy to production (Feb 17)
3. Monitor for 48 hours
4. Archive test branches

## Lessons Learned
- Larger CTAs consistently perform better
- Consider testing even larger sizes
- Add to design system as new "lg" variant
```

**Archive Structure**:
```
📁 /ab-tests
├── 📁 /active
│   └── ABT-2026-050-hero-layout
├── 📁 /completed
│   ├── ABT-2026-042-checkout-cta (winner: B)
│   ├── ABT-2026-038-pricing-layout (winner: A)
│   └── ABT-2026-031-nav-redesign (winner: B)
└── 📁 /abandoned
    └── ABT-2026-035-footer-test (stopped early)
```

Tech: Git branches + Feature flags (LaunchDarkly/Split) + Analytics (Amplitude/Mixpanel) + Statistical analysis tools
```








































































# Pencil.dev 프로페셔널 프론트엔드 디자인 프롬프트 100선

> **사용법**: 각 프롬프트를 Pencil.dev 캔버스에서 스케치한 후, Cursor AI에 해당 프롬프트를 입력하여 production-ready 코드를 생성합니다.

---

## 섹션 1: UI/UX 기본 컴포넌트 (1-20)

### 1. 랜딩 페이지 히어로 섹션

```
Design a hero section with the following specifications:

**Layout**: Full-viewport height (100vh), centered content with asymmetric grid (60/40 split)
**Typography**: 
  - Headline: 56px/64px line-height, font-weight 700, letter-spacing -0.02em
  - Subheadline: 20px/32px, font-weight 400, max-width 540px
**Visual Elements**:
  - Gradient mesh background (subtle purple to blue, 15% opacity)
  - Floating 3D illustration on right (preserve space: 480x480px)
  - Animated gradient orb behind CTA (blur: 120px)
**CTA Buttons**:
  - Primary: 16px padding-y, 32px padding-x, 8px border-radius, filled
  - Secondary: Ghost style with 2px border, same dimensions
**Responsive**: Stack vertically at 768px breakpoint, reduce headline to 40px
**Animation**: Fade-up on scroll (stagger: 100ms between elements)

Tech: React + Tailwind CSS + Framer Motion
```
gradient orb 이란, 그라데이션 원을 말합니다. orb 는 orbit 의 약자로, 원을 말합니다.
CTA Buttons 이란, Call To Action Buttons 의 약자로, 사용자가 클릭할 수 있는 버튼을 말합니다.
Ghost style 이란, 버튼이 투명한 배경에 텍스트만 있는 스타일을 말합니다.

### 2. 반응형 네비게이션 바

```
Create a responsive navigation bar component:

**Desktop (>1024px)**:
  - Height: 72px, max-width: 1280px centered
  - Logo: Left-aligned, 32px height, clickable to home
  - Nav links: Center-aligned, 16px font, 600 weight, 32px gap
  - Hover state: Underline animation (expand from center, 2px height, 200ms ease)
  - CTA button: Right-aligned, primary style

**Scroll Behavior**:
  - Sticky positioning with backdrop-blur(12px) on scroll
  - Background: rgba(255,255,255,0.8) when scrolled
  - Subtle box-shadow: 0 1px 3px rgba(0,0,0,0.1)

**Mobile (<1024px)**:
  - Hamburger icon: 24px, 3 lines with 6px gap
  - Full-screen overlay menu on toggle
  - Menu animation: Slide from right (300ms cubic-bezier)
  - Nav links: 24px font, stacked, 24px gap

**Accessibility**: 
  - aria-expanded on hamburger
  - Focus-visible outlines (2px offset)
  - Escape key closes mobile menu

Tech: React + Tailwind + Headless UI
```

### 3. 푸터 컴포넌트

```
Design a comprehensive footer component:

**Structure** (4-column grid on desktop):
  - Column 1: Logo + company description (max 280px) + social icons
  - Column 2-3: Link groups (Product, Company, Resources, Legal)
  - Column 4: Newsletter signup form

**Styling**:
  - Background: slate-900 (#0f172a)
  - Text: slate-400 for body, white for headings
  - Link hover: white with 150ms transition
  - Social icons: 20px, 16px gap, hover scale(1.1)

**Newsletter Form**:
  - Input + button inline on desktop
  - Input: dark background, subtle border, white text
  - Button: Primary accent color, "Subscribe" text
  - Success/error states with icon feedback

**Bottom Bar**:
  - Border-top: 1px slate-800
  - Copyright left, legal links right
  - Responsive: stack at 640px

Tech: React + Tailwind CSS
```

slate-400 for body 이란, 본문 텍스트 색상을 slate-400 으로 만들어줘 라는 뜻입니다. slate 는 회색 계열의 색상을 말합니다.

### 4. 모바일 햄버거 메뉴

```
Create an animated hamburger menu with full-screen navigation:

**Hamburger Icon**:
  - Size: 24x18px tap target: 44x44px (accessibility)
  - 3 horizontal lines: 2px height, 24px width, 6px gap
  - Animation to X: top/bottom rotate ±45deg, middle fade out
  - Transition: 300ms cubic-bezier(0.4, 0, 0.2, 1)

**Overlay Menu**:
  - Full viewport coverage with backdrop
  - Background: white or brand dark color
  - Entry animation: clipPath circle expand from hamburger position
  - Exit: reverse animation

**Menu Content**:
  - Nav links: 32px font, bold, stacked center
  - Stagger animation: 50ms delay between items
  - Each link slides up + fades in
  - Active state: accent color underline

**Interaction**:
  - Body scroll lock when open
  - Click outside or X to close
  - Escape key support
  - Focus trap within menu

Tech: React + Framer Motion + @headlessui/react
```

- Animation to X: top/bottom rotate ±45deg, middle fade out 이란, 메뉴를 닫는 애니메이션을 말합니다.
- Entry animation: clipPath circle expand from hamburger position 이란, 메뉴를 여는 애니메이션을 말합니다.
- Stagger animation: 50ms delay between items 이란, 메뉴 아이템들 사이에 50ms 의 지연을 주어 애니메이션을 만들어줘 라는 뜻입니다.
- Body scroll lock when open 이란, 메뉴가 열리면 본문 스크롤을 막는 것을 말합니다.

### 5. 카드 컴포넌트 그리드

```
Design a responsive card grid system:

**Card Component**:
  - Aspect ratio: 4:3 image container (object-fit: cover)
  - Padding: 24px content area
  - Border-radius: 12px
  - Background: white
  - Shadow: 0 1px 3px rgba(0,0,0,0.1)
  - Hover: translateY(-4px) + shadow elevation increase

**Card Content Structure**:
  - Category tag: 12px, uppercase, tracking-wide, accent color
  - Title: 18px/24px, font-weight 600, 2-line clamp
  - Description: 14px/20px, slate-600, 3-line clamp
  - Meta footer: Author avatar (32px) + name + date

**Grid Layout**:
  - Desktop: 3 columns, 32px gap
  - Tablet: 2 columns, 24px gap  
  - Mobile: 1 column, 16px gap
  - Max-width container: 1200px

**Loading State**:
  - Skeleton with shimmer animation
  - Preserve exact dimensions

Tech: React + Tailwind CSS + CSS Grid
```

### 6. 버튼 시스템

```
Create a comprehensive button component system:

**Size Variants**:
  - xs: 28px height, 12px padding-x, 12px font
  - sm: 32px height, 14px padding-x, 13px font
  - md: 40px height, 20px padding-x, 14px font
  - lg: 48px height, 28px padding-x, 16px font
  - xl: 56px height, 36px padding-x, 18px font

**Style Variants**:
  - Primary: Brand color fill, white text
  - Secondary: Gray-100 fill, gray-900 text
  - Outline: 2px border, transparent fill
  - Ghost: No border, hover background
  - Destructive: Red-600 fill for dangerous actions
  - Link: Underline style, inline display

**States** (for each variant):
  - Default, Hover (+10% darker), Active (+15% darker)
  - Focus: 2px ring offset-2 brand color
  - Disabled: 50% opacity, cursor-not-allowed
  - Loading: Spinner icon replacing text, maintain width

**Icon Support**:
  - Leading icon: 8px gap before text
  - Trailing icon: 8px gap after text
  - Icon-only: Square aspect ratio

Tech: React + CVA (class-variance-authority) + Tailwind
```

### 7. 폼 입력 필드 세트

```
Design a form input system with all states:

**Text Input**:
  - Height: 44px (touch-friendly)
  - Padding: 12px horizontal
  - Border: 1px gray-300, radius 8px
  - Font: 16px (prevents iOS zoom)
  - Placeholder: gray-400

**States**:
  - Focus: border-brand-500, ring-2 ring-brand-500/20
  - Error: border-red-500, ring-red-500/20, red helper text
  - Success: border-green-500, green checkmark icon
  - Disabled: gray-100 background, gray-400 text

**Label**:
  - Position: Above input, 8px margin-bottom
  - Font: 14px, font-weight 500, gray-700
  - Required indicator: red asterisk

**Helper/Error Text**:
  - Position: Below input, 4px margin-top
  - Font: 13px, gray-500 (helper) or red-600 (error)
  - Error icon: 16px, inline before text

**Variants**:
  - With leading icon (search, email, etc.)
  - With trailing action (password toggle, clear)
  - Textarea: min-height 120px, resize-y
  - Select dropdown with custom chevron

**Accessibility**:
  - Proper label association (htmlFor)
  - aria-describedby for helper text
  - aria-invalid for error state

Tech: React + React Hook Form + Tailwind
```

### 8. 모달/다이얼로그 컴포넌트

```
Create an accessible modal dialog system:

**Overlay**:
  - Background: rgba(0,0,0,0.5) with backdrop-blur(4px)
  - Click to close (configurable)
  - Fade in: 150ms ease-out

**Modal Container**:
  - Max-width variants: sm(400px), md(500px), lg(640px), xl(800px), full
  - Max-height: calc(100vh - 48px)
  - Background: white, border-radius 16px
  - Shadow: 0 25px 50px -12px rgba(0,0,0,0.25)
  - Animation: scale(0.95) + opacity → scale(1) + opacity(1)

**Structure**:
  - Header: Title (18px semibold) + optional close X button
  - Body: Scrollable content area, 24px padding
  - Footer: Action buttons right-aligned, 16px gap

**Accessibility**:
  - Focus trap (tab cycles within modal)
  - Escape key closes
  - aria-modal="true"
  - Return focus to trigger on close
  - Body scroll lock

Tech: React + @headlessui/react Dialog + Framer Motion
```

### 9. 탭 네비게이션

```
Design a tab navigation component:

**Tab List Container**:
  - Display: flex, gap: 0
  - Border-bottom: 2px gray-200
  - Overflow-x: auto on mobile (hide scrollbar)

**Individual Tab**:
  - Padding: 12px 24px
  - Font: 14px, font-weight 500
  - Color: gray-600 default, gray-900 active
  - Position: relative (for indicator)

**Active Indicator**:
  - Position: absolute bottom -2px
  - Height: 2px, background: brand color
  - Animation: width + left transition (300ms spring)
  - Use layoutId for Framer Motion shared layout

**Keyboard Navigation**:
  - Arrow keys move between tabs
  - Home/End for first/last
  - Enter/Space activates tab

Tech: React + @headlessui/react Tab + Framer Motion
```

### 10. 브레드크럼 네비게이션

```
Create a breadcrumb navigation component:

**Structure**:
  - Horizontal list with separator icons
  - Semantic: <nav aria-label="Breadcrumb"> + <ol>
  - Current page: aria-current="page"

**Styling**:
  - Font: 14px, gray-600
  - Link hover: gray-900, underline
  - Current (last item): gray-900, font-weight 500, no link
  - Separator: chevron-right icon, 16px, gray-400

**Truncation (long paths)**:
  - Show: Home > ... > Parent > Current
  - Ellipsis is a dropdown showing hidden items
  - Max visible items configurable

**Responsive**:
  - Mobile: Show only "← Back to [Parent]" link
  - Or horizontal scroll with hidden overflow

Tech: React + Tailwind + Radix DropdownMenu
```


### 11. 페이지네이션

```
Design a pagination component:

**Layout**:
  - Centered or left-aligned (configurable)
  - Flex with 4px gap between items

**Elements**:
  - Previous/Next buttons with arrow icons
  - Page numbers with ellipsis truncation
  - "Showing 1-10 of 142 results" text

**Number Display Logic**:
  - Always show: first, last, current, ±1 from current
  - Ellipsis when gap > 1 page
  - Example: 1 ... 4 5 [6] 7 8 ... 20

**Button Styling**:
  - Size: 40x40px (square)
  - Border-radius: 8px
  - Default: gray-100 bg, gray-700 text
  - Hover: gray-200 bg
  - Current: brand-500 bg, white text
  - Disabled: opacity 50%

Tech: React + Tailwind
```

### 12. 검색 바 + 필터 UI

```
Design a search interface with filters:

**Search Input**:
  - Width: 100% of container, max-width 600px
  - Height: 48px
  - Leading search icon (20px, gray-400)
  - Trailing clear button (appears when has value)
  - Debounced input (300ms)

**Search Suggestions Dropdown**:
  - Position: absolute below input
  - Max-height: 400px, overflow-y auto
  - Sections: Recent, Suggested, Categories
  - Keyboard navigation support

**Filter Bar** (horizontal, below search):
  - Filter chips: scrollable horizontal on mobile
  - Each filter: dropdown or popover on click
  - Active filters: filled chip with X to remove
  - "Clear all" link when filters active

Tech: React + @headlessui/react + Tailwind
```

### 13. 드롭다운 메뉴

```
Create a dropdown menu component:

**Trigger**:
  - Button with text + chevron-down icon
  - Chevron rotates 180deg when open
  - Focus-visible ring styling

**Menu Panel**:
  - Position: absolute, below trigger
  - Min-width: match trigger width or 200px
  - Background: white, Border-radius: 12px
  - Shadow: 0 10px 15px -3px rgba(0,0,0,0.1)

**Menu Items**:
  - Padding: 10px 12px
  - Border-radius: 8px
  - Hover: gray-100 background
  - With icon: 20px icon, 12px gap, text
  - Destructive: red-600 text + icon

**Animation**:
  - Entry: fade + scale from 95% + slight Y offset
  - Duration: 150ms ease-out

**Accessibility**:
  - Role: menu, menuitem
  - Arrow key navigation
  - Escape closes

Tech: React + @headlessui/react Menu + Framer Motion
```

### 14. 토스트/알림 메시지

```
Design a toast notification system:

**Toast Container**:
  - Position: fixed, configurable (top-right default)
  - Z-index: 9999
  - Stack direction: newest on top
  - Gap: 12px between toasts
  - Max visible: 5

**Toast Component**:
  - Min-width: 300px, max-width: 420px
  - Padding: 16px
  - Border-radius: 12px
  - Shadow: 0 10px 15px -3px rgba(0,0,0,0.1)

**Variants**:
  - Info: blue-500 accent, info icon
  - Success: green-500 accent, check-circle icon
  - Warning: amber-500 accent, alert-triangle icon
  - Error: red-500 accent, x-circle icon

**Behavior**:
  - Auto-dismiss: 5000ms (configurable)
  - Progress bar showing time remaining
  - Hover pauses timer
  - Swipe to dismiss on mobile

Tech: React + Sonner library (or custom with Framer Motion)
```

### 15. 프로그레스 인디케이터

```
Create progress indicator components:

**Linear Progress Bar**:
  - Height: 8px (configurable: 4px thin, 12px thick)
  - Border-radius: full (pill shape)
  - Background track: gray-200
  - Fill: brand gradient or solid color
  - Animation: width transition 300ms ease-out
  - Indeterminate: sliding animation left-to-right

**Circular Progress**:
  - SVG-based for crisp rendering
  - Sizes: sm(32px), md(48px), lg(64px)
  - Background track: gray-200
  - Progress arc: brand color
  - Center text option: percentage number

**Step Progress** (multi-step wizard):
  - Horizontal: circles connected by lines
  - States: completed (check), current (filled), upcoming (outline)
  - Labels below each step
  - Responsive: hide labels on mobile, keep icons

Tech: React + Tailwind + SVG animations
```

### 16. 툴팁 컴포넌트

```
Design a tooltip system:

**Trigger Behavior**:
  - Hover: show after 200ms delay, hide immediately on leave
  - Focus: show on focus, hide on blur
  - Touch: show on long-press, hide on tap outside

**Tooltip Panel**:
  - Background: gray-900 (dark theme)
  - Text: white, 13px
  - Padding: 8px 12px
  - Border-radius: 6px
  - Max-width: 240px
  - Arrow: 8px pointing to trigger

**Positioning**:
  - Configurable: top, bottom, left, right
  - Auto-flip when near viewport edge
  - 8px offset from trigger

**Animation**:
  - Fade + slight scale from 95%
  - Duration: 100ms ease-out

**Accessibility**:
  - role="tooltip"
  - aria-describedby linking

Tech: React + @floating-ui/react + Framer Motion
```

### 17. 아바타 컴포넌트

```
Create an avatar component system:

**Size Variants**:
  - xs: 24px, sm: 32px, md: 40px, lg: 48px, xl: 64px, 2xl: 96px

**Shape Variants**:
  - Circle (default)
  - Rounded square (radius: 20% of size)

**Content Priority**:
  1. Image if src provided (object-fit: cover)
  2. Initials if name provided (1-2 letters)
  3. Default user icon fallback

**Status Indicator**:
  - Position: bottom-right
  - Size: 25% of avatar, min 8px
  - Ring: 2px white border
  - Colors: green (online), gray (offline), amber (away)

**Avatar Group**:
  - Overlap: -8px margin
  - Max display: configurable (e.g., 4)
  - Overflow: "+5" indicator with count

Tech: React + Tailwind + boring-avatars
```

### 18. 태그/뱃지 시스템

```
Design a tag and badge component system:

**Badge (status indicators)**:
  - Height: 22px, inline-flex
  - Padding: 0 8px
  - Border-radius: full (pill)
  - Font: 12px, font-weight 500

**Color Variants**:
  - Gray, Red, Yellow, Green, Blue, Purple, Pink
  - Each has: background (100), text (700)
  - Outline variant: border + transparent bg

**Tag (user-applied labels)**:
  - Similar to badge but interactive
  - Optional X button to remove
  - Hover state for clickable tags

**Size Variants**:
  - sm: 18px height, 10px font
  - md: 22px height, 12px font (default)
  - lg: 28px height, 14px font

Tech: React + Tailwind + react-tag-input
```

### 19. 별점/평점 컴포넌트

```
Create a star rating component:

**Display Mode** (read-only):
  - 5 stars in a row, 4px gap
  - Filled: brand amber/yellow color
  - Empty: gray-300 outline
  - Partial fill: CSS clip-path for 3.5 stars
  - Size variants: sm(16px), md(20px), lg(24px)

**Interactive Mode** (input):
  - Hover preview: fill up to hovered star
  - Click to set value
  - Keyboard: arrow keys to adjust

**With Text**:
  - Pattern: ★★★★☆ 4.2 (128 reviews)
  - Rating number: font-weight 600
  - Review count: gray-500, linked

**Animation**:
  - On selection: subtle scale bounce
  - Fill transition: 150ms ease

Tech: React + Tailwind CSS
```

### 20. 토글 스위치

```
Design a toggle switch component:

**Dimensions**:
  - Track: 44px × 24px (touch-friendly)
  - Thumb: 20px circle
  - Thumb position: 2px from edges

**States**:
  - Off: track gray-200, thumb white with shadow
  - On: track brand-500, thumb white
  - Disabled: opacity 50%, cursor-not-allowed
  - Focus: ring-2 around track

**Transition**:
  - Thumb position: 150ms ease
  - Background color: 150ms ease

**With Label**:
  - Label left, switch right (or reversed)
  - Optional description text below label

**Accessibility**:
  - Role: switch
  - aria-checked: true/false
  - Keyboard: Space to toggle

Tech: React + @headlessui/react Switch + Tailwind
```

---

## 섹션 2: 페이지 전체 레이아웃 (21-35)

### 21. SaaS 랜딩 페이지

```
Design a complete SaaS landing page layout:

**Global**: Max-width 1280px, section padding 96px vertical desktop, 64px mobile

**Hero Section**:
  - Announcement banner (dismissible)
  - Headline + subheadline + dual CTAs
  - Product screenshot with shadow
  - Social proof: "Trusted by X companies" + logos

**Features Grid**:
  - 3-column grid of feature cards
  - Each: icon (48px) + title + description
  - Hover: subtle card elevation

**Product Tour** (alternating):
  - Left text / Right image, then alternate
  - Screenshot with browser chrome mockup

**Testimonials**:
  - Carousel or 3-column grid
  - Quote + author photo + name + role

**Pricing Table**:
  - 3 tiers side by side
  - Recommended tier highlighted
  - Monthly/Annual toggle

**CTA Section**: Full-width dark background, centered headline + CTA

Tech: Next.js + Tailwind CSS + Framer Motion
```

### 22. 블로그 목록 페이지

```
Design a blog listing page:

**Page Header**: Page title "Blog", subtitle, optional search

**Category Filter**: Horizontal pill tabs, "All" + categories

**Featured Post** (hero):
  - Full-width card, large image (16:9)
  - Category tag + title (28px) + excerpt + author + date

**Post Grid**:
  - 3 columns desktop, 2 tablet, 1 mobile
  - Each card: image + category + title + excerpt + meta

**Load More / Pagination**:
  - "Load More" button or pagination
  - Loading skeleton for new items

Tech: Next.js + Tailwind + MDX support
```

### 23. 블로그 상세 페이지

```
Design a blog article page:

**Article Header**:
  - Category link, Title (40-48px), Author info, Hero image

**Article Body**:
  - Max-width: 720px (optimal reading)
  - Typography: 18px/1.75 body
  - Heading hierarchy: h2(30px), h3(24px), h4(20px)

**Content Elements**:
  - Blockquotes, Code blocks with syntax highlighting
  - Images with captions, Callout boxes

**Progress Indicator**: Fixed top bar showing read progress

**Sticky Sidebar**: TOC with active section, Share buttons

**Related Posts**: 3-column grid below article

Tech: Next.js + Tailwind + @tailwindcss/typography
```

### 24. 포트폴리오 갤러리 페이지

```
Design a portfolio/gallery page:

**Filter System**: Category pills with animation on filter

**Gallery Grid**: Masonry or fixed-ratio, 3→2→1 columns responsive

**Project Card**:
  - Image with hover overlay
  - Overlay: title + category
  - Click: opens detail modal

**Image Lightbox**:
  - Full-screen view, navigation arrows
  - Keyboard navigation, Pinch-zoom mobile

Tech: Next.js + Tailwind + Framer Motion + Lightbox library
```

### 25. 가격 정책 페이지

```
Design a pricing page:

**Page Header**: Title, subtitle, Billing toggle (Monthly/Annual)

**Pricing Cards** (3 tiers):
  - Popular tier: larger, colored border, badge
  - Plan name, Price (large), Description
  - CTA button, Feature list with checks

**Feature Comparison Table**: Full matrix below cards

**FAQ Section**: Accordion style

**Enterprise CTA**: "Need custom solution?" + Contact sales

Tech: React + Tailwind + Headless UI
```

### 26-35. 추가 페이지 레이아웃

**26. About/팀 소개 페이지**: Hero + Story + Values + Team grid + Careers CTA
**27. 연락처 페이지**: Two-column (form + info), Map integration
**28. 404 에러 페이지**: Centered illustration + message + actions
**29. 로그인/회원가입 페이지**: Split screen or centered card, Social auth
**30. 대시보드 메인**: Sidebar + Header + KPI cards + Charts + Activity
**31. 설정 페이지**: Settings sidebar + Form sections
**32. 프로필 편집 페이지**: Avatar upload + Info form + Social links
**33. 검색 결과 페이지**: Search header + Filters + Results grid/list
**34. FAQ 페이지**: Search + Categories + Accordion questions
**35. 타임라인/연혁 페이지**: Vertical line + Alternating cards + Scroll animation


---

## 섹션 3: 대시보드 & 데이터 시각화 (36-50)

### 36. KPI 카드 그리드

```
Design KPI metric cards for dashboard:

**Grid Layout**: 4 columns desktop, 2 tablet, 1 mobile, 24px gap

**Card Structure**:
  - Icon (40px colored circle) + overflow menu
  - Label: 14px gray-600, uppercase
  - Value: 32px bold
  - Trend: arrow + percentage + "vs last month"
  - Optional sparkline at bottom

**Trend Colors**: green (up), red (down), gray (neutral)

**Loading State**: Skeleton with shimmer

Tech: React + Tailwind + Recharts (sparklines)
```

### 37. 차트 위젯 시스템

```
Design a chart widget component system:

**Widget Container**: White bg, 12px radius, Header with title + time selector

**Chart Types**:
  - Line: Multiple series, gradient fill, smooth curves
  - Bar: Vertical/horizontal, grouped/stacked
  - Pie/Donut: 65% inner radius, legend, hover lift
  - Area: Stacked, gradient fill

**Tooltip Design**: Dark bg, white text, arrow to data point

**Legend**: Horizontal/vertical, click to toggle series

Tech: React + Recharts + Tailwind
```

### 38. 데이터 테이블

```
Design an advanced data table component:

**Header Row**: Gray bg, sortable columns with indicators, resizable

**Body Rows**: Alternating colors, hover highlight, selection checkbox

**Cell Types**: Text, Number (right-align), Date, Status badge, Avatar+name, Actions

**Features**:
  - Sticky header on scroll
  - Column show/hide toggle
  - Bulk actions bar on selection
  - Pagination with items per page

**Empty/Loading States**: Illustration + message, Skeleton rows

Tech: React + TanStack Table + Tailwind
```

### 39. 사이드바 네비게이션

```
Design a dashboard sidebar navigation:

**Container**: 240px expanded, 72px collapsed, 100vh fixed

**Logo Area**: Logo + wordmark expanded, icon collapsed

**Nav Item**: 44px height, Icon + label + badge, 8px radius
**States**: Default, Hover, Active (brand color + left border)

**Nested Navigation**: Collapsible with chevron, indented children

**Collapsed State**: Icons only, hover shows tooltip/mini-menu

**User Section**: Bottom, avatar + name dropdown

Tech: React + Headless UI + Tailwind + Framer Motion
```

### 40. 알림 센터 드롭다운

```
Design a notification center dropdown:

**Trigger**: Bell icon with badge count

**Dropdown Panel**: 380px width, 480px max-height, Tabs (All/Unread)

**Notification Item**:
  - Avatar/icon + Title + Description + Timestamp
  - Unread: blue dot, bold title
  - Swipe to dismiss (mobile)

**Empty State**: "All caught up!" illustration

**Footer**: "View all notifications" link

Tech: React + Headless UI Popover + Tailwind
```

### 41-50. 추가 대시보드 컴포넌트

**41. 활동 피드**: Timeline layout, Activity types with icons, Grouped activities
**42. 캘린더 뷰**: Month/Week/Day views, Event display, Drag to create
**43. 칸반 보드**: Columns with cards, Drag-and-drop, Card quick actions
**44. 파일 매니저**: Folder tree + List/Grid view, Context menu, Drag to move
**45. 실시간 모니터링**: Dark theme, Gauges, Log stream, Alert panel
**46. 멀티 탭 워크스페이스**: Tab bar, Drag to reorder, Split view
**47. 드래그 앤 드롭 위젯 그리드**: Resize handles, Edit mode, Widget library
**48. 데이터 필터 패널**: Collapsible sections, Filter types, Active chips
**49. 비교 뷰**: Side-by-side columns, Attribute rows, Highlight differences
**50. 인사이트/요약 카드**: Horizontal scroll, Type indicators, Action links

---

## 섹션 4: 모바일 앱 UI (51-65)

### 51. iOS 탭 바 네비게이션

```
Create an iOS-style bottom tab bar:

**Tab Bar**: Fixed bottom, 83px height (with safe area), translucent bg

**Tab Item**: Icon (28px) above label (10px), flex-1 distribution

**States**: Inactive (gray), Active (brand blue/tinted, filled icon)

**Badge**: Top-right of icon, red circle with count

**Special Center Button** (optional): Larger, floating above bar

Tech: React Native / Expo + NativeWind
```

### 52. Android Material 바텀 시트

```
Design a Material Design bottom sheet:

**Sheet Container**: Full width, 28px top corners radius, shadow

**Handle**: 32px × 4px, gray-300, centered at top

**Sheet States**: Collapsed (peek), Half-expanded, Expanded

**Gestures**: Drag to expand/collapse, Swipe down to dismiss

**Animation**: Spring physics, 300ms typical

Tech: React Native + react-native-reanimated + Gesture Handler
```

### 53-65. 추가 모바일 컴포넌트

**53. 스와이프 카드**: Tinder-style, Visual feedback, Action buttons below
**54. 온보딩 스크린**: Full screen, Pagination dots, Skip option
**55. 모바일 채팅**: Message bubbles, Read receipts, Input bar with actions
**56. 상품 상세 (모바일)**: Image carousel, Variant selection, Sticky buy button
**57. 모바일 결제 플로우**: Step progress, Form steps, Success animation
**58. 모바일 지도**: Full screen map, Bottom sheet details, Filters
**59. 소셜 피드**: Post cards, Engagement bar, Stories row
**60. 플로팅 액션 버튼**: 56dp primary, Speed dial expansion
**61. Pull-to-Refresh**: Spinner/custom animation, Pull phases
**62. 제스처 힌트 오버레이**: Spotlight + animated hand, Dismissal
**63. 모바일 폼 레이아웃**: Keyboard-aware, Touch-friendly inputs
**64. 앱 스플래시 스크린**: Centered logo, Animation transition
**65. 권한 요청 다이얼로그**: Pre-permission screen, Benefits explanation

---

## 섹션 5: 이커머스 (66-75)

### 66. 상품 카드 그리드

```
Design an ecommerce product card grid:

**Grid**: 4 columns desktop → 2 tablet → 2 mobile, 24px gap

**Card**: Image (1:1), hover secondary image, Quick actions overlay

**Product Info**: Brand + Name (2-line clamp) + Rating + Price

**Pricing**: Current bold, Compare-at strikethrough, Discount badge

**Badge System**: New, Sale, Bestseller (top-left stacked)

**Out of Stock**: Dimmed card, "Sold Out" overlay, Notify CTA

Tech: Next.js + Tailwind + Image optimization
```

### 67-75. 추가 이커머스 컴포넌트

**67. 상품 상세 (웹)**: Image gallery with zoom + Info section + Reviews
**68. 장바구니 사이드 패널**: Slide-out drawer, Item cards, Upsells
**69. 체크아웃 단계 UI**: Step indicator, Multi-step forms, Summary sidebar
**70. 주소 폼**: Address autocomplete, Country-specific fields
**71. 결제 수단 선택**: Saved cards, Add new, Digital wallets
**72. 주문 완료 페이지**: Success animation, Order summary, Next steps
**73. 위시리스트 페이지**: Grid with remove/cart actions, Share feature
**74. 프로모션/쿠폰 코드 UI**: Input + Apply, Success/error states
**75. 리뷰 작성 폼**: Star input, Text fields, Photo upload

---

## 섹션 6: 인터랙션 플로우 시각화 (76-85)

**76. 사용자 가입 플로우**: Entry points → Form → Verification → Setup → Dashboard
**77. 결제 프로세스 플로우**: Cart → Checkout → Payment → Processing → Success/Failure
**78. 에러 처리 분기**: Client/Server/Third-party errors, Recovery flows
**79. 페이지 네비게이션 맵**: Sitemap structure, Navigation types
**80. 조건부 UI 표시 로직**: Auth state, User role, Data state, Feature flags
**81. 드래그 앤 드롭 상호작용**: States (idle → drag → over → drop), Accessibility
**82. 무한 스크롤 시퀀스**: Trigger → Load → Append → End state
**83. 폼 유효성 검사 피드백**: Timing (change/blur/submit), Field states
**84. 다크모드 전환 상태**: Toggle flow, Preference sources, Persistence
**85. 애니메이션 트랜지션 타이밍**: Duration guidelines, Easing functions, Stagger

---

## 섹션 7: 컴포넌트 라이브러리 구축 (86-95)

### 86. 디자인 시스템 컬러 팔레트

```
Define a comprehensive color system:

**Primary Colors**: Brand color with 50-950 scale (500 = base)
**Secondary Colors**: Accent color with same scale
**Neutral/Gray Scale**: 50 (near white) to 950 (near black)

**Semantic Colors**:
  - Success (Green): 50-950 scale
  - Warning (Amber): 50-950 scale
  - Error (Red): 50-950 scale
  - Info (Blue): 50-950 scale

**Dark Mode Mappings**: Each color has light/dark variant

**Accessibility**: Document contrast ratios, AA/AAA compliance

Tech: Tailwind config + CSS variables
```

### 87-95. 추가 시스템 정의

**87. 타이포그래피 스케일**: Font families, Size scale (xs-6xl), Line heights, Weights
**88. 스페이싱/그리드 시스템**: 4px base scale, Containers, Breakpoints, Z-index
**89. 아이콘 시스템**: Library choice, Sizes, Colors, Icon+text pairing
**90. 버튼 Variants 매트릭스**: Size × Style matrix, All states defined
**91. 입력 필드 상태 가이드**: Base styling, All states (focus/error/disabled)
**92. 그림자/엘리베이션 스케일**: xs → 2xl scale, Dark mode adaptations
**93. 반응형 브레이크포인트**: Breakpoints, Container widths, Component adaptations
**94. 컴포넌트 조합 예시**: Card/Form/Navigation/Data compositions
**95. 접근성 색상 조합 테스트**: WCAG requirements, Tested combinations

---

## 섹션 8: 협업 & 버전 관리 (96-100)

### 96. 디자인 Git 워크플로우

```
Design Git workflow for design files:

**Branch Strategy**: main (production) → develop → feature/[name]

**Workflow Steps**:
1. Create feature branch from develop
2. Design in Pencil.dev
3. Save → auto-commits to branch
4. Create PR when ready
5. Review → Merge to develop

**Commit Messages**: "design: add hero section layout"

**PR Description**: Changes + Screenshots + Related issues

Tech: Git + GitHub + Pencil.dev auto-save
```

### 97-100. 추가 협업 도구

**97. Before/After 비교 캔버스**: Side-by-side, Slider comparison, Annotations
**98. 디자인-개발 핸드오프 문서**: Specs template, Component documentation
**99. 팀 피드백 주석 시스템**: Pin types (comment/question/issue), Thread structure
**100. A/B 테스트 디자인 버전 관리**: Variant structure, Hypothesis template, Results recording

---

## 사용 가이드

### Pencil.dev 워크플로우

1. **스케치**: 캔버스에 UI 요소 대략적으로 배치
2. **프롬프트 복사**: 해당 컴포넌트의 프롬프트를 Cursor AI에 입력
3. **코드 생성**: AI가 production-ready 코드 생성
4. **반복**: 디자인 수정 → 프롬프트 조정 → 재생성

### 권장 기술 스택

- **프레임워크**: Next.js 14+ (App Router)
- **스타일링**: Tailwind CSS 3.4+
- **컴포넌트**: Headless UI, Radix UI
- **애니메이션**: Framer Motion
- **폼**: React Hook Form + Zod
- **테이블**: TanStack Table
- **차트**: Recharts

---

*이 문서는 Pencil.dev와 Cursor AI를 활용한 디자인-개발 워크플로우를 위해 작성되었습니다.*