Apple Style Promo Video

---
name: apple-style-promo-video
description: "사용자가 자기 웹·앱·SaaS·AI 제품·개발자 도구를 홍보하는 영상을 애플 광고·키노트풍 키네틱 타이포그래피와 UI 모션그래픽으로 만든다. HTML/CSS/JS로 장면을 코딩해 MP4로 렌더링한다. '홍보영상', '소개 영상', '런칭 필름', '데모 영상', '기능 소개 쇼츠/릴스', '발표용 영상', '모션그래픽', '키네틱 타이포', '프로모 비디오', 'promo video', 'product video' 요청이면 사용자가 애플을 언급하지 않아도 이 스킬을 쓴다. 실사 촬영·AI 생성 영상 요청에는 쓰지 않는다."
---

# 애플풍 홍보영상

사용자의 웹·앱을 **애플 광고처럼 보이는 홍보영상**으로 만든다. 3D 제품 렌더는 할 수 없으니 **타이포그래피가 주인공**이다. 거대한 헤드라인, 단어 하나씩 끊어 치는 템포, 그라데이션 글자, 정적과 리빌. 여기에 실제 제품 UI가 움직이는 장면을 섞어 "이게 뭘 해주는지"까지 보여준다.

애플의 브랜드 규칙이나 HIG를 지키는 게 목표가 아니다. **애플처럼 보이고, 애플처럼 혹하게 만드는 것**이 목표다.

장면은 HTML/CSS/JS로 코딩하고, 헤드리스 Chromium으로 프레임 단위 캡처한 뒤 ffmpeg로 MP4를 만든다. 한글이 깨지지 않고, 타이밍을 프레임 단위로 맞추며, 고친 뒤 바로 다시 렌더링할 수 있다. 실사 인물·3D 제품·음악 생성은 하지 못한다. 음원을 주면 비트에 맞춰 합친다.

## 사용자 흐름: 한 번 묻고, 한 번에 만든다

```
① 정보 수집 (사용자 응답 1회) → ② 제작: 카피·스토리보드·코딩·렌더·검수 (확인 없이) → ③ 전달 + 빠른 수정
```

중간에 브리프, 비트 시트, 프리뷰를 확인받지 않는다. 사용자는 **처음에 한 번 답하고, 끝에 완성 영상을 받는다.**

---

## ① 정보 수집

### 먼저 조사

사용자가 URL, 스크린샷, 레포, README, 소개 문구 중 하나라도 줬다면 **질문하기 전에 먼저 읽는다.** 웹 URL이면 페이지를 열어 제품명, 한 줄 소개, 기능, 수치, 브랜드 컬러, 로고를 뽑는다. 채울 수 있는 칸은 모두 채운 뒤에 묻는다.

### 필요한 정보

| # | 항목 | 종류 | 없을 때 |
|---|---|---|---|
| 1 | 제품명과 한 줄 소개 (누가 / 무엇을 / 어떻게 더 낫게) | **필수**, 서술 | 조사로 채운다. 조사할 자료도 없으면 묻는다 |
| 2 | 보여줄 핵심 기능 1~3개와 각 기능의 결과 예시 | **필수**, 서술 | 조사로 채우고 예시 데이터는 지어서 "시연용 화면"으로 표기 |
| 3 | 화면 자료: URL·스크린샷·로고 | 첨부 | 사이트를 보고 UI를 재현하거나 타이포만으로 만든다 |
| 4 | 용도 → 비율·길이 | 선택 | 16:9, 30초 |
| 5 | 스타일 | 선택 | 키노트 다크 |
| 6 | 마지막 행동(CTA) | 선택 | 사이트 방문 + URL |
| 7 | 강조할 수치·실적, 피해야 할 표현 | 서술, 선택사항 | 넣지 않는다. 수치는 지어내지 않는다 |

### 묻는 방법

한 메시지 안에 다 묻는다. 묻는 건 한 번뿐이다.

1. 조사로 파악한 내용을 3~5줄로 보여준다: "○○는 △△를 해주는 서비스로 파악했어요. 기능은 A, B, C를 보여줄게요." 틀렸으면 고쳐 달라고 한 줄 덧붙인다.
2. 선택형 질문(4~6번)은 **선택지를 고르는 UI가 있으면 그걸로** 묻는다. Claude Code의 `AskUserQuestion`, claude.ai(웹·데스크탑 앱)에 있는 선택형 질문 도구가 해당한다. 그런 도구가 없으면 번호 선택지를 텍스트로 보여주고 "1-A, 2-B처럼 답해 주세요. 모르면 비워 두세요, 기본값으로 갈게요"라고 쓴다.
3. 필수 정보(1·2)를 조사로 채울 수 없을 때만 서술형으로 묻는다. 이때는 선택지도 같은 메시지에 텍스트로 함께 보여준다. 두 번 묻지 않기 위해서다.
4. 사용자가 처음부터 "알아서 해줘"라고 하거나 정보를 충분히 줬다면 질문을 건너뛰고 기본값으로 바로 만든다. 답변 끝에 어떤 기본값을 썼는지 한 줄로 알린다.

**선택지 (그대로 쓴다)**

- **용도:** A 랜딩·유튜브 (16:9, 30초) / B 쇼츠·릴스 (9:16, 15초) / C 발표·데모데이 (16:9, 45초) / D 인스타 피드 (4:5, 20초)
- **스타일:** 자세한 내용은 [references/design-system.md](references/design-system.md)의 스타일 프리셋.
  - A 키노트 다크: 검정 배경, 그라데이션 헤드라인, 웅장한 리빌
  - B 클린 화이트: apple.com 제품 페이지처럼 흰 배경, 떠 있는 UI 카드, 차분함
  - C 컬러 블록: 브랜드 컬러 풀스크린 배경에 거대한 흰 글자, 대담함
  - D 템포 키네틱: 단어가 박자에 맞춰 빠르게 끊어지는 컷, 쇼츠에 강함
- **마지막 행동:** A 사이트 방문 / B 앱 다운로드 / C 무료로 시작하기 / D 사전 등록·대기자 신청
- **UI 화면:** A 첨부한 스크린샷 사용 / B 사이트를 보고 재현 / C UI 없이 타이포만

---

## ② 제작 (확인 없이 끝까지)

답을 받으면 아래를 순서대로 혼자 진행한다. 중간 산출물을 보여주고 승인받지 않는다.

### 1. 카피 먼저

타이포가 주인공이라 **카피가 영상의 품질을 결정한다.** 코딩 전에 전체 카피를 쓴다. 공식과 예시는 [references/typography-playbook.md](references/typography-playbook.md)의 「카피 공식」에 있다.

- 문장은 짧게 끊고 마침표로 리듬을 만든다. "빠르다. 정확하다. 그리고 쉽다."
- 한 화면에 한 문장. 16:9는 한 줄 한글 12자, 9:16은 8자 안팎.
- 기능 설명이 아니라 얻는 것을 쓴다. "회의록 자동 요약" ✗ → "회의는 끝났다. 정리도 끝났다." ✓
- 영상 전체에서 **꽂히는 한 문장**을 하나 정해 리빌 장면과 엔드카드에 쓴다.

### 2. 스토리보드 (내부용)

[references/story-templates.md](references/story-templates.md)에서 용도에 맞는 골격을 고르고, 장면마다 타이포 무브([typography-playbook.md](references/typography-playbook.md))나 UI 장면([references/scene-catalog.md](references/scene-catalog.md))을 배정한다.

기본 리듬은 **긴장 → 리빌 → 증명 → 각인**이다.

| 구간 | 비율 | 30초 기준 | 하는 일 | 주로 쓰는 무브 |
|---|---|---|---|---|
| 훅 | 10~15% | 0–4s | 문제나 질문을 짧게 끊어 친다 | 템포 컷, 라인 리빌 |
| 리빌 | ~10% | 4–7s | 정적 → 제품명이 크게 등장 | 정적 비트, 트래킹 인, 그라데이션 |
| 기능 증명 | 50~60% | 7–24s | 기능 2~3개를 헤드라인 + 실제 UI 움직임으로 | 단어 교체, 글자→UI 변신, 플로우 데모 |
| 폭·수치 | ~10% | 24–27s | 기능 전체의 폭이나 핵심 수치 | 기능 월, 숫자 히어로, 리스트 롤 |
| 엔드카드 | ~10% | 27–30s | 로고 + 꽂히는 한 문장 + CTA | 락업 |

- UI 없이 타이포만 만드는 경우에도 기능 구간은 **구체적인 결과**를 글자로 보여준다 ("2시간 → 3분", 실제 결과 문장).
- 기능이 4개 이상이면 2~3개만 깊게 보여주고, 나머지는 기능 월 한 장면으로 묶는다.

### 3. 코딩 → 렌더 → 검수 → 수정

환경 준비, 아키텍처, 렌더 명령은 아래에 있다. 검수 경고가 0이 될 때까지 혼자 고치고 다시 렌더링한다. 검수를 통과한 최종본만 전달한다.

---

## ③ 전달

- MP4를 보낸다. Claude Code에서는 파일 경로를, 채팅 환경에서는 다운로드 가능한 파일을 준다. 대표 프레임 3~4장을 담은 `grid.png`도 함께 보여준다.
- 아래를 5줄 이내로 쓴다.
  - 장면 구성: "훅 → 리빌 → 기능 A·B → 수치 → 엔드카드"
  - 꽂히는 한 문장
  - 사용한 기본값
  - 시연용 데이터를 썼다면 그 사실
- 끝에 바로 고를 수 있는 수정 옵션을 2~4개 제시한다. 예: "더 빠르게 / 다크↔화이트 전환 / 9:16 버전 추가 / 카피 톤 바꾸기". 선택 UI가 있으면 그걸로 묻는다.

### 수정 요청 대응

- **"더 애플스럽게":** 효과를 더하지 말고 덜어낸다. 글자를 더 크게 하고, 여백을 늘리고, 색을 줄인다. 리빌 앞에 정적(0.4초)을 넣고, 결과 화면에 머무는 시간을 늘린다.
- **"더 임팩트 있게 / 혹하게":** 훅을 템포 컷으로 바꾼다. 꽂히는 한 문장에 그라데이션을 입히고, 숫자 히어로를 하나 넣는다.
- **"내용이 약해":** 기능 장면에 결과 데이터, Before/After, 수치를 더한다. 장식을 늘리지 않는다.
- **"더 짧게":** 기능 수를 먼저 줄이고, 그다음 훅을 줄인다. 리빌과 엔드카드는 지킨다.
- **색·문구 변경:** CSS 변수와 텍스트만 바꾸고 다시 렌더링한다.
- **다른 비율:** `--format`만 바꿔 레이아웃을 확인하고 보정한다. 9:16은 글자를 1.2배 키우고 세로로 쌓는다.
- **음원:** `ffmpeg -i promo.mp4 -i music.mp3 -c:v copy -c:a aac -shortest -af "afade=t=out:st=<끝-1.5>:d=1.5" final.mp4`. 비트 시점에 맞춰 장면 `dur`를 조정한다.

---

## 환경 준비

```bash
which ffmpeg && python3 -c "import playwright" && echo ok
# 없으면: pip install playwright (필요하면 --break-system-packages) && python3 -m playwright install chromium
mkdir -p promo && cd promo && npm i pretendard      # 한글. 영문 전용이면 npm i @fontsource/inter
cp <skill>/assets/template.html promo.html
cp <skill>/scripts/render.py <skill>/scripts/qa_frames.py .
```

채팅 환경(claude.ai 웹·데스크탑 앱)의 샌드박스에서 Chromium·ffmpeg·npm 설치가 막히면, 완성된 `promo.html`과 `render.py`를 주고 로컬에서 렌더링하는 명령 한 줄을 안내한다. 첨부 에셋은 작업 폴더로 복사해서 쓰고, 원본은 건드리지 않는다.

## 핵심 아키텍처: 장면 모듈 + `render(t)` 순수 함수

`assets/template.html`이 이 구조로 되어 있다. 이 구조를 쓰는 이유는 **어느 프레임이든 t만으로 화면이 결정되어야** 부분 렌더, 재렌더, 프레임 검수가 모두 가능하기 때문이다.

1. CSS transition, @keyframes, requestAnimationFrame, setTimeout을 쓰지 않는다. 모든 상태를 t로부터 계산한다.
2. 장면은 `SCENES` 배열에 `{id, role, dur, draw(lt, t)}`로 등록한다. `render(t)`는 범위 밖 장면을 매 프레임 숨긴다. `draw` 안에서는 early return 하지 않는다 (잔상의 원인이 된다).
3. 장면 시작 시간은 `dur`를 누적해 자동으로 계산된다. `overlap`을 주면 겹치는 구간이 자동으로 디졸브된다. 하드컷은 `overlap` 없이 쓰고, 직접 제어할 전환은 `tr:'manual'`로 둔다.
4. 이동할 요소의 도착 좌표는 `measure()`에서 `getBoundingClientRect()`로 측정한다.
5. 비율은 `?format=16:9|9:16|1:1|4:5`로 바꾼다. 레이아웃은 CSS 변수와 `body[data-format]`으로 잡는다.
6. 스타일 프리셋은 `body` 클래스(`style-keynote|style-clean|style-color|style-tempo`)로 토큰을 바꾼다.

```bash
python3 render.py promo.html --format 16:9 --out promo.mp4                 # 전체
python3 render.py promo.html --from 5 --to 12 --fps 15 --out preview.mp4   # 일부만 빠르게 확인
```

## 레퍼런스

장면을 짜기 전에 **typography-playbook.md와 design-system.md는 반드시 읽는다.**

- [references/typography-playbook.md](references/typography-playbook.md): 애플 타이포 원칙, 시그니처 무브 14개(코드 포함), 카피 공식. **이 스킬의 핵심.**
- [references/design-system.md](references/design-system.md): 스타일 프리셋 4종, 색 토큰, 레이아웃, UI 요소, Liquid Glass
- [references/motion-recipes.md](references/motion-recipes.md): UI 인터랙션, 데이터, 연속 변환, 전환 레시피
- [references/scene-catalog.md](references/scene-catalog.md): 기능을 보여주는 UI 장면 유형
- [references/story-templates.md](references/story-templates.md): 용도별 골격

## 품질 검수 (매 렌더마다)

```bash
python3 qa_frames.py promo.mp4 promo.html      # 장면 중간 + 전환 ±0.1s 프레임을 grid.png로
```

`grid.png`를 Read로 직접 본다. 스크립트가 시간 배분, 텍스트 대비, 깜빡임(1초에 밝기 급변 3회 초과)을 검사해 `!`로 경고한다. 경고는 모두 고친다.

**혹하는가**
- [ ] 첫 2초 안에 "어?" 하게 만드는 문장이나 장면이 있다
- [ ] 제품명이 정적 뒤에 크게 등장하는 리빌 순간이 있다
- [ ] 꽂히는 한 문장이 영상에서 2번 나온다 (리빌과 엔드카드)
- [ ] 소리 없이 봐도 제품이 무엇을 해주는지 이해된다
- [ ] 기능 장면마다 구체적인 결과(실제 문장, 숫자, 이름)가 보인다

**애플스러운가**
- [ ] 헤드라인이 화면을 압도할 만큼 크다 (16:9 기준 120px 이상, 히어로는 200px 이상)
- [ ] 한 화면에 한 문장만 있다. 색은 배경·글자·포인트 3개 이내다
- [ ] 그라데이션 글자는 영상 전체에서 1~2곳만 쓴다
- [ ] 화면의 40% 이상이 비어 있는 장면이 많다
- [ ] 장식(파티클, 바운스 캐릭터, 이모지)이 없다

**깨지지 않았는가**
- [ ] 텍스트가 잘리거나 한 글자만 다음 줄로 넘어가지 않는다. 안전영역 밖에 텍스트가 없다
- [ ] 폰트가 fallback으로 렌더링되지 않았다
- [ ] 전환 순간 두 장면이 겹쳐 번쩍이지 않는다
- [ ] 이동한 요소가 도착 위치에 정확히 착지한다
- [ ] 시연용 임의 데이터가 있으면 구석에 "시연용 화면"이라고 작게 표기했다
- [ ] qa_frames.py 경고가 없다