클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

Remotion 모션 그래픽 제작

React 기반 Remotion으로 '아마추어 티' 없는 전문가급 모션 그래픽 영상을 만들고 검증까지 시키는 스킬.

이미지·영상중급★ 137⑂ 13AI 점수 9/10마지막 업데이트: 2026. 8. 12.

무엇을 해주나

  • Remotion(React로 영상을 렌더링하는 프레임워크) 프로젝트를 처음부터 세팅하거나, 기존 프로젝트를 규칙에 맞게 리팩터링합니다.
  • "AI가 만든 것 같은 영상"의 원인(선형 이징, 페이드만 쓰는 등장, 동시 등장, 단색 배경, 텍스처 없음)을 금지 규칙으로 차단합니다.
  • 배경 메시 → 애셋 → 그래픽/타이포 → 컬러 그레이드 → 그레인+비네트의 5레이어 구조, 스프링/스태거 애니메이션, Ken Burns, 워드 리빌 캡션 등 재사용 패턴을 제공합니다.
  • 렌더 후 특정 프레임을 PNG로 뽑아 직접 눈으로 확인하고 고치는 검증 루프를 강제합니다(간격 버그, 프레임 잘림, 레이어 순서 등 체크리스트 포함).
  • Chromium 자동 다운로드 실패, headless_shell 이슈 같은 렌더 환경 트러블슈팅 명령도 안내합니다.

이런 분께 추천

  • 코드로 영상을 만들고 싶은 프론트엔드/React 개발자
  • 릴스·쇼츠·제품 런치 영상, 인트로/로고 애니메이션을 반복 제작하는 마케터·크리에이터
  • Claude에게 영상 제작을 맡겼는데 결과물이 늘 평범해서 답답했던 사용자

활용 예시

  1. "우리 브랜드 컬러로 1080×1920 제품 런치 릴스 15초 만들어줘" → 테마 파일 생성, 씬 구성, 렌더, 프레임 검증까지 진행.
  2. "public/clip.mp4에 자막과 컬러 그레이드, 인트로 붙여줘" → OffthreadVideo로 원본을 애셋 레이어에 깔고 그래픽·그레인을 위에 스택.
  3. "기존 Remotion 프로젝트가 촌스러워" → src/ 전체를 읽고 선형 이징·단색 배경·단독 페이드를 찾아 스프링/스태거/5레이어로 교정.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/haidrrrry/claude-remotion-skill/HEAD/remotion-motion-graphics/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 haidrrrry/claude-remotion-skill 의 remotion-motion-graphics 폴더를 내 ~/.claude/skills/remotion-motion-graphics/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/haidrrrry/claude-remotion-skill.git /tmp/claude-remotion-skill && mkdir -p ~/.claude/skills && cp -r /tmp/claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. Node.js(18 이상)와 npm이 설치되어 있는지 확인합니다: node -v
  2. 스킬 저장소를 클론합니다: git clone https://github.com/haidrrrry/claude-remotion-skill.git
  3. 스킬 폴더를 Claude 스킬 디렉터리로 복사합니다: mkdir -p ~/.claude/skills && cp -r claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/
  4. ~/.claude/skills/remotion-motion-graphics 안에 references/, assets/theme.ts가 함께 복사되었는지 확인합니다.
  5. Claude Code를 재시작하고 "릴스 영상 만들어줘" 처럼 요청하면 스킬이 자동으로 발동합니다.
  6. 첫 렌더 시 Remotion이 Chromium을 내려받습니다. 사내망·오프라인 환경이면 SKILL.md의 --browser-executable 안내대로 로컬 Chromium 경로를 지정하세요.
GitHub에서 원본 보기 ↗라이선스: MIT