Awesome AI Motion으로 모션 효과를 선택하고 렌더링하는 방법

Awesome AI Motion이란?

Awesome AI Motion은 사람과 AI 코딩 에이전트를 위한 모션 디자인 가이드입니다. 애니메이션을 외형만 보고 선택하는 대신, 장면에서 전달해야 할 내용을 먼저 정한 다음 적절한 효과, 레시피 또는 디자인 경로를 선택할 수 있습니다.

이 저장소에는 637개의 기법, 128개의 레퍼런스 클립, 11개의 레시피, 7개의 디자인 경로가 정리되어 있습니다. 각 효과 카드에는 정의, 조정된 매개변수, 예시, 소스 참조, Claude Code와 Codex용 프롬프트가 포함될 수 있습니다.

이 가이드는 제품 공개 영상, 타이틀 시퀀스, 교육용 오프닝, 숏폼 영상의 훅, 데이터 스토리, UI 시연 또는 기타 모션 중심 장면을 디자인해야 할 때 유용합니다.

주요 기능

• AI가 읽을 수 있는 효과 카드: 에이전트가 모션을 적용하기 전에 카드를 확인할 수 있습니다.
• 렌더링된 레퍼런스: 렌더링된 효과에는 HTML 스테이지, MP4 클립, 애니메이션 GIF 미리보기, 포스터 이미지가 포함될 수 있습니다.
• 목적 기반 탐색: 의사결정 표를 사용하면 장면의 목표나 매체에 맞춰 모션을 선택할 수 있습니다.
• 결합 레시피: 레시피는 여러 효과가 시간 기반 장면에서 어떻게 함께 작동하는지 보여줍니다.
• 디자인 경로: 경로 문서는 프로모션 영상, 숏폼, 프레젠테이션 자료와 같은 대규모 결과물을 계획하는 데 도움이 됩니다. 경로 문서는 한국어로 작성되어 있습니다.
• 브라우저 비교: 프로젝트 웹사이트에서는 최대 4개의 클립을 필터링하고, 느리게 재생하고, 비교할 수 있습니다.
• 로컬 렌더링: 제공된 렌더링 스크립트를 사용하면 레퍼런스 효과를 변경하지 않고 맞춤형 사본을 만들 수 있습니다.
• 구조화된 메타데이터: 표준 index.json 파일을 통해 카탈로그를 직접 조회할 수 있습니다.

제공되는 모션 예시

이 컬렉션에는 카메라 움직임과 타이포그래피부터 트랜지션, 리빌, 패럴랙스, 빛 효과, 형태 변환까지 다양한 효과가 포함되어 있습니다. 주요 예시로는 Infinite Canvas Pan, Camera Fly-through, Infinite Zoom, Kinetic Type Sweep, Giant Mask Reveal, Morph Match Cut, Noise Dissolve, Ken Burns, Particle Scatter & Assemble 등이 있습니다.

Particle Scatter & Assemble은 저장소에 렌더링된 레퍼런스 효과 중 하나입니다.

적절한 시작점 선택

이 저장소에는 여러 진입점이 제공됩니다. 완료하려는 작업에 따라 하나를 선택하세요:

• 웹사이트: 클립을 시각적으로 탐색하고, 재생하고, 필터링하고, 느리게 재생하고, 비교할 수 있습니다.
• 문서 목차: 모든 효과 카드를 열지 않고도 가이드를 탐색할 수 있습니다.
• 전체 카탈로그: 모션 유형별로 그룹화된 기법을 살펴보고 클립 제공 여부를 확인할 수 있습니다.
• 의사결정 표: 목적이나 매체에 따라 효과를 선택할 수 있습니다.
• 레시피: 효과를 결합해 완성된 시간 기반 장면을 만들 수 있습니다.
• 디자인 경로: 대규모 모션 결과물을 계획할 수 있습니다.
• 에이전트 워크플로: 목적, 카드, 적용, 렌더링, 검증 과정을 따를 수 있습니다.

설치 및 설정

1단계: 가이드 복제

저장소를 복제하고 해당 디렉터리로 이동합니다:

git clone https://github.com/gongnyang/awesome-ai-motion.git
cd awesome-ai-motion

웹사이트를 탐색하거나, 효과 카드를 읽거나, 가이드를 에이전트 스킬로 연결하는 데에는 종속 항목을 설치할 필요가 없습니다.

2단계: 선택적 렌더링 종속 항목 준비

