Ch.2 JavaScript 라이브러리 15선
Remotion — 코드로 영상 만들기
핵심 개념
Remotion
React 코드로 영상을 프로그래밍하는 프레임워크
핵심 내용
프리미어 없이 React 코드로 영상을 만드는 라이브러리, Remotion을 만나보세요.
Remotion = 코드로 만드는 동영상 편집기. React 컴포넌트를 프레임 단위로 렌더링해서 MP4 영상을 뽑아냅니다. 프리미어 프로나 애프터이펙트 없이, 코드만으로 유튜브 인트로, 데이터 시각화 영상, SNS 릴스를 만들 수 있습니다.
특히 같은 형식의 영상을 대량 생산해야 할 때 빛납니다. 100개의 명언 영상? 프리미어로 100번 작업하는 대신, 코드 한 번 짜고 JSON만 바꾸면 됩니다.
매주 같은 포맷의 영상을 올려야 할 때, 프리미어를 열기 귀찮을 때, 자동화된 영상 파이프라인이 필요할 때.
수동 방식 (프리미어): 텍스트 하나하나 타임라인에 배치. 100개 영상 = 100번 반복. 폰트 바꾸면 전부 다시 수정. 렌더링도 개별로.
Remotion 코드: React 컴포넌트로 템플릿 작성. JSON 데이터만 바꾸면 영상 자동 생성. 1000개 영상도 스크립트 한 번이면 끝.
npx 한 줄로 프로젝트가 생성됩니다. React를 조금이라도 안다면 즉시 시작할 수 있습니다.
npx create-video@latest my-video핵심 개념은 3가지입니다. useCurrentFrame() = 지금 몇 번째 프레임인지 interpolate() = 프레임에 따라 값을 변환 Composition = 영상의 크기와 길이 설정
import { useCurrentFrame, interpolate } from "remotion";
// 이 컴포넌트가 곧 영상의 한 장면입니다
export const MyTitle: React.FC = () => {
const frame = useCurrentFrame(); // 현재 프레임 번호 (0, 1, 2, ...)
// frame이 0→30으로 갈 때, opacity를 0→1로 변환
const opacity = interpolate(frame, [0, 30], [0, 1]);
return (
<div style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
background: "#FFFDF5",
}}>
<h1 style={{ fontSize: 80, fontWeight: "bold", opacity }}>
Hello, Remotion!
</h1>
</div>
);
};npm start를 실행하면 브라우저에 미리보기가 열립니다. 'Hello, Remotion!' 텍스트가 1초(30프레임)에 걸쳐 서서히 나타납니다. 하단 타임라인을 드래그하면 프레임별로 확인할 수 있습니다.
AI에게 영상을 요청할 때는 총 길이(초), 장면 구성, 애니메이션 방식을 구체적으로 지정하세요.
좋은 프롬프트 예시: "Remotion으로 30초짜리 인트로 영상을 만들어줘. 로고 페이드인 + 텍스트 타이핑 효과 + 배경색 전환. 30fps, 1920x1080. Sequence로 3개 장면 분리."
프롬프트 변형: "장면 1(0~3초): 배경 그라디언트가 서서히 변하면서 로고가 spring 애니메이션으로 등장. 장면 2(3~7초): 채널명이 타자기 효과로 한 글자씩 나타남. 장면 3(7~10초): '구독' 버튼이 바운스하며 등장. 마지막에 MP4 렌더링 명령어도 알려줘."
import {
useCurrentFrame, spring, interpolate,
useVideoConfig, Sequence
} from "remotion";
export const Intro: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// 로고: 위에서 떨어지는 spring 애니메이션
const logoY = spring({ frame, fps, from: -200, to: 0, config: { damping: 12 } });
// 부제목: 30프레임 후 페이드인
const subOpacity = interpolate(frame, [30, 60], [0, 1], {
extrapolateRight: "clamp",
});
return (
<div style={{
background: "linear-gradient(135deg, #667eea, #764ba2)",
width: "100%", height: "100%",
display: "flex", flexDirection: "column",
justifyContent: "center", alignItems: "center",
color: "white",
}}>
<Sequence from={0} durationInFrames={90}>
<h1 style={{ transform: `translateY(${logoY}px)`, fontSize: 72 }}>
My Channel
</h1>
</Sequence>
<Sequence from={30} durationInFrames={60}>
<p style={{ opacity: subOpacity, fontSize: 28, marginTop: 20 }}>
코드로 만드는 세상
</p>
</Sequence>
</div>
);
};spring() = 자연스럽게 튀는 움직임 (damping으로 탄성 조절) interpolate() = 프레임→값 매핑 (선형 변환) Sequence = 장면 분리 (from으로 시작 시점 지정) 이 3가지만 알면 대부분의 모션 그래픽을 표현할 수 있습니다.
유튜브 인트로 영상을 만들어봅시다. 로고 등장 → 채널명 → 슬로건 3단계 구성입니다.
import {
useCurrentFrame, spring, interpolate,
useVideoConfig, Sequence, Composition
} from "remotion";
// ── 장면 1: 로고 등장 ──
const LogoScene: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({ frame, fps, from: 0, to: 1, config: { damping: 8 } });
return (
<div style={{
display: "flex", justifyContent: "center", alignItems: "center",
width: "100%", height: "100%",
background: "linear-gradient(135deg, #1a1a2e, #16213e)",
}}>
<div style={{
width: 120, height: 120, borderRadius: 30,
background: "linear-gradient(135deg, #e94560, #ff6b6b)",
transform: `scale(${scale})`,
display: "flex", justifyContent: "center", alignItems: "center",
fontSize: 48, color: "white", fontWeight: "bold",
}}>
VC
</div>
</div>
);
};
// ── 장면 2: 채널명 타이핑 ──
const TitleScene: React.FC = () => {
const frame = useCurrentFrame();
const text = "Vibe Coding";
const charsToShow = Math.min(Math.floor(frame / 3), text.length);
return (
<div style={{
display: "flex", justifyContent: "center", alignItems: "center",
width: "100%", height: "100%",
background: "linear-gradient(135deg, #1a1a2e, #16213e)",
color: "white", fontSize: 64, fontWeight: "bold",
fontFamily: "monospace",
}}>
{text.slice(0, charsToShow)}
<span style={{ opacity: frame % 15 < 8 ? 1 : 0 }}>|</span>
</div>
);
};
// ── 장면 3: 슬로건 페이드인 ──
const SloganScene: React.FC = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1]);
const y = interpolate(frame, [0, 20], [30, 0]);
return (
<div style={{
display: "flex", flexDirection: "column",
justifyContent: "center", alignItems: "center",
width: "100%", height: "100%",
background: "linear-gradient(135deg, #1a1a2e, #16213e)",
color: "#ccc", fontSize: 28,
}}>
<p style={{ opacity, transform: `translateY(${y}px)` }}>
코드 한 줄로 세상을 만든다
</p>
</div>
);
};
// ── 메인 합성 ──
export const YoutubeIntro: React.FC = () => {
return (
<>
<Sequence from={0} durationInFrames={60}><LogoScene /></Sequence>
<Sequence from={60} durationInFrames={60}><TitleScene /></Sequence>
<Sequence from={120} durationInFrames={60}><SloganScene /></Sequence>
</>
);
};
// Root에 등록 (index.ts)
// <Composition id="YoutubeIntro" component={YoutubeIntro}
// width={1920} height={1080} fps={30} durationInFrames={180} />npm start로 미리보기를 확인한 뒤, 아래 명령어로 MP4를 출력합니다. npx remotion render src/index.ts YoutubeIntro out/intro.mp4 6초(180프레임) 짜리 인트로 영상이 out 폴더에 생성됩니다.
채널명과 색상을 props로 받게 만들면 재사용 템플릿이 됩니다. AI에게 "채널명을 props로 받아서 다른 채널에도 쓸 수 있게 수정해줘"라고 요청해보세요.
핵심 용어
Remotion
React 코드로 영상을 프로그래밍하는 프레임워크
유튜브 인트로
채널명, 배경색, 로고만 바꾸면 되는 인트로 영상 자동 생성
데이터 영상
주간 매출 데이터를 받아 차트가 움직이는 보고 영상 제작
SNS 릴스/숏츠
명언, 뉴스 요약을 카드형 영상으로 변환해 대량 생산
제품 데모
앱 화면 캡처 + 자막 + 전환 효과가 들어간 소개 영상
핵심 정리
- 1Remotion은 React 컴포넌트를 프레임 단위로 렌더링해 MP4 영상을 만드는 라이브러리다
- 2useCurrentFrame()으로 현재 프레임, interpolate()로 값 보간, spring()으로 자연스러운 바운스를 구현한다
- 3Sequence 컴포넌트로 장면을 분리하고, from/durationInFrames로 각 장면의 타이밍을 제어한다
- 4npx remotion render 명령어로 브라우저 미리보기 없이 MP4 파일을 바로 출력할 수 있다
- 5props를 활용하면 하나의 템플릿으로 수백 개의 변형 영상을 자동 생성할 수 있다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작