생성형 AI 대신 Remotion 코드로 제품 페이지를 시네마틱 홍보 영상으로 만드는 Claude Code 및 Codex용 에이전트 스킬입니다.
haidrrrry/claude-remotion-skill
Remotion으로 코드에서 모션 그래픽 영상을 만들고 편집하도록 Claude를 가르치는 MIT 라이선스 에이전트 스킬입니다.
대체할 수 있는 제품:After Effects
- 스타
- 536
- 포크
- 70
- 열린 이슈
- 0
- 마지막 커밋
- 2개월 전
어떤 프로젝트인가요?
Claude Remotion Skill은 Claude Code, Claude Desktop, Claude.ai용 에이전트 스킬입니다. 설치하면 After Effects나 Premiere 같은 타임라인 편집기에 의존하는 대신, 영상 제작을 위한 React 및 TypeScript 프레임워크인 Remotion으로 영상을 만들도록 Claude를 안내합니다. 이 스킬에는 선형 보간 대신 스프링 및 베지어 이징 사용, 요소의 순차적인 등장과 퇴장, 그레인과 비네팅을 적용하는 레이어형 컬러 그레이딩, 스틸 이미지에 적용하는 Ken Burns 효과, 단어 단위로 동기화되는 자막 등 모션 디자인 규칙이 포함되어 있습니다.
이 스킬의 워크플로에서는 Claude가 클립을 렌더링하고, ffmpeg로 프레임을 추출해 살펴본 뒤, 문제를 수정하고 다시 렌더링한 다음 결과물을 전달해야 합니다. 저장소에는 리빌, 컬러 그레이딩, 그레인, 자막, 트랜지션에 바로 복사해 쓸 수 있는 컴포넌트와 색상, 이징, 스프링 프리셋을 위한 theme.ts 템플릿이 포함된 Markdown 레퍼런스 폴더가 제공됩니다.
저장소에는 프로필 프로모션 영상, 합성 사운드트랙에 맞춰 비트를 동기화한 코드 편집 영상 등 완성된 컴포지션이 여러 개 포함된 Remotion 예제 프로젝트도 있습니다.
핵심 기능
- 01Claude가 선형 모션을 피하도록 스프링 및 베지어 이징 규칙을 추가합니다.
- 02리빌, 컬러 그레이딩, 필름 그레인, Ken Burns 효과용 Remotion 컴포넌트를 바로 복사해 쓸 수 있도록 제공합니다.
- 03단어 단위로 동기화되는 자막과 로어 서드 스타일의 텍스트 애니메이션을 지원합니다.
- 04전달 전에 렌더링하고, ffmpeg로 프레임을 추출해 확인하도록 합니다.
- 05색상, 이징, 스프링 프리셋을 하나의 theme.ts 파일에서 관리합니다.
- 06Claude Code에는 사용자별 또는 프로젝트별로 설치할 수 있고, Claude Desktop에는 .skill 파일을 업로드해 사용할 수 있습니다.
활용 사례
- 텍스트 프롬프트로 로고 스팅, 브랜드 인트로, 제품 설명 영상을 만듭니다.
- 애니메이션 자막을 넣은 Reels, Shorts, TikToks 같은 세로형 숏폼 영상을 제작합니다.
- 일관된 모션 디자인 규칙을 적용해 단조롭거나 평범한 Remotion 영상을 개선합니다.
- B-roll, 자막, 사운드를 결합한 얼굴 없는 콘텐츠 영상을 만듭니다.
빠른 시작
- 1
저장소를 클론합니다
git clone https://github.com/haidrrrry/claude-remotion-skill.git - 2
사용자별 Claude 스킬 폴더를 만듭니다
mkdir -p ~/.claude/skills - 3
스킬 폴더를 Claude Code에 복사합니다
cp -r claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/ - 4
스킬을 테스트할 짧은 로고 스팅을 만들어 달라고 Claude에 요청합니다
사용 전 알아둘 점
- Claude를 위한 지침 모음이므로 Claude Code, Claude Desktop 또는 스킬을 지원하는 Claude AI가 필요합니다.
- 사용하려면 Claude 구독 또는 API 액세스가 필요하며, 동영상을 렌더링하려면 Remotion도 설정해야 합니다.
- 스킬의 프레임 검사 단계는 ffmpeg에 의존하지만, 설치 안내에는 ffmpeg 설정 방법이 포함되어 있지 않습니다.
토픽
자주 묻는 질문
- claude-remotion-skill은(는) 무엇인가요?
- Remotion으로 코드에서 모션 그래픽 영상을 만들고 편집하도록 Claude를 가르치는 MIT 라이선스 에이전트 스킬입니다. Claude Remotion Skill은 Claude Code, Claude Desktop, Claude.ai용 에이전트 스킬입니다. 설치하면 After Effects나 Premiere 같은 타임라인 편집기에 의존하는 대신, 영상 제작을 위한 React 및 TypeScript 프레임워크인 Remotion으로 영상을 만들도록 Claude를 안내합니다. 이 스킬에는 선형 보간 대신 스프링 및 베지어 이징 사용, 요소의 순차적인 등장과 퇴장, 그레인과 비네팅을 적용하는 레이어형 컬러 그레이딩, 스틸 이미지에 적용하는 Ken Burns 효과, 단어 단위로 동기화되는 자막 등 모션 디자인 규칙이 포함되어 있습니다.
- claude-remotion-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- claude-remotion-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- claude-remotion-skill은(는) 아직 유지보수되고 있나요?
- 6개월 이내 업데이트. claude-remotion-skill의 마지막 커밋은 2026년 8월 12일입니다.
- claude-remotion-skill은(는) 어디에 사용할 수 있나요?
- 텍스트 프롬프트로 로고 스팅, 브랜드 인트로, 제품 설명 영상을 만듭니다. 애니메이션 자막을 넣은 Reels, Shorts, TikToks 같은 세로형 숏폼 영상을 제작합니다. 일관된 모션 디자인 규칙을 적용해 단조롭거나 평범한 Remotion 영상을 개선합니다. B-roll, 자막, 사운드를 결합한 얼굴 없는 콘텐츠 영상을 만듭니다.
- claude-remotion-skill는 어떻게 설치하나요?
- 저장소를 클론합니다: git clone https://github.com/haidrrrry/claude-remotion-skill.git 사용자별 Claude 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills 스킬 폴더를 Claude Code에 복사합니다: cp -r claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/ 스킬을 테스트할 짧은 로고 스팅을 만들어 달라고 Claude에 요청합니다
- claude-remotion-skill은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/haidrrrry/claude-remotion-skill
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
AI 코딩 에이전트가 Remotion으로 방송 스타일 모션 그래픽을 만들도록 안내하는 Agent Skills 4종입니다.
AI 에이전트가 바이럴 영상을 편집 가능한 워크플로로 복제하고 변형 영상을 만들 수 있는 video-as-code 툴킷입니다.
Claude Code, Codex, Cursor 같은 AI 코딩 에이전트에 Remotion 영상 제작 모범 사례를 알려주는 Agent Skills 모음입니다.
Claude Code나 Codex로 음성 해설형 설명 영상을 만들고, 단어 단위로 오디오를 동기화해 Remotion으로 렌더링하는 에이전트 스킬
AI 코딩 에이전트가 모션 그래픽, 애니메이션, 영상 워크플로를 만들도록 돕는 설치형 스킬 55종 모음