ever-just/agentskills

Remotion Captions — 비디오를 위한 애니메이션 자막

.SRT 파일에서 자막을 가져와 Remotion 비디오에 애니메이션 자막과 캡션을 추가합니다. TikTok 스타일의 단어별 강조, 가라오케 효과 등을 지원합니다.

개요

• 저장소: github.com/ahgsql/remotion-subtitles
• 언어: TypeScript / React
• 라이선스: 오픈 소스
• 설치: npm install remotion-subtitles
• 필요 사항: Remotion 프로젝트

설정

npm install remotion-subtitles

기본 사용법

SRT 파일에서

import { useSubtitles, SubtitleSequence } from "remotion-subtitles";

export const CaptionedVideo: React.FC = () => {
  const subtitles = useSubtitles("./subtitles.srt");

  return (
    <AbsoluteFill>
      <Video src={staticFile("video.mp4")} />
      <SubtitleSequence subtitles={subtitles} />
    </AbsoluteFill>
  );
};

SRT 형식

1
00:00:00,000 --> 00:00:02,500
Custom Agents에 오신 것을 환영합니다

2
00:00:02,500 --> 00:00:05,000
AI 기반 이메일 플랫폼

3
00:00:05,000 --> 00:00:08,000
받은 편지함을 자동으로 관리합니다

자막 스타일링

<SubtitleSequence
  subtitles={subtitles}
  style={{
    position: "absolute",
    bottom: 80,
    left: 0,
    right: 0,
    textAlign: "center",
    fontSize: 42,
    fontWeight: "bold",
    color: "white",
    textShadow: "2px 2px 8px rgba(0,0,0,0.8)",
    fontFamily: "Inter, sans-serif",
  }}
/>

단어별 강조 (TikTok 스타일)

import { useCurrentFrame, interpolate } from "remotion";

export const WordHighlightCaption: React.FC<{
  words: { text: string; startFrame: number; endFrame: number }[];
}> = ({ words }) => {
  const frame = useCurrentFrame();

  return (
    <div style={{
      position: "absolute",
      bottom: 100,
      width: "100%",
      textAlign: "center",
      display: "flex",
      justifyContent: "center",
      gap: 8,
      flexWrap: "wrap",
      padding: "0 60px",
    }}>
      {words.map((word, i) => {
        const isActive = frame >= word.startFrame && frame <= word.endFrame;
        const scale = isActive
          ? interpolate(frame, [word.startFrame, word.startFrame + 3], [1, 1.15], { extrapolateRight: "clamp" })
          : 1;

        return (
          <span
            key={i}
            style={{
              fontSize: 48,
              fontWeight: 800,
              color: isActive ? "#FFD700" : "white",
              textShadow: isActive
                ? "0 0 20px rgba(255,215,0,0.5)"
                : "2px 2px 4px rgba(0,0,0,0.8)",
              transform: `scale(${scale})`,
              transition: "color 0.1s",
              display: "inline-block",
            }}
          >
            {word.text}
          </span>
        );
      })}
    </div>
  );
};

수동 자막 타이밍

SRT 파일이 없는 경우, 자막을 수동으로 정의할 수 있습니다:

const captions = [
  { text: "Custom Agents에 오신 것을 환영합니다", startFrame: 0, endFrame: 75 },
  { text: "AI 기반 이메일 자동화", startFrame: 80, endFrame: 150 },
  { text: "몇 분 만에 에이전트 만들기", startFrame: 155, endFrame: 240 },
];

export const ManualCaptions: React.FC = () => {
  const frame = useCurrentFrame();

  const current = captions.find(
    (c) => frame >= c.startFrame && frame <= c.endFrame
  );

  if (!current) return null;

  const progress = interpolate(
    frame,
    [current.startFrame, current.startFrame + 10],
    [0, 1],
    { extrapolateRight: "clamp" }
  );

  return (
    <div style={{
      position: "absolute",
      bottom: 80,
      width: "100%",
      textAlign: "center",
      opacity: progress,
      transform: `translateY(${(1 - progress) * 10}px)`,
    }}>
      <span style={{
        fontSize: 44,
        fontWeight: 700,
        color: "white",
        backgroundColor: "rgba(0,0,0,0.6)",
        padding: "8px 24px",
        borderRadius: 8,
      }}>
        {current.text}
      </span>
    </div>
  );
};

모범 사례

1. 하단에 배치 — 표준 자막 위치는 중앙 하단입니다
2. 대비 사용 — 흰색 텍스트에 어두운 그림자 또는 반투명 배경을 사용하세요
3. 큰 글꼴 — 비디오에서 가독성을 위해 최소 40-50px을 사용하세요
4. 짧은 구문 — 캡션당 최대 2줄, 6-8단어로 유지하세요
5. 타이밍 버퍼 — 오디오보다 2-3프레임 먼저 자막을 시작하세요
6. 애니메이션 진입 — 미묘한 페이드/슬라이드 인, 종료 시 애니메이션 없음
7. 굵은 글꼴 두께 — 비디오 가독성을 위해 700 이상의 글꼴 두께를 사용하세요

출처

• remotion-subtitles: github.com/ahgsql/remotion-subtitles
• Remotion Audiogram template: github.com/remotion-dev/template-audiogram