AI 튜토리얼

Motion 스킬로 생동감 넘치는 그림 애니메이션 만들기

이 튜토리얼에서는 Ross Ark의 Motion 스킬을 설치하고 사용하는 방법, MOTION.md로 프로젝트 지침을 정리하는 방법, 참고 영상을 분석하는 방법, SwiftUI 데모를 렌더링하는 방법, 그리고 애니메이션 그림에 타이밍, 팔로스루, 유휴 동작, 캐릭터 연기 기법을 적용하는 방법을 설명합니다.

2026년 10월 22일약 11분 소요

Motion Skill이 하는 일

Motion For Anything You Draw 스킬은 디자이너와 엔지니어가 코드로 그린 아트워크에 애니메이션을 적용하여, 서로 바뀌는 일러스트의 연속이 아니라 살아 움직이는 것처럼 보이게 합니다. 캐릭터, 생물, 식물, 천, 불, 연기, 물, 날씨, 조명, 기계, 아이콘, 로고, 차트, 완성된 장면에 적용할 수 있습니다.

이 프로젝트는 애니메이션을 믿을 수 있게 만드는 세부 요소에 집중합니다. 장면 전체에 하나의 시계를 사용하고, 실제 피벗을 중심으로 움직이며, 뒤따르는 부분은 한 박자 늦게 따라오게 하고, 지속적인 대기 동작을 유지하며, 주요 포즈 사이를 부드러운 경로로 연결하고, 움직임의 폭을 절제하며, 강한 타이밍 곡선을 사용하는 방식입니다.

또한 에이전트가 생성한 애니메이션에서 흔히 발생하는 문제도 다룹니다. 각 포즈에 독립적인 이징 트윈을 적용하는 대신, 이 스킬은 동기화된 움직임, 자연스러운 전환, 알아보기 쉬운 눈 깜박임, 안정적인 접촉, 미묘한 2차 움직임을 권장합니다.

스킬 설치

skills 명령어로 스킬을 설치합니다.

npx skills@latest add rossark0/rossark-motion-skill

설치가 완료되면 스킬에서 참고 자료, 재사용 가능한 템플릿, 분석 도구, 예제 장면을 제공합니다. 포함된 엔진은 React Native와 SwiftUI 템플릿을 모두 지원합니다.

저장소 이해하기

주요 스킬 가이드 읽기

SKILL.md에서 시작하세요. 이 파일에는 핵심 원칙, 다양한 대상에 대한 레시피, 생동감 있는 얼굴, 전신 연기, 장면 기반 동작, 인터페이스 모션, 일반적인 문제, 레퍼런스 동영상 분석, 권장 워크플로가 설명되어 있습니다.

프로젝트별 모션 메모 작성하기

아트워크 옆에 MOTION.md를 복사하고 작업하면서 Part 2를 작성하세요. 애니메이션 코드의 위치, 프로젝트에서 따르는 규칙, 아트워크로 할 수 없는 작업, 변경 사항을 검증하는 방법을 기록합니다. 스킬은 이 파일을 먼저 읽으므로, 모션을 수정하거나 생성하기 전에 에이전트에 중요한 프로젝트 맥락을 전달할 수 있습니다.

애니메이션 엔진 선택하기

저장소에는 지원되는 각 UI 프레임워크에 맞는 엔진이 포함되어 있습니다.

React Native용 motion.ts.
SwiftUI용 Motion.swift.

엔진에는 반복 및 단일 실행 시계, track, flow, seg, wave, loop, bell, seeded, 모션 곡선이 포함되어 있습니다. 그림에 움직이는 눈과 입이 필요하다면 함께 제공되는 생동감 있는 얼굴 템플릿을 사용하세요.

단계별로 애니메이션 만들기

