Remotion Client-side Rendering

브라우저 안에서 직접 영상을 렌더링하는 기능. 사용자가 자기 브라우저에서 mp4를 만들어 다운로드하는 SaaS 등에 적합.

---

📦 설치

npm i @remotion/renderer

@remotion/renderer는 SSR과 Client-side 양쪽에서 사용. Web APIs 추가 임포트 필요.

---

🛠️ 기본 사용법: renderMediaOnWeb()

import { renderMediaOnWeb } from "@remotion/renderer";

const { blob } = await renderMediaOnWeb({
  composition: {
    id: "MyComposition",
    width: 1920,
    height: 1080,
    fps: 30,
    durationInFrames: 150,
  },
  serveUrl: "https://my-bucket.s3.amazonaws.com/bundle/index.html",
  inputProps: { title: "Hello" },
});

// blob을 사용자에게 다운로드 제공
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "out.mp4";
a.click();

---

🖼️ renderStillOnWeb() — 한 프레임

import { renderStillOnWeb } from "@remotion/renderer";

const { blob } = await renderStillOnWeb({
  composition: { /* ... */ },
  serveUrl: "https://...",
  frame: 60,
});

---

🌐 Serve URL

Client-side는 로컬 번들 빌드가 불가능하므로, 미리 빌드된 번들을 호스팅해야 한다:

# 번들 빌드 후 S3/Vercel Blob/Cloudflare R2 등에 업로드
npx remotion bundle src/index.ts out/bundle

# 또는 Lambda로 deploy
npx remotion lambda sites create --site-name=my-site
# → https://my-bucket.s3.amazonaws.com/sites/my-site/2024-01-01/index.html

📌 Lambda Sites 사용이 가장 간편. https://www.remotion.dev/docs/lambda/sites

---

🎬 코덱 / 포맷 가용성

getEncodableVideoCodecs() / getEncodableAudioCodecs()로 브라우저가 지원 가능한 코덱을 먼저 확인:

import { canRenderMediaOnWeb, getEncodableVideoCodecs, getEncodableAudioCodecs } from "@remotion/renderer";

if (!canRenderMediaOnWeb()) {
  alert("브라우저가 WebCodecs + WebAssembly를 지원하지 않습니다.");
  return;
}

const videoCodecs = await getEncodableVideoCodecs();
const audioCodecs = await getEncodableAudioCodecs();
console.log("Available video codecs:", videoCodecs);

---

🧪 WebCodecs 폴리필 (Mediabunny)

Safari 등 WebCodecs 미지원 브라우저는 Mediabunny 폴리필 사용:

import { MediabunnyMetadata } from "@remotion/mediabunny";

const { blob } = await renderMediaOnWeb({
  composition: { /* ... */ },
  serveUrl: "https://...",
  // Mediabunny 자동 적용
});

자세한 호환성: Client-side rendering 호환성

---

⚠️ 알아둘 점

한계	설명
WebCodecs 필수	Chrome 94+, Edge 94+, Safari (16.4+)
메모리	큰 영상은 브라우저 탭이 죽을 수 있음 → blob URL 사용
CPU 집약	사용자가 다른 작업 못함 (워커 권장)
License	remotion License는 동일

---

💡 실전 패턴: Web Worker에서 렌더

// worker.ts
import { renderMediaOnWeb } from "@remotion/renderer";

self.addEventListener("message", async (e) => {
  const { blob } = await renderMediaOnWeb(e.data);
  self.postMessage({ blob });
});

메인 스레드를 막지 않으면서 렌더링.

---

📚 영역 구분

• 서버 렌더: Remotion Server-side Rendering (SSR)
• 클라우드: Remotion Lambda / Cloud Hosting
• 한글 hub: Remotion 렌더링

상위 문서: ← Remotion 렌더링 출처: Remotion 공식 문서 — Client-side rendering 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Client-side rendering 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동