Remotion 렌더

Remotion 렌더은(는) 무엇을 하나요?

렌더-반복 루프를 구동합니다: 컴포지션을 MP4로 변환하고, 자연어 피드백을 받아 최소한의 수정을 가한 후 다시 렌더링합니다. 비용이 많이 드는 실패 패턴은 반대 루프, 즉 사소한 복사본 수정을 위해 전체 장면 파일을 다시 작성하거나 모든 확인에 대해 전체 품질로 재렌더링하는 것입니다. 이는 승인된 작업과 Remotion을 유용하게 만드는 반복 속도를 모두 파괴합니다.

운영 절차

1단계: 입력 수집

• 컴포지션 ID (src/Root.tsx의 <Composition>에 있는 id, 파일명이 아님) 및 진입점 (registerRoot를 호출하는 파일, 일반적으로 src/index.ts).
• 대상: 플랫폼/화면 비율 (가로 16:9, 세로 9:16, 정사각형), 해상도 (1080p 기본값, 4K는 요청 시), 투명도 필요 여부.
• 머신 코어 수 (동시성용) 및 단일 렌더, 반복 세션, 배치 여부.

2단계: 기본 렌더

npx remotion render src/index.ts <CompositionId> out/video.mp4

기본 출력은 컴포지션의 자체 너비/높이/fps를 사용하는 H.264 MP4입니다. Remotion은 필요 시 out/ 디렉토리를 생성합니다.

3단계: 해상도, fps, 코덱 사전 설정

해상도와 fps는 <Composition> (width/height/fps)에 있습니다. 소스에서 변경하세요. 플래그는 확장 및 컨테이너에만 사용하십시오:

# 1080p 가로 - 컴포지션이 1920x1080@30으로 작성됨
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - 레이아웃을 건드리지 않고 1080p 캔버스를 업스케일
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# 9:16 세로 - 1080x1920으로 작성된 컴포지션 렌더
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

코덱 규칙:

• 소셜/웹 전송은 H.264 MP4 (기본값)를 사용합니다. 최고의 호환성.
• 투명도: --codec=vp8 또는 vp9 (WebM), 또는 알파 채널이 있는 --codec=prores (편집 파이프라인용). H.264는 알파를 지원할 수 없습니다.
• 진정한 60fps는 프레임 수가 일치하도록 조정된 fps={60}을 컴포지션에 설정해야 합니다. 플래그만으로 fps를 변경하면 프레임 단위로 시간이 지정된 모든 애니메이션이 동기화 해제됩니다.

4단계: 동시성 조정

렌더링은 CPU 바운드입니다 (각 프레임은 헤드리스 Chromium 스크린샷). 기본값은 대략 코어 수의 절반이며, 명시적 조정이 가장 쉬운 로컬 속도 향상 방법입니다:

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

물리적 코어 수에서 시작하십시오 (--concurrency=50%는 백분율을 허용합니다). 머신이 스와핑하거나 열 스로틀링을 시작하면 줄이십시오. 적정 지점을 넘으면 Chromium 탭이 많을수록 속도가 느려지고 빨라지지 않습니다.

5단계: 반복적 개선 루프 실행

