Communitygithub.com

emrecv/motion-graphics-director

빠르고 깔끔한 Remotion 모션 그래픽과 시각적 설명 영상을 제작 및 개선합니다. 강력한 오프닝, 절제된 비주얼, 소싱된 아이콘 및 로고, ElevenLabs 내레이션, 정밀한 프레임 기반 애니메이션을 사용합니다. 코드 생성 비디오에 적합하며, 인터랙티브 웹사이트 애니메이션에는 사용하지 않습니다.

motion-graphics-director란 무엇인가요?

Motion Graphics Director 스킬은 Remotion을 사용하여 전문적인 모션 그래픽 비디오를 제작하는 AI 에이전트(Claude Code, Cursor 등)를 위한 상세한 가이드입니다. 이 스킬의 핵심은 기술적 성공을 넘어 시각적 성공을 추구하는 데 있으며, 첫 3초 이내에 강력한 후크를 배치하고, 절제된 색상과 여백을 활용하여 하나의 초점에 집중하는 디자인 철학을 강조합니다. ElevenLabs 음성 내레이션이 설명을 주도하며, 배경 음악 없이 선택적 음향 효과만 사용하여 의미 있는 이벤트를 강조합니다. Remotion 프로젝트 생성을 위한 스크립트와 참조 문서를 제공하며, 오프닝 3초와 대표 전환 장면을 먼저 빌드하고 검토하는 반복적인 제작 프로세스를 안내합니다. 이 스킬은 Cursor, Claude Code, Windsurf, Cline 등 대부분의 AI 코딩 도구와 호환되며, 설치 후 프로젝트 디렉토리에서 직접 사용하거나 일반 에이전트에게 참조 문서로 제공할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/emrecv/motion-graphics-director/tree/HEAD/skills/motion-graphics-director

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Motion Graphics Director

메커니즘 또는 아이디어를 즉시 흥미롭게 만드세요. 아래 기본 크리에이티브 프로필은 제작자의 선호도를 반영합니다. 사용자의 명시적인 프로젝트 브리프가 이를 재정의할 수 있습니다. 기술적 성공만으로는 시각적 성공이 아닙니다.

기본 크리에이티브 설정

  • 첫 3초 이내에 후크를 배치하세요. 놀라운 시각적 대비, 인식 가능한 문제, 변환 또는 구체적인 결과물로 시작하세요. 즉시 액션을 시작하세요. 소개 타이틀 카드, 로고 프리롤 또는 후크 이전의 느린 설명은 없어야 합니다. 30fps에서 처음 90프레임을 독립적으로 테스트하세요.
  • 의도적인 이징이 적용된 빠르고 깔끔한 모션. 13초의 시각적 비트와 30fps에서 818프레임의 주요 움직임으로 시작하고, 내레이션과 이해도에 맞게 조정하세요. 이는 시작 범위이지 필수 컷이 아닙니다. 완성된 장면을 유지하기보다는 생각을 발전시키세요. 인과 관계 시퀀스가 이해 가능하도록 유지하세요.
  • 하나의 초점과 넉넉한 네거티브 공간. 흰 공간은 여유를 의미하며, 어두운 배경에서도 마찬가지입니다. 절제된 중성 또는 음영 색상을 사용하고, 네온이나 글로우, 장식용 테두리나 윤곽선 카드는 사용하지 마세요. 1080px 너비의 중간 패널에서 약 12-24px의 적당한 모서리 반경을 사용하고 비례를 유지하세요.
  • 내레이션이 설명을 전달합니다. 기본 언어는 영어이며 ElevenLabs 음성 해설을 사용합니다. 큰 제목, 단락, 일상적인 자막, 단계 카운터, 챕터 레이블, 진행 표시줄, 장식용 브랜드 헤더, 경고/면책조항 오버레이는 피하세요. 움직이는 대상을 식별하는 데 도움이 되는 경우 간단한 1-4단어 제목 또는 짧은 레이블은 허용됩니다. 출처, 주의사항 및 구현 노트는 전달 문서에 보관하고, 프레임을 어지럽히지 않으면서 내레이션이 정확하도록 하세요. 요청 시에만 별도의 자막을 제공하세요.
  • 디자인된 에셋을 사용하세요. 하나의 일관된 팩에서 깔끔한 현대 아이콘을 가져오고, 공식 브랜드 리소스에서 실제 관련 제품 로고를 가져오세요. 일반적인 플레이스홀더 SVG 아이콘이나 가짜 로고를 만들지 마세요. 광학 크기, 선 두께 및 스타일을 일치시키세요. icons-and-logos.md를 참조하세요.
  • 배경 음악은 없습니다. 음성과 선택적 음향 효과를 사용하세요. 효과는 의미 있는 이벤트를 표시하며 음성보다 낮은 수준을 유지해야 합니다. Bencho는 종속성이 아니며 해당 에셋은 포함되지 않습니다.

