# \#web-animation
**URL:** https://discuss.pytorch.kr/tag/web-animation/8420.md
[최신](https://discuss.pytorch.kr/latest.md) · [카테고리](https://discuss.pytorch.kr/categories.md) · [태그](https://discuss.pytorch.kr/tags.md)
---
## [Oil Motion: AI 생성 영상을 스크롤과 마우스가 제어하는 웹 애니메이션으로 바꾸는 에이전트 스킬](https://discuss.pytorch.kr/t/oil-motion-ai/11668)
**Author:** [@9bow](https://discuss.pytorch.kr/u/9bow)\
**댓글:** 0\
**마지막 업데이트:** [8월 20, 2026, 11:30오후 UTC](https://discuss.pytorch.kr/t/oil-motion-ai/11668 "2026-08-20T23:30:51Z")
Oil Motion 소개 AI로 만든 영상은 처음부터 끝까지 재생되는 것 말고는 할 수 있는 일이 없습니다. 제품 소개 페이지에서 스크롤을 내릴 때 제품이 단계별로 분해되는 연출을 넣고 싶어도, 생성된 영상을 그대로 삽입하면 사용자가 위로 되돌릴 때 애니메이션은 따라오지 않습니다. 그렇다고 이미지 한 장을 CSS로 움직이고 키우는 방식으로는 관절이 접히고 부품이 서로 가려지고 재질이 바뀌는 변화를 만들 수 없습니다. 결국 프런트엔드 개발자는 영상 생성과 인터랙션 구현 사이 어딘가에서 매번 직접 프레임을 자르고 매핑을 짜게 됩니다. 이번에 소개할 Oil Motion은 그 사이를 메우는 에이전트 스킬(Agent Skill)입니다. 어떤 장면을 만들지 설계하고, AI 영상으로 연속 동작을 생성하고, 프레임을 정리해 웹 자산으로 만들고, 스크롤과 마우스, 드래그, 터치, 기기 방향 같은 입력에 그 자산을 연결하는 데까지를 한 흐름으로 처리합니다. 핵심 발상은 단순합니다. 100프레임짜리 제품 분해 애니메이션이 있을 때 페이지가 30% 스크롤되면 30번째 프레임을, 70% 스크롤되면 70번째 프레임을 보여 주는 식으로 입력 위치를 애니메이션 진행도에 매핑합니다. 마우스와 드래그, 기기 방향도 입력원만 다를 뿐 같은 방식을 씁니다. Oil Motion은 Lin Zhihuang이 MIT 라이선스로 공개했고, Codex와 Claude Code처럼 스킬을 읽어 실행하는 에이전트라면 어디에서든 동작하도록 만들어져 있습니다. 사용자가 직접 실행하는 부분은 거의 없습니다. 무엇을 표현하고 싶은지, 어떤 소재가 있는지, 애니메이션이 무엇을 따라가야 하는지를 말하면 생성과 검사, 압축, 프런트엔드 구현은 에이전트가 맡습니다. 결정적 미디어 파이프라인은 파이썬 스크립트로 되어 있어 Python 3와 Pillow, ffmpeg와 ffprobe가 필요하고, 영상 생성은 외부 API를 호출합니다. 저장소의 문서는 중국어가 기본이지만 영문 README가 별도로 제공됩니다. 기존…
---
## [motion-anything: 코딩 에이전트로 웹 애니메이션을 만드는 로컬 모션 엔진](https://discuss.pytorch.kr/t/motion-anything/11182)
**Author:** [@9bow](https://discuss.pytorch.kr/u/9bow)\
**댓글:** 0\
**마지막 업데이트:** [7월 10, 2026, 3:30오전 UTC](https://discuss.pytorch.kr/t/motion-anything/11182 "2026-07-10T03:30:17Z")
motion-anything 소개 motion-anything은 웹 페이지와 영상에 넣을 모션(motion, 애니메이션)을 원하는 느낌을 적은 한 문장에서 만들어 내고, 그 결과물을 다시 손으로 다듬을 수 있게 하는 로컬 실행형 모션 엔진입니다. AI로 랜딩 페이지를 한 번 생성하고 나면 모션을 조금 바꾸려 해도 페이지 전체를 다시 생성하거나 CSS를 직접 손봐야 하는, 생성과 수정 사이의 간극이 이 도구가 겨냥하는 문제입니다. motion-anything은 그 간극을 실행 중인 페이지 위에서 컴포넌트 단위로 모션을 편집하고 파일에 되써 넣는 방식으로 메웁니다. 동작의 출발점은 사용자가 직접 고른 코딩 에이전트입니다. 프롬프트는 별도 서버로 프록시되지 않고, PATH에서 자동 감지된 CLI 세션이나 사용자의 API 키(BYOK, Bring Your Own Key)로 로컬에서 실행됩니다. 개발팀은 이 구조를 두고 "Describe the feeling — your AI ships the animation" 이라는 한 줄로 소개합니다. 즉 원하는 분위기를 문장으로 적으면 자신이 쓰던 에이전트가 애니메이션을 만들어 주고, 결과는 실행 가능한 파일로 남습니다. motion-anything은 nexu.io의 Open Design 계열 프로젝트 가운데 모션을 담당하는 층으로 소개되며, 현재 버전은 v0.1.0 입니다. 주 언어는 JavaScript이고, npm 의존성이 전혀 없다는 점을 특징으로 내세웁니다. 본 게시물에서는 motion-anything의 동작 흐름, 실행 중인 페이지에서의 편집 방식, 이를 구동하는 엔진 구조, 레시피 라이브러리와 내보내기, 설치 방법을 정리합니다. motion-anything의 동작 흐름 motion-anything의 작업은 네 단계로 이어집니다. 먼저 원하는 모션을 한 문장으로 설명하면, 선택한 코딩 에이전트가 그에 맞는 애니메이션 페이지를 생성합니다. 그다음 실행 중인 페이지에서 컴포넌트별로 모션을 편집하고, 마지막으…