Remotion 비디오 툴킷
React 컴포넌트를 작성하고 실제 MP4 비디오를 얻으세요. 이 스킬은 AI 에이전트가 첫 번째 애니메이션부터 프로덕션 렌더링 파이프라인까지 Remotion으로 구축하는 방법을 가르칩니다.
29개의 규칙. 모든 주요 Remotion 기능을 다룹니다.
이걸로 무엇을 만들 수 있나요
대규모 개인화 비디오 사용자 데이터를 JSON props로 전달하고, 사용자별 고유 비디오를 렌더링하세요. Spotify Wrapped, GitHub Unwrapped, 온보딩 워크스루를 생각해보세요 — 하나의 템플릿, 수천 개의 출력물.
자동화된 소셜 미디어 클립 실시간 데이터(통계, 리더보드, 제품 메트릭)를 가져와 아무도 타임라인 편집기를 건드리지 않고 매일 또는 매주 비디오 게시물을 렌더링하세요.
동적 광고 및 마케팅 비디오 고객 이름, 제품 이미지, 가격을 교체하세요. 동일한 템플릿, 무한한 변형. API 또는 Lambda를 통해 서버 측에서 렌더링하세요.
애니메이션 데이터 시각화 대시보드와 KPI 보고서를 애니메이션 차트와 전환으로 공유 가능한 비디오 클립으로 전환하세요.
TikTok 및 Reels 자막 오디오를 텍스트로 변환하고, 단어별로 강조 표시된 자막을 표시하며, 업로드 준비가 된 파일을 내보내세요.
제품 쇼케이스 비디오 데이터베이스에서 이미지, 사양, 가격을 자동 생성하여 바로 MP4로 변환하세요.
교육 및 설명 콘텐츠 애니메이션 강좌 자료, 인증서 비디오, 단계별 워크스루 — 모두 코드로 구동됩니다.
서비스로서의 비디오 생성 렌더링을 HTTP 엔드포인트로 노출하세요. 앱이 JSON을 보내면 비디오 파일을 받습니다.
요구 사항
- Node.js 18+
- React 18+ (Remotion이 React 컴포넌트를 프레임별로 렌더링)
- Remotion —
npx create-video@latest로 스캐폴딩 - FFmpeg —
@remotion/renderer에 포함되어 별도 설치 불필요 - 서버리스 렌더링의 경우: AWS 계정(Lambda) 또는 GCP 계정(Cloud Run)
내부 구성 요소
핵심
| 규칙 | 설명 |
|---|---|
| Compositions | 비디오, 스틸, 폴더, 기본 props, 동적 메타데이터 정의 |
| Rendering | CLI, Node.js API, AWS Lambda, Cloud Run, Express 서버 패턴 |
| 메타데이터 계산 | 렌더링 시간에 기간, 크기 및 props를 동적으로 설정 |
애니메이션 및 타이밍
| 규칙 | 설명 |
|---|---|
| 애니메이션 | 페이드, 확대/축소, 회전, 슬라이드 |
| 타이밍 | 보간 곡선, 이징, 스프링 물리 |
| 시퀀싱 | 씬 지연, 체인, 조율 |
| 전환 | 씬 간 전환 |
| 트리밍 | 모든 애니메이션의 시작 또는 끝 자르기 |
텍스트 및 타이포그래피
| 규칙 | 설명 |
|---|---|
| 텍스트 애니메이션 | 타자기, 단어 강조, 나타내기 효과 |
| 폰트 | Google Fonts 및 로컬 폰트 로딩 |
| 텍스트 측정 | 텍스트를 컨테이너에 맞추고 오버플로 감지 |
미디어
| 규칙 | 설명 |
|---|---|
| 비디오 | 삽입, 트리밍, 속도, 볼륨, 반복, 피치 시프트 |
| 오디오 | 가져오기, 트리밍, 페이드, 볼륨 및 속도 제어 |
| 이미지 | Img 컴포넌트 |
| GIF | 타임라인 동기화 GIF 재생 |
| 자산 | 컴포지션에 미디어 가져오기 |
| 디코드 확인 | 브라우저 호환성 확인 |
캡션 및 자막
| 규칙 | 설명 |
|---|---|
| 캡션 텍스트 변환 | Whisper, Deepgram 또는 AssemblyAI를 통한 오디오-캡션 |
| 캡션 표시 | TikTok 스타일 단어별 강조 표시 |
| SRT 가져오기 | 기존 .srt 파일 로드 |
데이터 시각화
| 규칙 | 설명 |
|---|---|
| 차트 | 애니메이션 막대 차트, 꺾은선 그래프, 데이터 기반 시각화 |
고급 기능
| 규칙 | 설명 |
|---|---|
| 3D 콘텐츠 | Three.js 및 React Three Fiber |
| Lottie | Lottie를 통한 After Effects 애니메이션 |
| TailwindCSS | Tailwind로 컴포지션 스타일링 |
| DOM 측정 | 렌더링 시간에 요소 크기 측정 |
미디어 유틸리티
| 규칙 | 설명 |
|---|---|
| 비디오 길이 | 초 단위 길이 가져오기 |
| 비디오 크기 | 너비와 높이 가져오기 |
| 오디오 길이 | 오디오 길이 가져오기 |
| 프레임 추출 | 특정 타임스탬프에서 프레임 추출 |
빠른 시작
# 프로젝트 스캐폴딩
npx create-video@latest my-video
# 브라우저에서 미리보기
cd my-video && npm start
# MP4로 렌더링
npx remotion render src/index.ts MyComposition out/video.mp4
# 동적 데이터 전달
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
기여하기
소스: github.com/shreefentsar/remotion-video-toolkit
빠진 것이 있나요? 더 나은 접근 방식을 찾았나요? PR을 열어주세요 — 새로운 규칙, 개선된 예제, 버그 수정 모두 환영합니다.
Zone 99 제작