프로젝트 작업

기존 소스, 에셋, 스크립트, 고정된 종속성 및 이전 결정 사항을 검사하세요. 새 Remotion 프로젝트의 경우 python3 <skill>/scripts/new_project.py <new-directory>를 실행한 다음 해당 디렉토리에서 npm ci를 실행하세요. 번들 프로젝트는 테스트된 렌더링 및 미디어 헬퍼를 제공합니다. 해당 FORM 및 CDN 컴포지션은 레거시 기술 예제일 뿐 현재 아트 디렉션 예제가 아닙니다: 긴 샷, 제목, 레이블, 색상 또는 아이콘 그림을 새 영화에 복사하지 마세요.

콘텐츠, 시각적 토큰, 내레이션, 에셋 및 타이밍을 별도로 편집 가능하게 유지하세요. 최종 렌더링을 위해 로컬 미디어와 로드된 폰트를 사용하세요. 익숙하지 않은 API는 공식 Remotion 스킬을 참조하고, 자동으로 업그레이드하지 말고 설치된 버전과 일치시키세요.

제작

  1. 대상, 핵심 메시지, 플랫폼, 길이, 참조 자료, 에셋, 언어 및 음성을 추출하세요. 기본값: 1080 × 1920, 30fps, 약 20초. 누락된 정보에 대해서만 질문하세요.
  2. 오프닝 비주얼과 첫 번째 음성 문장을 함께 작성하세요. 가변 길이 비트가 포함된 짧은 인과 관계 샷 목록을 계획하세요. art-direction.md를 읽고, 프로세스 설명의 경우 technical-explainers.md도 읽으세요. 기술적 주장을 1차 출처와 대조 확인하세요.
  3. 스타일이 결정되지 않은 경우, 대표적인 스타일프레임과 함께 진정으로 다른 두 가지 방향을 보여주세요. 사용자가 이미 룩을 선택했다면 진행하세요. 일상적인 승인 게이트를 도입하지 마세요.
  4. 간결한 음성 스크립트를 작성하고, 에셋을 소싱한 후 audio.md를 따르세요. 편집을 확정하기 전에 승인된 ElevenLabs 내레이션을 생성하거나 가져오세요. 액세스 또는 음성 선택이 누락된 경우 스크립트와 애니메틱을 준비하고, 플레이스홀더 타이밍을 명확히 식별하며 완성된 내레이션을 만들지 마세요.
  5. 처음 3초와 대표적인 전환 장면 하나를 빌드하세요. motion-and-remotion.md를 사용하세요. 후크와 움직임이 작동하면 영화를 확장하세요. 모든 것을 반복해서 렌더링하기보다는 영향을 받는 장면을 수정하세요.
  6. review.md로 검토하세요: 오프닝 후크, 속도, 인과 관계 명확성, 절제된 구성, 음성 정렬, 선택적 효과, 음악 없음. 최종 MP4 이전에 전체 프레임 속도 미리보기를 렌더링하세요.

구현 불변 규칙

이징 및 오디오 엔벨로프를 포함하여 프레임 번호에서 애니메이션을 파생시키세요. 자율 CSS 애니메이션, 벽시계 타이머 또는 시드되지 않은 무작위성은 사용하지 마세요. 독립적인 프레임 렌더링과 스크러빙이 일치해야 합니다. 실제 폰트와 에셋을 기다리세요. 로드된 폰트로 텍스트를 측정하고, 긴 텍스트를 무분별하게 축소하는 대신 재구성하세요.

빠르다는 것이 갑작스러움을 의미하지 않으며, 이징이 바운스를 의미하지 않습니다. 제어된 가속 및 안정화, 조정된 오버랩 및 유용한 곳에 직접 컷을 사용하세요. 스틸이나 피크 측정만으로 내보내기를 보거나 들었다고 주장하지 마세요.

전달 및 개선

재생 가능한 비디오, 편집 가능한 프로젝트, 에셋 출처 및 실제 검사에 대한 간결한 기록을 전달하세요. 문서는 비디오 자체 밖에 보관하세요. 스킬 변경에는 evaluation.md를 사용하고, 보장된 품질이나 속도를 주장하기보다는 관찰된 실패로부터 규칙을 개선하세요.

관련 스킬