# 11th 화면 인수인계본 — 정적 스냅숏

**서버 없이 뜹니다.** 정적 호스팅(Cloudflare Pages 등)에 이 폴더를 그대로 올리면 4단계 전 구간이
실제로 클릭됩니다.

## 구성

```
index.html    7KB    마크업 전부 (한 파일)
app.css      29KB    스타일 전부 (한 파일)   ← 원본과 동일
app.js       73KB    로직 전부 (한 파일)     ← 원본과 동일, 한 글자도 안 고침
fixtures.js  19KB    데모용 더미 응답        ← ⛔ 이 파일만 데모 전용
img/         2.1MB   모델 12장 + 제품 16장
scenes/       33MB   좌측 연출 영상·포스터
```

## 실서버에 붙일 때

**`index.html` 에서 `<script src="fixtures.js"></script>` 한 줄만 지우면 됩니다.**
`app.js` 는 원본 그대로라 API 가 살아 있으면 바로 붙습니다.

## 원본과 다른 점 (넘기기 위해 손댄 것)

| | 무엇 | 왜 |
|---|---|---|
| 1 | `fixtures.js` 추가 + `index.html` 에 한 줄 | 서버 없이 화면이 서게 |
| 2 | 모델·제품 사진을 `img/` 로 구움 | 모델은 서버 라우트(`/api/image`)를, 제품은 만료되는 외부 주소를 타고 있었다 |
| 3 | Agentation(개발용 위젯) 블록 제거 | `esm.sh` 외부 의존을 남기지 않는다 |
| 4 | `data-step=90/91` 섹션 제거 | (A) 시절 잔존물 — 지금 흐름에서 도달 경로 0 |
| 5 | `/app.css` `/app.js` → 상대경로 | 하위 경로에 놓여도 뜨게 |
| 6 | 숨긴 버튼 2개 추가 | ↓ 아래 참조 |

### 🩸 6번이 왜 필요한가

4번으로 90/91 을 지웠더니 **`app.js` 가 최상위에서 그 안의 버튼을
`$("btnScriptEdit").onclick = …` 로 잡다가 `null` 에서 죽었습니다.** 랜딩만 뜨고 모달이
안 열렸습니다. `app.js` 는 그대로 넘겨야 하므로 **고치지 않고**, 두 요소만 `hidden` 으로
남겼습니다. 화면에는 안 보이고 스크립트는 삽니다.

→ 실서버에 붙일 때 `app.js` 를 손볼 수 있게 되면, 그 두 줄(`btnDirEdit`·`btnScriptEdit`
핸들러 등록)을 옵셔널로 바꾸고 이 숨긴 버튼들을 지우면 됩니다.

## 외부에서 가져오는 것 — **모델 회전 영상 6개**

⚠️ 이 스냅숏은 **완전한 자체완결이 아닙니다.** 모델을 고르면 좌측에 도는 회전 영상
(`previewVideo`)이 사내 자산 CDN 을 그대로 탑니다:

```
https://assets-static.vcat.ai/public/apps_presets/reference/persona2608/{F1..M2}_turn.mp4   6개 × 약 6MB
https://assets-static.vcat.ai/public/apps_presets/reference/persona2608/{F1..M2}_back.jpg   6개 (데이터에만 있고 화면은 안 씀)
```

**일부러 굽지 않았습니다.** 프리셋 모델 자산은 실서비스에서도 같은 CDN 에서 옵니다 —
여기서 로컬 사본으로 바꿔 두면 재환님이 붙일 때 실제 경로와 어긋납니다.
구운 것은 **우리 서버 라우트(`/api/image`)나 만료되는 임시 주소를 타던 것**뿐입니다.

전량 실측 200 확인(2026-09-04, 총 39MB). 그 CDN 이 막히면 **모델 선택 후 좌측 영상만**
안 뜨고 나머지 화면은 그대로 섭니다.

## 데이터

픽스처는 **지어낸 것이 아닙니다.** 2026-09-04 실제로 돌았던 판입니다 —
올리브영 「에스트라 리제덤365 레티노이드 아이세럼」. 그 판으로 만든 영상이
https://ugc-run-0904.pages.dev/ 에 있습니다.

## 실측 (2026-09-04)

정적 서버(`python3 -m http.server`, API 전부 404)에서:

```
랜딩 → 모달 → 1~4단계 전 구간 동작
2단계  제품명 채워짐 · 사진 16칸 · 깨진 이미지 0
3단계  요구사항 3항목 · 칩 6개
4단계  모델 카드 6장 · 사진 정상 표시
좌측   /scenes/*.mp4 재생
JS 에러 0건 · 깨진 이미지 0
모바일 390px  1~4단계 가로 넘침 0 · 모델 2열
```

⚠️ 모바일은 **실기기가 아니라 근사치**입니다(미디어 쿼리를 강제하고 모달을 390px 로 묶어
측정). 주소창·세이프에어리어·`dvh`·터치 타겟은 못 봤습니다.