아트워크와 한계를 설명합니다. MOTION.md를 사용해 기존 드로잉 구조, 사용 가능한 도형, 제약 조건을 문서화합니다.
장면을 여러 부분으로 나눕니다. 몸통, 머리, 팔다리, 소품, 그림자, 얼굴 요소, 2차 요소를 파악합니다. 어떤 부분이 실제 피벗을 중심으로 회전하고 어떤 부분이 뒤따라야 하는지 결정합니다.
공유 시계를 선택합니다. 각 요소에 서로 무관한 트윈을 부여하는 대신 하나의 타임라인으로 장면을 조정합니다. 이렇게 하면 접촉과 반응이 동기화됩니다.
주요 동작을 정의합니다. 등장, 착지, 발차기, 눈 깜박임, 시선 이동, 손 흔들기, 성장, 안정화 같은 이벤트를 계획합니다. flow를 포함한 사용 가능한 엔진 헬퍼를 활용해 주요 포즈 사이를 부드러운 움직임으로 연결합니다.
2차 움직임을 추가합니다. 머리, 팔뚝, 양 갈래 머리, 모자, 캔, 그림자 또는 기타 느슨한 부분이 주요 동작을 약간 늦게 따라가도록 합니다.
접촉을 확인합니다. 발이 지면에 닿는지, 손이 손잡이에 계속 붙어 있는지, 던진 물체가 올바른 위치에서 시작하고 끝나는지, 충돌 시 그림의 부피감이 유지되는지 확인합니다.
프레임 단위로 결과를 검토합니다. 저장소의 분석 도구와 렌더링 결과를 사용해 움직임이 너무 작거나, 너무 갑작스럽거나, 타이밍이 잘못된 부분을 찾습니다.

생동감 있는 얼굴 템플릿 사용하기

liveFace.tsx와 LiveFace.swift는 부드럽게 움직이고, 눈을 깜박이고, 미소 짓는 눈과 입을 제공합니다. 도형과 색상을 지정하면 템플릿이 각 표정마다 별도의 그림을 만들 필요 없이 얼굴 움직임을 추가합니다.

얼굴의 변화는 알아보기 쉽고 연속적으로 유지하세요. 너무 짧아 깜박임처럼 보이는 눈 깜박임은 피하고, 한 표정에서 다른 표정으로 직접 전환하지 마세요. 작은 눈 움직임과 머리와 시선 사이의 약간의 지연만으로도 캐릭터가 더욱 주의 깊게 반응하는 느낌을 줄 수 있습니다.

포함된 예제 살펴보기

Reveal

Reveal 장면은 휴대폰 프레임 안에서 전신 연기를 보여줍니다. 실루엣이 축 늘어진 발과 함께 떠서 들어오고, 아이가 중력에 따라 떨어진 뒤 착지하면서 눌립니다. 공이 굴러 들어오면 눈이 공을 따라가고, 캐릭터는 발로 차고, 돌아서고, 손을 흔든 다음 계속 대기 동작을 합니다. 이 시퀀스는 초당 60프레임의 9초 루프이며 하나의 장면 시계를 사용합니다.

Garden

Garden 장면은 캐릭터 연기와 환경의 변화를 결합합니다. 물방울은 시드가 지정된 궤적을 따라 움직이고, 흙은 어두워지며, 줄기는 두 번에 걸쳐 자랍니다. 잎은 순서대로 펼쳐지고, 꽃잎은 비틀리며 열리며, 나비가 내려앉으면 줄기가 무게에 반응합니다. 캐릭터의 머리와 눈은 나비를 따라가고, 양 갈래 머리와 모자, 물뿌리개는 움직임을 뒤따릅니다.

Chef

Chef 장면은 타이밍, 중력, 예비 동작, 놀람, 접촉을 보여줍니다. 팬케이크가 뒤집혀 눌린 상태로 착지한 다음, 두 번째 시도에서는 너무 높이 올라가 요리사의 모자에 부딪힙니다. 팬케이크는 흔들리고 미끄러져 내려오며 팬에 잡힙니다. 증기와 불꽃의 움직임에는 추가 웨이브가 사용되고, 손은 손잡이에 맞춰 배치됩니다.

Orbit

Orbit 장면은 깊이 순서를 보여 줍니다. 카드가 새 주위를 공전하며 위치에 따라 앞에 나타나거나, 뒤에 나타나거나, 옆면이 보입니다. 새는 떠서 기울고, 날개가 퍼덕이며, 발과 깃털 다발이 후속 동작을 하고, 루프 중 시드가 지정된 시점에 반짝임이 나타납니다.

SwiftUI 데모 렌더링

macOS 14 이상에서는 다음 명령으로 SwiftUI 템플릿과 데모 장면을 컴파일합니다.

swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo

Reveal 장면을 초당 60프레임으로 frames 디렉터리에 렌더링합니다.

/tmp/render-demo reveal /tmp/frames phone fps=60