로컬 렌더링에는 시스템 경로에 설치된 Node.js 20 이상, ffmpeg, Chromium이 포함된 Playwright가 필요합니다. 다음 명령은 해당 종속 항목이 없을 때만 실행하세요:

npm install
npx playwright install chromium
ffmpeg -version

Playwright를 전역으로 이미 사용할 수 있다면 패키지 설치는 선택 사항입니다. 적절한 Chromium 설치가 이미 있다면 Chromium 설치 명령을 건너뛸 수도 있습니다.

3단계: Claude Code에 가이드 연결

Claude Code 스킬 디렉터리를 만들고 저장소를 해당 디렉터리에 연결합니다:

mkdir -p ~/.claude/skills
ln -s "$PWD" ~/.claude/skills/awesome-ai-motion

이 스킬은 현재 체크아웃을 사용하므로 심볼릭 링크가 편리합니다. 환경상 링크를 사용할 수 없다면 대신 디렉터리를 복사하세요:

mkdir -p ~/.claude/skills
cp -R "$PWD" ~/.claude/skills/awesome-ai-motion

방법은 하나만 선택하고 대상 경로가 사용되지 않았는지 확인하세요. Codex의 경우 동일한 링크나 복사본을 ~/.codex/skills/ 아래에 배치하세요.

복사한 스킬에는 이후 저장소 변경 사항이 자동으로 반영되지 않습니다. 가이드가 변경되면 복사본을 업데이트하거나 교체하세요.

기본 사용법

에이전트에게 효과 선택 요청하기

장면의 커뮤니케이션 목표를 설명한 다음, 에이전트에게 관련 효과 카드를 참고하고 조정된 기본값을 유지하도록 요청하세요. 예를 들면 다음과 같습니다.

제품 공개에 사용할 모션을 선택하세요. 효과 카드를 읽고 기본 매개변수를 사용하세요.

이 요청은 에이전트에 명확한 목적을 제시하고, 문서화된 구현을 사용하도록 안내하며, 임의의 애니메이션 값을 추측하지 않도록 합니다.

효과를 미리 지정하지 않고 다른 목표를 중심으로 요청을 구성할 수도 있습니다.

교육용 오프닝 훅에 사용할 모션을 선택하세요. 가이드를 검토하고 적절한 효과나 레시피를 확인한 후 적용하세요.

가이드에는 Educational Opening Hook, Shorts Hook, Title Opener, Product UI Demo, Data Story, Concept Explainer, Before and After, Scroll Deck Scene과 같은 레시피 예제가 포함되어 있습니다.

효과 카드 수동으로 읽기

각 카드는 다음 위치에 있습니다.

effects/<slug>/README.md

예를 들어 마스크 리빌 카드는 effects/mask-reveal/README.md에 있습니다. 효과를 수정하기 전에 카드의 정의, 매개변수, 예제, 프롬프트, 출처를 읽으세요. 효과에 렌더링된 에셋이 있으면 해당 디렉터리에 다음 파일도 포함될 수 있습니다.

• 모션 스테이지용 index.html
• 동영상 출력용 clip.mp4
• 애니메이션 미리보기용 preview.gif
• 스틸 이미지용 poster.jpg

처음으로 사용자 지정 클립 렌더링하기

제공된 렌더러를 마스크 리빌 효과에 실행하세요. 이 명령은 표시되는 텍스트를 변경하고, 삽입 가능한 스테이지를 만들며, 결과를 별도의 스테이징 디렉터리에 기록합니다.

node scripts/render.mjs effects/mask-reveal \
  --embed --text "Make it move" --out .staging/my-first-motion

렌더링 후 다음 생성 파일을 확인하세요.

• .staging/my-first-motion/clip.mp4
• .staging/my-first-motion/preview.gif
• .staging/my-first-motion/poster.jpg

출력이 .staging/my-first-motion으로 이동하므로 원본 효과는 그대로 유지되며 재사용할 수 있습니다.

실용적인 선택 워크플로

