Remotion 비디오 빌더

Remotion 비디오 빌더은(는) 무엇을 하나요?

Remotion에 대한 지식이 최신이 아닐 수 있습니다. 정확한 API 동작이 중요할 때는 공식 remotion-documentation MCP 서버 또는 remotion.dev 문서를 우선 참조하세요.

시작하기

• 프로젝트가 아직 존재하지 않으면 npx create-video@latest로 스캐폴드하고, blank 템플릿을 선호하세요.
• 모든 remotion 및 @remotion/* 패키지를 정확히 동일한 버전으로 유지하고, caret 범위를 피하세요.
• 표준 진입점 구조:
  • src/index.ts는 registerRoot()를 호출합니다.
  • src/Root.tsx는 모든 비디오를 <Composition> 또는 <Still>로 등록합니다.

빌드 순서

1. 먼저 입력 계약(contract)을 모델링하세요:
   • 최상위 props 스키마
   • 타임라인 또는 이벤트 데이터
   • 렌더 프로필
2. zod를 사용하여 공유 props를 정의하고, 각 <Composition>에 스키마를 전달하세요.
3. calculateMetadata를 사용하여 durationInFrames, width, height, 변환된 props, defaultOutName을 파생하세요.
4. <Series>(내러티브 순서)와 <Sequence>(오버레이, 진입, 푸티지 창, 콜아웃)를 사용하여 장면 구조를 구축하세요.
5. Remotion v4.x 프로젝트에서는 자산이 나타나기 전에 로드되어야 하는 <Sequence> 요소에 premountFor를 명시적으로 설정하세요.
6. 애니메이션을 다듬기 전에 샘플 데이터와 렌더 스크립트를 추가하세요.

기본값 및 규칙

• 별도의 지시가 없는 한, landscape는 fps={30} 및 1920x1080을 기본값으로 사용하세요.
• 레이어링에는 AbsoluteFill을 사용하세요.
• public/에서 가져오는 모든 파일에는 staticFile()을 사용하세요.
• 프레임 기반 로직에는 useCurrentFrame()과 useVideoConfig()를 사용하세요.
• 세밀한 모션을 선호하세요:
  • 높은 댐핑을 사용한 spring()
  • 클램핑을 사용한 interpolate()
• Math.random()을 사용하지 마세요. remotion의 random(seed)를 사용하세요.
• 텍스트 애니메이션은 단순하고 가독성 있게 유지하세요.
• 정말로 다른 처리가 필요한 경우가 아니라면, landscape와 vertical 출력에 동일한 비즈니스 로직을 유지하세요.

파라미터화된 비디오 체크리스트

• 하나의 공유된 최상위 z.object() 스키마
• 컴포넌트 props 모양과 일치하는 defaultProps
• 입력이 요구할 때 동적 duration 또는 dimensions를 반환하는 calculateMetadata
• 로컬 미리보기를 위한 샘플 JSON 또는 TypeScript 데이터
• 모든 대상 출력에 대한 렌더 스크립트

푸티지 전략

푸티지가 선택사항일 때는 다음 모드를 최소한 지원하세요:

• none
• placeholder
• real

실제 푸티지가 없을 때도 타임라인과 오버레이는 여전히 렌더링되어야 합니다.

Millrace 런치 비디오

Millrace 또는 런치 비디오 파이프라인에 대한 요청인 경우, 구현 전에 references/millrace-launch-video.md를 먼저 읽으세요.

참조

• references/remotion-core.md
• references/millrace-launch-video.md

---

출처: hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md