제품 런칭 비디오
모션 그래픽이 내러티브를 이끌고 모든 '제품' 픽셀이 실제 앱에서 렌더링된 약 40초 분량의 영상을 제작합니다.
이 스킬은 사람들이 계속 빠지는 잘못된 선택 때문에 탄생했습니다:
- 순수 모션 그래픽 영상은 전문적으로 보이지만 증명하는 것이 없습니다 - 실제 제품이 없습니다.
- 원시 화면 녹화는 모든 것을 증명하지만 아마추어처럼 보입니다 - 모션 디자인이 없습니다.
정답은 둘 다 아닙니다: Remotion이 마스터 타임라인이 되고, 제품 샷은 헤드리스 브라우저에서 실제 앱을 구동하여 캡처한 실제 프레임입니다.
제품 옆에 작은 Remotion 프로젝트를 구축하세요: 공유 캡처 툴킷 + 프리미티브, 앱의 영화마다 하나의 디렉토리 (브랜드, 샷, 캡처 스크립트, 타임라인). 권장 레이아웃은 references/toolkit.md를 참조하세요.
필수 조건
코드를 작성하기 전에 이것들을 읽으십시오. 각각은 실제 디버깅 시간을 소모했으며, 모든 것이 조용히 실패합니다 - 그럴듯해 보이지만 잘못된 출력을 얻습니다.
캡처
| 함정 | 결과 | 해결책 |
|---|---|---|
setViewport({deviceScaleFactor: 2}) | page.screencast()가 시스템 DPR에서 ffmpeg 필터 체인을 측정하므로 1배 체인을 구축하고 레티나 디테일을 버립니다. 오류 없음. | 브라우저에서 강제: --force-device-scale-factor=2 + 뷰포트에서 deviceScaleFactor: 0 (0 = "시스템 기본값"). |
| 헤드리스는 커서를 렌더링하지 않음 | page.mouse.move()가 페이지가 보는 CDP 이벤트를 전달하지만, 아무것도 그려지지 않습니다. | evaluateOnNewDocument를 통해 DOM 커서를 삽입하세요. Remotion에서 합성하지 말고 페이지 안에 넣으세요 - 그러면 모든 Remotion 변환(프레임 삽입, 줌 펀치)이 실제 녹화처럼 정확하게 크기를 조정합니다. 스프라이트는 모든 변환을 반전해야 하며, 6px의 오차는 고장으로 읽힙니다. |
| 헤드리스에는 GPU가 없음 | WebGL/three.js 콘텐츠가 빈 화면이나 검은 패널로 녹화됩니다. | --use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader. "컨텍스트가 존재했는지" 여부가 아니라 픽셀 읽기로 확인하세요. |
| SwiftShader도 페이지를 합성함 | 2560x1440을 합성하는 소프트웨어 GL 드라이버는 전체 탭을 ~8fps로 제한하므로 모든 애니메이션 샷이 슬라이드쇼로 녹화됩니다. 느린 제품처럼 읽히므로 아무도 플래그를 의심하지 않습니다. | --disable-gpu-compositing을 추가하세요. Skia의 CPU 래스터라이저는 일반 2D에서 훨씬 빠르며, WebGL은 여전히 작동하고, A/B 스틸은 동일합니다. 동일한 페이지에서 측정: 8.2fps → 60.1fps. |
| 부드러움을 눈으로 판단 | 중복 프레임은 연락처 시트에서 괜찮아 보이고 한 번에 한 프레임씩 스크러빙해도 괜찮아 보입니다. 재생할 때만 드러나며, 그때는 이미 렌더링된 상태입니다. | 고유한 프레임 수 계산: ffmpeg -i take.mp4 -vf mpdecimate,showinfo -f null - 2>&1 | grep -c pts_time. 파일의 프레임 수보다 현저히 낮으면 끊김 현상을 의미합니다. |
page.mouse.click(x, y, {clickCount: 2}) | clickCount 메타데이터를 전달하는 하나의 누름을 보냅니다. Chrome은 dblclick을 합성하지 않습니다. 60ms 간격의 두 개별 클릭도 마찬가지입니다. | 앱이 실제 dblclick을 필요로 하는 경우, 보이는 커서 움직임을 위해 클릭한 다음 요소 자체의 자체 좌표에서 프레임 내부로 이벤트를 전달하세요. |
iframe 내부를 클릭한 후 page.keyboard.type() | 키는 부모 페이지가 포커스한 곳으로 전달됩니다. 부모가 키를 앱(화살표 키 탐색, 단축키)으로 전달하면, 입력이 UI를 구동하여 텍스트를 입력하는 대신 조용히 제어합니다. | 프레임에 입력: frame.type(selector, text). |
DOM 작업을 수행하는 evaluateOnNewDocument | document.head 와 document.documentElement가 모두 null일 수 있는 문서 시작 시 실행됩니다. 보호되지 않은 appendChild는 예외를 발생시키고 해당 스크립트 이후의 모든 것을 조용히 중단시킵니다. | 보호하고 DOMContentLoaded로 연기하세요. |
| 탐색 녹화 | 유용한 초를 파일 깊숙이 묻고 중간본을 부풀립니다. | 각 샷을 setup (녹화 안 함)과 action (녹화)으로 분할하세요. |
| 마커 타임스탬프 신뢰 | 스크린캐스트는 가변 프레임 속도입니다. 인코딩된 타임라인은 벽시계에 비해 압축되므로 22초의 마커가 파일에서 22초에 있지 않습니다. | 마커를 사용하여 대략적인 위치를 찾은 다음, 프레임을 추출하고 확인하여 startAt을 선택하세요. |
| 원격/핫링크된 자산 | 타사 CDN이 캡처 브라우저를 간헐적으로 거부합니다. 이미지 그리드가 빈 투명 체커보드로 그려지며, 이는 고장난 제품으로 읽힙니다. | 이미지를 기다렸다가 경고하고, 샷을 프레임하여 피하세요. 빈 아트웍이 있는 테이크를 배송하지 마십시오. |
앱 셸에서 window.scrollTo | 많은 셸이 내부 요소(<main class="overflow-y-auto">)를 스크롤하고 창이 아닙니다. 창을 스크롤하는 것은 조용한 무효 동작이며 샷이 절대 움직이지 않습니다. | 실제 스크롤러를 찾고 scrollTop을 설정하세요. |
| 클릭 좌표 추측 | 앱은 종종 특정 노드에서만 상호 작용을 허용합니다. 예를 들어, 리프 요소(childElementCount === 0)만 허용하는 인라인 편집기가 제목의 텍스트를 범위로 감싸는 경우. 시각적으로 명백한 대상을 클릭해도 아무 일도 일어나지 않습니다. | 앱 자체 소스에서 규칙을 읽은 다음, 페이지에 유효한 대상이 어디인지 물어보고(frame.evaluate) iframe의 측정된 상자를 통해 프레임 좌표 → 페이지 좌표를 매핑하세요. |
렌더링
| 함정 | 결과 | 해결책 |
|---|---|---|
| 중간본 트랜스코딩 건너뛰기 | Remotion이 임의로 검색합니다. 일반 GOP를 사용하면 모든 검색이 이전 I-프레임에서 디코딩됩니다. 3분 렌더링이 40분이 됩니다. | 올-인트라로 트랜스코딩: -c:v libx264 -crf 14 -g 1 -keyint_min 1 -sc_threshold 0 -pix_fmt yuv420p. Chrome이 브랜드 색상을 변경하지 않도록 명시적 bt709 태그도 추가하세요. |
page.screencast({format:'mp4'}) | 조각난 MP4 내부에 VP9을 방출합니다 - 지원이 좋지 않습니다. | format: 'webm'을 사용한 다음 트랜스코딩하세요. |
비트 그리드가 있는 <TransitionSeries> | 전환은 겹치므로 총 지속 시간 = 시퀀스 합계 - 전환 합계입니다. 프레임 그리드가 조용히 어긋납니다. | 프레임 정확한 컷에는 명시적 <Sequence from/durationInFrames>를 사용하고 디졸브를 로컬에서 수행하세요. 체인이 총계와 합산되는지 확인하세요. |
소스보다 긴 <Sequence> | 마지막 디코딩된 프레임에서 멈춥니다 - 오류가 아닌 정지로 읽힙니다. | 모든 지속 시간을 실제 테이크 길이로 제한하세요. 주석에 소스 지속 시간을 기록하세요. |
겹치는 시퀀스에 대한 premountFor | 사전 마운트된 시퀀스가 현재 시퀀스 위에 일찍 렌더링됩니다 - 유령처럼 이중 노출된 텍스트가 나타납니다. | 화면 공간을 공유하는 시퀀스를 사전 마운트하지 마십시오. 하드 컷에서만 사전 마운트하세요. |
| 컴포지션 공간에 배치된 오버레이 | 푸티지 구성 요소가 내부적으로 플레이트를 자르고 크기를 조정하면 컴포지션 좌표에 배치된 마스크나 하이라이트가 프레임의 어떤 것과도 일치하지 않습니다. 가장자리가 콘텐츠를 통과합니다. | 플레이트와 동일한 변환 내부에 오버레이를 배치하거나 푸티지 위에 처리하는 대신 기본적으로 처리를 수행하세요. |
컴포지션에서 Math.random() / Date.now() | 매 프레임마다 다시 굴립니다. 텍스트가 깜박입니다. Remotion은 각 프레임을 독립적으로 렌더링합니다. | 모든 무작위성을 인덱스의 순수 함수(sin 기반 해시)로 만드세요. |
Remotion 내부의 CSS 애니메이션 / 전환 / Tailwind animate-* | 렌더링이 중단되거나 쓰레기 출력 - Remotion은 벽시계가 아닌 useCurrentFrame()을 통해 시간을 구동합니다. | useCurrentFrame()에서 모션을 다시 빌드하세요. 이는 일반적으로 마케팅 사이트의 애니메이션 구성 요소를 재사용할 수 없음을 의미합니다. |
| 필름으로 오프셋하여 루프 만들기 | 두 가지 이음새 버그: 범위가 디졸브에서 열리면 검은색 섬광, 그리고 루프가 감길 때 하드 점프 컷. | 루프에 자체 컴포지션을 제공하고 꼬리를 자체 헤드의 <Freeze frame={0}>으로 크로스페이드하세요. 지속적으로 움직이는 샷을 선택하세요. 머무르는 것은 거의 정적이며 자동 재생에 좋지 않습니다. |
프로세스
1. 영화를 디자인하기 전에 제품의 진실을 확립하세요
가장 중요한 단계. 영화가 보여주려는 모든 기능에 대한 코드를 읽으십시오. 마케팅 페이지는 열망을 설명합니다. 제품이 자체 랜딩 페이지 애니메이션이 암시하는 대로 작동한다고 가정하지 마십시오.
이미 한 번 일어난 일이 있습니다: 영화의 계획된 중심 장면이 마케팅 사이트의 애니메이션 구성 요소에서 가져온 것으로, 하나의 문서가 네 가지 다른 종횡비를 통해 변형되는 모습을 보여주었습니다. 그런데 제품은 단일 종횡비와 고정된 내보내기 단계를 하드코딩하고 있었습니다. 구성 요소는 기능이 아니라 아이디어의 일러스트레이션이었습니다. 그 구성 요소에 핵심 장면을 구축했다면 지원되지 않는 주장을 홈페이지에 올리는 결과를 낳았을 것입니다.
특히 다음을 확인하세요:
- 어떤 콘텐츠가 실제로 렌더링됩니까? 오래된 레코드는 현재 엔진으로 렌더링할 수 없을 수 있습니다.
- 어떤 경로에 인증이 필요합니까? 어떤 경로가 이전 상태 없이 리디렉션됩니까?
- 각 대화형 기능이 실제로 참여하려면 무엇이 필요합니까?
2. 가능한 가장 작은 테스트로 파이프라인 위험을 제거하세요
그 위에 아무것도 구축하기 전에 다음 순서로 수행하세요:
- 캡처 지오메트리를 증명하세요 (모서리가 표시된 페이지 → 파일이 정말 2배인가?)
- 인증을 증명하세요 (브라우저가 로그인된 경로에 도달할 수 있는가?)
- 3D가 관련된 경우 WebGL을 증명하세요.
- 하나의 상호 작용을 처음부터 끝까지 증명하세요.
3. 추측하지 말고 정찰하세요
모든 후보 표면을 스크린샷으로 찍고 비디오 테이크에 시간을 쓰기 전에 사용자에게 연락처 시트를 보여주세요. 콘텐츠 선택이 프로덕션 가치를 지배합니다: 평범한 데모 콘텐츠는 아름다운 영화를 평범한 제품에 대한 광고로 만듭니다.
4. 데모 콘텐츠를 신중하게 선택하세요
제품 자체 브랜드를 선호하세요. 인식 가능한 타사를 사용하는 것이 더 설득력 있지만 다른 사람의 상표를 홈페이지에 올리는 것이며, 하나의 타사를 다른 타사로 바꾼다고 해서 문제가 해결되지는 않습니다. 자기 참조 콘텐츠는 또한 순환을 닫습니다: 도구를 판매하는 인공물이 도구 자체로 만들어졌습니다.
콘텐츠가 아직 존재하지 않는 경우, 콘텐츠를 만드는 것은 캡처 작업이 아니라 디자인 작업입니다 - 영화 후반부의 모든 프레임입니다. 의도적으로 초안을 작성하고, 몇 가지 후보를 생성한 후 사용자가 선택하도록 하세요.
5. 그리드에 맞춰 컷하세요
120 BPM ⇒ 1마디 = 60프레임 = 30fps에서 2초. 모든 컷을 30의 배수에, 모든 액트 경계를 60에 맞추세요. 비용이 들지 않으며, 컷다운이 자동으로 제공됩니다.
6. 확인하려면 직접 보세요
모든 렌더링 후 프레임을 추출하고 실제로 살펴보세요. 레이블이 지정된 연락처 시트를 만드세요. 지금까지 발견된 모든 실제 결함 - 빈 로고, 잘못된 페이지를 보여주는 샷, 밝은 패널에서 읽을 수 없는 캡션, 잘못 측정된 자르기에서 어두운 띠, 레이블을 통과하는 마스크 이음새 - 는 어떤 테스트를 통과해서가 아니라 프레임을 보고 발견되었습니다.
음소거로 시청하세요. 자동 재생되는 방식이기 때문입니다.
편집 규칙
이것들은 괜찮은 영화를 좋은 영화로 만드는 요소입니다.
화면의 모든 주장은 옆에 있는 영상으로 뒷받침되어야 합니다. 한 컷에서 "링크 공유"라는 문구가 공유를 보여주는 영상 없이 사용되었습니다. 보여주거나 카드에 명확하게 진술하세요 - 암시하지 마세요.
컨텍스트에서는 정직하지만 비디오 규모에서는 그렇지 않은 주장을 주의하세요. 작은 글씨로 "설명용"이라고 표시된 그림은 마케팅 영화에서 고정된 히어로 프레임이 되는 순간 강력한 주장이 됩니다. 고정 프레임에서 이러한 것들을 유지하지 마세요.
제품의 모션을 인용하고 재창조하지 마세요. 앱 자체의 이징 곡선과 등장 용어를 가져오세요. 들어오거나 착륙하는 모든 것에 하나의 곡선을 사용하세요. 튀는 것은 없습니다. 오버슈트는 망설임으로 읽힙니다.
두 가지 바탕, 중간 회색은 절대 안 됩니다. 진술에는 어두운 바탕, 설명에는 밝은 바탕을 사용하세요. 제품 자체 토큰에서 선택하세요.
하나의 포인트 색상을 아껴서 사용하세요 - 캐럿, 문장을 이끄는 한 단어, 상태 변화. 장식용이 아닙니다.
프레임 안에 관객을 위한 것이 아닌 것은 두지 마세요. 실제 이메일 주소, 조직 이름, 운영자의 인앱 어시스턴트와의 대화, 개발자 모드 배지. CSS 해킹보다 앱 자체 메커니즘(접힌 사이드바나 해제된 배너를 위한 쿠키)을 선호하세요. 카메라에 깜박임이 없어야 합니다.
"핵심 장면"은 가장 많은 시간을 받을 자격이 있습니다. 경쟁사가 구조적으로 할 수 없는 것을 보여주는 단 한 순간을 선택하세요. 그런 다음: 카메라를 고정하고, 컷 없이, 텍스트 없이, 음악이 사라지게 하세요. 정지는 눈에 주제가 움직이고 있음을 알려줍니다. 설명하는 문장은 그 후에 배치하세요. 반응 전 텍스트는 사람들에게 무엇을 생각해야 하는지 알려줍니다.
가독성이 커버리지보다 우선합니다. 네 개의 화면에 걸쳐 퍼진 샷은 그중 어느 것도 읽을 수 없게 만들 수 있습니다. 하나에 머무르는 것이 일반적으로 더 좋습니다.
UI가 수행할 수 없을 때는 필름을 찍지 말고 비트를 빌드하세요. 정적 화면은 한 번에 세 가지를 소개할 수 없습니다. 제품이 제공하지 않는 순서 지정이 필요한 경우, Remotion에서 제품의 실제 카피와 토큰을 사용하여 기본적으로 구성하세요. 가짜 스크린샷이 아닌 설명자로 읽힐 수 있도록 영상과 시각적으로 구별되게 유지하세요.
내레이션이 없으면 카드가 100% 의미를 전달합니다. 읽는 시간을 고려하세요.
사용자와 논의하고 혼자 결정하지 마세요
- 슬로건과 화면상의 카피. 각도별로 그룹화된 여러 옵션을 권장 사항과 이유와 함께 제공하세요. 영화는 데모 큐를 원하는 반면 웹사이트 헤드라인은 지속 가능한 포지셔닝 문구를 원한다는 점에 유의하세요. 같은 줄일 필요는 없습니다.
- 어떤 콘텐츠를 특징으로 할지 - 연락처 시트를 보여주세요.
- 음악. 트랙을 라이선스할 수 없습니다. 무음으로 작동하도록 영화를 디자인하고 큐 시트(BPM, 드롭 위치)를 제공하여 나중에 제공된 트랙이 그리드에 떨어질 수 있도록 하세요. 트랙이 도착하면 배치하기 전에 모양을 확인하세요: 인트로나 정렬할 드롭이 있다고 가정하지 말고 시간에 따른 음량을 측정하세요.
- Remotion 라이선스. 개인, 비영리 단체 및 직원 3인 이하의 회사는 무료입니다. 그 이상은 상업 라이선스가 필요합니다. 배송 전에 표시하세요.
명령어 (형태)
캡처는 서버를 시작하지 않으며 포트를 추측하지 않습니다. 인증 URL은 일반적으로 고정되어 있습니다.
# 터미널 1 — 제품이 이미 서빙 중
pnpm --filter <app> dev # 또는 이에 상응하는 명령
# 터미널 2 — 영화 프로젝트
pnpm install
pnpm check-webgl # 3D가 있는 경우
pnpm capture:<app> # 또는 하나의 샷: pnpm capture:<app> <shot>
pnpm mezzanine:<app> # 필수 — 함정 참조
pnpm studio
pnpm render:<app> # 필요에 따라 mp4 / webm / loop / poster
로그인된 표면에 대한 인증: 임시 사용자를 등록하는 것보다 활성 세션 쿠키를 빌려 사용하는 것을 선호하세요 (빈 계정은 모든 촬영 전에 느린 콘텐츠 생성을 강제합니다).
페이지에 배송하기
두 가지 형태가 있으며 사용자가 결정합니다:
- 짧은 루프, 클릭하면 영화가 재생됩니다. 가장 가벼움 - 수백 KB가 자동 재생되고 전체 영화는 요청 시에만 페치됩니다.
...
[번역을 위해 잘림]