Communitygithub.com

Uerdong/remotion-explainer-video

Remotion을 사용하여 중국어 과학 애니메이션 장편 영화를 제작하는 완전한 파이프라인입니다. 주제 분석, 해설 대본 압축, TTS 음성 더빙, SRT 자막, BGM 비트 분석 및 비트 재정렬, 장면 전환 비트 정렬, 코드 합성 사운드 효과, tsx 프로젝트 설정, 정적 프레임 자체 점검, 최종 렌더링 및 이중 버전 제공, 그리고 썸네일/소개/제목 등 게시 자료를 다룹니다.

remotion-explainer-video란 무엇인가요?

이 스킬은 Remotion을 기반으로 한 완전한 파이프라인을 제공하여 중국어 과학 애니메이션 장편 영화를 제작합니다. 주제 분석, 해설 대본 압축, TTS 음성 더빙, SRT 자막, BGM 비트 분석 및 비트 재정렬, 장면 전환 비트 정렬, 코드 합성 사운드 효과, tsx 프로젝트 설정, 정적 프레임 자체 점검, 최종 렌더링 및 이중 버전 제공, 그리고 썸네일/소개/제목 등 게시 자료 생성을 포함한 10단계 파이프라인을 순차적으로 실행합니다. 이 스킬은 Claude Code, Cursor와 같은 AI 코딩 에이전트에서 사용할 수 있으며, 사용자가 Remotion을 사용하여 수평형 MG(모션 그래픽) 비디오를 만들거나, 배경 음악 비트에 맞춰 장면을 구성하거나, 해설에 자막을 입힌 완성된 영상을 만들거나, 기존 영상의 스타일을 변경하거나, 게시 자료를 생성해야 할 때 특히 유용합니다. 주요 특징으로는 실제 측정된 BPM을 사용하고, 모든 장면 전환을 비트에 정렬하며, 결정론적 렌더링을 보장하고, 단일 타임라인 정보 소스를 유지하는 등의 엄격한 규칙을 따릅니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Uerdong/remotion-explainer-video/tree/HEAD/remotion-explainer-video

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

중국어 과학 애니메이션 (Remotion 전체 워크플로우)

10단계를 순서대로 실행하세요. 각 단계의 결과물은 다음 단계의 입력이 되며, 단계를 건너뛰고 나중에 보충하는 것은 금지됩니다.

10가지 철칙

  1. 재생 시간은 대본이 아닌 더빙에 의해 결정됩니다. 참고 대본은 의도일 뿐입니다. 먼저 실제 측정된 말하기 속도(중국어 TTS 약 3.3자/초)를 기준으로 총 길이를 추정합니다. 목표 시간을 초과하면 글자 수를 줄이고 구어체로 변경한 후, 각 구간을 합성하여 실제 시간을 측정합니다.
  2. BPM은 반드시 실제로 측정해야 하며, 사용자나 참고 자료에서 제공된 숫자를 신뢰하지 마십시오. librosa는 종종 104 BPM을 51.7로 보고합니다(절반). 자기 상관 또는 onset 매개변수를 독립적으로 확인하여 청감과 일치하는 값을 사용해야 합니다.
  3. 모든 장면 전환 지점은 비트에 정렬됩니다. 구간 경계 = 해당 구간 더빙 종료 시점에서 가장 가까운 비트로 올림하여 정렬합니다. 프레임 번호 = round(beat * (60/BPM) * FPS)로 코드에 하드코딩하고, 런타임에 계산하지 않습니다.
  4. 결정론적 렌더링. Date.now(), Math.random()은 금지됩니다. 모든 움직임은 Math.sin(frame)으로 유도합니다. 동일한 프레임은 여러 번 렌더링해도 픽셀이 일치해야 합니다.
  5. 타임라인 단일 정보 소스. 구간, 프레임 번호, 더빙 오프셋, SFX 프레임은 timeline.ts에만 존재합니다. 대본 글자 수 변경 → 생성 스크립트 재실행 → TS 동기화, 두 곳을 수동으로 수정하지 마십시오.
  6. 자막 줄바꿈은 구두점 기준으로 상자에 담습니다. 먼저 ,;:。로 절(clause)을 나눈 다음 상자에 담습니다. 줄 너비는 고정 픽셀 컨테이너(예: width: 1460 + whiteSpace: "pre")를 사용하고, maxWidth를 사용하여 내용이 컨테이너를 역으로 결정하도록 하는 것을 금지합니다.
  7. 오디오 3계층 분리: BGM, 음성, 효과음 각각 독립적인 레벨. 음성 0.8, BGM 0.24부터 시작하여 렌더링 후 실제 피크를 측정하고, >0.95이면 클리핑 위험입니다.
  8. 각 장면마다 정적 프레임을 렌더링하여 자체 점검합니다. npx remotion still을 사용하여 프레임별 구도를 확인합니다. 확인 없이 전체 영화를 렌더링하면 재작업과 같습니다.
  9. Windows 3가지 하드 제약: --props는 반드시 파일로 전달해야 합니다(--props=props-nobgm.json). 인라인 JSON은 셸에서 따옴표를 제거합니다. ffmpeg 9는 -vsync 대신 -fps_mode passthrough를 사용합니다. TSX를 변경한 후 스타일이 적용되지 않으면 먼저 node_modules\.cache를 삭제합니다.
  10. 먼저 전달하고, 그 다음 평가합니다. 이미 렌더링된 완성본과 생성된 이미지는 원래 상태로 사용자에게 전달합니다. 문제는 기록하고 설명만 할 뿐, 임의로 다시 생성하지 않습니다.

