Remotion Recorder

Remotion Recorder는 화면 녹화 + Remotion 컴포지션을 결합해 화면 위에 오버레이·자막·로고를 자동으로 얹어 영상을 만드는 도구다.

---

💡 사용 사례

• 제품 데모 영상 (UI + 나레이션 + 자막)
• 튜토리얼 (화면 + 화살표·하이라이트)
• 마케팅 영상 (브라우저 시연 + 오버레이)
• 쇼케이스 (앱 화면 + 워터마크)

---

📦 설치

npm i @remotion/recorder

📌 Remotion 4.0+ 필요. Chrome / Edge / Arc / Brave 등 Chromium 기반 브라우저만 지원.

---

🚀 CLI 사용

npx remotion recorder   --url=https://your-app.com/page   --composition=RecorderOverlay   --output=out.mp4   --duration=30000

인자	설명
--url	녹화할 페이지 URL
--composition	오버레이로 얹을 Remotion 컴포지션 ID
--output	출력 파일
--duration	녹화 시간 (ms)
--width / --height	녹화 해상도

---

🎨 오버레이 컴포지션 만들기

src/RecorderOverlay.tsx:

import { AbsoluteFill, useCurrentFrame, useVideoConfig, Audio, staticFile } from "remotion";

export const RecorderOverlay = ({ url }: { url: string }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  return (
    <AbsoluteFill>
      {/* 하단 워터마크 */}
      <div style={{
        position: "absolute",
        bottom: 20,
        right: 20,
        background: "rgba(0,0,0,0.6)",
        color: "white",
        padding: "8px 16px",
        borderRadius: 8,
        fontSize: 18,
      }}>
        Rec with Remotion
      </div>

      {/* 우상단 진행 표시 */}
      <div style={{
        position: "absolute",
        top: 20,
        right: 20,
        color: "white",
        fontSize: 14,
      }}>
        {Math.round((frame / durationInFrames) * 100)}%
      </div>
    </AbsoluteFill>
  );
};

---

🧑‍💻 Programmatic API

import { Recorder } from "@remotion/recorder";

const recorder = new Recorder({
  url: "https://example.com",
  composition: "RecorderOverlay",
  output: "out.mp4",
  duration: 30000,
});

await recorder.start();
// ... 브라우저에서 사용자 인터랙션
await recorder.stop();

---

🎬 녹화 흐름

[ Recorder 시작 ]
    ↓
[ Chromium이 URL 열기 ]
    ↓
[ 화면 캡처 + 오버레이 렌더링 ]
    ↓
[ 프레임 단위 인코딩 ]
    ↓
[ mp4 출력 ]

---

🎙️ 오디오 녹음

시스템 오디오 + 마이크 동시 녹음:

<AbsoluteFill>
  <Audio src={staticFile("narration.mp3")} />
</AbsoluteFill>

⚠️ 시스템 오디오 캡처는 OS / 브라우저 설정에 따라 제한될 수 있음

---

⚠️ 알아둘 점

한계	설명
Chromium only	Chrome, Edge, Arc, Brave만 지원 (Firefox/Safari 미지원)
리소스 사용	1080p 30fps 녹화는 4GB+ RAM 예상
Headless 모드	기본 비헤드리스. 디버깅 시 --headful 옵션
권한	첫 실행 시 화면 캡처 권한 필요

---

💡 실전 팁

• 녹화 전 URL을 사전 로드해 첫 프레임이 빈 화면이 되지 않게
• 컴포지션에 delayRender()로 비동기 자산 로드 대기
• npx remotion recorder --help로 모든 옵션 확인
• 녹화 후 자동으로 mp4에 합성됨 (별도 인코딩 불필요)

---

📚 영역 구분

• 녹화 + 자동화: npx remotion recorder (이 페이지)
• 앱 통합: Remotion Building Apps
• Pro 오버레이: Animated Captions
• 한글 hub: Remotion Studio & Player

상위 문서: ← Remotion Studio & Player 출처: Remotion 공식 문서 — Recorder 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

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