muno-claude-plugin 1.7.0 → 1.8.0

package/templates/skills/app-design/reference/component-examples.md

@@ -0,0 +1,953 @@
+# 컴포넌트 예시
+
+실제 앱에서 사용할 수 있는 컴포넌트 예시입니다.
+
+---
+
+## 1. Login Screen (로그인 화면)
+
+### Apple 스타일
+
+```markdown
+## 레이아웃
+
+### Navigation Bar
+- Style: Large Title
+- Title: "로그인"
+- Background: System Background
+
+### Content (Safe Area 내)
+- Logo
+  - Position: Top center
+  - Size: 80pt × 80pt
+  - Margin Top: 60pt
+
+- Title
+  - Text: "환영합니다"
+  - Font: Large Title (34pt, Bold)
+  - Color: Label
+  - Margin Top: 24pt
+  - Alignment: Center
+
+- Subtitle
+  - Text: "계속하려면 로그인하세요"
+  - Font: Body (17pt, Regular)
+  - Color: Secondary Label
+  - Margin Top: 8pt
+  - Alignment: Center
+
+- Email Input Field
+  - Placeholder: "이메일"
+  - Keyboard Type: Email
+  - Auto Capitalization: None
+  - Height: 50pt
+  - Background: Secondary System Background
+  - Border Radius: 12pt
+  - Padding: 16pt horizontal
+  - Margin Top: 48pt
+
+- Password Input Field
+  - Placeholder: "비밀번호"
+  - Secure Text Entry: Yes
+  - Height: 50pt
+  - Background: Secondary System Background
+  - Border Radius: 12pt
+  - Padding: 16pt horizontal
+  - Margin Top: 16pt
+  - Trailing: Show/Hide button
+
+- Forgot Password Button
+  - Text: "비밀번호를 잊으셨나요?"
+  - Font: Footnote (13pt, Regular)
+  - Color: System Blue
+  - Alignment: Right
+  - Margin Top: 12pt
+
+- Login Button
+  - Text: "로그인"
+  - Style: Primary Button
+  - Height: 50pt
+  - Border Radius: 12pt
+  - Background: System Blue
+  - Font: Headline (17pt, Semibold)
+  - Color: White
+  - Margin Top: 32pt
+  - Shadow: 0 4px 12px rgba(0, 122, 255, 0.3)
+
+- Divider
+  - Text: "또는"
+  - Margin Top: 32pt
+  - Line Color: Separator
+
+- Social Login Buttons (Stack)
+  - Apple Sign In
+    - Background: Black
+    - Icon: Apple logo (White)
+    - Text: "Apple로 계속하기"
+    - Height: 50pt
+    - Border Radius: 12pt
+    - Margin Top: 24pt
+
+  - Google Sign In
+    - Background: White
+    - Border: 1px solid Gray 300
+    - Icon: Google logo
+    - Text: "Google로 계속하기"
+    - Height: 50pt
+    - Border Radius: 12pt
+    - Margin Top: 12pt
+
+- Sign Up Link
+  - Text: "계정이 없으신가요? 회원가입"
+  - Font: Footnote (13pt, Regular)
+  - Color: System Blue (회원가입만)
+  - Alignment: Center
+  - Margin Top: 32pt
+  - Margin Bottom: 32pt
+
+### 상태
+- Default: 모든 버튼 활성화
+- Loading: Login 버튼에 Spinner, Disabled state
+- Error: Input field에 red border, 하단 error message
+```
+
+### Toss 스타일
+
+```markdown
+## 레이아웃
+
+### Top Bar
+- Height: 56pt
+- Background: White
+- Leading: Close button (X)
+
+### Content
+- Logo
+  - Position: Top center
+  - Size: 48pt × 48pt
+  - Margin Top: 40pt
+
+- Title
+  - Text: "토스에 오신 것을\n환영해요"
+  - Font: Headline 1 (24pt, Bold)
+  - Color: Toss Black
+  - Margin Top: 24pt
+  - Alignment: Left
+  - Line Height: 1.4
+
+- Phone Number Input
+  - Label: "휴대폰 번호"
+  - Font: Body 2 (14pt, Regular)
+  - Color: Gray 700
+  - Margin Top: 40pt
+
+  - Input
+    - Background: Gray 50
+    - Border: 1px solid Gray 200
+    - Border Radius: 8pt
+    - Height: 52pt
+    - Padding: 16pt
+    - Font: Body 1 (16pt, Regular)
+    - Margin Top: 8pt
+    - Placeholder: "010-0000-0000"
+    - Keyboard Type: Phone Pad
+
+- Verification Code Input (After phone verified)
+  - Label: "인증번호"
+  - Timer: 3:00 (Countdown)
+  - Input: Same style as phone input
+  - Margin Top: 24pt
+
+- Continue Button
+  - Text: "계속하기"
+  - Background: Toss Blue (#3182F6)
+  - Height: 56pt
+  - Border Radius: 8pt
+  - Font: Body 1 (16pt, Bold)
+  - Color: White
+  - Position: Fixed bottom
+  - Margin: 16pt horizontal
+  - Margin Bottom: Safe Area + 16pt
+  - Disabled: Background Gray 200, Text Gray 500
+
+### 인터랙션
+- Phone number input 입력 완료 시 → 자동으로 인증번호 전송
+- Continue button은 모든 필드 입력 완료 시 활성화
+- Error 발생 시 Toast 메시지 표시 (하단에서 올라옴)
+
+### 마이크로 인터랙션
+- Input focus: Border color → Toss Blue, Smooth transition 200ms
+- Button press: Scale 0.98, 100ms
+- Loading: Button에 spinner, width 변화 없음
+```
+
+---
+
+## 2. Product List (상품 목록)
+
+### Apple 스타일 (List)
+
+```markdown
+## 레이아웃
+
+### Navigation Bar
+- Style: Large Title
+- Title: "상품"
+- Right Button: Filter icon
+
+### Search Bar
+- Placeholder: "상품 검색"
+- Style: iOS Default Search Bar
+- Scope Buttons: 전체, 인기, 신상품
+
+### List
+- Style: Inset Grouped
+- Background: System Grouped Background
+
+#### List Item
+- Height: Auto (최소 80pt)
+- Background: Secondary System Grouped Background
+- Separator: Inset 16pt from leading
+
+Layout:
+- Leading Image
+  - Size: 64pt × 64pt
+  - Border Radius: 8pt
+  - Content Mode: Aspect Fill
+  - Margin: 8pt
+
+- Content Stack (Vertical)
+  - Product Name
+    - Font: Headline (17pt, Semibold)
+    - Color: Label
+    - Lines: 2
+
+  - Price
+    - Font: Subheadline (15pt, Regular)
+    - Color: System Blue
+    - Margin Top: 4pt
+
+  - Rating & Reviews
+    - Icon: Star (filled)
+    - Text: "4.5 (128 reviews)"
+    - Font: Footnote (13pt, Regular)
+    - Color: Secondary Label
+    - Margin Top: 4pt
+
+- Trailing: Chevron Right
+  - Color: Tertiary Label
+
+### 인터랙션
+- Tap: Push to Detail Screen
+- Long Press: Quick Action Menu (Add to Cart, Share, Favorite)
+- Swipe Left: Add to Cart (Blue), Delete (Red)
+- Pull to Refresh: Reload list
+
+### 상태
+- Loading: Skeleton UI (3 items)
+- Empty: Icon + "상품이 없습니다" + "새로고침" button
+- Error: Error icon + Message + "다시 시도" button
+```
+
+### Toss 스타일 (Grid)
+
+```markdown
+## 레이아웃
+
+### Top Bar
+- Height: 56pt
+- Background: White
+- Title: "전체 상품"
+- Font: Headline 3 (18pt, Bold)
+- Trailing: Filter icon
+
+### Filter Chips (Horizontal Scroll)
+- Height: 40pt
+- Padding: 16pt horizontal
+- Gap: 8pt
+
+Chip:
+- Background: Gray 50 (Default), Toss Blue (Selected)
+- Text Color: Gray 700 (Default), White (Selected)
+- Padding: 12pt horizontal
+- Border Radius: 20pt
+- Font: Body 2 (14pt, Medium)
+
+### Grid
+- Columns: 2
+- Gap: 12pt
+- Padding: 16pt
+
+#### Grid Item (Card)
+- Aspect Ratio: 3:4
+- Border Radius: 12pt
+- Background: White
+- Shadow: 0 2px 8px rgba(0,0,0,0.04)
+
+Layout:
+- Product Image
+  - Aspect Ratio: 1:1
+  - Border Radius: 12pt 12pt 0 0
+  - Content Mode: Cover
+
+- Content (Padding 12pt)
+  - Brand
+    - Font: Caption (12pt, Regular)
+    - Color: Gray 600
+
+  - Product Name
+    - Font: Body 2 (14pt, Medium)
+    - Color: Toss Black
+    - Lines: 2
+    - Margin Top: 4pt
+
+  - Price
+    - Font: Headline 3 (18pt, Bold)
+    - Color: Toss Black
+    - Margin Top: 8pt
+
+  - Discount Badge (Optional)
+    - Background: Toss Red
+    - Text: "20%"
+    - Font: Caption (12pt, Bold)
+    - Color: White
+    - Padding: 4pt 6pt
+    - Border Radius: 4pt
+    - Position: Top Right of Image
+
+- Favorite Button
+  - Position: Top Right
+  - Icon: Heart (outline/filled)
+  - Size: 24pt × 24pt
+  - Background: White (50% opacity)
+  - Margin: 8pt
+
+### 인터랙션
+- Tap: Navigate to Detail
+- Favorite button: Toggle favorite + Haptic
+- Scroll: Infinite scroll (Load more)
+
+### 상태
+- Loading: Skeleton Grid (6 items)
+- Empty: Illustration + "상품이 없어요" + "둘러보기" button
+- Error: Toast at bottom
+```
+
+---
+
+## 3. Profile Screen (프로필 화면)
+
+### Apple 스타일
+
+```markdown
+## 레이아웃
+
+### Navigation Bar
+- Style: Large Title
+- Title: "프로필"
+- Right Button: Edit
+
+### Header Section
+- Background: System Background
+- Padding: 16pt
+
+Layout:
+- Profile Image
+  - Size: 80pt × 80pt
+  - Border Radius: 40pt (Circle)
+  - Border: 2pt solid System Blue
+  - Center Horizontal
+
+- Name
+  - Font: Title 1 (28pt, Bold)
+  - Color: Label
+  - Alignment: Center
+  - Margin Top: 16pt
+
+- Email
+  - Font: Callout (16pt, Regular)
+  - Color: Secondary Label
+  - Alignment: Center
+  - Margin Top: 4pt
+
+### Stats Section
+- Layout: Horizontal Stack
+- Distribution: Equal
+- Margin Top: 24pt
+
+Each Stat:
+- Count
+  - Font: Title 2 (22pt, Bold)
+  - Color: Label
+  - Alignment: Center
+
+- Label
+  - Font: Footnote (13pt, Regular)
+  - Color: Secondary Label
+  - Alignment: Center
+  - Margin Top: 4pt
+
+### Menu List (Grouped)
+- Style: Inset Grouped
+- Margin Top: 32pt
+
+Groups:
+1. Account
+   - Personal Info (Chevron Right)
+   - Security (Chevron Right)
+   - Notifications (Toggle Switch)
+
+2. Support
+   - Help Center (Chevron Right)
+   - Terms of Service (Chevron Right)
+   - Privacy Policy (Chevron Right)
+
+3. App
+   - Language (Chevron Right, Badge: "한국어")
+   - Dark Mode (Toggle Switch)
+   - Version (Trailing text: "1.0.0")
+
+4. Logout
+   - Logout (Red text, Center aligned)
+
+Menu Item:
+- Height: 44pt
+- Background: Secondary System Grouped Background
+- Leading Icon: 24pt × 24pt, Tint Color
+- Text: Body (17pt, Regular)
+- Separator: Inset 44pt from leading
+
+### 인터랙션
+- Profile Image Tap: Change Photo Action Sheet
+- Edit Button: Edit Mode (All fields editable)
+- Menu Tap: Navigate or Toggle
+- Logout: Alert Dialog confirmation
+```
+
+### Toss 스타일
+
+```markdown
+## 레이아웃
+
+### Header Section
+- Background: White
+- Padding: 24pt
+
+Layout:
+- Top Row (Horizontal)
+  - Profile Image
+    - Size: 64pt × 64pt
+    - Border Radius: 32pt
+
+  - Info Stack (Margin Left 16pt)
+    - Name
+      - Font: Headline 2 (20pt, Bold)
+      - Color: Toss Black
+
+    - Membership Badge
+      - Background: Toss Blue (10% opacity)
+      - Text: "토스 프라임"
+      - Font: Caption (12pt, Medium)
+      - Color: Toss Blue
+      - Padding: 4pt 8pt
+      - Border Radius: 4pt
+      - Margin Top: 4pt
+
+  - Settings Icon (Trailing)
+    - Size: 24pt × 24pt
+    - Color: Gray 600
+
+- Point Card
+  - Background: Linear Gradient (Toss Blue → #5B9FFF)
+  - Border Radius: 16pt
+  - Padding: 20pt
+  - Margin Top: 20pt
+  - Shadow: 0 4px 12px rgba(49,130,246,0.2)
+
+  Layout:
+  - Label: "토스 포인트"
+    - Font: Body 2 (14pt, Regular)
+    - Color: White (70% opacity)
+
+  - Amount: "12,540P"
+    - Font: Headline 1 (24pt, Bold)
+    - Color: White
+    - Margin Top: 4pt
+
+  - Charge Button
+    - Text: "충전하기"
+    - Background: White
+    - Color: Toss Blue
+    - Height: 36pt
+    - Border Radius: 18pt
+    - Font: Body 2 (14pt, Bold)
+    - Margin Top: 16pt
+    - Width: Fit content
+
+### Quick Actions
+- Layout: 4-column Grid
+- Padding: 24pt horizontal
+- Gap: 16pt
+
+Action:
+- Icon: 48pt × 48pt
+  - Background: Gray 50
+  - Border Radius: 24pt
+  - Icon Color: Toss Black
+  - Icon Size: 24pt × 24pt
+
+- Label
+  - Font: Caption (12pt, Regular)
+  - Color: Gray 700
+  - Alignment: Center
+  - Margin Top: 8pt
+
+Actions:
+- 주문내역
+- 찜
+- 쿠폰
+- 설정
+
+### Menu Sections
+- Padding: 0 24pt
+
+Section Title:
+- Font: Body 2 (14pt, Bold)
+- Color: Gray 900
+- Margin: 24pt 0 12pt
+
+Menu Item:
+- Height: 52pt
+- Background: Transparent
+- Border Bottom: 1px solid Gray 100
+
+Layout:
+- Title
+  - Font: Body 1 (16pt, Regular)
+  - Color: Toss Black
+
+- Badge (Optional)
+  - Background: Toss Red
+  - Size: 8pt × 8pt
+  - Border Radius: 4pt
+  - Position: After title
+
+- Trailing: Chevron Right
+  - Color: Gray 400
+
+Sections:
+1. 계정
+   - 개인정보 관리
+   - 보안 설정
+
+2. 고객센터
+   - 공지사항
+   - 자주 묻는 질문
+   - 1:1 문의
+
+3. 앱 정보
+   - 버전 정보 (1.0.0)
+   - 오픈소스 라이선스
+
+### Bottom
+- Logout Button
+  - Text: "로그아웃"
+  - Font: Body 2 (14pt, Regular)
+  - Color: Gray 600
+  - Alignment: Center
+  - Margin: 32pt 0
+
+### 인터랙션
+- Profile Image: Photo Picker Bottom Sheet
+- Point Card: Navigate to Point Detail
+- Quick Action: Navigate to each screen
+- Menu Item: Navigate
+- Logout: Bottom Sheet confirmation
+```
+
+---
+
+## 4. Bottom Sheet Examples
+
+### Filter Bottom Sheet (Apple 스타일)
+
+```markdown
+## 레이아웃
+
+### Handle
+- Width: 36pt
+- Height: 5pt
+- Background: System Gray 4
+- Border Radius: 2.5pt
+- Center Horizontal
+- Margin Top: 6pt
+
+### Header
+- Height: 56pt
+- Border Bottom: 1px solid Separator
+
+Layout:
+- Title: "필터"
+  - Font: Headline (17pt, Semibold)
+  - Center Aligned
+
+- Close Button
+  - Position: Trailing
+  - Icon: X mark
+  - Size: 24pt × 24pt
+
+### Content (Scrollable)
+- Padding: 20pt
+
+#### Section: Price Range
+- Title: "가격"
+  - Font: Headline (17pt, Semibold)
+  - Margin Bottom: 16pt
+
+- Slider
+  - Min: 0
+  - Max: 1,000,000
+  - Step: 10,000
+  - Track Height: 4pt
+  - Thumb Size: 28pt
+
+- Range Display
+  - Text: "₩0 - ₩500,000"
+  - Font: Body (17pt, Regular)
+  - Color: Secondary Label
+  - Margin Top: 12pt
+
+#### Section: Category
+- Title: "카테고리"
+  - Margin Top: 32pt
+
+- Chip Group
+  - Wrap: Yes
+  - Gap: 8pt
+
+Chip:
+- Background: System Gray 5 (Default), System Blue (Selected)
+- Text Color: Label (Default), White (Selected)
+- Height: 36pt
+- Padding: 12pt horizontal
+- Border Radius: 18pt
+- Font: Callout (16pt, Regular)
+
+#### Section: Rating
+- Title: "평점"
+  - Margin Top: 32pt
+
+- Rating Options (Vertical Stack)
+  - 5점 ⭐️⭐️⭐️⭐️⭐️
+  - 4점 이상 ⭐️⭐️⭐️⭐️
+  - 3점 이상 ⭐️⭐️⭐️
+  - 2점 이상 ⭐️⭐️
+  - 1점 이상 ⭐️
+
+Option:
+- Height: 44pt
+- Checkmark (Trailing) when selected
+- Font: Body (17pt, Regular)
+
+### Footer
+- Background: System Background
+- Padding: 16pt
+- Border Top: 1px solid Separator
+
+Buttons (Horizontal):
+- Reset Button
+  - Text: "초기화"
+  - Style: Secondary
+  - Width: 30%
+
+- Apply Button
+  - Text: "적용하기"
+  - Style: Primary
+  - Width: 65%
+  - Margin Left: 12pt
+
+### 인터랙션
+- Swipe Down: Dismiss
+- Backdrop Tap: Dismiss
+- Apply: Dismiss + Emit filter values
+- Reset: Clear all filters
+
+### Animation
+- Present: Slide up 300ms, Backdrop fade in
+- Dismiss: Slide down 300ms, Backdrop fade out
+```
+
+### Action Bottom Sheet (Toss 스타일)
+
+```markdown
+## 레이아웃
+
+### Handle
+- Width: 32pt
+- Height: 4pt
+- Background: Gray 300
+- Border Radius: 2pt
+- Center Horizontal
+- Margin: 8pt 0
+
+### Header (Optional)
+- Padding: 20pt 24pt
+- Title
+  - Font: Headline 2 (20pt, Bold)
+  - Color: Toss Black
+
+- Description
+  - Font: Body 2 (14pt, Regular)
+  - Color: Gray 600
+  - Margin Top: 8pt
+
+### Actions (List)
+- Padding: 0 24pt
+
+Action Item:
+- Height: 60pt
+- Background: Transparent
+- Border Bottom: 1px solid Gray 100 (except last)
+
+Layout:
+- Icon (Leading, Optional)
+  - Size: 24pt × 24pt
+  - Color: Toss Black or Semantic Color
+
+- Title
+  - Font: Body 1 (16pt, Medium)
+  - Color: Toss Black (Default), Toss Red (Destructive)
+  - Margin Left: 12pt (if icon exists)
+
+- Badge (Optional)
+  - Background: Toss Blue
+  - Text: "NEW"
+  - Font: Caption (12pt, Bold)
+  - Color: White
+  - Padding: 2pt 6pt
+  - Border Radius: 4pt
+  - Margin Left: 8pt
+
+Actions Example:
+1. Share (Icon: Share, Title: "공유하기")
+2. Edit (Icon: Edit, Title: "수정하기")
+3. Delete (Icon: Trash, Title: "삭제하기", Color: Red)
+
+### Cancel Button (Optional)
+- Height: 60pt
+- Background: Gray 50
+- Margin Top: 8pt
+- Border Radius: 0 0 24pt 24pt
+
+- Text: "취소"
+  - Font: Body 1 (16pt, Medium)
+  - Color: Gray 700
+  - Center Aligned
+
+### 인터랙션
+- Action Tap: Execute + Dismiss
+- Cancel Tap: Dismiss
+- Backdrop Tap: Dismiss
+- Swipe Down: Dismiss
+
+### Pressed State
+- Background: Gray 50
+- Duration: 100ms
+
+### Animation
+- Present: Slide up 250ms ease-out
+- Dismiss: Slide down 250ms ease-in
+```
+
+---
+
+## 5. Toast & Snackbar
+
+### iOS Toast (Apple 스타일)
+
+```markdown
+## 레이아웃
+
+- Width: Screen Width - 32pt
+- Min Height: 48pt
+- Max Width: 600pt (iPad)
+- Background: System Gray (with blur)
+- Border Radius: 12pt
+- Padding: 12pt 16pt
+- Shadow: 0 4px 12px rgba(0,0,0,0.15)
+
+Layout:
+- Icon (Optional)
+  - Size: 20pt × 20pt
+  - Color: White or Semantic
+
+- Message
+  - Font: Body (17pt, Regular)
+  - Color: White
+  - Lines: 1-2
+  - Margin Left: 8pt (if icon)
+
+- Action Button (Optional)
+  - Text: "실행취소"
+  - Font: Body (17pt, Semibold)
+  - Color: System Blue
+  - Margin Left: 16pt
+
+### Position
+- Default: Bottom (Safe Area + 16pt)
+- Alternative: Top (Safe Area + 16pt)
+
+### Animation
+- Present: Slide + Fade (300ms)
+- Dismiss: Fade out (200ms)
+- Auto Dismiss: 3s (without action), 5s (with action)
+
+### Variants
+- Success: Green icon
+- Error: Red icon
+- Info: Blue icon
+- Warning: Orange icon
+```
+
+### Android Snackbar (Toss 스타일)
+
+```markdown
+## 레이아웃
+
+- Width: Screen Width (Mobile), 344dp (Tablet+)
+- Height: 48dp (Single line), 68dp (Multi-line)
+- Background: #323232 (Dark), White (Light mode)
+- Border Radius: 4dp (Mobile), 4dp (Tablet)
+- Padding: 14dp 16dp
+- Elevation: 6dp
+
+Layout:
+- Message
+  - Font: Body 2 (14dp, Regular)
+  - Color: White (Dark), Toss Black (Light)
+  - Lines: 1-2
+
+- Action Button (Optional)
+  - Text: "실행취소" or "확인"
+  - Font: Body 2 (14dp, Bold)
+  - Color: Toss Blue
+  - Margin Left: 16dp
+  - Padding: 8dp 12dp
+  - Min Width: 64dp
+
+### Position
+- Mobile: Bottom (16dp)
+- Tablet: Bottom Left (16dp)
+
+### Animation
+- Present: Slide up + Fade (250ms)
+- Dismiss: Fade out (150ms)
+- Auto Dismiss: 4s (without action), 10s (with action)
+
+### Interaction
+- Swipe: Dismiss
+- Action Tap: Execute + Dismiss
+- Tap (Message): Dismiss (optional)
+```
+
+---
+
+## 6. Loading States
+
+### Skeleton Screen (Product Card)
+
+```markdown
+## Apple 스타일
+
+Card Layout:
+- Background: Secondary System Background
+- Border Radius: 12pt
+- Padding: 12pt
+
+Skeleton Elements:
+- Image Placeholder
+  - Size: Full width × 200pt
+  - Background: System Gray 5
+  - Border Radius: 8pt
+  - Animation: Shimmer
+
+- Title Line 1
+  - Width: 80%
+  - Height: 20pt
+  - Background: System Gray 5
+  - Border Radius: 4pt
+  - Margin Top: 12pt
+  - Animation: Shimmer
+
+- Title Line 2
+  - Width: 60%
+  - Height: 20pt
+  - Background: System Gray 5
+  - Border Radius: 4pt
+  - Margin Top: 8pt
+  - Animation: Shimmer
+
+- Price
+  - Width: 40%
+  - Height: 24pt
+  - Background: System Gray 5
+  - Border Radius: 4pt
+  - Margin Top: 12pt
+  - Animation: Shimmer
+
+Shimmer Animation:
+- Gradient: transparent → white(20%) → transparent
+- Angle: -45deg
+- Duration: 1.5s
+- Timing: ease-in-out
+- Iteration: infinite
+```
+
+### Progressive Loading (Toss 스타일)
+
+```markdown
+## 단계별 로딩
+
+Phase 1: Structure (0-200ms)
+- Show layout structure
+- Background colors only
+- No content
+
+Phase 2: Critical Content (200-500ms)
+- Load essential text
+- Show placeholders for images
+- Interactive elements disabled
+
+Phase 3: Images (500-1000ms)
+- Progressive JPEG loading
+- Blur-up technique
+- Low quality → High quality
+
+Phase 4: Complete (1000ms+)
+- All content loaded
+- Enable interactions
+- Trigger entrance animations
+
+## Loading Indicator
+
+Circular Progress:
+- Size: 32pt
+- Stroke Width: 3pt
+- Color: Toss Blue
+- Animation:
+  - Rotation: 360deg, 1.2s, linear, infinite
+  - Stroke Dash: animated circle
+
+Position:
+- Center of container
+- Or inline with button text
+```
+
+---
+
+## 출처
+
+이 예시들은 다음을 참고하여 작성되었습니다:
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [Toss Design System](https://toss.tech/article/toss-design-system-guide)
+- [Material Design 3](https://m3.material.io/)