핵심 요약 (TL;DR)
Remotion은 React로 영상을 만드는 프레임워크입니다. 바이브코더 루피 원데이클래스에서 다룬 포트폴리오 인트로 영상과 유튜브 템플릿 코드를 공개합니다. git clone 해서 바로 써보세요.
안녕하세요! 바이브코더 루피입니다 :)
원데이클래스 수강하신 분들, 수업 마지막에 말씀드렸던 GitHub 링크 공유합니다. 수업에서 못 다 다룬 부분도 코드에 다 들어있으니 참고하세요.
그리고 Remotion을 처음 들어보시는 분들을 위해, 이게 뭔지도 같이 설명드리겠습니다.
Remotion이 뭔가요?
영상 편집이라고 하면 보통 프리미어 프로나 파이널 컷을 떠올립니다. Remotion은 접근이 완전히 다릅니다. React 코드로 영상을 만듭니다.
const MyVideo = () => {
const frame = useCurrentFrame();
return <h1 style={{ opacity: frame / 30 }}>안녕하세요</h1>;
};
이 코드가 실제로 영상이 됩니다. 텍스트가 서서히 나타나는 1초짜리 영상이죠. 프레임 단위로 React 컴포넌트를 렌더링하고, 그걸 이어 붙여서 MP4로 뽑아내는 원리입니다.
이게 왜 좋은가 하면, 반복 작업을 자동화할 수 있습니다. 매주 같은 포맷의 영상을 만들어야 한다면, 템플릿 코드 하나 만들어두고 데이터만 바꾸면 됩니다. 제가 유튜브 영상을 이 방식으로 만들고 있습니다.
공개 레포 1: portfolio-intro
GitHub: vibecoder-loopy/portfolio-intro
유튜브 라이브에서 같이 만들었던 코드들입니다. 두 가지가 들어있습니다.
포트폴리오 인트로 영상
- 터미널/해커 스타일 자기소개 영상
- 타이핑 애니메이션, 글리치 이펙트, CRT 스캔라인
- ASCII 프로그레스 바
- 장면 전환 플래시 효과
SRT 기반 자막 영상
- SRT 자막 파일을 넣으면 자동으로 영상이 만들어짐
- 틱톡 스타일 단어 하이라이트 자막 (카라오케 방식)
- 씬별 자동 색상 테마 변경
- 왼쪽 모션그래픽 + 오른쪽 자막 레이아웃
Remotion 입문용으로 좋습니다. 구조가 단순해서 코드를 읽으면서 Remotion이 어떻게 동작하는지 감을 잡기 좋거든요.
공개 레포 2: loopy-youtube-template
GitHub: vibecoder-loopy/loopy-youtube-template
이건 제가 진짜 쓰는 유튜브 영상 템플릿 코드입니다. 전체 파이프라인이 자동화되어 있습니다.
음성 녹음 → Whisper STT → SRT 자막 → Claude Code가 씬 JSON 생성 → Remotion 렌더링 → MP4 완성
핵심은 Claude Code가 자막을 읽고 알아서 영상 구성을 짜준다는 것입니다. 14가지 씬 타입(타임라인, 비교표, 차트, 플로우 다이어그램 등) 중에서 내용에 맞는 걸 AI가 골라서 배치합니다.
주요 특징:
- 14개 씬 타입 (SectionTitle, IconGrid, BarChart, DonutChart, FlowDiagram 등)
- 레트로 픽셀 스타일 (네오둥근모 폰트, CRT 이펙트)
- Zod 스키마 검증 (AI가 생성한 JSON이 올바른 구조인지 자동 체크)
- 쇼츠 지원 (--shorts 플래그로 세로 영상 출력)
- 원커맨드 실행: npm run generate your-script.srt
시작하는 방법
두 레포 모두 사용법은 같습니다.
git clone https://github.com/vibecoder-loopy/portfolio-intro.git
cd portfolio-intro
npm install
npm run dev
npm run dev를 실행하면 브라우저에서 Remotion Studio가 열립니다. 타임라인이 있는 영상 미리보기 화면이 뜨는데, 여기서 코드를 수정하면 실시간으로 반영됩니다.
영상을 MP4로 뽑으려면:
npx remotion render
어디서부터 손대야 할지 모르겠다면, 레포 링크를 Claude에 넣고 "이 프로젝트 구조 설명해줘" 또는 "여기서 색상 바꾸려면 어떻게 해?" 같은 식으로 물어보세요. 진짜 잘 알려줍니다.
커스터마이징 아이디어
- portfolio-intro: 자기소개 텍스트를 본인 내용으로 바꾸기, 색상 테마 변경, 새로운 씬 추가
- loopy-youtube-template: 폰트 변경, 새로운 씬 타입 추가, AI 프롬프트 수정해서 다른 스타일의 구성 만들기
두 레포의 관계를 보면, portfolio-intro가 기초편이고 loopy-youtube-template이 실전편입니다. Remotion에 익숙해지고 싶다면 portfolio-intro부터 뜯어보는 걸 추천합니다.
자주 묻는 질문
Remotion을 쓰려면 React를 알아야 하나요?
기본적인 React 문법(컴포넌트, props, state)을 알면 좋습니다. 다만 바이브코딩으로 접근한다면, AI에게 "이 Remotion 프로젝트에서 이런 장면 추가해줘"라고 말하는 것만으로도 상당 부분 가능합니다.
영상 렌더링이 오래 걸리나요?
1분 영상 기준 보통 1~3분 정도 걸립니다. 해상도와 이펙트 복잡도에 따라 달라지지만, 프리미어에서 인코딩하는 것과 비슷한 수준입니다.
무료인가요?
Remotion 자체는 개인 프로젝트에 무료입니다. 상업적 사용 시에는 라이선스가 필요합니다.
댓글 (0)
아직 댓글이 없습니다.