스튜디오를 열어 두십시오 (npx remotion studio, http://localhost:3000). 사용자가 즉시 미리보기를 볼 수 있도록 하고, 최종 승인을 위해 전체 렌더를 예약하십시오.

1. 사용자가 스튜디오에서 미리보기를 보고 평어로 피드백을 제공합니다.
2. 이를 정밀한 수정으로 변환합니다 - 관련 값만 변경:
   • "너무 빠르다" → interpolate 입력 범위를 넓히거나 스프링 damping을 높입니다.
   • "로고가 더 돋보여야 한다" → 스프링 damping을 낮추거나 오버슈트를 추가합니다.
   • "CTA 문구를 변경" → prop / defaultProps를 수정하고, 다른 것은 건드리지 않습니다.
   • "다른 강조 색상" → colors 객체에서 16진수 하나를 변경합니다.
   • "마지막 피쳐를 더 오래 유지" → 해당 <Sequence>의 durationInFrames를 늘리고 컴포지션의 전체 durationInFrames를 다시 계산합니다.
3. 재렌더링하거나, 시각적 확인을 위해 스튜디오 핫 리로드를 사용합니다.

정밀 수정 vs 재작성: 변경 사항이 값, prop, 색상, 또는 한 장면의 타이밍일 경우 제자리에서 수정하고, 장면 구조가 변경될 때만 재작성합니다 (장면 추가/제거/재정렬 - 구조적 작성은 remotion-compose로 라우팅). 기본값은 정밀 수정입니다: 이미 승인된 모든 것을 보존합니다.

6단계: 배치 변형

컴포지션은 데이터 기반이므로 N개의 변형 = JSON 파일의 N개의 prop 세트:

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props는 인라인 JSON 또는 파일 경로를 허용합니다. 두세 개 이상의 변형이 있는 경우 JSON을 읽고 항목별로 셸 명령을 실행하는 작은 Node 스크립트를 작성하거나, @remotion/renderer의 renderMedia()를 사용하여 타입이 지정된 루프를 만드십시오. 로컬라이즈 또는 A/B 복사 및 색상은 전적으로 JSON을 편집하여 수행합니다.

7단계: 로컬이 병목일 때 Lambda 사용

단일 렌더가 로컬에서 몇 분이 걸리거나 배치가 큰 경우에 Lambda를 사용하십시오. 서버리스 워커에 프레임을 분산시킵니다. 그 외의 경우 로컬이 더 간단하고 무료입니다.

npx remotion lambda functions deploy            # AWS 계정/리전당 한 번
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

Remotion의 Lambda 설정에 따라 AWS 자격 증명과 IAM 권한이 필요합니다.

8단계: 세 가지 일반적인 실패 문제 해결

1. 프레임 수 불일치 - 애니메이션이 조기에 끝나거나 클립에 불필요한 꼬리가 있음. 원인: <Sequence> 기간이 변경되었지만 컴포지션 전체 기간은 변경되지 않음. 해결책: 전체 기간을 시퀀스 합계와 같게 만듭니다. 타이밍 편집 후마다 다시 계산하십시오. 이것은 가장 흔한 렌더링 문제입니다.
2. staticFile() 참조 누락 - 렌더링 실패 또는 asset이 비어 있음. 원인: 경로로 가져오거나 public/ 외부에 있는 asset. 해결책: public/assets/에 넣고 staticFile("assets/<name>")으로 참조합니다.
3. 폰트 깜빡임/대체 - 텍스트가 잘못된 글꼴로 렌더링되거나 밀림. 원인: @remotion/google-fonts loadFont()가 누락되었거나 너무 늦게 호출됨. 해결책: 모듈 최상위 레벨에서 loadFont()를 호출하고 반환된 fontFamily를 적용합니다. 그러면 렌더가 폰트를 기다립니다.

결과물

요청된 사전 설정에 따라 out/에 렌더링된 파일, 그리고 반복 세션의 경우 조정 가능한 차원 (속도, 문구, 색상, 타이밍)을 명명하고 피드백 시 재렌더링하는 루프 제안이 포함됩니다. 배치의 경우 변형 JSON 및 변형별 출력물.

다음을 하지 마십시오

• 값 수준의 변경을 위해 장면 파일을 재작성하지 마십시오. 정밀 수정은 승인된 작업을 보존합니다.
• 플래그만으로 fps를 변경하지 마십시오. 컴포지션에서 설정하고 프레임 수를 다시 조정하십시오.
• 시퀀스 기간을 변경한 후 컴포지션의 전체 durationInFrames를 다시 계산하지 마십시오.
• 매 반복마다 전체 렌더를 하지 마십시오. 스튜디오 핫 리로드가 미리보기 루프입니다. 최종 승인 시 렌더하십시오.
• 스와핑 또는 스로틀링 중인 머신에서 물리적 코어 수 이상으로 동시성을 밀지 마십시오.
• 로컬 렌더가 몇 초 안에 끝날 때 Lambda를 사용하지 마십시오. 이는 AWS 설정과 비용만 추가합니다.
• 여기서 새 장면을 작성하거나 컴포지션을 재구성하지 마십시오. 이는 remotion-compose의 작업입니다.

품질 기준

• 출력이 요청된 해상도/화면 비율/fps로 재생되며, 불필요한 꼬리나 조기 종료가 없어야 합니다 (컴포지션 전체 기간이 시퀀스 합계와 일치).
• Asset과 폰트가 첫 프레임부터 올바르게 렌더링되어야 합니다. 대체 폰트 깜빡임이나 빈 asset이 없어야 합니다.
• 반복은 피드백에 필요한 라인만 변경했으며, 이전에 승인된 모든 것은 그대로 유지됩니다.
• 배치 출력은 prop 세트에 의해서만 달라집니다.

에스컬레이션

장면 작성, 애니메이션 디자인, 컴포넌트 구조는 remotion-compose로, 프로젝트 스캐폴딩은 remotion-setup으로, 점수 및 오디오 타이밍은 sound-and-music-sync로 보내십시오.