다른 장면을 렌더링하려면 reveal 대신 garden, chef, orbit을 사용합니다. 렌더링한 프레임 시퀀스를 FFmpeg로 MP4로 변환합니다.

ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4

렌더링하면 전체 타임라인을 일관된 방식으로 확인하고, 수정본을 비교하며, 애니메이션이 목표 프레임 속도에서 안정적으로 유지되는지 검증할 수 있습니다.

참조 동작 분석

참조 동영상이 있다면 제작하기 전에 살펴보세요. 실시간으로는 보기 어려운 작은 움직임이 결과를 자연스럽게 느끼게 할지 기계적으로 느끼게 할지를 결정할 수 있습니다.

sheet.sh는 동영상의 전체 프레임 속도로 콘택트 시트를 만들어 타이밍과 프레임 간 변화를 쉽게 확인할 수 있게 합니다.
track_edges.py는 프레임마다 대상의 가장자리를 측정하여 미세한 흔들림, 떠다님, 흔들거림을 드러내는 데 도움을 줍니다.
sample_colors.py는 동영상 프레임에서 정확한 색상을 읽습니다.

이 측정값을 사용해 동작을 코드로 옮기기 전에 타이밍, 진폭, 동작 간격을 파악하세요. 작은 무게중심 이동, 지연된 후속 동작, 또는 거의 보이지 않는 실루엣 변화 때문에 참조 영상이 생동감 있게 느껴질 수 있습니다.

고급 동작 팁

조율된 타이밍을 우선하세요

장면에 하나의 시계를 사용하고 관련 동작이 타이밍 관계를 공유하도록 하세요. 발차기, 눈동자 움직임, 고개 돌리기, 공의 궤적은 서로 독립적인 애니메이션처럼 보이기보다 같은 사건을 전달해야 합니다.

후속 동작과 예비 동작을 사용하세요

보조 요소가 항상 주된 몸체와 동시에 멈출 필요는 없습니다. 느슨한 요소가 잠시 더 움직이거나, 가라앉거나, 가속에 반응하도록 하세요. 이는 머리카락, 양 갈래 머리, 모자, 옷, 팔다리, 그림자, 들고 있는 물체에 특히 유용합니다.

유휴 상태의 생동감을 유지하세요

캐릭터와 장면이 주요 동작 사이에 멈춰서는 안 됩니다. 미세한 호흡, 눈 깜박임, 떠다님, 흔들림 또는 그 밖의 작은 진폭의 움직임은 주요 동작을 방해하지 않으면서 루프를 살아 있게 만들 수 있습니다.

충돌 중 형태를 유지하세요

스쿼시와 스트레치는 그림을 임의로 왜곡하기보다 그림을 뒷받침해야 합니다. Reveal과 Chef 예제는 착지할 때 스쿼시를 사용하면서도 캐릭터나 물체가 알아볼 수 있고 장면과 연결된 상태를 유지합니다.

반복이 중요할 때 시드 기반 변형을 사용하세요

반짝임이나 물방울처럼 반복되는 세부 요소에는 움직임을 다양하게 하면서도 재현 가능하게 유지해야 할 때 시드 기반 동작을 사용하세요. 재현 가능한 타이밍은 디버깅과 렌더링 결과 비교를 쉽게 합니다.

인터페이스 동작 지침을 적용하세요

인터페이스의 동작을 위해서는 프로젝트에서 참조하는 원칙을 확인하세요. 여기에는 Emil Kowalski의 skills와 Benji Taylor의 Family values가 포함됩니다. 인터페이스의 움직임은 목적이 분명하고 주변 디자인과 일관되게 유지하세요.

결론

Motion 스킬은 코드로 그린 아트워크를 표현력 있는 애니메이션으로 바꾸기 위한 실용적인 기반을 제공합니다. npx로 설치하고, 프로젝트를 MOTION.md에 문서화하며, 공유 시계를 중심으로 구축하고, React Native 또는 SwiftUI 템플릿을 사용하세요. 그런 다음 렌더링된 프레임과 분석 도구로 결과를 확인하세요. 핵심 목표는 간단합니다. 포즈를 부드럽게 연결하고, 전체 장면을 조율하며, 모든 요소에 생동감을 느끼게 하는 데 필요한 타이밍과 후속 동작을 부여하는 것입니다.