Oil Motion: AI 생성 영상을 스크롤과 마우스가 제어하는 웹 애니메이션으로 바꾸는 에이전트 스킬

Oil Motion 소개

AI로 만든 영상은 처음부터 끝까지 재생되는 것 말고는 할 수 있는 일이 없습니다. 제품 소개 페이지에서 스크롤을 내릴 때 제품이 단계별로 분해되는 연출을 넣고 싶어도, 생성된 영상을 그대로 삽입하면 사용자가 위로 되돌릴 때 애니메이션은 따라오지 않습니다. 그렇다고 이미지 한 장을 CSS로 움직이고 키우는 방식으로는 관절이 접히고 부품이 서로 가려지고 재질이 바뀌는 변화를 만들 수 없습니다. 결국 프런트엔드 개발자는 영상 생성과 인터랙션 구현 사이 어딘가에서 매번 직접 프레임을 자르고 매핑을 짜게 됩니다.

이번에 소개할 Oil Motion은 그 사이를 메우는 에이전트 스킬(Agent Skill)입니다. 어떤 장면을 만들지 설계하고, AI 영상으로 연속 동작을 생성하고, 프레임을 정리해 웹 자산으로 만들고, 스크롤과 마우스, 드래그, 터치, 기기 방향 같은 입력에 그 자산을 연결하는 데까지를 한 흐름으로 처리합니다. 핵심 발상은 단순합니다. 100프레임짜리 제품 분해 애니메이션이 있을 때 페이지가 30% 스크롤되면 30번째 프레임을, 70% 스크롤되면 70번째 프레임을 보여 주는 식으로 입력 위치를 애니메이션 진행도에 매핑합니다. 마우스와 드래그, 기기 방향도 입력원만 다를 뿐 같은 방식을 씁니다.

Oil Motion은 Lin Zhihuang이 MIT 라이선스로 공개했고, Codex와 Claude Code처럼 스킬을 읽어 실행하는 에이전트라면 어디에서든 동작하도록 만들어져 있습니다. 사용자가 직접 실행하는 부분은 거의 없습니다. 무엇을 표현하고 싶은지, 어떤 소재가 있는지, 애니메이션이 무엇을 따라가야 하는지를 말하면 생성과 검사, 압축, 프런트엔드 구현은 에이전트가 맡습니다. 결정적 미디어 파이프라인은 파이썬 스크립트로 되어 있어 Python 3Pillow, ffmpegffprobe가 필요하고, 영상 생성은 외부 API를 호출합니다. 저장소의 문서는 중국어가 기본이지만 영문 README가 별도로 제공됩니다.

기존 웹 애니메이션 도구와 oil-motion의 차이

PyTorchKR에도 코딩 에이전트로 웹 애니메이션을 만드는 프로젝트가 여럿 소개되어 있습니다. 로컬 모션 엔진을 두는 motion-anything, 스크롤에 맞춰 브랜드를 3D 월드처럼 비행시키는 scroll-world, 프로덕션급 Lottie 파일을 만드는 Text-to-Lottie, 래스터 로고를 SVG 애니메이션으로 바꾸는 Pixel2Motion이 그렇습니다.

이들과 Oil Motion을 가르는 것은 동작을 무엇이 만드느냐입니다. 벡터나 3D 기반 도구는 도형과 좌표를 코드가 계산해 움직입니다. 반대로 oil-motion은 관절의 접힘, 제품 구조의 변형, 재질 변화, 앞뒤 가림처럼 코드로 계산하기 어려운 변화를 AI 영상 생성에 맡기고, 이동과 확대, 회전, 재생 속도, 관성처럼 정밀한 입력 대응이 필요한 변화만 프로그램이 담당합니다. 이 경계를 가르는 기준도 분명합니다. 팔다리 회전과 제품 변형, 재질 변화, 가림은 이미지를 앞단에서 옮기거나 키우는 것만으로는 자연스럽게 보이기 어려우므로, 영상 생성 단계에서 처리합니다.

Oil Motion의 3단계 파이프라인

Oil Motion의 처리 과정은 세 부분으로 나뉩니다.

첫 번째는 키프레임을 잠그는 단계입니다. 키프레임은 동작 내내 정확하게 유지되어야 하는 몇 개의 상태를 말합니다. 제품이 완전한 상태, 부품이 펼쳐진 상태, 최종 분해 상태 같은 것입니다. 에이전트는 이 프레임들을 먼저 생성하고 검토해 주체의 정체성과 구조, 로고, 구도, 스타일이 일관되게 유지되는지 확인합니다. 영상을 곧바로 만들면 모델이 중간에 제품 구조나 인물 비율, 동작의 종착점을 바꿔 버릴 수 있어서, 시작과 과정과 끝을 먼저 고정해 두는 것입니다.