1. 장면의 목적을 정의하세요. 모션이 제품을 공개해야 하는지, 계층 구조를 설정해야 하는지, 개념을 설명해야 하는지, 변화를 보여줘야 하는지, 아니면 시선을 유도해야 하는지 결정하세요.
2. 카탈로그를 탐색하거나 검색하세요. 시각적 탐색에는 웹사이트를, 목적 기반 선택에는 결정 표를, 구조화된 메타데이터에는 index.json을 사용하세요.
3. 효과 카드를 여세요. 정의, 조정된 매개변수, 예제, 프롬프트, 출처를 검토하세요.
4. 하나의 효과로 충분하지 않다면 레시피를 확인하세요. 레시피는 효과를 시간에 맞춘 장면으로 배열하는 방법을 보여줍니다.
5. 복사본을 적용하세요. 참조 구현은 변경하지 말고 생성 파일은 별도의 출력 디렉터리에 저장하세요.
6. 렌더링하고 검증하세요. 소스 코드만 보고 결과가 올바르다고 가정하지 말고 MP4, GIF, 포스터, 스테이지를 확인하세요.

고급 팁

결정하기 전에 후보 비교하기

프로젝트 웹사이트에서 최대 4개의 클립을 비교하세요. 재생 속도를 낮추면 타이밍, 이징, 마스킹, 전환을 더 쉽게 평가할 수 있습니다. 여러 기법이 같은 커뮤니케이션 목표를 충족하지만 에너지나 강조 수준이 서로 다를 때 특히 유용합니다.

기본값으로 시작한 후 적용하기

효과 카드에는 조정된 매개변수가 제공됩니다. 타이밍이나 표현 방식을 변경하기 전에 에이전트에게 해당 값을 사용해 시작하도록 요청하세요. 이렇게 하면 의도된 동작을 유지하면서 이후 변경 사항을 평가할 수 있는 기준선을 확보할 수 있습니다.

생성된 출력은 참조 디렉터리 외부에 보관하기

사용자 지정 렌더링 결과를 effects/나 recipes/에 기록하지 마세요. 참조 클립을 그대로 유지하고 저장소 변경 사항을 더 쉽게 확인할 수 있도록 .staging/과 같은 위치를 사용하세요.

완성된 장면에는 레시피 사용하기

개별 효과는 모션 기법을 보여주고, 레시피는 여러 기법을 하나의 시퀀스로 결합합니다. 하나의 고립된 애니메이션이 아니라 오프닝, 전환, 콘텐츠 섹션, 엔딩이 필요한 결과물이라면 레시피로 시작하세요.

자동화에는 구조화된 데이터 사용하기

루트 수준의 index.json은 표준 카탈로그입니다. 도구와 에이전트는 카드 페이지를 스크래핑하는 대신 이를 직접 검사할 수 있습니다. 전체 카탈로그는 기법을 모션 계열별로 그룹화하고 클립 상태를 알려주므로 사람이 탐색하기에 더 적합합니다.

링크된 스킬과 복사된 스킬을 다르게 관리하기

심볼릭 링크는 계속 체크아웃 디렉터리를 가리키므로 저장소 업데이트를 가져오면 에이전트가 읽는 내용도 함께 업데이트됩니다. 복사한 스킬은 독립적이므로 원본 가이드가 변경된 후 수동으로 새로 고쳐야 합니다.

카탈로그 기여 내용 검증하기

효과를 추가하거나, 기본값을 개선하거나, 참조 클립을 업데이트할 때는 저장소의 기여 지침을 따르세요. 생성된 문서를 진실의 원천으로 취급하지 말고 관련 소스나 생성기를 업데이트하세요. 그런 다음 프로젝트를 다시 생성하고 확인하세요.

node scripts/build.mjs
node scripts/check.mjs

기여한 내용은 움직임이 명확하게 보이고, 공유 스테이지를 사용하며, 렌더링된 결과를 검증할 수 있어야 합니다.

재배포 전에 라이선스 검토

프로젝트의 원본 작업물은 MIT 라이선스에 따라 사용이 허가됩니다. 소스 참조와 컴포넌트 라이선스는 ATTRIBUTIONS.md 및 개별 효과 카드에 기록되어 있습니다. GSAP와 포함된 글꼴은 각자의 라이선스를 유지하므로, 해당 에셋을 재배포하기 전에 저작권 표시 정보를 확인하세요.

결론

Awesome AI Motion은 대규모 모션 참고 라이브러리를 사람과 코딩 에이전트를 위한 실용적인 워크플로로 전환합니다. 장면의 목적부터 시작하고, 문서화된 효과나 레시피를 선택한 다음, 조정된 기본값을 유지하고, 별도의 디렉터리에 렌더링하며, 생성된 에셋을 검증하세요. 이 과정은 가이드의 참고 구현을 덮어쓰지 않고 창의적인 의도를 재사용 가능한 모션 클립으로 발전시키는 데 도움이 됩니다.