Remotion 비디오 빌더

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

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

시작하기

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

빌드 순서

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

기본값 및 규칙

• 브리프에서 달리 명시하지 않는 한 랜드스케이프는 fps={30} 및 1920x1080을 기본으로 사용하세요.
• 레이어링에는 AbsoluteFill을 사용하세요.
• public/에서 오는 모든 항목에는 staticFile()을 사용하세요.
• 프레임 기반 로직에는 useCurrentFrame() 및 useVideoConfig()를 사용하세요.
• 미묘한 모션을 선호하세요:
  • 높은 감쇠의 spring()
  • 클램핑이 있는 interpolate()
• Math.random()을 사용하지 마세요. remotion의 random(seed)를 사용하세요.
• 텍스트 애니메이션은 간단하고 읽기 쉽게 유지하세요.
• 브리프가 실제로 분기를 요구하지 않는 한, 랜드스케이프 및 세로 출력을 동일한 비즈니스 로직으로 유지하세요.

매개변수화된 비디오 체크리스트

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

푸티지 전략

푸티지가 선택 사항일 때 적어도 다음 모드를 지원하세요:

• none
• placeholder
• real

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

Millrace 런칭 비디오

요청이 Millrace 또는 런칭 비디오 파이프라인에 관한 것이라면, 구현 전에 references/millrace-launch-video.md를 읽으세요.

참조

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