Remotion으로 제품 비디오 만들기
얼굴 없는 제품 데모(short-video-formats의 형식 3)를 코드로 구축합니다. 음성이 타이밍을 결정합니다. 각 스크립트 라인이 음성으로 변환되고, 테이크가 차례로 이어지며, 비디오의 장면과 자막이 해당 타임스탬프를 따릅니다. UI는 제품 자체 스타일에서 React로 재구축되므로 모든 줌에서 선명하며 제품이나 스크립트가 변경될 때 다시 렌더링됩니다. 렌더링된 MP4를 제외한 모든 것이 Git에 저장되므로 이전 버전은 체크아웃하고 렌더링하기만 하면 됩니다.
입력: Node 22, ffmpeg, TTS(초안에는 edge-tts, 게시 전에는 라이선스가 있는 음성), 제품의 CSS 토큰과 마크업(랜딩 페이지의 제품 데모가 가장 좋은 소스), 그리고 스크립트.
워크플로
1. 설정
npx create-video@latest --blank reel && cd reel && npm i @remotion/google-fonts
프레임(1080×1920, 30fps), 레이아웃 밴드, 제품의 CSS에서 복사한 컬러 토큰을 포함하는 theme.ts 하나를 유지합니다. 밴드: y=118에 중앙 정렬된 제목 스트립, y=220부터 1250px(높이의 65%, 전체 너비)인 흰색 UI 밴드, y=1640에 중앙 정렬된 자막.
2. 스크립트를 데이터로 작성
script.json, 자막 줄당 하나의 항목; *별표*는 강조된 단어를 표시합니다:
{