모션 애니씽
원하는 움직임을 채팅으로 설명하면 AI 코딩 에이전트가 애니메이션 코드를 만들어 주는 오픈소스 에이전틱 모션 엔진이다. CSS 키프레임을 직접 짜거나 After Effects 같은 전문 도구를 배우지 않고도 버튼·팝업·로딩 같은 UI 모션을 빠르게 만들어 CSS·React·Lottie·GIF 등으로 내보낼 때 쓴다.
| 방식 | 내가 하는 일 | 잘 맞는 사람 |
|---|---|---|
| CSS 직접 작성 | 키프레임·타이밍 값을 손으로 조정 | 애니메이션 코드에 익숙한 개발자 |
| After Effects 등 | 타임라인 편집 후 내보내기 | 모션 디자이너 |
| motion-anything | 원하는 느낌을 문장으로 설명 | 시안을 빨리 보고 싶은 누구나 |
내 에이전트와 키를 연결해서 쓴다
Claude Code, Codex, Cursor, Gemini 등 8개 코딩 에이전트 가운데 하나를 골라 연결한다. BYOK(Bring Your Own Key) 방식이라 내가 가진 API 키로 돌아가고, 모델 사용료도 내 계정에서 나간다.
쓰는 순서는 단순하다. "팝업이 가볍게 튕기면서 나타났으면 해"처럼 느낌을 말하면, 에이전트가 403개 모션 레시피 가운데 맞는 패턴을 찾아 코드로 만든다. 결과를 보고 "조금 더 느리게", "튕김은 약하게"처럼 말로 다듬으면 된다.
출력 형식은 쓸 곳에 맞춰 고른다
같은 모션을 여러 형식으로 내보낼 수 있으니, 결과물을 어디에 넣을지 먼저 정하고 고르면 된다.
| 형식 | 이럴 때 고른다 |
|---|---|
| CSS | 웹페이지에 바로 붙일 간단한 효과 |
| React | 리액트 프로젝트에 컴포넌트로 넣을 때 |
| JSON·Lottie | 앱·웹에서 가볍게 재생할 벡터 애니메이션 |
| MP4·GIF | 문서·메신저·발표 자료에 영상으로 공유 |
템플릿과 함께 쓰고, 결과는 직접 확인한다
Open Design 생태계와 연결돼 있어 59개 DESIGN.md 브랜드 팩, 58개 HyperFrames 비디오 템플릿, 112개 HTML 프로토타입 템플릿을 같이 쓸 수 있다. 브랜드 규칙을 담은 문서를 함께 주면 화면과 모션의 분위기를 맞추기 쉽다.
다만 AI가 만든 코드라 실제 제품에 넣기 전에 직접 돌려 보고 확인해야 한다. 움직임에 민감한 사용자를 위해 운영체제의 '동작 줄이기' 설정을 따르는지도 챙기는 게 좋다.
같은 이름의 논문과 헷갈리지 말 것
2025년 arXiv에 같은 이름의 논문 'Motion Anything: Any to Motion Generation'이 있다. 이름만 같을 뿐 완전히 다른 작업이다.
| 구분 | nexu-io motion-anything | arXiv Motion Anything |
|---|---|---|
| 성격 | 오픈소스 도구 | 연구 논문 |
| 만드는 것 | UI·웹 애니메이션 | 3D 사람 동작 |
| 입력 | 채팅 문장 | 텍스트·음악 등 |
시안 만들기부터 공유용 영상까지
가장 흔한 쓰임은 UI 모션 시안을 빨리 뽑아 보는 것이다. 말로 느낌을 잡고 몇 번 다듬은 뒤, 넣을 곳에 맞는 형식으로 내보낸다.
| 어디서 | 어떻게 쓰나 |
|---|---|
| 웹 프로토타입 | 버튼·팝업 효과를 문장으로 만들어 CSS로 바로 붙여 보고 느낌을 비교 |
| 리액트 프로젝트 | 로딩·전환 모션을 React 컴포넌트로 받아 코드에 넣고 직접 확인 |
| 모바일·웹 앱 | 아이콘·안내 화면 애니메이션을 Lottie로 내보내 가볍게 재생 |
| 문서·발표 자료 | 만든 모션을 GIF·MP4로 뽑아 기획서나 메신저로 공유 |
