설명 영상: Remotion 마감, 표지, 내보내기 검증

Remotion 제작

Remotion 비디오를 결정론적 프레임 렌더러로 구축하세요. 에셋 형상, 시각적 앵커링, 타임라인 타이밍, 최종 미디어 검증을 별도의 관심사로 취급하세요.

작업 분류

• 스프라이트 시트 추출, 프레임 번짐, 중앙에서 벗어난 피사체, 잘린 아트워크, 부자연스러운 루프가 있는 경우 references/sprite-sheets.md를 읽으세요.
• 컴포지션 구조, 장면 타이밍, 실시간 좌표 패널, 전환 설계가 필요한 경우 references/scene-architecture.md를 읽으세요.
• 비디오 내 오프닝 커버, 독립형 썸네일 컴포지션, 브랜딩 엔딩, 최종 홀드가 필요한 경우 references/covers-and-endings.md를 읽으세요.
• 에셋 로딩, 오디오, delayRender 실패, 메모리 부족 렌더링, 내보내기 검증이 필요한 경우 references/rendering-and-audio.md를 읽으세요.
• 커버 이미지 프롬프트, 썸네일 방향, 숏 비디오 설명, 게시용 해시태그가 필요한 경우 references/publishing-copy.md를 읽으세요.

요청과 관련된 참조만 읽으세요. 이전 프로젝트에서는 미디어 컴포넌트가 remotion에서 노출되고 최신 프로젝트에서는 @remotion/media를 사용하므로, 적절한 임포트를 위해 설치된 Remotion 버전을 먼저 확인하세요.

제작 워크플로

1. 렌더링 계약 설정

기존 프로젝트를 편집하기 전에 검사하세요. 다음을 기록하세요:

• 컴포지션 ID, 너비, 높이, FPS, 지속 시간;
• 장면 경계 및 프레임이 전역인지 Sequence에 국한된 것인지;
• 소스 에셋 크기, 투명도, 프레임 메타데이터, 오디오 지속 시간;
• 필요한 출력 코덱, 대상 경로, 사용 가능한 렌더링 리소스;
• 제공 결과물에 오프닝 커버 장면, 독립형 커버 이미지, 엔딩 카드, 가청 오디오, 의도적인 무음, 게시용 카피가 포함되는지 여부.

관련 없는 워킹 트리 변경 사항은 유지하세요. 작업 중인 프로젝트를 재구성하는 것보다는 작고 집중된 변경을 선호하세요.

2. 시간을 명시적으로 모델링

장면 지속 시간과 컷 프레임을 명명된 상수 또는 데이터로 정의하세요. useCurrentFrame()과 useVideoConfig()에서 애니메이션 상태를 파생하세요.

const spriteIndex =
  Math.floor((frame * spriteFps) / compositionFps) % sequence.length;

연속적인 모션에는 제한된 범위와 함께 interpolate()를 사용하세요. 렌더링된 애니메이션에 CSS 전환, CSS 키프레임, 벽시계 타이머, 랜덤 값, 또는 가변 재생 상태를 사용하지 마세요.

3. 소스 형상과 프레젠테이션 분리

자르기 사각형, 애니메이션 순서, 콘텐츠 경계, 시각적 앵커를 타입화된 데이터로 유지하세요. 렌더 컴포넌트가 CSS나 라벨에 좌표를 중복하지 않고 해당 데이터를 소비하도록 만드세요.

다음에 동일한 계산된 현재 프레임 객체를 사용하세요:

• 표시되는 자르기 영역;
• 프레임 카운터 및 강조 표시된 셀;
• JSON/좌표 패널;
• 활성 프레임을 설명하는 캡션.

이렇게 하면 올바른 애니메이션이면서도 오래된 설명 UI가 함께 제공되는 것을 방지할 수 있습니다.

필름스트립을 표시할 때는 정확한 현재 프레임을 포함하는 창을 생성하세요. 다른 자르기를 렌더링하면서 가장 가까운 샘플링된 프레임을 강조 표시하지 마세요.

4. 메인 피사체 안정화

애니메이션에 고정된 뷰포트를 사용하세요. 먼저 정확한 소스 사각형을 자른 다음, 프레임별 시각적 앵커 또는 표시되는 콘텐츠 상자를 사용하여 해당 잘린 프레임을 뷰포트 내에서 변환하세요. 아트워크가 셀 내에서 이동할 때 원시 셀 사각형만 중앙에 배치하지 마세요.

스프라이트 시트의 경우 모든 가장자리 프레임과 꼬리, 머리카락, 그림자, 모션 트레일과 같은 긴 부분이 포함된 프레임을 확인하세요. references/sprite-sheets.md의 자세한 워크플로를 따르세요.

5. 장면 연속성 구축

