---
name: mobile-prototype-ko
description: "iPhone 15 Pro / Pixel 9 Pro 프레임 + 한글 시나리오 합성. 회장 베타테스트 자동 시연. Use when: 모바일 프로토타입, mobile prototype, iPhone 시연, Pixel 시연, 신기능 시연, 베타테스트 자동화."
---

# Mobile Prototype KO (IDS Phase 3)

iPhone 15 Pro / Pixel 9 Pro 디바이스 프레임 안에 InsuRo / InsuWiki 한글 시연 화면을 합성하여, 회장 베타테스트용 PNG 산출물을 자동 생성하는 디자인팀 스킬.

## 사용 시점

- 신기능 시연용 모바일 프로토타입 PNG가 필요할 때
- 베타테스트 화면을 디바이스 프레임 안에 자동 합성할 때
- iPhone / Pixel 양 플랫폼 + 라이트 / 다크 모드 동시 출력이 필요할 때
- 한글 100% 정확도가 보장되어야 할 때 (Satori 한계 보완)

## 산출물 카탈로그

### 디바이스 프레임 (`frames/`)
- `iphone15pro_light.html` — 393×852, Dynamic Island, 라이트 모드
- `iphone15pro_dark.html` — 393×852, Dynamic Island, 다크 모드
- `pixel9pro_light.html` — 412×915, hole-punch 카메라, 라이트 모드
- `pixel9pro_dark.html` — 412×915, hole-punch 카메라, 다크 모드

### 시연 시나리오 (`scenarios/`)
1. `signup_step1.html` — 가입 1단계: 전화번호 입력
2. `signup_step2.html` — 가입 2단계: SMS 인증
3. `signup_step3.html` — 가입 3단계: 약관 동의
4. `dashboard.html` — 메인 대시보드 (보유 보험 / 추천)
5. `insurance_compare.html` — 보험 비교 테이블 (3개 상품)
6. `cardnews_publish.html` — 카드뉴스 발행 미리보기
7. `ai_analysis.html` — AI 분석 결과 (점수 + 추천)

## 사용법

### 1) 단일 시나리오 PNG 생성

```bash
python3 /home/jay/workspace/skills/mobile-prototype-ko/scripts/render_prototype.py \
  --device iphone15pro \
  --mode light \
  --scenario dashboard \
  --output /home/jay/workspace/skills/mobile-prototype-ko/outputs/dashboard_iphone15pro_light.png
```

#### 인자
- `--device`: `iphone15pro` | `pixel9pro`
- `--mode`: `light` | `dark`
- `--scenario`: `signup_step1` | `signup_step2` | `signup_step3` | `dashboard` | `insurance_compare` | `cardnews_publish` | `ai_analysis`
- `--output`: 절대 경로 PNG

### 2) 한글 OCR 검증

```bash
python3 /home/jay/workspace/skills/mobile-prototype-ko/scripts/validate_korean_ocr.py \
  --image /home/jay/workspace/skills/mobile-prototype-ko/outputs/dashboard_iphone15pro_light.png \
  --scenario dashboard
```

`pytesseract` (`-l kor+eng`)로 한글 추출 후 시나리오별 정답 키워드 set 100% 매칭 검증.
실패 시 누락된 키워드를 stderr에 출력하고 exit code `1` 반환.

## 디자인 원칙 (디자인 노하우 #46~#52 적용)

- 폰트: `Pretendard, "Noto Sans KR", -apple-system, sans-serif`
- 한글 word-break: `keep-all`
- 본문 최소 14px, 헤드라인 24px+
- 라이트/다크 모드 모두 AAA 대비 (4.5:1+) 보장
- 모든 카피는 실제 보험 도메인 (예: "월 보험료 12,400원", "AI 분석 점수 87점")

## frontend-design 연동

`skills/frontend-design/SKILL.md`는 read-only로 참고하며, 본 스킬은 디자인 토큰 / 팔레트 영감만 inline CSS로 가져온다.

## 외부 API 호출 금지 (IDS §0.5)

본 스킬은 외부 LLM / 이미지 생성 API를 직접 호출하지 않는다.
모든 합성은 로컬 HTML/CSS + Playwright + pytesseract로 수행.

## 회귀 테스트

`tests/design-team/test_ids_phase3_mobile_prototype.py` — 10개 테스트 (프레임 치수, Dynamic Island, hole-punch, status bar, 한글, 외부 API 차단 등).