Remotion Captions

Remotion 4.0부터 공식 자막(captions) 패키지가 추가됐다. Whisper로 자동 트랜스크립션 → SRT 임포트/익스포트 → TikTok 스타일 단어 단위 애니메이션까지 한 번에 처리할 수 있다.

---

📦 캡션 워크플로우

Whisper(Web) → 자동 트랜스크립션 → Caption 객체
      ↓
importing (SRT, VTT) → Caption 객체
      ↓
displaying (<Caption>) → React 컴포넌트 렌더
      ↓
exporting (SRT) → 외부 자막 파일

---

🛠️ 설치

npm i @remotion/captions

(remotion 4.0+ 필요)

---

1️⃣ Whisper로 트랜스크립션

@remotion/whisper-web 패키지로 브라우저에서 직접 음성 → 텍스트 변환:

import { transcribe } from "@remotion/whisper-web";

const { captions } = await transcribe({
  audio: staticFile("speech.mp3"),
  model: "tiny.en",  // tiny / base / small
  language: "ko",    // 한국어
});

📌 tiny 모델은 빠르지만 정확도 낮음. small 권장 (정확도와 속도 균형)

자세한 옵션: Whisper Web 가이드

---

2️⃣ SRT 파일 임포트 / 익스포트

기존 SRT 자막을 가져오거나 생성한 자막을 SRT로 내보낼 수 있다:

import { parseSrt, serializeSrt, createTikTokStyleCaptions } from "@remotion/captions";

// SRT 파싱
const { captions } = parseSrt(srtString);

// SRT 직렬화
const srtOut = serializeSrt(captions);

// TikTok 스타일 (단어 단위 + 최대 글자수 제한)
const tiktokCaptions = createTikTokStyleCaptions({
  captions,
  maxCharsPerLine: 30,
});

---

3️⃣ 화면에 표시

import { AbsoluteFill } from "remotion";
import { Caption } from "@remotion/captions";

export const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      {captions.map((caption, i) => (
        <Caption key={i} caption={caption} />
      ))}
    </AbsoluteFill>
  );
};

기본 <Caption>은 단어 단위 타이밍 정보가 있을 때 단어를 순차적으로 강조 표시한다.

---

4️⃣ 정확한 한글 자막 만들기

한국어 Whisper 트랜스크립션 팁:

• language: "ko" 명시
• 노이즈가 적은 고품질 오디오 사용
• Filler 단어(음, 어, 그) 정제는 후처리에서 직접 필터링

// 후처리로 filler 제거
const cleaned = captions.map(c => ({
  ...c,
  text: c.text.replace(/(음|어|그|아)/g, "").trim(),
})).filter(c => c.text.length > 0);

---

5️⃣ 애니메이션 자막 (Pro)

Remotion Pro의 Animated Captions 패키지는 화려한 단어 단위 애니메이션(스케일, 회전, 색상 변화 등)을 제공한다.

---

📚 영역 구분

• Whisper 상세: Whisper Web 가이드
• 비디오 자르기: Remotion Adding Video
• Pro 애니메이션: Animated Captions
• 한글 hub: Remotion 비주얼 & 미디어

상위 문서: ← Remotion 비주얼 & 미디어 출처: Remotion 공식 문서 — Captions 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

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