Remotion 비디오
Remotion을 사용하여 애니메이션 숏폼 비디오(1080x1920)를 만듭니다. 6가지 비디오 유형, 각각 연구 후 애니메이션 워크플로우를 따릅니다.
Remotion을 사용하는 이유
Remotion은 코드를 렌더링하며, 픽셀을 렌더링하지 않습니다. AI는 코드를 기본적으로 이해합니다 — 불투명도 변수를 변경하는 것은 명확하지만, 래스터 프레임에서 어떤 픽셀이 "제목"을 구성하는지 결정하는 것은 모호합니다. 코드는 또한 해상도 독립적 출력, 재사용 가능한 컴포넌트, 즉시 미리보기, Git 기반 버전 관리를 의미합니다.
사전 요구 사항
이 스킬을 사용하려면 Remotion 베스트 프랙티스 스킬이 필요합니다. 시작하기 전에 프로젝트에 Remotion 스킬이 설치되어 있는지 확인하세요. 설치되어 있지 않다면 사용자에게 다음 명령어를 실행하도록 안내하세요:
npx skills add remotion-dev/skills
자세한 내용은 Remotion Agent Skills 문서를 참조하세요.
유형 선택
사용자의 입력에서 비디오 유형을 결정합니다:
| 사용자 제공 내용 | 비디오 유형 | 참조 파일 로드 |
|---|---|---|
| 가르치거나 설명할 주제 | 교육용 설명 | education-explainer.md |
| 제품 URL | 제품 데모 + 론칭 | product-demo.md |
| Google 비즈니스 / Maps 링크 | 사용자 후기 / 사회적 증명 | testimonial.md |
| 토킹헤드 비디오 파일 (9:16) | 아바타 + 애니메이션 오버레이 | avatar-overlays.md |
| CSV 또는 데이터 파일 | 데이터 시각화 대시보드 | data-viz.md |
| 채널/브랜드/소셜 URL | 하단 써드 / 오버레이 | lower-thirds.md |
해당하는 유형 참조 파일만 로드하고, defaults.md는 공통 설정(안전 영역, 글꼴, 애니메이션 규칙, 시각적 스타일)을 위해 함께 로드합니다.
추가 참조 파일 (필요 시 로드)
모든 비디오에 필요한 파일은 아닙니다. 상황에 따라 필요할 때만 로드하세요:
- integrations.md — 사용자가 Playwright(웹 스크래핑), Lottie 애니메이션, 3D 애셋, 음성 해설, 또는 AI 생성 이미지가 필요할 때 로드합니다. 일부 통합은 API 키가 필요하므로 항상 사용자에게 먼저 물어보세요.
- advanced-patterns.md — 사용자가 타이밍 슬라이더, 모든 컴포지션에 대한 컨트롤, 카탈로그에서 여러 비디오 생성, 투명 렌더링, 사용자 정의 전환, 또는 Git 기반 저장 워크플로우를 원할 때 로드합니다.
공통 워크플로우
모든 유형은 동일한 2단계 패턴을 따릅니다:
1단계: 리서치 / 스크래핑 / 분석
비디오 유형에 따라 정보를 수집합니다(주제 리서치, 웹사이트 스크래핑, 리뷰 스크래핑, 비디오 전사, 또는 데이터 분석). 결과와 제안된 장면 개요를 제시하세요. 코드를 작성하기 전에 사용자의 승인을 기다리세요.
2단계: 디자인 및 애니메이션
승인 후 모든 장면을 Remotion React 컴포넌트로 빌드하세요. defaults.md의 애니메이션 규칙을 따릅니다:
- 스프링 진입(
damping: 200), 선형 모션 없음 - 관련 항목을 8-12프레임 간격으로 배치
- 장면 간 12프레임 페이드 전환
TransitionSeries - 다이어그램/순서도 그리기를 위한 SVG
stroke-dashoffset interpolate()+tabular-nums를 사용한 카운트업 애니메이션- 축하/마무리 순간을 위한 입자 효과
3단계: 다듬기(선택 사항)
비디오가 올바르게 재생된 후, 컨트롤 추가를 제안하세요:
- 타이밍 슬라이더 — 컴포지션에 실시간 컨트롤을 추가하려면 advanced-patterns.md 참조
- 통합 — Lottie 애니메이션, 3D 효과, 음성 해설 등은 integrations.md 참조
미리보기
빌드 후 Remotion Studio를 실행하세요:
npx remotion studio
디자인 원칙
- 각 장면은 명확한 시각적 은유가 필요합니다 — 다이어그램, 순서도, 아이콘, 단계별 애니메이션
- 텍스트 벽은 없습니다 — 밀도 있는 정보, 아름다운 움직임, 빠른 템포
- Kurzgesagt meets Fireship: 복잡한 아이디어를 시각적으로 직관적으로 만듦
- 모든 그래픽은 기본적으로 SVG 컴포넌트로 빌드; Lottie 및 3D는 integrations.md를 통해 사용 가능
- 안전 영역을 존중하세요(defaults.md 참조) — 모서리 근처에 중요한 것은 배치하지 마십시오
크레딧
Sabrina Ramonov의 비디오 프롬프트와 Remotion AI 비디오 편집 튜토리얼의 프로덕션 인사이트를 기반으로 제작되었습니다. 구성 가능한 기본값과 점진적 공개를 갖춘 Agent Skill로 적용되었습니다.