웹 데모 비디오은(는) 무엇을 하나요?
작동 중인 웹 앱을 20~60초 MP4로 변환합니다. 화면은 항상 실제 앱이며, 자막, 커서, 효과는 위에 겹쳐진 레이어입니다. 가짜 데이터만 사용하세요.
툴킷: 이 파일 옆에 있는 starter/ 디렉토리입니다. 사용자 프로젝트(예: video/)에 복사하고, 그곳에서 npm install을 실행한 후, scene 스크립트를 작성합니다. 저장소에 작업 예제가 있습니다: examples/sample-tasks/.
1. 먼저 스타일을 선택하세요
| 영상이... | 스타일 | 이유 |
|---|---|---|
| 기능 사용법 (가이드, 온보딩, 지원 답변) | 워크스루: 실제 UI를 클릭하며 녹화 | 시청자가 단계를 따라 하므로, 실제 편집되지 않은 흐름을 읽을 수 있는 속도로 보여줘야 함 |
| 제품의 가치 (런칭, 홈페이지, 광고, 개요) | 모션 프로모: 스크린샷 위에 애니메이션 | 시청자가 따라 하는 것이 아니므로, 행동과 결과를 연결하며 주의를 유지해야 함 |
두 스타일을 한 영상에 섞지 마세요. 날아가는 오브젝트가 있는 사용법은 따라 하기 어렵고, 평범한 녹화로 만든 프로모는 길게 느껴집니다.
자세한 내용: 워크스루는 references/walkthrough.md, 모션 프로모는 references/motion.md를 참조하세요.
2. 렌더링 전에 합의하세요
렌더링은 비용이 많이 드는 단계입니다. scene 코드를 작성하기 전에 스토리보드(references/storyboard.md)를 작성하고 사용자의 승인을 받으세요:
- 스타일(워크스루 또는 프로모) 및 시청 대상
- 길이 및 장면 수
- 출력 크기(기본값 2560x1440, 30fps; 세로는 1080x1920)
- 브랜드: 색상, 글꼴, 로고, 제품명 및 절대 나오면 안 되는 단어
- 데이터: 화면에 표시되는 가짜 이름과 숫자 (절대 실제 고객 데이터 사용 금지)
- 음성 해설 또는 무음
- 완료 시 파일이 저장될 위치
스토리보드에는 모션(Motion) 열뿐만 아니라 화면(Screen) 및 자막(Caption) 열도 있어야 하며(프로모의 경우), 각 장면이 의도적으로 다른 종류의 움직임을 사용하도록 합니다.
3. 빌드
워크스루
- 먼저 흐름을 탐색합니다: 녹화 없이 클릭만 하는 스크립트를 실행하여 선택자(selector)와 대기(wait)를 수정합니다.
lib/recorder.mjs로 부분 녹화(한 페이지 또는 한 단계씩)하고,concatParts로 연결합니다.- references/copy.md를 참조하여 자막을 작성합니다.
모션 프로모
lib/capture.mjs로 모든 UI 상태를 캡처합니다(3840 너비 스크린샷 + 요소 위치).- Remotion에서
motion/parts.tsx를 사용하여 장면을 구성합니다(카메라, 커서, 자막, 칩, 숫자 카운트업). - 전체 렌더링 전에 키프레임에서 스틸 이미지를 확인합니다(
remotion still ... --frame=N --scale=0.25).
음성 해설: 포함된 도구는 없습니다. 필요한 경우, Charon 목소리를 사용한 Gemini 3.1 Flash TTS(gemini-3.1-flash-tts-preview)를 추천합니다.
4. 전달 전에 확인하세요
node lib/qa.mjs out/video.mp4 --sheet 16 --end를 실행하고 두 이미지를 확인합니다. 자세한 내용: references/qa.md를 참조하세요.
- 크기, fps 및 길이가 스토리보드와 일치하는지
- 자막이 잘리거나 클릭 중인 버튼을 가리지 않는지
- 반쯤 열린 대화상자, 빈 프레임, 늦게 로드되는 로고가 없는지 (마지막 1초는 별도로 확인)
- 애니메이션되는 모든 숫자가 실제 화면에 표시된 값으로 끝나는지
- 전달할 때, 연출된 효과(날아가는 문서, 카운트업 등)와 실제 제품이 작동하는 부분을 구분하여 설명하세요.
5. 엄격한 규칙
- 실제 UI, 가짜 데이터. 실제 고객, 사람, 회사 이름, ID, 이메일, 숫자가 화면, 자막, 파일명, 설명에 절대 나타나지 않아야 합니다.
- 게시 금지 (YouTube, 소셜 미디어, 웹사이트) 사용자의 명시적 허가 없이 업로드하지 마세요.
- 제품이 하지 않는 것을 있다고 주장하지 마세요. 촬영을 위해 가짜로 만든 단계(서버 응답, 업로드 등)가 있다면, 자막이 이를 자동 마술처럼 제시해서는 안 됩니다.
- 렌더링 소스(스크립트, 스토리보드)는 저장소에 보관하고, MP4와 스크린샷은 git에 포함시키지 마세요.