# [대기] InsuRo 모바일 최적화 체크 결과

## 종합 점수: 4/10

## 잘 된 것 ✅
- PWA 설정 (manifest, 서비스워커, 자동업데이트) — 8/10
- Push 알림 구현 — 8/10
- 반응형 사이드바 (모바일 시트 전환)
- useIsMobile() 훅 (768px 기준)
- 오디오 녹음 (MediaRecorder API)

## 문제점 ❌

### 1. 번들 사이즈 — 치명적
- JS: 1.9MB, CSS: 114KB, 이미지: 328KB → **총 2.3MB**
- 코드 스플리팅 없음 (단일 JS 파일)
- 모바일 목표: 300KB 이하
- **React.lazy() 라우트별 분할 필수**

### 2. Safe Area / 노치 미지원
- viewport-fit=cover 없음
- safe-area-inset CSS 없음
- 노치 있는 기기에서 UI 잘림 가능

### 3. 터치 타겟 크기 부족
- 버튼 36~40px → iOS 권장 44px, Android 권장 48px
- 아이콘 10~20px → 터치하기 어려움

### 4. 줌 차단
- user-scalable=no → 접근성 위반, 제거 필요

### 5. 오프라인 지원 없음
- Workbox 캐시만 있고 오프라인 폴백 페이지 없음

### 6. 이미지 최적화 없음
- partner-logo.png 162KB (PNG) → WebP 변환 필요
- srcset/반응형 이미지 없음
- lazy loading 없음

### 7. Capacitor 미완성
- iOS/Android 디렉토리 미생성
- 앱명: "hangeul-helper-pal" (오류)
- 앱ID: lovable 것 그대로

## 우선순위별 작업

### 최우선 (모바일 사용 불가 수준)
1. 번들 사이즈 축소 (코드 스플리팅)
2. Safe area / 노치 지원
3. user-scalable=no 제거

### 높음 (사용성)
4. 터치 타겟 44px 이상으로
5. 오프라인 폴백 페이지
6. 이미지 WebP 변환 + lazy load

### 중간 (개선)
7. 하단 네비게이션 추가 검토
8. 폰트 프리로드
9. Core Web Vitals 모니터링 추가

### 낮음 (폴리쉬)
10. 제스처 지원 (스와이프 등)
11. Capacitor 네이티브 빌드 초기화