Remotion 트러블슈팅 — 자주 발생하는 에러와 해결법

Remotion 개발에서 자주 발생하는 에러들과 해결법을 정리합니다.

1. 렌더링이 느림

증상: 20분 비디오 렌더링에 수 시간 소요

원인: 기본 concurrency가 CPU 스레드 수의 절반으로 제한

해결:

# 병렬 수 늘리기
npx remotion render --concurrency=4

# Remotion Lambda 사용 (클라우드 렌더링)
npx remotion lambda render

---

2. delayRender 타임아웃

증상: "A delayRender() was called but not resolved" 에러

원인: delayRender()를 호출한 후 continueRender()를 호출하지 않음

해결:

// ❌ 잘못된 예
const handle = delayRender();
fetch(url).then(data => setData(data));
// continueRender()가 없음!

// ✅ 올바른 예
const handle = delayRender('Fetching data...');
fetch(url)
  .then(data => {
    setData(data);
    continueRender(handle);  // ← 반드시 호출
  })
  .catch(err => {
    console.error(err);
    continueRender(handle);  // ← 에러 시에도 호출!
  });

---

3. useState 무한 루프

증상: "too many renderings" 에러

원인: Remotion은 1프레임마다 리렌더링하므로, useState의 상태 변경이 무한 루프를 유발

해결: useState 대신 useCurrentFrame() + interpolate() 사용

// ❌ 잘못된 예
const [opacity, setOpacity] = useState(0);

// ✅ 올바른 예
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);

---

4. CSS 애니메이션이 작동하지 않음

증상: CSS의 transition이나 animation이 의도대로 동작하지 않음

원인: Remotion은 각 프레임을 독립적으로 렌더링하므로, CSS 애니메이션과 동기화되지 않음

해결: Remotion의 애니메이션 API(spring(), interpolate())를 사용

// ❌ CSS transition은 작동하지 않음
// style={{ transition: 'opacity 0.3s ease' }}

// ✅ Remotion API 사용
const frame = useCurrentFrame();
const opacity = spring({ frame, fps: 30, config: { damping: 15 } });

---

5. Lambda 렌더링에서 깜빡임(치라츠키) 발생

증상: Remotion Lambda로 렌더링하면 중간에 검은 화면이 깜빡임

원인: 병렬 렌더링 결합 시의 문제

해결:

• concurrency를 낮춤

• 로컬에서 먼저 렌더링하여 확인 후 Lambda에 전송

• Remotion 버전을 최신으로 업데이트