10단계 파이프라인

#단계핵심 작업결과물
1주제 분석지식 체인, 목표 시간, 화면 비율, 대상 청중 톤 결정한 줄 주제 + 시간/화면 비율 규칙
2해설 대본"훅→모델→추론→결론→시사점" 구조로 목표 글자 수까지 압축, 구어체로 변경분할 대본 (약 6개 구간, 각 50–70자)
3더빙각 구간을 독립적으로 합성, 동일한 음색과 매개변수 사용; 각 구간의 실제 시간과 f0 측정s1..sn.wav + 구간 시간표
4자막구간 시간으로 SRT 생성, 장면 전환 지점과 동일한 소스 사용subtitles.srt
5BGM곡 선택 또는 직접 합성, 실제 BPM 및 비트표 측정; 부적합하면 교체bgm.wav + bgm.json (beats_sec)
6타임라인 재정렬구간 경계를 비트에 정렬, 총 프레임 수 계산timeline.json + timeline.ts
7효과음주요 동작마다 해당 음색, 코드로 합성, 비트에 고정sfx/*.wav + 프레임 고정표
8화면 엔지니어링theme / components / timeline + 구간별 장면 컴포넌트Remotion 프로젝트
9자체 점검 및 렌더링구간별 정적 프레임 → 전체 영화 → 실제 피크 측정out/*.mp4, QA 정적 프레임
10게시 자료썸네일 (코드 렌더링 또는 디자인 도구), 제목, 소개, 태그썸네일 이미지 + 게시_문서.md

충돌 처리 결정

충돌처리
대본 글자 수와 목표 시간 충돌대본을 압축하고, 시간을 변경하지 않습니다. 압축률 > 1.3이면 구어체 짧은 문장으로 변경하고 모든 지식 포인트 유지
사용자가 제공한 BPM/시간과 실제 측정값 불일치실제 측정값을 기준으로 작업하고, 차이를 적극적으로 알립니다. (예: "사양에는 110 BPM / 58s로 되어 있으나, 실제 측정 결과는 104 BPM / 53.65s입니다.") 또한 "사양에 따라 재정렬하시겠습니까?"라는 옵션을 하나 더 제공
사용자가 지정한 곡 스타일이 맞지 않음먼저 해당 곡의 BPM / 스펙트럼 / 피크를 실제로 측정하여 데이터를 제공한 후, 대체 곡을 직접 합성하고 전달 시 이탈 이유를 공개
참조 비주얼 가이드라인과 썸네일 또는 플랫폼 스타일 충돌두 가지를 분리합니다. 본문은 사용자의 비주얼 가이드라인을 따르고, 썸네일은 썸네일 플랫폼의 전파 로직에 따라 제작하며, 선택 이유를 설명

전달 체크리스트

  • 완성본 이중 버전: BGM 포함 / BGM 미포함 (플랫폼 자체 음악 라이브러리 사용 시 후자), 동일 프레임 수 및 시간
  • 자막 SRT (외부 첨부 가능, 화면 내장과 일치)
  • 전달 설명: 완성본 표, BPM 및 비트 정보, 구간 경계 표, 비트 정렬 표, 대본, 효과음 표, 믹싱 레벨, 프로젝트 구조, 실행 명령
  • 썸네일 (가로형 + 대상 플랫폼 세로형), 여러 가지 제목, 여러 가지 소개, 해시태그

참조 파일

관련 스킬