제품 데모 비디오
이 문서는 Claude 플러그인의 Codex-스킬 포트입니다. 슬래시 명령어가 없으므로 Codex가 워크플로를 명시적으로 진행하고 assets/remotion-template/에 번들된 Remotion 템플릿을 사용해야 합니다.
템플릿 설정
- 대상 워크스페이스에 Remotion 프로젝트가 아직 없으면
assets/remotion-template/을demo-video/같은 작업 디렉터리로 복사합니다. - 해당 디렉터리에서
npm install을 실행합니다. - 템플릿에는 장면 컴포넌트, 진입점, 내레이션 스크립트, 시작용
src/storyboard.ts가 포함되어 있습니다.
워크플로
- 대상 프로젝트의 README, 문서, 매니페스트, 소스 트리 및 기존 스크린샷을 탐색합니다.
- 강조할 기능, 선호하는 길이, 톤, 브랜드 색상, 특정 스크린샷 사용 여부를 질문합니다.
references/scene-catalog.md를 사용하여 스토리보드를 초안 작성합니다.- 사용자가 명시적으로 체크포인트 건너뛰기를 요청하지 않는 한 승인을 위해 스토리보드를 표시합니다.
src/storyboard.ts를 작성하거나 업데이트합니다.- 작은 헬퍼 스크립트에서 장면당 한 번씩
scripts/generate-narration.sh를 호출하여 내레이션 MP3를public/narration/에 생성합니다. ffprobe를 사용할 수 있으면 각 MP3를 측정하고durationInSeconds를 오디오 길이에 약 0.8초를 더한 값으로 설정합니다.npx remotion studio로 미리보기하고npx remotion render DemoVideo output/demo.mp4로 렌더링합니다.
스토리보드 규칙
- 항상
intro로 시작하고outro로 끝냅니다. - 대부분의 장면은 약 8초에서 12초 정도로 유지합니다.
workflow,comparison또는 동적인feature와 같이 명확히 애니메이션된 장면을 최소 하나 포함합니다.- 대상 프로젝트의 실제 코드와 구체적인 제품 세부 정보를 사용합니다.
- 내레이션은 구어체로 유지하며 분당 약 120~150단어 속도로 작성합니다.
참고 사항
- 번들된 TTS 스크립트는 macOS
say, OpenAI TTS, ElevenLabs를 지원합니다. - 사용자가 이미 Remotion 프로젝트를 가지고 있는 경우 전체 템플릿 대신 필요한 컴포넌트,
src/storyboard.ts또는 내레이션 스크립트만 복사하세요.