Communitygithub.com

atultiwari/remotion-motion-explainer

자체 포함된 Remotion 키트와 런북으로, '사고 보고서' 스타일의 다채로운 모션 그래픽 설명 영상을 제작합니다: 뉴스, 사고 설명, 사례 연구, '무엇이 잘못되었고 의사들이 무엇을 배워야 하는가'와 같은 영상.

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

이 스킬은 Remotion을 사용하여 '사고 보고서' 스타일의 모션 그래픽 설명 영상을 제작하기 위한 완전한 템플릿과 런북을 제공합니다. 뉴스, 보안 사고, 의료 사례 연구 등 전문적인 톤의 영상에 적합하며, *Fridges Hacked: What Doctors Must Learn About AI Security* (11분 5초, 49개 장면) 예제가 포함되어 있습니다. 지원하는 플랫폼은 Claude Code, Cursor, Codex 등 AI 어시스턴트에서 실행 가능하며, 모든 스크립트와 설정이 `template/` 디렉토리 안에 자체 포함되어 있어 원본 프로젝트 폴더에 의존하지 않습니다. 워크플로우는 사실 수집 → 장면 구성 → 무성 미리보기 → 스틸 QA → TTS 음성 → 단어 큐 → 사운드 → 렌더링 → 챕터 생성의 9단계 게이트 프로세스로 구성되며, `scenes.json` 하나로 전체 영상을 제어합니다. 또한 Sarvam TTS, Whisper 검증, 마스터링, 캡션 생성 스크립트가 포함되어 있어 음성과 자막을 자동화합니다.

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

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

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

문서

모션 설명자 (Motion explainer)

Fridges Hacked: What Doctors Must Learn About AI Security (11:05, 49개 장면, 2026년 10월)을 제작한 완전한 비디오 프로젝트 템플릿과 런북입니다. 이 스킬 안에 필요한 모든 것이 들어 있습니다: 템플릿(template/), 해당 스크립트(Sarvam TTS 및 마스터링 스크립트 사본 포함), 작업 예제(examples/fridge-hack/). 원본 프로젝트 폴더를 참조하지 않습니다.

어떤 스킬을 사용할지

비디오 유형스킬
뉴스, 사고, 사례 연구, "X로부터 배운 교훈": 타이포그래피, 지도, 신문 페이지, 게이지이 스킬
그림, 펜과 손, 획별 해부도 또는 다이어그램remotion-whiteboard (변경 없음; 그림이 필요한 모든 경우에 필요)
작업 순서, 주장, 스크립트, 음성, 게이트 (모든 비디오)youtube-video-production (motion 모드가 여기를 가리킴)
썸네일, 캐러셀, LinkedIn/Instagram/WhatsApp 카피, YouTube 업로드video-promo-kit

빠른 시작

node ~/.claude/skills/remotion-motion-explainer/scripts/install.mjs ~/Projects/remotion-projects/<이름>
cd ~/Projects/remotion-projects/<이름> && npm run dev

템플릿은 fridge-hack 이야기로 열리므로 스타일을 즉시 확인할 수 있습니다. src/data/scenes.json을 새 이야기로 교체하세요.

작업 순서 (게이트는 굵게 표시)

  1. 사실 우선. 내레이션 전에 출처와 함께 사실 시트를 작성하세요. 모든 화면상 숫자에는 sourceCitation이 필요합니다.
  2. 스토리 → scenes.json. 장면별 내레이션, 컴포넌트 + props, 인용. npm run estimate && npm run narration; npm run tts:lint로 린트.
  3. 임시 자막이 있는 무성 미리보기. 문장 자막, 예상 길이. 소유자는 여기서 스토리를 승인합니다. 이 전에는 TTS 없음.
  4. 스틸 QA: npm run stills, 연락처 시트, 겹침 수정 (references/05).
  5. 음성: npm run tts → npm run tts:check (Whisper, 모든 테이크) → 재테이크 또는 재작성 → npm run tts:master → npm run captions. 이제 장면 길이는 오디오에서 결정됩니다.
  6. 단어 큐: 이벤트가 특정 단어에 맞춰 실행되어야 하는 props에 {"atWord": "…"}를 추가합니다.
  7. 사운드: 효과는 컴포넌트에서 실행됩니다. 오디오 전용 렌더링으로 전체 믹스를 확인합니다 (목표 −14 LUFS, ≤ −1 dBTP).
  8. 렌더링은 소유자가 승인할 때만 합니다 (references/05).
  9. 챕터 (npm run chapters), 그런 다음 video-promo-kit으로 전달.

세부 정보 위치

파일참조 시점
references/01-look-and-story.md단계 1–2: 시각적 언어, 스토리 아크, 모티프, 작성 규칙
references/02-scene-graph.md단계 2: scenes.json의 모든 필드, 단어 큐, 전환
references/03-components.md단계 2–4: 컴포넌트 카탈로그, props, 레이아웃 규칙, 추가 방법
references/04-voice-and-sound.md단계 5–7: Sarvam, Whisper 확인, 마스터링, 캡션, 효과, 음악, 레벨
references/05-qa-render.md단계 4, 8, 9: 스틸, 연락처 시트, 렌더링, 검증, 챕터
references/06-lessons.md문제가 있을 때: 발생한 모든 실수와 규칙
examples/fridge-hack/작업 예제: scenes.json, 내레이션 스크립트, 상태, 교훈, 스타일 스틸

준수 사항

  • 실제 로고나 브랜드 마크 없음; 매체 및 회사 이름은 일반 텍스트로; 헤드라인은 의역; 발명된 시각 자료는 "예시"로 표시.
  • 보안 비디오에서 공격에 대한 악용 단계, 코드 또는 방법 없음.
  • 귀인에 대해 추측하지 말 것; "<날짜> 기준으로 공개적으로 귀인되지 않음"이라고 말할 것.
  • 소유자가 스크립트, 썸네일 및 렌더링을 승인합니다. 의심스러우면 물어보세요.

관련 스킬