화이트보드 설명 영상
화이트보드가 나레이션과 함께 그려집니다. 시청자는 영상이 끝난 후 전체 지도를 머릿속에 남깁니다.
이 스타일을 효과적으로 만드는 핵심 요소 (절대 생략 불가):
- 모든 그림은 음성이 해당 내용을 말할 때 실시간으로 그려집니다. 미리 완성된 상태로 나타나지 않습니다.
- 하나의 캔버스만 사용합니다. 카메라가 이동하며 이미 설명된 내용은 그 자리에 남아 있습니다.
- 마지막에 카메라가 멀어져 전체 캔버스를 보여주며 영상의 요약이 됩니다. 이 효과는 그리기 전에 맵이 계획되어야만 작동합니다.
- 실제 앱이나 제품이 존재할 경우, 손으로 그린 창 안에 녹화된 화면을 삽입하여 그림의 내용을 증명합니다.
SD는 이 스킬의 폴더를 나타냅니다. 명령어: node "$SD/scripts/..."
시작하기 전에
node "$SD/scripts/config.mjs". 키가 없으면 사용자에게 다음 중 하나를 요청하고, 값을 채팅에 다시 표시하지 않고 저장하세요:- OpenRouter (openrouter.ai/keys) - 음성 및 전사 지원:
node "$SD/scripts/config.mjs" OPENROUTER_API_KEY=... - ElevenLabs (elevenlabs.io/app/settings/api-keys):
node "$SD/scripts/config.mjs" ELEVENLABS_API_KEY=...
- OpenRouter (openrouter.ai/keys) - 음성 및 전사 지원:
- Node 20+와 ffmpeg가 필요합니다. 누락된 것이 있으면 사용자의 시스템에 설치하는 방법을 알려주세요.
- 제작 전에 다음을 확정하세요: 주제, 대상, 길이, 언어, 영상이 전달해야 할 핵심 내용. 요청이 명확해지면 추가 질문 없이 진행하세요.
제작 순서
| # | 단계 | 결과물 |
|---|---|---|
| 1 | node "$SD/scripts/new-project.mjs" <폴더> | Remotion 프로젝트 |
| 2 | 짧은 구간으로 나눈 대본 (구간당 하나의 주제, 번호는 임의로 생성하지 않음) | script/script.md |
| 3 | 1분 이상 영상: 3개 샘플(narrate.mjs <폴더> --samples "첫 문장")을 생성하고 사용자가 선택. script/voice.json에 녹음. 짧은 테스트는 기본값 사용 | 음성 |
| 4 | node "$SD/scripts/narrate.mjs" <폴더> | public/audio/, src/data/narration.json |
| 5 | 구간들을 src/sections.ts에서 연결 | 타임라인 |
| 6 | 월드 맵: 영상 부분별로 그룹화된 구간당 하나의 영역 | R_* 상수 |
| 7 | 한 번에 한 영역씩: 그림 그리고, 단어에 고정, 스틸로 확인 | src/scenes/*.tsx |
| 8 | 카메라 및 종료 장면 | src/Video.tsx |
| 9 | npx remotion studio src/index.ts로 사용자가 검토할 수 있도록 제공 (원할 경우) | 확인 |
| 10 | 일부 렌더, 검토, 전체 렌더, 검토, 음량 조정 | out/video.mp4 |
src/scenes/Example.tsx 장면은 단순한 템플릿입니다. 지우고 주제에 맞는 그림을 그리세요. 각 영상은 고유한 그림을 가집니다.
6단계 전에 references/method.md를 읽으세요. 영상에 화면 녹화가 포함되면 references/screens.md도 읽으세요.
대본
**s01**
해당 구간의 말하기 텍스트. 한 문단으로 작성.
- 말하기 위한 문장이지, 읽기 위한 텍스트가 아닙니다. 간단한 구두점 사용: 대시와 생략 부호는 어색한 침묵을 만듭니다.
- 숫자는 발음이 중요한 경우 한글로 표기합니다.
- 각 구간은 하나의 그림을 제공해야 합니다. 그림으로 표현할 수 없으면 다시 작성하세요.
- 영상이 오래 지속되어야 한다면 날짜를 포함하지 말고, 모든 숫자는 출처를 명시하세요.
확인: 시청할 수 없으므로 프레임을 읽으세요
npx remotion still src/index.ts Whiteboard /tmp/f.png --frame=N --scale=0.5
node "$SD/scripts/render.mjs" <폴더> --frames=0-299
node "$SD/scripts/qa.mjs" sheet <폴더>/out/video.mp4 24 # 검토: 반복 구간과 겹침 찾기
node "$SD/scripts/qa.mjs" scan <폴더>/out/video.mp4 # 정지 프레임, 검은 화면, 깜빡이는 화면 찾기
node "$SD/scripts/qa.mjs" loud <폴더>/out/video.mp4 # 목표: -14 ~ -16 LUFS, 최대 피크 -1 dBTP
scan은 시각적 인상을 측정합니다: 5% 이상 정지된 프레임이 있으면 영상이 슬라이드처럼 보입니다. 테스트 중이라도 인도하기 전에 수정하세요. 문장당 더 많은 그림 요소와 세부 사항에 카메라 키프레임을 추가하세요. 카메라의 움직임만으로는 정지 상태로 간주됩니다.
이미지를 열어보세요. 시트를 보거나 오디오를 측정하지 않고 "좋다"고 말하지 마세요.
useCurrentFrame 효과만 사용하세요. CSS transition과 animation은 렌더링에서 작동하지 않습니다.