haidrrrry/claude-remotion-skill

Claude Remotion Skill – 빠른 개요

정의 – Anthropic의 Claude (Claude Code, Claude Desktop 등)를 위한 오픈 소스 에이전트 스킬입니다. 이 스킬을 설치하면 간단한 영어로 Claude에게 비디오 제작이나 편집을 요청할 수 있습니다. Claude는 Remotion 프로젝트 (비디오용 React + TypeScript 코드)를 작성하고, 렌더링하며, ffmpeg로 프레임을 추출하여 검사하고, 문제를 수정한 뒤 최종적으로 세련된 모션 그래픽 클립을 반환합니다.

중요성 – AI 기반 비디오 제작을 텍스트-비디오 모델이 생성하는 "단순한 페이드" 방식에서 벗어나, 전문적인 디자인 규칙(스프링, 스태거드 엔트런스, 컬러 그레이딩, 그레인, Ken Burns 효과 등)을 따르는 결정론적이고 코드 기반의 모션 그래픽으로 전환합니다. 결과물은 다른 코드 프로젝트와 마찬가지로 완전히 재렌더링 및 편집이 가능합니다.

주요 구성 요소

• remotion-motion-graphics/ – Claude가 읽는 스킬 폴더.
• SKILL.md – 워크플로우 설명 및 10가지 필수 모션 규칙.
• references/ – 즉시 사용 가능한 모션 패턴 스니펫 및 디자인 가이드라인.
• assets/theme.ts – 색상, 이징, 스프링 프리셋을 정의하는 단일 테마 파일.
• examples/ – 즉시 실행 가능한 컴포지션을 보여주는 Remotion 프로젝트 예제.

시작하기

1. 저장소를 클론합니다.
2. remotion-motion-graphics 폴더를 ~/.claude/skills (사용자별) 또는 프로젝트 내의 .claude/skills (프로젝트별)에 복사합니다.
3. Claude Desktop에서 생성된 .skill 파일을 업로드하거나, 폴더를 자동으로 인식하는 Claude Code를 사용합니다.
4. Claude에게 프롬프트를 입력합니다 (예: “make a 3‑second logo sting”). Claude가 스킬을 읽고, Remotion 코드를 작성하고, npm run render를 실행하고, 프레임을 추출 및 검사하여 최종 MP4를 반환합니다.

Claude에게 요청할 수 있는 작업

• 로고 인트로, 세로형 TikTok/Reel 인트로, 키네틱 타이포그래피 자막, 하단 자막(lower-thirds), 제품 설명 영상 등 제작.
• 모션 디자인 세부 사항(스태거, 이징, 그레인, Ken Burns) 추가 또는 수정.
• 자막과 음성 동기화, 또는 애니메이션과 비트 동기화.

디자인 철학 (10가지 규칙) – 선형 보간을 사용하지 말고 항상 스프링/베지에 곡선을 사용하십시오. 2~3개의 속성을 동시에 애니메이션화하십시오. 모든 요소를 스태거(엇갈리게)하십시오. 빠른 종료 애니메이션을 제공하십시오. 레이어 순서는 배경 메시 → 에셋 → 그래픽 → 그레이딩 → 그레인/비네트 순입니다. 정지 이미지에는 Ken Burns 효과를 적용하십시오. 미세한 호흡 모션을 추가하십시오. 타이밍은 FPS를 기준으로 하십시오. 모든 스타일은 단일 theme.ts에 유지하십시오. 항상 렌더링 → 검사 → 수정 → 재렌더링 과정을 거치십시오.

데모 및 예제 – README의 GIF/MP4 데모에서 짧은 모션 그래픽 클립을 확인할 수 있습니다. examples/ 폴더에는 4개의 전체 컴포지션(프로필 프로모션, Focus Cat 앱 프로모션, 자동 수정 데모, 비트 동기화 코드 편집)이 포함되어 있으며, npm install과 제공된 스크립트로 로컬에서 렌더링할 수 있습니다.

라이선스 및 커뮤니티 – MIT 라이선스로 자유롭게 사용 및 포크할 수 있습니다. 풀 리퀘스트(새로운 모션 패턴, 팔레트, 버그 수정)를 통한 기여를 환영합니다. 스타를 눌러주시면 프로젝트 발견에 큰 도움이 됩니다.

---

비전문가를 위한 요약

스킬을 설치하고 Claude와 대화하세요. Claude가 After Effects 없이도 전문적인 애니메이션 비디오를 작성하고 렌더링해 줍니다. 영구적으로 보관하고 수정할 수 있는 코드로 결과물을 얻을 수 있습니다.