@kood/claude-code 0.7.6 → 0.7.8

package/templates/.claude/skills/design/references/patterns.md

@@ -0,0 +1,250 @@
+# 디자인 패턴 가이드
+
+> 랜딩 페이지, 대시보드, 폼, 모바일 앱의 디자인 사양서
+
+---
+
+## 1. 랜딩 페이지
+
+### 히어로 섹션
+
+| 요소 | 사양 |
+|------|------|
+| **높이** | 100vh (전체 화면) 또는 최소 600px |
+| **헤드라인** | 6-10 단어, 48-72px, Bold |
+| **부제목** | 15-25 단어, 18-24px, Regular |
+| **CTA 버튼** | 높이 48-56px, 패딩 24-32px |
+| **여백** | 좌우 16px (모바일), 32px (데스크톱) |
+
+**CTA 버튼 배치:**
+- Primary: 브랜드 컬러, 채워진 형태
+- Secondary: 아웃라인 또는 Ghost
+
+### 소셜 프루프
+
+| 요소 | 사양 |
+|------|------|
+| **로고 높이** | 24-40px |
+| **로고 개수** | 4-6개 권장 |
+| **스타일** | Grayscale, opacity 60-80% |
+| **간격** | 로고 간 48-64px |
+| **배경** | 약간 어두운 톤 (#F5F5F5) |
+
+### 기능 섹션
+
+| 레이아웃 | 모바일 | 태블릿 | 데스크톱 |
+|---------|--------|--------|----------|
+| **열 수** | 1 | 2 | 3-4 |
+| **아이콘 크기** | 40px | 48px | 56px |
+| **카드 패딩** | 16px | 24px | 32px |
+| **카드 간격** | 16px | 24px | 32px |
+
+### 가격 테이블
+
+| 요소 | 사양 |
+|------|------|
+| **플랜 개수** | 3개 권장 (Basic / Pro / Enterprise) |
+| **강조 플랜** | 중앙 배치, 스케일 1.05, 그림자 추가 |
+| **가격 폰트** | 32-48px, Bold |
+| **기능 리스트** | 체크 아이콘 + 텍스트, 14-16px |
+| **CTA 버튼** | 전체 너비, 높이 48px |
+
+### CTA 섹션 (Footer CTA)
+
+| 요소 | 사양 |
+|------|------|
+| **배경** | 브랜드 컬러 또는 그라데이션 |
+| **패딩** | 상하 80-120px |
+| **헤드라인** | 32-40px, 중앙 정렬 |
+| **버튼** | 대비 높은 컬러 (예: 흰색) |
+
+---
+
+## 2. 대시보드
+
+### 레이아웃 구조
+
+| 영역 | 사양 |
+|------|------|
+| **사이드바** | 너비 240-280px, 축소 시 64-80px |
+| **헤더** | 높이 56-64px |
+| **메인 영역** | 패딩 24-32px |
+| **카드 간격** | 16-24px |
+
+### KPI 카드
+
+| 요소 | 사양 |
+|------|------|
+| **최소 너비** | 240px |
+| **높이** | 120-160px |
+| **아이콘** | 24px, 배경 40x40px 원형 |
+| **숫자** | 28-32px, Bold |
+| **라벨** | 12-14px, Gray |
+| **변화율** | 12px, 상승=초록, 하락=빨강 |
+
+### 데이터 테이블
+
+| 요소 | 사양 |
+|------|------|
+| **행 높이** | 48-56px |
+| **헤더 배경** | #F9FAFB 또는 투명 |
+| **구분선** | 1px, #E5E7EB |
+| **호버 배경** | #F3F4F6 |
+| **패딩** | 좌우 16px |
+| **정렬** | 텍스트=좌측, 숫자=우측 |
+
+### 사이드바 네비게이션
+
+| 요소 | 사양 |
+|------|------|
+| **메뉴 아이템 높이** | 40-48px |
+| **아이콘** | 20px |
+| **아이콘-텍스트 간격** | 12px |
+| **활성 상태** | 배경 강조 + 좌측 인디케이터 3px |
+| **그룹 간격** | 24px |
+
+---
+
+## 3. 폼 디자인
+
+### 입력 필드
+
+| 상태 | 스타일 |
+|------|--------|
+| **기본** | 테두리 #D1D5DB, 배경 #FFFFFF |
+| **포커스** | 테두리 브랜드 컬러, 링 2px |
+| **오류** | 테두리 #EF4444, 배경 #FEF2F2 |
+| **비활성** | 배경 #F3F4F6, 텍스트 #9CA3AF |
+
+### 필드 사이즈
+
+| 사이즈 | 높이 | 패딩 | 폰트 |
+|--------|------|------|------|
+| **Small** | 32px | 8px 12px | 14px |
+| **Medium** | 40px | 10px 14px | 14px |
+| **Large** | 48px | 12px 16px | 16px |
+
+### 레이블과 에러
+
+| 요소 | 사양 |
+|------|------|
+| **레이블** | 14px, Medium, 필드 위 8px |
+| **필수 표시** | 빨간 * 또는 "(필수)" |
+| **헬퍼 텍스트** | 12px, Gray, 필드 아래 4px |
+| **에러 메시지** | 12px, Red, 필드 아래 4px |
+
+### 버튼 사이즈
+
+| 사이즈 | 높이 | 패딩 | 폰트 |
+|--------|------|------|------|
+| **Small** | 32px | 0 12px | 14px |
+| **Medium** | 40px | 0 16px | 14px |
+| **Large** | 48px | 0 24px | 16px |
+
+### 멀티스텝 폼
+
+| 요소 | 사양 |
+|------|------|
+| **진행률 표시** | 스텝 번호 또는 프로그레스 바 |
+| **스텝 간격** | 스텝당 3-5개 필드 권장 |
+| **네비게이션** | 이전/다음 버튼, 하단 고정 |
+| **요약 화면** | 제출 전 전체 내용 확인 |
+
+---
+
+## 4. 모바일 앱
+
+### 네비게이션
+
+| 유형 | 사양 |
+|------|------|
+| **탭 바** | 높이 56-64px, 아이템 3-5개 |
+| **탭 아이콘** | 24px, 라벨 10-12px |
+| **상단 앱바** | 높이 56px |
+| **드로어** | 너비 280-320px |
+
+### 터치 타겟
+
+| 요소 | 최소 사이즈 |
+|------|------------|
+| **버튼** | 44x44px (iOS), 48x48dp (Android) |
+| **리스트 아이템** | 높이 48px |
+| **아이콘 버튼** | 44x44px |
+| **탭 간격** | 8px 이상 |
+
+### 리스트 아이템
+
+| 요소 | 사양 |
+|------|------|
+| **높이** | 56-72px |
+| **아바타** | 40px 원형 |
+| **아이콘** | 24px |
+| **패딩** | 좌우 16px |
+| **구분선** | 1px, 아바타 뒤에서 시작 |
+
+### 카드
+
+| 요소 | 사양 |
+|------|------|
+| **모서리 반경** | 12-16px |
+| **그림자** | 0 2px 8px rgba(0,0,0,0.1) |
+| **패딩** | 16px |
+| **이미지 비율** | 16:9 또는 4:3 |
+
+### 바텀 시트
+
+| 요소 | 사양 |
+|------|------|
+| **핸들** | 너비 40px, 높이 4px, 중앙 |
+| **모서리 반경** | 상단 16-24px |
+| **최대 높이** | 90% 화면 |
+| **딤 배경** | rgba(0,0,0,0.5) |
+
+---
+
+## 5. 공통 컴포넌트
+
+### 모달/다이얼로그
+
+| 요소 | 사양 |
+|------|------|
+| **최대 너비** | 480px (Small), 640px (Medium), 800px (Large) |
+| **모서리 반경** | 12-16px |
+| **패딩** | 24px |
+| **딤 배경** | rgba(0,0,0,0.5) |
+| **닫기 버튼** | 우상단, 24x24px |
+
+### 토스트/알림
+
+| 요소 | 사양 |
+|------|------|
+| **위치** | 하단 중앙 또는 상단 우측 |
+| **최대 너비** | 400px |
+| **높이** | 48-56px |
+| **지속 시간** | 3-5초 |
+| **아이콘** | 20px, 좌측 |
+
+### 로딩 상태
+
+| 유형 | 사양 |
+|------|------|
+| **스피너** | 24-40px, 브랜드 컬러 |
+| **스켈레톤** | 배경 #E5E7EB, 애니메이션 펄스 |
+| **프로그레스 바** | 높이 4px, 브랜드 컬러 |
+
+### 빈 상태 (Empty State)
+
+| 요소 | 사양 |
+|------|------|
+| **일러스트** | 120-200px |
+| **헤드라인** | 20-24px, Bold |
+| **설명** | 14-16px, Gray |
+| **CTA** | 선택적, 40px 높이 |
+
+---
+
+## 참고
+
+- [Material Design Components](https://m3.material.io/components)
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [Tailwind UI Patterns](https://tailwindui.com/)

package/templates/.claude/skills/design/references/responsive.md

@@ -0,0 +1,248 @@
+# 반응형 디자인 가이드 (2025-2026)
+
+> 브레이크포인트, Container Queries, Fluid Typography 디자인 사양서
+
+---
+
+## 1. 브레이크포인트
+
+### 표준 브레이크포인트
+
+| 이름 | 너비 | 대상 기기 |
+|------|------|----------|
+| **xs** | 0-359px | 소형 폰 |
+| **sm** | 360-639px | 일반 폰 |
+| **md** | 640-767px | 대형 폰/소형 태블릿 |
+| **lg** | 768-1023px | 태블릿 |
+| **xl** | 1024-1279px | 소형 데스크톱/랩탑 |
+| **2xl** | 1280-1535px | 데스크톱 |
+| **3xl** | 1536px+ | 대형 데스크톱 |
+
+### 디자인 권장 브레이크포인트
+
+| 접근법 | 브레이크포인트 | 용도 |
+|--------|--------------|------|
+| **Mobile-First** | 360 → 768 → 1024 → 1440 | 일반적 |
+| **Desktop-First** | 1440 → 1024 → 768 → 360 | 레거시 |
+| **Content-First** | 콘텐츠 깨지는 지점 | 최적 |
+
+---
+
+## 2. Container Queries
+
+### 컨테이너 사이즈
+
+| 이름 | 최소 너비 | 용도 |
+|------|----------|------|
+| **@xs** | 160px | 작은 위젯 |
+| **@sm** | 320px | 카드 내부 |
+| **@md** | 448px | 중간 컨테이너 |
+| **@lg** | 512px | 넓은 컨테이너 |
+| **@xl** | 576px | 전체 섹션 |
+| **@2xl** | 672px | 메인 콘텐츠 |
+
+### Container Query 단위
+
+| 단위 | 설명 | 사용 예시 |
+|------|------|----------|
+| **cqw** | 컨테이너 너비 1% | 폰트 크기 유동화 |
+| **cqh** | 컨테이너 높이 1% | 높이 기반 레이아웃 |
+| **cqi** | 인라인 축 1% | 반응형 패딩 |
+| **cqb** | 블록 축 1% | 반응형 마진 |
+| **cqmin** | min(cqi, cqb) | 최소값 기반 |
+| **cqmax** | max(cqi, cqb) | 최대값 기반 |
+
+---
+
+## 3. Fluid Typography
+
+### 폰트 크기 스케일
+
+| 역할 | 모바일 | 데스크톱 | Fluid 범위 |
+|------|--------|----------|-----------|
+| **Display** | 36px | 72px | 36-72px |
+| **H1** | 30px | 48px | 30-48px |
+| **H2** | 24px | 36px | 24-36px |
+| **H3** | 20px | 24px | 20-24px |
+| **Body** | 16px | 18px | 16-18px |
+| **Small** | 14px | 14px | 고정 |
+| **Caption** | 12px | 12px | 고정 |
+
+### Fluid 계산 공식
+
+| 뷰포트 범위 | 공식 |
+|------------|------|
+| **360-1440px** | `clamp(최소, 계산값, 최대)` |
+| **선호값 계산** | `최소 + (최대-최소) × ((100vw - 360px) / (1440-360))` |
+
+### Line Height 권장값
+
+| 폰트 크기 | Line Height |
+|----------|-------------|
+| **12-14px** | 1.5-1.6 |
+| **16-18px** | 1.5-1.7 |
+| **20-24px** | 1.4-1.5 |
+| **30px+** | 1.2-1.3 |
+
+---
+
+## 4. 레이아웃 패턴
+
+### 그리드 시스템
+
+| 브레이크포인트 | 열 수 | 거터 | 마진 |
+|---------------|------|------|------|
+| **Mobile** | 4 | 16px | 16px |
+| **Tablet** | 8 | 24px | 32px |
+| **Desktop** | 12 | 24px | auto (max 1200px) |
+
+### 컴포넌트별 열 점유
+
+| 컴포넌트 | 모바일 | 태블릿 | 데스크톱 |
+|---------|--------|--------|----------|
+| **카드** | 4열 (100%) | 4열 (50%) | 3-4열 (25-33%) |
+| **사이드바** | 숨김 | 2열 | 3열 (고정) |
+| **콘텐츠** | 4열 | 6열 | 9열 |
+
+### 스택 vs 나란히
+
+| 상황 | 모바일 | 태블릿+ |
+|------|--------|--------|
+| **이미지+텍스트** | 세로 스택 | 나란히 (50:50) |
+| **폼 필드** | 전체 너비 | 2열 또는 3열 |
+| **카드 그리드** | 1열 | 2-4열 |
+| **네비게이션** | 햄버거 메뉴 | 가로 메뉴 |
+
+---
+
+## 5. 반응형 스페이싱
+
+### 기본 스페이싱 스케일
+
+| 토큰 | 모바일 | 태블릿 | 데스크톱 |
+|------|--------|--------|----------|
+| **xs** | 4px | 4px | 4px |
+| **sm** | 8px | 8px | 8px |
+| **md** | 16px | 20px | 24px |
+| **lg** | 24px | 32px | 40px |
+| **xl** | 32px | 48px | 64px |
+| **2xl** | 48px | 64px | 96px |
+
+### 섹션 간격
+
+| 섹션 유형 | 모바일 | 데스크톱 |
+|----------|--------|----------|
+| **히어로 → 섹션** | 48px | 80px |
+| **섹션 간** | 48px | 80-120px |
+| **Footer 전** | 64px | 120px |
+
+---
+
+## 6. 반응형 이미지
+
+### 이미지 사이즈 전략
+
+| 브레이크포인트 | 권장 너비 | 포맷 |
+|---------------|----------|------|
+| **Mobile** | 640w, 750w | WebP/AVIF |
+| **Tablet** | 1080w | WebP/AVIF |
+| **Desktop** | 1920w, 2560w | WebP/AVIF |
+
+### Art Direction
+
+| 화면 | 비율 | 포커스 |
+|------|------|--------|
+| **모바일** | 1:1 또는 4:5 | 중심 크롭 |
+| **태블릿** | 4:3 | 중간 크롭 |
+| **데스크톱** | 16:9 또는 21:9 | 전체 이미지 |
+
+### 히어로 이미지 사이즈
+
+| 기기 | 너비 | 높이 |
+|------|------|------|
+| **Mobile** | 750px | 1334px (100vh) |
+| **Tablet** | 1536px | 1024px |
+| **Desktop** | 1920px | 1080px |
+| **Retina** | 2x 해상도 | 2x 해상도 |
+
+---
+
+## 7. 터치 vs 마우스
+
+### 인터랙션 차이
+
+| 요소 | 터치 (모바일) | 마우스 (데스크톱) |
+|------|-------------|------------------|
+| **터치 타겟** | 44-48px 최소 | 24px 가능 |
+| **호버 상태** | 없음 | 필수 |
+| **드래그** | 스와이프 제스처 | 드래그 앤 드롭 |
+| **툴팁** | 탭 앤 홀드 | 호버 |
+
+### 네비게이션 변환
+
+| 데스크톱 | 모바일 변환 |
+|---------|------------|
+| **가로 메뉴** | 햄버거 메뉴 |
+| **드롭다운** | 전체 화면 드로어 |
+| **사이드바** | 바텀 시트 또는 숨김 |
+| **호버 메뉴** | 탭 메뉴 |
+
+---
+
+## 8. 2025-2026 트렌드
+
+### 새로운 디바이스 대응
+
+| 디바이스 | 고려사항 |
+|---------|---------|
+| **Foldable** | 힌지 영역 피하기, 연속성 유지 |
+| **Ultra-wide** | 최대 너비 제한, 다중 열 |
+| **AR/VR** | 3D 공간 UI, 시선 기반 인터랙션 |
+
+### 새로운 CSS 기능
+
+| 기능 | 용도 |
+|------|------|
+| **Container Queries** | 컴포넌트 기반 반응형 |
+| **:has()** | 부모 선택자 |
+| **Subgrid** | 중첩 그리드 정렬 |
+| **CSS Nesting** | 선택자 중첩 |
+| **@layer** | 캐스케이드 레이어 |
+
+### Intrinsic Design 원칙
+
+| 원칙 | 설명 |
+|------|------|
+| **콘텐츠 기반** | 브레이크포인트가 아닌 콘텐츠에 따라 |
+| **유동적 스케일** | 단계별이 아닌 연속적 변화 |
+| **컴포넌트 독립** | 컨테이너 기반 자체 반응형 |
+
+---
+
+## 체크리스트
+
+### 설계 단계
+- [ ] Mobile-First 접근
+- [ ] 핵심 브레이크포인트 정의 (360, 768, 1024, 1440)
+- [ ] Fluid Typography 적용
+- [ ] Container Queries 고려
+
+### 구현 단계
+- [ ] 터치 타겟 44px 이상
+- [ ] 이미지 srcset/sizes 설정
+- [ ] 호버 상태 → 모바일 대체
+- [ ] 가로/세로 모드 테스트
+
+### 테스트 단계
+- [ ] 실제 기기 테스트
+- [ ] 느린 네트워크 테스트
+- [ ] 다크 모드 테스트
+- [ ] 접근성 테스트
+
+---
+
+## 참고
+
+- [Responsive Web Design Fundamentals](https://web.dev/responsive-web-design-basics/)
+- [Container Queries Spec](https://www.w3.org/TR/css-contain-3/)
+- [Utopia Fluid Type Calculator](https://utopia.fyi/)

package/templates/.claude/skills/design/references/safe-area.md

@@ -0,0 +1,202 @@
+# Safe Area 디자인 가이드
+
+> iOS, Android, Foldable 디바이스의 Safe Area 사양서
+
+---
+
+## 1. iOS Safe Area
+
+### 기본 Insets
+
+| 요소 | 사이즈 | 비고 |
+|------|--------|------|
+| **상단 (노치)** | 47-59pt | 기기별 상이 |
+| **하단 (Home Indicator)** | 34pt | 홈 버튼 없는 기기 |
+| **좌측 (가로)** | 44pt | 노치 회피 |
+| **우측 (가로)** | 44pt | 노치 회피 |
+
+### Dynamic Island
+
+| 요소 | 사이즈 |
+|------|--------|
+| **높이** | 36px |
+| **너비 (Compact)** | 126px |
+| **너비 (Expanded)** | 최대 371px |
+| **아이콘** | 24px |
+| **텍스트** | 15pt, line-height 22pt |
+
+**프레젠테이션 모드:**
+- **Compact**: 기본 축소 (진행 중인 활동)
+- **Minimal**: 최소화 (배경 활동)
+- **Expanded**: 확장 (상세 정보)
+
+### 디바이스별 Safe Area
+
+| 디바이스 | 상단 | 하단 |
+|---------|------|------|
+| **iPhone 15 Pro** | 59pt | 34pt |
+| **iPhone 15** | 59pt | 34pt |
+| **iPhone SE** | 20pt | 0pt |
+| **iPad Pro** | 24pt | 20pt |
+
+---
+
+## 2. Android Safe Area
+
+### Display Cutout 유형
+
+| 유형 | 설명 |
+|------|------|
+| **Notch** | 상단 중앙 노치 |
+| **Punch-hole** | 카메라 구멍 (좌상단/중앙) |
+| **Waterfall** | 양측면 곡면 |
+
+### System Bars 높이
+
+| 요소 | 사이즈 | 비고 |
+|------|--------|------|
+| **Status Bar** | 24-48dp | 기기별 상이 |
+| **Navigation Bar** | 48dp | 3버튼 네비게이션 |
+| **Gesture Bar** | 24dp | 제스처 네비게이션 |
+
+### Edge-to-Edge (Android 15+)
+
+| 항목 | 사양 |
+|------|------|
+| **기본 동작** | SDK 35+ 앱은 강제 Edge-to-Edge |
+| **시스템 바** | 반투명, 콘텐츠 뒤로 렌더링 |
+| **필수 처리** | WindowInsets로 패딩 적용 |
+
+### 제스처 영역
+
+| 영역 | 사이즈 | 용도 |
+|------|--------|------|
+| **좌측 엣지** | 20dp | 뒤로가기 제스처 |
+| **우측 엣지** | 20dp | 뒤로가기 제스처 |
+| **하단** | 24dp | 홈 제스처 |
+
+---
+
+## 3. Foldable 디바이스
+
+### 힌지 영역
+
+| 디바이스 | 힌지 너비 | 힌지 높이 |
+|---------|----------|----------|
+| **Galaxy Z Fold** | 0px (접힘) | 전체 높이 |
+| **Pixel Fold** | 약 12dp | 전체 높이 |
+
+### Flex Mode (반접힘)
+
+| 영역 | 용도 |
+|------|------|
+| **상단 (경사)** | 비주얼 콘텐츠 (영상, 이미지) |
+| **하단 (평면)** | 컨트롤 (버튼, 슬라이더) |
+| **힌지 근처** | 인터랙티브 요소 배치 금지 |
+
+### 화면 상태
+
+| 상태 | 설명 |
+|------|------|
+| **FLAT** | 완전히 펼침 |
+| **HALF_OPENED** | 반접힘 (Flex Mode) |
+| **Tabletop** | 가로 반접힘 (힌지 가로) |
+| **Book** | 세로 반접힘 (힌지 세로) |
+
+### 앱 연속성 요구사항
+
+| 항목 | 요구사항 |
+|------|----------|
+| **화면 전환** | 커버 ↔ 메인 중단 없이 |
+| **스크롤 위치** | 전환 시 유지 |
+| **키보드 상태** | 전환 시 유지 |
+| **전체 화면** | 레터박스 금지 |
+
+---
+
+## 4. 크로스 플랫폼
+
+### React Native
+
+| 요소 | 사양 |
+|------|------|
+| **라이브러리** | react-native-safe-area-context |
+| **Hook** | useSafeAreaInsets() |
+| **컴포넌트** | SafeAreaView, SafeAreaProvider |
+
+### Web/PWA
+
+| CSS 변수 | 설명 |
+|---------|------|
+| **safe-area-inset-top** | 상단 안전 영역 |
+| **safe-area-inset-right** | 우측 안전 영역 |
+| **safe-area-inset-bottom** | 하단 안전 영역 |
+| **safe-area-inset-left** | 좌측 안전 영역 |
+
+**Viewport 설정:** `viewport-fit=cover` 필수
+
+---
+
+## 5. 디자인 가이드라인
+
+### 콘텐츠 배치
+
+| 영역 | 배치 가능 | 주의사항 |
+|------|----------|---------|
+| **Safe Area 내부** | 모든 인터랙티브 요소 | - |
+| **Safe Area 외부** | 배경색, 장식 이미지 | 터치 불가 |
+| **노치 영역** | 상태 바 정보만 | 커스텀 UI 금지 |
+| **홈 인디케이터** | 비움 | 스와이프 영역 |
+
+### 터치 타겟
+
+| 항목 | 사양 |
+|------|------|
+| **Safe Area 내부** | 44x44pt (iOS), 48x48dp (Android) |
+| **하단 CTA** | Home Indicator 위 최소 8pt 여유 |
+| **노치 근처** | 터치 감도 낮음, 중요 버튼 배치 금지 |
+
+### 가로 모드
+
+| 항목 | 사양 |
+|------|------|
+| **좌우 Inset** | 44pt (노치 회피) |
+| **컨텐츠 중앙** | 좌우 Safe Area 내 배치 |
+| **풀스크린 미디어** | Safe Area 무시 가능 |
+
+---
+
+## 6. 플랫폼별 체크리스트
+
+### iOS
+- [ ] safeAreaInsets 또는 safeAreaLayoutGuide 사용
+- [ ] Home Indicator 영역 (34pt) 고려
+- [ ] Dynamic Island 지원 시 Live Activities 통합
+- [ ] 가로 모드 좌우 44pt 인셋 확인
+
+### Android
+- [ ] WindowInsetsCompat 사용 (하드코딩 금지)
+- [ ] Edge-to-Edge 강제 적용 대응 (SDK 35+)
+- [ ] Display Cutout 모드 설정
+- [ ] 제스처 네비게이션 영역 고려
+
+### Foldable
+- [ ] WindowLayoutInfo 구독
+- [ ] FoldingFeature.isSeparating 체크
+- [ ] Tabletop/Book 자세별 UI 최적화
+- [ ] 힌지 근처 중요 콘텐츠 배치 금지
+
+### Web/PWA
+- [ ] viewport-fit=cover 추가
+- [ ] env(safe-area-inset-*) 사용
+- [ ] Fallback 값 제공
+
+---
+
+## 참고
+
+- [Apple Developer: Safe Area](https://developer.apple.com/documentation/uikit/uiview/safeareainsets)
+- [Android: Display Cutout](https://developer.android.com/develop/ui/views/layout/display-cutout)
+- [Android: Edge-to-Edge](https://developer.android.com/develop/ui/views/layout/edge-to-edge)
+- [Samsung: Foldable Design](https://developer.samsung.com/one-ui/largescreen-and-foldable/)
+- [MDN: CSS env()](https://developer.mozilla.org/en-US/docs/Web/CSS/env)