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>(너비/높이/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단계: 반정제적 개선 루프 실행

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

사용자가 Studio에서 미리보고 일반 언어로 피드백을 제공합니다.
이를 수술적 편집으로 변환 - 관련 값만 변경:
- "너무 빠름" → interpolate 입력 범위를 넓히거나 스프링 damping을 높입니다.
- "로고가 더 돋보여야 함" → 스프링 damping 낮추기 / 오버슈트 추가.
- "CTA 문구 변경" → prop / defaultProps 편집, 다른 것은 건드리지 않음.
- "다른 강조 색상" → 색상 객체에서 하나의 헥스 값 변경.
- "마지막 기능을 더 오래 유지" → 해당 <Sequence>의 durationInFrames를 늘리고 컴포지션의 총 durationInFrames도 다시 계산.
재렌더링하거나, 시각적 확인을 위해 Studio 핫 리로드를 사용합니다.

수술적 편집 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()를 사용합니다. JSON만 편집하여 텍스트와 색상을 지역화하거나 A/B 테스트합니다.

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"}'

AWS 자격 증명과 IAM 권한이 필요합니다(Remotion의 Lambda 설정 참조).

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

프레임 수 불일치 - 애니메이션이 조기에 끝나거나 클립에 죽은 꼬리가 있습니다. 원인: <Sequence> 기간이 변경되었지만 컴포지션 총합이 변경되지 않았습니다. 해결 방법: 총합이 시퀀스의 합과 같도록 만들고, 타이밍 편집 후 매번 다시 계산합니다. 이것이 렌더링 실수의 1위입니다.
staticFile() 참조 누락 - 렌더링 실패 또는 자산이 비어 있음. 원인: 경로로 가져오거나 public/ 외부에 있는 자산. 해결 방법: public/assets/에 넣고 staticFile("assets/<name>")으로 참조합니다.
글꼴 깜빡임/폴백 - 텍스트가 잘못된 글꼴로 렌더링되거나 이동합니다. 원인: @remotion/google-fonts의 loadFont()가 누락되었거나 너무 늦게 호출됨. 해결 방법: 모듈 최상위 레벨에서 loadFont()를 호출하고 반환된 fontFamily를 적용합니다. 그러면 렌더링이 글꼴을 기다립니다.

결과물

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

금지 사항

값 수준 변경을 위해 장면 파일을 재작성하지 마십시오 - 수술적 편집이 승인된 작업을 보존합니다.
플래그만으로 fps를 변경하지 마십시오 - 컴포지션에 설정하고 프레임 수를 다시 조정하십시오.
시퀀스 기간을 변경한 후 컴포지션의 총 durationInFrames를 다시 계산하지 마십시오.
모든 반복마다 전체 렌더링을 하지 마십시오 - Studio 핫 리로드가 미리보기 루프입니다. 최종 승인 시에만 렌더링하십시오.
스와핑 또는 스로틀링이 발생하는 머신에서 물리적 코어 수를 초과하는 동시성을 설정하지 마십시오.
로컬 렌더링이 수 초 안에 완료되는데 Lambda를 사용하지 마십시오 - 불필요하게 AWS 설정과 비용을 추가합니다.
여기서 새 장면을 저작하거나 컴포지션을 재구성하지 마십시오 - 이는 remotion-compose의 작업입니다.

품질 기준

출력물이 요청된 해상도/종횡비/fps로 재생되며, 죽은 꼬리나 조기 종료가 없어야 함(컴포지션 총합이 시퀀스 합과 일치).
자산과 글꼴이 첫 번째 프레임에서 올바르게 렌더링되어야 함 - 폴백 글꼴 깜빡임이나 빈 자산이 없어야 함.
반복은 피드백이 요구한 라인만 변경했으며, 이전에 승인된 모든 것은 그대로 유지되어야 함.
배치 출력은 prop 세트에 의해서만 달라져야 함.

에스컬레이션

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

Remotion 렌더링