두 번째는 연속 동작을 생성하는 단계입니다. 키프레임이 확정되면 그 사이를 AI 영상 생성이 채웁니다. 팔다리 회전과 제품 변형, 재질 변화, 가림이 이 단계에서 일어납니다. 반면 이동과 확대, 크롭, 재생 속도, 추종 감쇠, 최대 회전 속도는 프로그램이 제어합니다. 이 값들은 영상 모델이 다시 생성할 필요가 없고, 프로그램으로 다루는 쪽이 더 안정적이며 나중에 조정하기도 쉽기 때문입니다.

세 번째는 제어 가능한 웹 자산으로 바꾸는 단계입니다. 에이전트가 모든 프레임을 검사해 앞뒤의 멈춤 구간을 잘라 내고, 거의 같은 프레임을 제거하고, 깜빡임이나 구조 변화를 찾아내고, 페이지에서 실제로 보이는 크기에 맞춰 압축합니다. 이 과정을 거치고 나면 브라우저는 상호작용 중에 영상을 다시 만들지 않고 준비된 연속 프레임 안에서 위치를 찾아가기만 합니다. 애니메이션의 반응이 빨라지고, 같은 조작에 매번 같은 결과가 나오는 이유가 여기에 있습니다.

Oil Motion이 자산 형식을 고르는 기준

자산 형식은 사용자가 고르지 않습니다. 에이전트가 프레임 크기와 길이, 접근 방식, 기기 예산을 보고 정하며, 그 앞단에는 배경을 영상이 갖는지 페이지가 갖는지를 정하는 항목이 있습니다. 카메라가 움직이거나 환경광과 지면 접촉이 중요한 장면은 배경과 주체를 같은 영상에 함께 굽고, 주체를 페이지 배경 위에 투명 레이어로 재사용해야 할 때만 크로마 키를 씁니다. 세 경로는 다음과 같습니다:

용도 형식 이유
장면 서사, 카메라 이동, 환경광, 지면 접촉 전체 키프레임 MP4 (베이크) 배경과 주체가 같은 영상에서 생성되어 연속성이 가장 좋고 키잉 위험이 없음
투명 재사용 중 작거나 원형이거나 2D이거나 자주 되감는 모션 알파 WebP 스프라이트 시트 빌드 단계에서 키잉이 끝나 임의 접근이 빠름
투명 재사용 중 크고 길며 한 방향으로 흐르는 스크롤 모션 전체 키프레임 크로마 MP4 WebGL이 실행 중에 키잉하고, 거대한 RGBA 아틀라스를 피할 수 있음

압축은 페이지에서 실제로 보이는 크기를 따릅니다. 표시 영역이 크면 해상도를 높게 유지하고 작으면 불필요한 데이터를 덜어 내며, 파일 크기와 선명도가 충돌할 때는 화면에서 보이는 품질을 우선합니다.

Oil Motion이 잘못된 생성을 막는 장치

생성형 도구에서 자주 생기는 문제는 요청하지 않은 방향으로 결과가 커지는 것입니다. Oil Motion은 어떤 생성보다 먼저 사용자의 요구를 항목별로 고정한 컨셉 계약(Concept Contract)을 만듭니다. 주체 수와 스타일, 분위기, 서사 형식, 배경 소유권, 인터랙션 입력, 연속성 요구사항이 항목으로 들어가고, 한번 정한 항목을 에이전트가 스스로 다른 것으로 바꿔 쓰지 않습니다. 예를 들어 사용자가 애니메이션풍 단일 캐릭터라고 말했으면 그 조건이 생성 내내 유지됩니다.

배치 생성 앞에도 관문이 있습니다. 첫 화면 파일럿이 통과해 해시로 된 승인 기록을 남겨야 이후 클립을 만들 수 있고, 승인 기록이 없거나 앞 클립의 마지막 프레임과 다음 클립의 첫 프레임이 같은 SHA-256 값을 갖지 않으면 네트워크 호출 이전에 차단됩니다. 연속성이 깨진 상태로 비용을 계속 쓰는 것을 막는 구조입니다.

Oil Motion 설치 및 사용

설치는 에이전트에게 저장소 주소를 알려 주는 것으로 끝납니다. 별도의 명령을 외울 필요가 없습니다:

