reels-motion은(는) 무엇을 하나요?
'터미널 팝' 스타일의 세로형 리얼(1080×1920, 30fps, ~40–50초)을 제작합니다: 어두운 배경과 그리드,
단일 악센트 색상, 단어별 큰 텍스트(키워드는 색상 박스), 픽셀 마스코트가 액션을 취하고,
01 / 04 카운터, 마지막 키워드 CTA가 포함됩니다.
이 스킬의 파일 (이 폴더 기준 상대 경로):
references/motion_system.md: 팔레트, 타이포그래피, 움직임, 전환, 구성 및 리듬. 디자인 전에 반드시 읽으세요.template/: 완전하고 작동하는 Remotion 프로젝트 (스킬이 무엇인지 설명하는 '카트리지' 리얼). 기반으로 사용하세요. 처음부터 시작하지 마세요.template/README.md: 프로젝트 구조, 명령어 및 설정.
플로우
1. 요청 이해
필요한 것만 물어보세요: 주제, 대상, 계정 @, CTA 키워드, 댓글 작성자에게 제공할 것, 음성 해설 여부 (및 ElevenLabs 음성), 예상 길이.
2. 대본 및 스토리보드 (보여주고 애니메이션 전에 확인 받기)
- 구조: 훅 (≤ 2초) → HUD
01–04가 있는 4개 섹션 → CTA (~4초). - 훅: 3번의 텍스트 타격, 마지막 타격에 키워드가 박스 안에 표시되고 마스코트가 액션을 취합니다.
- 음성 문장: ≤ 14단어, 화면 텍스트를 읽는 것이 아니라 말하는 스타일. 화면에는 문장당 ≤ 6단어.
- 마스코트: 각 섹션은 개념을 설명하는 액션(연결, 선택, 스캔 등)이 필요하며, 단순 장식이 아니어야 합니다.
- CTA: "키워드라고 댓글을 달면 X를 보내드립니다" 형식, 키워드는 악센트 박스 안에.
3. 프로젝트 생성
cp -r <이-스킬-경로>/template <사용자-폴더>/<리얼-이름>
cd <사용자-폴더>/<리얼-이름>
npm install
사용자에게 짧은 경로를 요청하세요. Windows에서 긴 경로(약 200자 초과)는 Remotion이 렌더링에 사용하는 Chrome 시작을 방해합니다.
4. 주제에 맞게 조정
src/config/texts.ts: 화면의 모든 텍스트와BRAND.handle.[단어]= 악센트 박스.src/config/voiceover.ts: 장면별 대본,blocks로 분할 (각 블록은 하나의 문장).src/config/theme.ts: 악센트 색상 및 위치.src/scenes/S2…S5: '카트리지' 예제입니다. 다른 주제의 경우,components/(Headline, Appear, Bit, Cartridge, Terminal, Pill, CommentBar, Transitions, Sfx)와lib/anim.ts를 재사용하여 각 섹션의 액션을 다시 작성하세요. 패턴 유지: 각 페이즈는cue('scene', n, fallback)으로 시작하며, 이는 음성의 n번째 문장 시작점입니다.- Bit:
src/components/Bit.tsx의MAP행렬(16×16)이 모양을 정의합니다. 계정에 다른 마스코트가 있으면 변경하세요.
5. 사운드 효과
npm run sfx는 public/sfx/의 .wav 파일을 합성합니다. 애니메이션과 동일한 상수를 사용하여 <Sfx name="…" at={frame} />로 배치하세요. 볼륨 및 온/오프는 src/config/audio.ts에서 설정.
6. 음성 해설 (한 가지 방법 선택)
- 자체 API 키:
.env에ELEVENLABS_API_KEY,VOICE.voiceId에 음성 ID,npm run voiceover. 장면별 MP3를 생성하고 각 문장의 정확한 시작 시간을 포함한src/config/voiceover.generated.ts를 작성합니다. - Claude의 ElevenLabs 커넥터: 정확한
blocks텍스트를 결합하여 각 장면을 생성하고 MP3를public/voiceover/<reel>/에 다운로드합니다. 커넥터는 타임스탬프를 제공하지 않으므로:- 각 MP3를 WAV로 디코딩 (
npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav). - Node에서 10ms 윈도우로 에너지를 측정하여 80ms 이상의 일시 정지를 감지.
- 각 문장을 예상 위치(문자 비례)에 가장 가까운 일시 정지에 할당.
voiceover.generated.ts를 수동으로 작성:duration= 음성 종료 (마지막 침묵 제외),blockStarts.
- 각 MP3를 WAV로 디코딩 (
- 음성 없음:
VOICE_TIMINGS = {}로 설정하면 각cue의fallback을 사용합니다.
7. 리듬
각 장면은 문장 길이 + 0.2–0.4초의 여유 시간: SCENES.x ≈ (음성 종료 + 0.3초) × 30. 훅 ≤ 2초. CTA는 음성 후 약 1.5초의 읽기 시간을 남깁니다.
음성은 절대 잘리지 않습니다: 각 MP3는 장면과 함께 시작하며, 뒤따르는 침묵은 다음 장면 아래에서 들릴 수 있습니다.
애니메이션이 빡빡하면 단순화하세요. 속도를 높이지 마세요.
8. 전달 전 확인
npx tsc --noEmit.- 키 프레임(훅, 각 섹션, CTA)을 렌더링하여 확인: 텍스트 분할, 겹침, 안전 영역(위 120px, 아래 340px, 양옆 64px) 및 @가 한 줄에 들어가는지 확인.
- 믹스: 두 개의 WAV 트랙을 별도로 렌더링 (
--codec=wav), 하나는sfxEnabled = false, 다른 하나는voiceEnabled = false로 설정하고 0.1초마다 볼륨 비교. 음성이 있는 동안 효과음은 최소 10dB 낮아야 함; 그렇지 않으면audio.ts에서 해당 효과의 게인을 낮추세요. Remotion의 ffmpeg에는volumedetect가 없으므로 WAV로 디코딩하여 Node에서 측정. - 최종 렌더링:
npx remotion render ReelCartuchos out/<name>.mp4.
9. 썸네일 및 게시
- 썸네일:
npm run thumbnail(구성Miniatura, 프레임 29). 내용은 4:5 비율(285–1635px)에 맞아야 합니다. - 텍스트: TikTok 설명(짧게, CTA, 3–5 해시태그) 및 Instagram 설명(단계별 가치, CTA, 최대 5 해시태그), 대체 텍스트, 키워드에 대한 자동 DM 메시지 제공.
알려진 오류
- Windows,
Failed to launch the browser process … ENOENT: 경로가 너무 깁니다. 짧은 폴더를 사용하거나--browser-executable=<짧은-경로>/chrome-headless-shell.exe를 사용하세요. - 프레임 0의 스틸에서 제목이 보이지 않음: 시작 시 투명도가 0입니다. 썸네일을 프레임 29에서 렌더링하세요.
generate-*.ts: Node 22.18+ 필요 (네이티브 TypeScript).