RemotionUI 에이전트
이 스킬은 일회성 효과가 아닌 전체 Remotion 컴포지션을 RemotionUI로 구축할 때 사용합니다.
엄격한 규칙
- 프레임워크 기본 사항은 Remotion 문서를 사용하세요.
- RemotionUI는 사용자 레포지토리에 복사되는 소스 컴포넌트를 제공합니다.
- 컴포넌트를 임포트하기 전에
npx remotion-ui@latest add <component>를 실행하세요. - 로컬 경로에서 임포트:
@/compositions/...,@/remotion/scenes/...,@/remotion/primitives/... - 절대
remotion-uinpm 패키지에서 UI 컴포넌트를 임포트하지 마세요. CLI만 제공하며 컴포넌트 라이브러리는 아닙니다. 컴포넌트는 shadcn/ui처럼 복사-붙여넣기되는 소스 파일입니다.
Remotion 애니메이션 규칙 (필수)
RemotionUI 컴포넌트는 일반 Remotion 소스 파일입니다. 모든 렌더 타임 모션은 Remotion의 프레임 기반 프리미티브로 구동되어야 하며, 브라우저 타이밍 API를 사용하지 마세요. 출력물은 프레임 단위로 서버 측에서 렌더링되고 브라우저에서 실시간 재생되지 않기 때문입니다:
useCurrentFrame()으로 현재 프레임을 읽고,interpolate()로 프레임 범위를 값 범위에 매핑하고,spring()으로 물리적이고 안정적인 움직임을 만드세요.- 타이밍 시퀀싱은
<Sequence from={...} durationInFrames={...}>를 사용하세요.setTimeout,setInterval,requestAnimationFrame은 절대 사용하지 마세요. - 렌더링된 비디오에 나타나야 하는 모든 모션에 CSS 전환, CSS
animation/@keyframes, 또는 Tailwind 애니메이션 유틸리티 클래스(animate-*,transition-*)를 절대 사용하지 마세요. 이들은 라이브 브라우저에서 벽시계 시간에 따라 실행되며, Remotion의 서버 측 렌더링 중 프레임 정확도가 없어 출력에서 잘못 보이거나 완전히 누락됩니다. - 정적 레이아웃/간격/색상 클래스에 Tailwind를 사용하는 것은 괜찮습니다. 규칙은 모션/타이밍에만 적용됩니다.
- 모든 불투명도/위치/크기/회전 값은
interpolate(frame, [inputRange], [outputRange], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })또는spring({ frame, fps, config })에서 파생한 후 인라인style로 적용하세요 (예:style={{ opacity, transform: \translateY(${y}px)` }}`). fps는 하드코딩된 상수가 아닌useVideoConfig()에서 가져오세요.
워크플로우
- 비디오 목표 파악 (소셜 클립, 팟캐스트, 데이터 스토리, 제품 소개).
- https://remotionui.com/ai/components.json 에서 플래그십 컴포지션 선택.
- 설정이 손상된 경우
npx remotion-ui doctor실행. - 설치:
npx remotion-ui add <name> - 로컬 소스 경로에서 임포트하여
Root.tsx에서 구성. - 복사된 소스를 브랜드, 타이밍, 레이아웃에 맞게 커스터마이징 — 위 애니메이션 규칙을 따름.
에이전트 인덱스
- 컴포지션: https://remotionui.com/ai/components.json
- 컴포지션별 세부 정보: https://remotionui.com/ai/components/.json
- 전체 가이드: https://remotionui.com/ai/remotionui-agent.md
- 레지스트리: https://remotionui.com/r/index.json
CLI (에이전트 친화적)
npx remotion-ui init --existing # remotion-ui.json 부트스트랩
npx remotion-ui doctor --json # 설정 진단
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add social-clip caption-highlight
기존 Remotion 프로젝트
cd your-remotion-project
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev
컴포지션 우선 기본값
| 목표 | 플래그십 컴포지션 |
|---|---|
| 9:16 소셜 클립 | social-clip |
| 크리에이터 릴 | creator-reel |
| 팟캐스트 클립 | podcast-clip |
| 데이터 설명 | data-story |
| 제품 출시 | intro |