Remotion 에이전트 스킬로 Claude Code에서 React 영상 생성하기

영상 편집 툴 없이 코드로 MP4를 뽑고 싶다는 생각, 한 번쯤 해봤을 거예요. Remotion이 그걸 가능하게 해주는데, 이제 Claude Code에 에이전트 스킬로 연결하면 AI가 TypeScript 코드를 직접 짜서 렌더링까지 해줘요. 솔직히 설치가 이렇게 간단한 줄은 몰랐어요.

준비물

• Node.js 16 이상 (Remotion v5.0 이후로 올릴 계획이면 Node.js 18+)
• Claude Code 설치 및 로그인 완료
• 터미널에서 npx 사용 가능한 환경

스텝 1: 에이전트 스킬 설치

Claude Code가 Remotion을 이해하려면 스킬을 먼저 등록해야 해요. 이 명령 한 줄이 Remotion 관련 컨텍스트와 도구 사용법을 Claude Code에 주입해요.

npx skills add remotion-dev/skills

설치가 끝나면 Claude Code 세션에서 Remotion 관련 질문을 하거나 코드 생성을 요청할 수 있어요.

스텝 2: 새 영상 프로젝트 스캐폴딩

빈 프로젝트를 만들어요. Tailwind 없이 순수 Remotion 구조만 잡아주는 플래그를 쓰는 게 처음엔 깔끔해요.

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video

src/ 아래에 Composition.tsx와 Root.tsx가 생기고, 여기서 프레임을 정의하게 돼요.

스텝 3: Claude Code에 영상 구조 요청

Claude Code 채팅창에서 원하는 영상을 설명하면 돼요. 예를 들면 이렇게요.

30프레임짜리 텍스트 페이드인 애니메이션 컴포지션 만들어줘.
배경은 검정, 텍스트는 흰색으로 "Hello, Remotion" 출력.

Claude Code가 스킬 컨텍스트를 갖고 있어서 useCurrentFrame, interpolate, spring 같은 Remotion API를 제대로 써서 코드를 만들어줘요. 일반 GPT에 물어보면 API를 틀리게 쓰는 경우가 많은데, 스킬이 있으면 그 오차가 확 줄어요.

스텝 4: 스튜디오로 미리보기

코드가 생기면 브라우저에서 바로 확인할 수 있어요.

npx remotion studio

localhost:3000이 열리고 타임라인과 프리뷰가 보여요.

확인 방법

렌더 전에 특정 프레임만 뽑아서 확인해볼 수 있어요. 30번 프레임을 25% 스케일로 PNG로 저장하는 명령이에요.

npx remotion still <composition-id> --scale=0.25 --frame=30

out/ 폴더에 PNG가 생기면 설정이 제대로 된 거예요. <composition-id>는 Root.tsx에서 <Composition id="..."> 에 넣은 값이에요.

응용

프레임 정의를 Claude Code에 맡기는 게 핵심이에요. "데이터 배열을 받아서 막대그래프가 올라오는 15초짜리 영상" 같은 요청도 스킬이 있으면 꽤 정확하게 뽑아줘요. 디자인 시스템 토큰을 코드에 직접 박아서 브랜드 컬러 영상을 자동 생성하는 파이프라인으로 이어가기도 좋아요.

트러블슈팅

npx skills add 실행 시 command not found: skills 오류가 나면 Node.js 버전을 확인해요. 16 미만이면 Remotion 의존성을 깔지 못해요.

Claude Code가 Remotion API를 여전히 틀리게 쓴다면 스킬이 현재 세션에 로드됐는지 확인해야 해요. 세션을 새로 열고 다시 시도하면 대부분 해결돼요.

remotion studio가 포트 충돌로 안 열리면 --port=3001 플래그를 붙이면 돼요.

스킬 설치 하나로 Claude Code가 Remotion 문서를 알고 있는 상태가 되니까, 그다음부터는 영상 스펙을 말로 설명하는 것만으로 TypeScript 코드가 나오고 렌더까지 이어지는 흐름을 쓸 수 있게 돼요.