Oil Motion Skill을 설치해 줘: https://github.com/oil-oil/oil-motion

소재와 방향이 이미 정해져 있다면 바로 요청하면 됩니다:

$oil-motion 이 제품 이미지 두 장으로, 페이지를 스크롤하면 단계적으로 펼쳐지는 애니메이션을 만들어 줘.
데스크톱 표시 영역이 크니 선명도를 유지하고, 모바일에서는 더 가벼운 자산을 써 줘.

방향이 아직 없다면 설계부터 맡길 수도 있습니다. 그러면 에이전트가 서로 다른 방향 세 가지를 각각 무엇을 표현하는지, 스크롤을 어떻게 따라가는지, 구현 비용이 얼마인지와 함께 제안하고, 방향이 확정된 뒤에야 키프레임과 영상을 만듭니다.

첫 생성 때는 필요한 API 키를 설정하는 과정을 에이전트가 안내하고, 한 번 설정한 키는 로컬에만 저장돼 이후 자동으로 읽힙니다. 저장 위치는 프로젝트 폴더가 아니라 사용자 홈의 ~/.config/oil-motion/config.json이고, 환경 변수 ZENMUX_API_KEY도 그대로 쓸 수 있습니다.

Oil Motion의 기본 영상 모델과 한국에서의 사용 조건

Oil Motion이 기본으로 고정해 둔 영상 모델은 ZenMux를 통해 호출하는 minimax/minimax-h3입니다. 모델을 고르는 일은 사용자에게 넘기지 않고 기본값 하나로 묶어 두었으며, 저장소의 배너에도 키프레임과 웹 모션 사이에 이 모델 이름이 그대로 적혀 있습니다.

여기서 한국 사용자가 확인해야 할 조건이 하나 있습니다. MiniMax H3의 가중치는 MiniMax H3 Community License로 배포되는데, 이 라이선스가 정의하는 적용 지역에서 대한민국이 명시적으로 제외되어 있습니다. (관련 내용) 다만 이 제외는 가중치를 내려받아 직접 배포하거나 운영하는 경우에 걸리는 조건이고, Oil Motion이 쓰는 경로는 ZenMux가 중계하는 API 호출입니다. 두 경로는 조건이 다르므로, 도입 전에 위 게시물에 정리된 라이선스 조문과 ZenMux의 이용 약관을 각각 확인하는 편이 안전합니다.

Oil Motion은 누구에게 유용한가

제품 페이지나 캐릭터 인터랙션처럼 스크롤이나 마우스를 따라 움직이는 연출이 필요하고, 그 동작이 이미지 전체를 옮기는 것만으로는 자연스럽지 않은 경우에 oil-motion이 맞습니다. 프레임 검수와 보간, 압축, 매핑 코드까지 한 흐름으로 나오기 때문에, 영상 생성과 프런트엔드 구현 사이를 손으로 잇던 작업이 줄어듭니다. 산출물에 키프레임과 생성 프롬프트, 원본 영상, 정리된 자산, 인터랙션 코드, 미리보기 페이지, 설정 파일이 함께 포함되어 나중에 동작이나 프레임, 인터랙션 파라미터를 다시 손볼 수 있다는 점도 실무에서는 중요합니다.

반대로 이동과 확대, 회전 정도로 충분한 애니메이션이라면 필요하지 않습니다. oil-motion은 그런 변화를 프로그램이 담당하는 영역으로 분류합니다. AI 영상 생성 비용과 생성 시간을 감당하기 어려운 경우에도 맞지 않습니다. 문서 언어도 고려할 부분입니다. oil-motion은 영문 README로 전체 흐름을 충분히 설명하지만, 생성 파라미터와 자산 처리, 런타임(Runtime) 동작을 다루는 references/ 아래 문서와 SKILL.md는 중국어로 작성되어 있습니다. 세부 파라미터를 직접 조정하려면 중국어 문서를 읽어야 합니다.

Oil Motion의 라이선스

Oil Motion은 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 다만 생성에 사용하는 영상 모델과 중계 서비스는 각자의 약관을 따르므로, 상업적 사용 전에는 그쪽 조건을 따로 확인해야 합니다.

:github: Oil Motion 프로젝트 저장소 (영문 README)

더 읽어보기




이 글은 GPT 모델로 정리한 초안을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 댓글로 알려주시기를 부탁드립니다. :hugs:

이 도구를 직접 설치해 사용해보셨다면, :pytorch:파이토치 한국 사용자 모임:south_korea: 회원들을 위해 경험이나 팁을 댓글로 남겨주세요! :folded_hands: