앱 프로모 비디오 (Remotion + 실제 iPhone + 실제 UI)
이 방법은 네 개의 소규모 iOS 앱(Unblock, Talljakt, Georama, Quiz)을 위해 개발되었으며, 어떤 앱이든 반복 가능하도록 작성되었습니다. 앱별 요소는 examples/에 있습니다. 재사용 가능한 부분은 templates/에 있습니다. 자세한 기술, 주의사항 및 조정 가능한 변수는 references/techniques.md에 있습니다. 제작 전에 반드시 읽어보세요.
언어: 사용자가 사용하는 언어로 대화하세요. 사용자가 노르웨이어로 시작하면 노르웨이어로 답변하세요. 비디오 내 텍스트 언어는 별도로 선택해야 합니다(아래 질문 3).
0. 먼저 인터뷰 (짧게)
다음 질문을 함께 물어보세요(AskUserQuestion 또는 한 메시지로). 사용자가 "기본값"이라고만 답할 수 있도록 기본값을 제안하세요.
- 길이: 20–60초. 기본값 약 30초.
- 형식: 9:16 세로 1080×1920. 기본값 60fps. 1:1 또는 16:9도 가능?
- 화면 텍스트 언어.
- 용도: 개인 공유, 소셜 미디어(Reels/TikTok, 세이프 존 고려) 또는 App Store 프리뷰. App Store 프리뷰는 실제 녹화본이어야 하고 최대 30초이며 인위적인 3D 효과를 사용할 수 없으므로 이 방법에 적합하지 않습니다.
- UI가 화면 밖으로 얼마나 튀어나오는가: 없음(절제됨: 실제 녹화, 포커스 줌 및 앱 자체 전환만 사용,
examples/kjop참조), 미묘함(한두 번의 히어로 순간), 중간 또는 전체(모든 요소가 튀어나옴). 기본값은 미묘함에서 중간 정도입니다. 없음은 일반적인 일상 앱(목록, 양식, 설정)에 적합합니다. 전체는 앱의 구성 요소가 자연스럽게 물리적 개체인 앱(게임 타일)에 적합합니다. 일반 앱(목록, 양식, 카드)의 경우 1–3개의 핵심 요소만 들어 올리고 나머지는 화면에 유지하세요. - 창의적 자유: 에이전트가 컨셉을 구상해야 합니까?
- 음악: 코드로 생성(기본값, 라이선스 불필요) 또는 사용자 자체 트랙? 각 앱에 고유한 사운드 팔레트를 제공하여 두 비디오가 같은 소리를 내지 않도록 하세요(
references/techniques.md#sound참조). - 표시할 기능(3–5개), 그리고 앱의 "히어로" 요소 또는 순간은 무엇입니까?
- 엔딩: 두 가지 검증된 옵션; 앱에 따라 선택하고 불분명하면 물어보세요. (a) 앱 자체 요소로 구축된 로고 잠금(Unblock: 로고가 3D 타일로 조립되고 마지막에 황동 타일이 안착됨). (b) 전화기 위에 슬로건이 있는 홈 화면, 아이콘 + 이름이 마지막 줄(Talljakt: "여섯 개의 숫자. / 하나의 목표. / [아이콘] Talljakt.").
- 전화기 색상: 코즈믹 오렌지, 딥 블루 또는 실버. 앱의 강조 색상과 일치하는 것을 선택하세요.
답변은 주로 컨셉, 화면 밖으로 나오는 정도, 템포(BPM) 및 색상을 결정합니다.
0a. 사전 점검: 도구 체인 확인
제작을 시작하기 전에 설치된 것을 확인하고 짧은 목록으로 보고하세요. 누락된 항목이 있으면 설치를 제안하고 사용자가 동의한 후에만 설치하세요(시스템 변경 사항임). 이미 있는 항목은 건너뛰세요.
| 도구 | 확인 | 설치 방법 |
|---|---|---|
| Xcode + 커맨드 라인 도구 | xcodebuild -version, xcode-select -p | App Store(Xcode), 그 다음 xcode-select --install |
| iPhone 17 Pro 기기 유형이 있는 iOS 시뮬레이터 런타임 | xcrun simctl list runtimes, `xcrun simctl list devicetypes | grep "iPhone 17 Pro"` |
| baguette | baguette --version | brew install baguette |
| Blender | ls /Applications/Blender.app | brew install --cask blender |
| Node 22 | node --version | nvm install 22 (또는 brew install node@22) |
| ffmpeg | ffmpeg -version | brew install ffmpeg |
| Python 3 + Pillow | python3 -c "import PIL" | python3 -m pip install --user pillow |
| Homebrew (위 항목 설치용) | brew --version | brew.sh의 공식 설치 스크립트를 사용자가 직접 실행 |
그런 다음 Remotion 프로젝트를 설정하고(references/techniques.md#setup) iPhone 모델을 한 번 변환하세요(아래 6단계). 둘 다 프로젝트 로컬 작업이며 리포지토리 작업 외에 추가 권한이 필요하지 않습니다.
0b. 전달 폴더 (Mac당 한 번)
완성된 비디오는 프로젝트의 out/ 폴더뿐만 아니라 기기의 고정 폴더에 전달됩니다. 선택 사항은 Mac당 ~/.config/app-promo/destination에 저장됩니다(한 줄, 전체 경로).
- 시작 시 파일을 읽습니다. 존재하면 폴더를 묻지 않고 사용합니다.
- 파일이 없으면 한 번 묻습니다(AskUserQuestion):
~/Movies/App Promos(권장), 프로젝트의out/폴더, 데스크탑 또는 사용자 지정 경로. 폴더를 만들고~/.config/app-promo/destination에 경로를 씁니다. - 사용자는 언제든지 변경을 요청할 수 있습니다; 파일을 업데이트하세요.
1. 워크플로우
- 앱을 읽습니다. README, 색상 토큰(
Color(,hex, 테마 구조체 검색), 글꼴, 카피. 앱의 자체 카피가 좋으면 비디오에서 사용합니다. - 디버그 진입점을 찾습니다. 플레이하지 않고 상태를 보여주기 위해: 실행 인수(
--design-*), URL 스킴(myapp://design-home?state=…) 또는 픽스처. 없으면 앱에 DEBUG 전용 훅을 추가하기 전에 물어보세요. - 전용 iPhone 17 Pro 시뮬레이터에 빌드 및 설치합니다. 스크린샷은 1206×2622여야 하며, 그렇지 않으면 전화기 모델의 화면과 일치하지 않습니다.
references/techniques.md#simulator를 참조하세요. 3b. 실제 화면 녹화의 경우: references/recording.md를 읽으세요. 먼저 장면과 탭 지점을 준비하고, 녹화 중에는 UI 검사, 빌드 또는 비디오 분석 없이 짧은 테이크를 녹화하며, Remotion 전에 원시 타이밍을 확인하세요. 전체 흐름의 단일 연속 테이크(examples/quiz에서처럼)는 모든 숫자, 진행률 표시줄 및 기록 항목을 일관되게 유지합니다. - 각 상태의 스크린샷을 찍습니다. 스틸/잘라내기 시퀀스의 경우 실제 탭으로 재생하고 각 탭 후에 스크린샷을 찍습니다(
references/consistency.md참조). 비디오의 경우 별도의 리허설에서 검사를 수행하고 최종 테이크 중에는 절대 수행하지 마세요. 상태 표시줄을 잠급니다(9:41, 100%, 방전 중 또는 녹색 충전 표시기 표시).baguette describe-ui로 요소 프레임을 가져옵니다. - UI 요소를 잘라냅니다.
templates/tools/prep_helpers.py를 사용하는 앱별tools/prep_<app>.py를 사용합니다: 스프라이트, 빈 배경 및 직사각형 JSON. 각 세트를 시각적으로 확인합니다(마젠타색 위에 합성). - iPhone 모델을 변환합니다. baguette(USDZ)에서 Blender(
templates/tools/convert_model.py)를 사용하여 GLB로 변환합니다. - Remotion 프로젝트를 설정하거나 재사용합니다:
templates/src/three/*,Title.tsx,brand.ts,remotion.config.ts,tools/sheet.sh및tools/prep_helpers.py를 복사합니다. - 비트 시트(
timeline.json)를 프레임 단위로 BPM 그리드에 작성합니다(120 BPM, 60fps = 비트당 30프레임). 그림과 사운드 모두 이 파일을 읽습니다. - 장면을 연속적인 "원테이크"로 구축합니다: 카메라는 고정되어 있고 전화기 리그가 움직입니다. 화면 변경은 전환(회전, 앱 자체 탐색, 요소에서 줌 또는 와이프, 푸시, 플립, 채찍 팬, 매치 컷 또는 빨리 감기)으로 숨겨집니다. 다양하게 사용하며 비디오당 최대 2번의 회전을 넘지 마세요.
references/techniques.md#transitions를 참조하세요. - 연락처 시트(
tools/sheet.sh f1 f2 …)로 키 프레임을 반복합니다. 살펴보세요. 전체 비디오를 렌더링합니다(빠름: 30초에 약 1–2분). - 체크포인트: 나머지를 만들기 전에 사용자에게 처음 약 12초를 보여줍니다.
- 사운드트랙을 생성합니다(
tools/<app>_audio.mjs, 예제에서 복사) 동일한 타임라인에서. 렌더링하고, 음량을 측정하며(ffmpeg -af ebur128, −14 ~ −16 LUFS 목표), 사용자를 위해 파일을 엽니다.
12b. 일관성 검사 (전달 전 필수). 전화기 화면에 있는 것과 화면 밖에서 강조 표시된 것 사이의 불일치는 AI 인공물처럼 보입니다. references/consistency.md를 살펴보고 모든 전환, 화면 변경 및 리프트 주변 ±2 프레임의 연락처 시트를 렌더링합니다.
13. 공유 텍스트: 비디오가 공유되는 곳에 붙여넣을 짧은 텍스트를 작성합니다(아래 형식). 클립보드에 복사(pbcopy)하고 답변에 코드 블록으로 표시합니다. 파일로 저장하지 마세요.
14. 전달: 최신 승인된 렌더링을 전달 폴더(0b)에 <App> promo.mp4로 복사합니다. 동일한 앱의 이전 전달을 덮어씁니다. 버전 기록(-v2, -v3 …)은 out/에 남아 있습니다. 답변에 전달된 파일의 경로를 제공합니다.
공유 텍스트 형식
텍스트는 일반적으로 Slack에 게시되므로 Slack 형식(mrkdwn)을 사용하세요: 단일 별표로 굵은 제목과 "• "로 글머리 기호(붙여넣은 "- "는 목록이 되지 않음). 비디오 언어로 작성하세요.
*<App> – <2–4개의 짧은 문장/단어로 된 태그라인, 이상적으로는 비디오에 있는 것>.*
<한 문장: 앱이 무엇인지, 누구/무엇을 위한 것인지.>
• <포인트: 핵심 동작, 구체적이고 능동적으로>
• <포인트: 앱이 제공하는 선택지(주제, 모드, 영역, 속도 …)>
• <포인트: …>
• <포인트: 보상/공유/특별하게 만드는 요소>
규칙: 4–5개 포인트, 포인트 끝에 마침표 없음, 독자에게 직접 말하기, 구체적인 동사, 마케팅 클리셰 없음. 앱이 실제로 어떻게 사용되는지로 시작하세요: 처음 2–3개 포인트는 옵션 및 추가 사항 전에 구체적으로 메커니즘을 설명합니다. 그런 다음 비디오가 보여주는 것뿐만 아니라 앱이 무엇을 할 수 있게 하는지 설명하세요: 포인트당 옵션을 그룹화하여("국가, 수도 또는 국기 연습") 독자가 범위를 볼 수 있도록 합니다. 앱 자체 이름을 사용하고 각 모드가 실제로 무엇을 하는지 코드에서 확인하세요(README는 오래될 수 있음). examples/*/share.txt를 참조하세요.
2. 효과가 있었던 컨셉 템플릿
하나의 히어로, 모든 것을 하나로 묶는 하나의 모션, 앱 자체의 카피:
| 파트 | Unblock | 일반 |
|---|---|---|
| 훅 0–2.5초 | 타일이 어둠 속에 떠 있는 보드 위로 떨어짐, 전화기 없음. "막혔음." | 앱이 해결하는 문제를 앱 자체 요소로 보여줌, 전화기 없이 |
| 드러내기 | 카메라가 뒤로 물러나면서 전화기가 보드 주위를 구성함 | 동일한 요소가 앱 내부에 있는 것으로 밝혀짐 |
| 핵심 루프 | 박자에 맞춘 4번의 이동, 화면 밖 카운터 | 3–4박자 안의 주요 동작 |
| 히어로 순간 | 히어로가 화면 밖으로 나와 카메라를 향해 날아감, 황동 섬광 | 하나의 큰 순간(화면 밖 효과, 또는 앱 자체 최고의 애니메이션을 슬로우 모션으로) |
| 결과 | 결과 화면, 3D 별이 튀어나옴 | 보상 또는 결과 |
| 기능 (다양한 전환으로 연결) | 레벨 선택기, 일일 카드, 점수 | 2–3개의 기능, 각각 하나의 강조 요소 |
| 아웃트로 | 3D 타일로 만든 로고, 태그라인 | 앱 요소로 만든 로고 잠금, 또는 슬로건 + 이름이 있는 홈 화면 |
앱에 진정으로 훌륭한 자체 애니메이션이 하나 있다면(Quiz: "답 표시" 버튼이 오답/정답으로 찢어짐), 그것을 히어로로 만드세요: 가까이 확대하고, 속도 램프로 느리게 하고, 고유한 사운드를 제공하고, 캡션을 달지 마세요.
2b. 좋은 앱 프로모의 시각적 장치
좋은 레퍼런스는 레이아웃뿐만 아니라 화면과 콘텐츠를 사용합니다. 비디오당 최소 3–4개를 계획하세요:
- 화면 자르기: 한 부분만 보일 정도로 가까이 가십시오(타이머, 버튼 행, 방정식). 전화기가 프레임 가장자리로 잘립니다.
focus포즈를 사용하세요. - 전화기 옆 또는 앞의 콘텐츠 카드: 앱의 실제 카드나 포스터(공유 카드, 결과 카드, 제안)를 전화기 뒤나 앞에 약간 회전된 평면으로 배치합니다.
- 여러 콘텐츠 카드를 한 번에: 3–5개의 변형(페이지, 솔루션, 포스터)을 부채꼴로 펼칩니다.
- 여러 기기: 공유 또는 "모두를 위한 동일" 스토리일 때 두 대의 전화기를 나란히 배치하고 위에 이름 칩을 놓습니다. 앱이 지원하는 경우 전화기 + Watch/iPad(baguette에는 iPad 및 Watch 모델이 있음).
- 장식으로서의 앱 요소: 실제 타일, 버튼, 칩 또는 아이콘이 배경에 떠다니거나(흐리게 = 멀리), 전화기 위의 타이포그래피로 확대됩니다. 하나의 테마 모티프(펄스 라인, 크레용 선, 모눈 종이).
- 앱이 만드는 것을 객체로: 인쇄물, 포스터, 카드, 이상적으로는 전화기 없이.
- 전화기 외부에서 발생하는 일에 대한 말풍선 또는 생각 풍선(Quiz: 말로 한 답변이 카드 옆에 튀어나온 다음 Right/Wrong 버튼 위로 떨어져 "누름").
2c. 텍스트 및 프레이밍
- 상단의 큰 중앙 제목이 메시지를 전달합니다: 줄당 2–4단어, 최대 두 줄, 두 번째 줄 또는 키워드는 강조 색상으로.
- 하단의 작은 캡션은 드물게 제목을 명확히 해야 할 때만 사용합니다(30초 비디오에서 2–3회). 읽을 수 있어야 합니다: 최소 약 50px, 밝은 배경과 그림자가 있는 칩 안에(느슨한 텍스트가 아님), 전화기 프레임과 절대 겹치지 않도록 낮게 배치, 최소 2초 동안 표시.
- 앱이 실제로 하는 것만 주장하세요. 기능에 대해 쓰기 전에 실제로 무엇인지 확인하세요.
- 전체 화면 텍스트 카드가 지원됩니다: 색상이 있는 표면(앱의 기본 색상)에 큰 중앙 두 줄 제목이 있으며, 마지막으로 포커스된 요소에서 안으로 와이프인되고 다음 장면으로 미끄러져 나갑니다. 엔딩 전에 숨고르기 또는 다리 역할로 사용하며, 이상적으로는 시청자에게 도전하는 질문("제시간에 찾을 수 있나요?")입니다. 강렬한 액션에서 엔딩 화면으로 바로 점프하지 마세요.
examples/talljakt및examples/quiz의QuestionCard를 참조하세요. - 고정된 앱 아이콘과 이름을 모서리에 넣지 마세요. 이름은 로고에서 또는 슬로건의 마지막 줄로만 끝에 표시하세요.
- 프레임을 깔끔하게 유지하세요: 장면당 하나의 아이디어. 기능이 보여줄 것이 거의 없으면(설정), 자체 장면을 할당하기보다 다른 장면에서 캡션이나 짧은 포커스로 작업하세요. 제목 + 확대된 전화기 + 요소 행 + 캡션을 동시에 피하세요.
- 템포: 죽은 시간 없음. 모든 장면은 시작 후 약 1초 이내에 이벤트가 있으며, 정적 화면 위에 1.5초 이상 제목이 머물지 않습니다. 반복되는 단계(퀴즈의 2–13번 질문)는 빨리 감기할 수 있습니다.
- 선택지를 텍스트가 아닌 행동으로 보여주세요. 앱에 모드나 설정이 있으면 기본값이 선택되는 것(카드가 약간 올라감), 대안을 탭하는 것(올라가고 화면 상태가 변경됨), 시작을 탭하여 해당 모드로 들어가는 것을 보여주세요.
- 그렇지 않으면 불분명할 상호 작용(메뉴 열기, 옵션 선택)은 앱이 실제로 응답하는 것에 탭 표시기(원이 눌렀다가 퍼져 나감)를 받습니다.
3. 원칙
- 실제 UI는 재현된 UI보다 낫습니다. 앱의 HTML 복사본이 아닌 스크린샷, 녹화 및 잘라내기를 사용하세요. 변경되어야 하는 텍스트(카운터, 점수)는 PIL로 앱의 글꼴로 그리고 원본과 비교 확인합니다.
- "화면 밖"은 적당히 사용하세요. 그것은 양념입니다. 기본값은 하나의 히어로 순간과 1–2개의 리프트된 기능입니다.
- 줌과 포커스가 강조의 주요 도구입니다. 카메라를 화면의 해당 부분으로 이동시키세요.
[…] (원본이 잘렸으므로 번역도 여기까지 진행합니다)