모든 장면 시퀀스 외부에 컴포지션에 지속적인 불투명 베이스 배경을 제공하세요. 장면 배경도 불투명하게 유지될 수 있습니다. 전환을 장면 위에, 그리고 최종 비네트나 안전 오버레이 아래에 프레임 기반 오버레이로 적용하세요.

장식 효과는 설명에 종속되도록 유지하세요. 전환은 컷을 숨겨야 하며, 투명도, 체커보드, 이웃 스프라이트 셀, 또는 마운트 해제된 콘텐츠를 드러내지 않아야 합니다.

요청에 커버 또는 엔딩이 포함된 경우, 이를 일급 장면으로 구현하고 유용한 경우 독립형 커버 컴포지션을 렌더링하세요. references/covers-and-endings.md를 따르세요. 사용자가 프롬프트만 요청하지 않는 한, 실제 Remotion 커버를 커버 생성 프롬프트로 대체하지 마세요.

6. 오디오 추가 및 믹싱

staticFile()로 로컬 오디오를 참조하세요. 충분히 긴 트랙을 선택하거나 의도적으로 반복하거나 의도적으로 트리밍하여 전체 컴포지션을 커버하세요. 사용자가 제공한 긴 트랙의 경우 지속 시간, 무음, 음량을 검사한 후 필요한 발췌 부분만 public/audio/에 배치하세요. 음량만으로 판단하지 말고 음악적으로 자연스러운 경계를 선택하세요.

페이드에는 프레임 기반 볼륨 콜백을 사용하고, 배경 음악은 내레이션이나 설명 텍스트가 충분히 들리도록 낮게 유지하세요. Remotion이 이미 볼륨 엔벨로프를 소유하고 있으므로 발췌 부분에 페이드를 굽지 마세요.

Studio 미리보기만으로 오디오가 완료되었다고 선언하지 마세요. 내보낸 파일에 측정 가능한 무음이 아닌 오디오 스트림이 포함되어 있는지 확인하세요.

7. 증가하는 범위로 검증

다음 순서로 검사를 실행하세요:

1. 프로젝트 타입 검사.
2. 커버, 각 컷 양면, 대표 스프라이트 프레임, 엔딩 진입점, 최종 홀드에서 정지 이미지를 렌더링.
3. 전체 컴포지션 렌더링.
4. Chrome이 RAM 또는 임시 디스크를 소진하는 경우, 애플리케이션 코드를 변경하기 전에 렌더링 동시성을 줄이세요.
5. 최종 컨테이너에서 지속 시간, 비디오 스트림, 필요한 오디오 스트림을 검사.

내보내기 후 번들된 검증기를 사용하세요:

node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio

대상에 파일이 존재하더라도 부분적이거나 실패한 출력은 유효하지 않은 것으로 처리하세요.

8. 요청 시 게시용 카피 준비

커버 프롬프트와 비디오 설명은 최종 컴포지션, 검증된 피사체, 교육 포인트, 비주얼 스타일, 지속 시간, 시청자를 기반으로 하세요. 이러한 결과물은 사용자 대화에 직접 출력하세요. 사용자가 명시적으로 요청하지 않는 한 프롬프트나 설명 파일을 생성하거나, 이미지 생성 도구를 호출하거나, 커버 이미지를 생성하지 마세요.

references/publishing-copy.md를 따르세요. 결과물은 복사하여 사용할 수 있도록 준비되고, 대상 플랫폼에 맞게 간결하며, 사용자의 언어로 작성되어야 합니다.

완료 기준

다음 조건이 충족될 때까지 완료되었다고 간주하지 마세요:

• 애니메이션이 프레임에서 결정론적으로 파생됨;
• 피사체 경계가 루프 전반에 걸쳐 완전하고 시각적으로 안정적으로 유지됨;
• 설명 좌표가 렌더링된 스프라이트 프레임과 함께 업데이트됨;
• 장면 컷이 투명하거나 체커보드 아티팩트를 노출하지 않음;
• 미디어 에셋이 렌더링 핸들 누수 없이 로드됨;
• 안정적인 동시성에서 전체 렌더링이 성공함;
• 내보낸 파일이 예상 지속 시간, 필요한 오디오/비디오 스트림을 가지며, 음악이 요청된 경우 무음이 아닌 오디오를 포함함;
• 요청된 커버 및 엔딩 장면이 전체 상태, 전환 경계, 최종 프레임에서 시각적으로 확인됨;
• 독립형 커버 아트워크에 자체 불투명 배경이 포함되고 비디오 계층 구조와 일치함;
• 요청된 커버 프롬프트와 게시 설명이 최종 비디오를 정확하게 반영하고 대화에 직접 전달됨.

출력 경로, 렌더링 명령어, 검증 결과, 의도적으로 줄인 동시성을 보고하세요.