Loading...

모션 스킬 · rossark-motion-skill

코딩 AI에게 그냥 맡기면 4.5초 동안 굳어 있던 마스코트가, 애니메이터의 원칙을 읽히자 쉬지 않고 움직였어요

Claude Code나 Codex에 붙이는 rossark-motion 스킬은 애니메이터의 원칙과 움직임 엔진, 프레임마다 재는 도구를 함께 줘요. 맨 위 영상은 한 튜토리얼 채널이 같은 마스코트 장면을 스킬 없이 한 번, 스킬을 읽힌 뒤 한 번 만들게 해 나란히 놓은 비교예요. 공개된 날 바로 자기 운동 앱 마스코트에 붙여 배포한 사람까지, 사례를 모아 봤어요.

2026.10.26·사례 3

같은 주황색 마스코트를 스킬 없이 만든 버전(왼쪽)과 스킬을 읽힌 뒤 만든 버전(오른쪽)을 나란히 놓은 비교 화면
튜토리얼 채널 WifiCoding의 비교 영상이에요. 1분 21초부터 왼쪽이 스킬 없이, 오른쪽이 스킬을 읽힌 뒤예요. 출처: WifiCoding YouTube

이 스킬은 개인 앱 개발자 ROSS가 10월 22일 공개했어요. 저장소의 데모는 그림도 움직임도 템플릿으로 전부 코드로 만들었다고 적었어요. ROSS는 자기 앱의 온보딩·결제 화면 그림을 움직이려다 이 방법을 만들었고, 출시 글에 “@rive_app is overkill. i just want my apps to feel alive.(Rive까지 쓸 일은 아니다. 그냥 내 앱이 살아 있는 느낌이면 된다)”라고 썼어요. Rive는 앱 애니메이션을 만드는 전문 도구예요.

나흘 뒤인 10월 26일, 이 출시 글은 조회 16만 6천 회를 넘겼고 저장해 둔 사람(북마크 3,343)이 좋아요(2,034)보다 많았어요. 공개된 날 저녁에는 프랑스어를 쓰는 한 개발자가 이 스킬을 자기 운동 기록 앱의 코치 마스코트에 붙여 배포까지 마쳤어요.

스킬에는 애니메이터의 원칙 12가지(장면 전체를 하나의 시계로 움직이기, 착지할 때 몸이 눌렸다가 펴지기, 깜빡임은 약 110밀리초에 감고 190밀리초에 뜨기 등)와 React Native·SwiftUI용 움직임 엔진, 결과를 프레임마다 재는 도구가 들어 있어요. 웹용 템플릿은 없지만 같은 방법이 웹에서도 된다고 적혀 있고, 무료(MIT 라이선스)예요.

Reference 01운동 기록 웹앱 SachaRbone Fit을 직접 만들어 쓰는 개발자 SachaRM7 · GitHub

가만히 서 있던 운동 앱의 코치 마스코트가, 스킬이 나온 날 바로 숨 쉬고 응원하는 캐릭터로 앱에 올라갔어요

SachaRM7은 스킬이 공개되고 다섯 시간 남짓 뒤에 코치 마스코트를 움직이게 바꾼 작업(PR)을 앱에 반영하고 배포했어요. 마스코트는 준비·휴식·격려 세 상태에서 은은하게 숨 쉬고 살짝 기울어요. 격려 동작은 한 번만 재생되고, 화면 밖에 있거나 탭을 숨기거나 기기에서 '동작 줄이기'를 켜면 움직임이 멈춰요. 아주 작게 나오는 자리에서는 고정된 그림 그대로 두었고, 새로 들인 라이브러리는 없었어요.

첫 작업에는 “Les images restent aplaties: yeux et bras ne bougent pas indépendamment.(이미지가 한 장으로 합쳐져 있어 눈과 팔이 따로 움직이지 않는다)”라고 적었어요. 이어서 올린 작업에서는 그림에서 팔과 엄지를 따로 떼어 움직이게 해, 몸은 가만히 둔 채 팔뚝을 들고 1.8초에 걸쳐 엄지를 펴는 동작을 더했어요. 지금 공개된 비교 화면에서는 고정 이미지 옆에서 코치가 주먹 쥔 팔을 들어 엄지를 펴고, 운동 화면(40px)·홈(72px)·코치 화면(120px)에 실제로 들어가는 크기로 볼 수 있어요.

SachaRbone Fit의 마스코트 비교 화면. 왼쪽 고정 이미지 옆에서, 오른쪽 코치가 주먹 쥔 팔을 아래에서 들어 올린 뒤 엄지를 펴요
공개된 비교 화면(/mascotte)의 '잘했어(Bien joué)' 상태를 2026-10-26에 녹화했어요. 왼쪽이 고정 이미지, 오른쪽이 움직이는 버전이에요. 출처: SachaRbone Fit

Reference 02튜토리얼 · Claude Code 저장소를 소개하는 YouTube 채널 WifiCoding(마스코트는 Claude가 시험용으로 그린 것)

스킬 없이 만들면 4.5초 동안 멈춰 서 있던 마스코트가, 스킬을 켜자 쉬지 않고 웅크렸다 뛰어올라 착지했어요

WifiCoding은 Claude에게 작은 주황색 마스코트를 그리게 한 뒤, 둘러보고 눈을 깜빡이다 뛰어올라 봉투를 잡는 10초 장면을 두 번 만들게 했어요. 한 번은 스킬 없이, 한 번은 스킬을 읽힌 뒤였어요.

스킬 없이 만든 쪽에서는 실수 일곱 가지가 나왔어요. 하나의 시계 대신 타이머 다섯 개가 따로 돌았고, 포즈마다 뚝 멈췄고, 4.5초 동안 몸이 전혀 움직이지 않는 구간이 있었어요. 뛰어오를 때 웅크리지도 착지할 때 몸이 눌리지도 않았고, 잎사귀는 점프를 따라 흔들리지 않았고, 눈은 봉투를 따라가지 않았어요. 스킬을 켠 쪽은 점프 전에 웅크리고 착지할 때 몸이 눌렸다가 펴졌고, 스킬에 든 측정 도구로 재 보니 몸이 멈춰 있는 가장 긴 시간이 4.5초에서 0.3초로 줄었어요.

채널은 이렇게 맺었어요. “the difference between the left and the right is exactly the difference between something animated and something alive.(왼쪽과 오른쪽의 차이가 곧 '움직이는 것'과 '살아 있는 것'의 차이다)”

Reference 03제작사 공식 시연 · 스킬을 만든 개인 앱 개발자 ROSS

제작자 ROSS의 데모에서는, 물을 주면 꽃이 피고 뒤집은 팬케이크가 요리사 모자에 떨어졌다 팬으로 돌아와요

저장소에는 아이가 휴대폰 화면 안으로 내려앉아 공을 차고 손을 흔드는 Reveal 말고도 데모가 더 있어요. Garden은 소녀가 물을 주면 새싹이 자라 꽃이 피고, 나비가 날아든 뒤 꽃잎이 지고 다시 새싹으로 돌아가는 10초 장면이에요. Chef는 요리사가 팬케이크를 두 번째로 뒤집자 팬케이크가 모자 위에 떨어졌다가 미끄러져 팬으로 돌아오는 9.6초 장면이에요.

공식 데모 Reveal GIF. 휴대폰 화면 안으로 빨간 줄무늬 옷을 입은 아이가 내려앉아 공을 차고 손을 흔드는 9초 루프
공식 데모 Reveal이에요. 출처: rossark-motion-skill GitHub
공식 데모 Garden GIF. 소녀가 물을 주자 새싹이 자라 꽃이 피고 나비가 날아드는 장면
공식 데모 Garden이에요. 출처: rossark-motion-skill GitHub
공식 데모 Chef GIF. 요리사가 뒤집은 팬케이크가 요리사 모자 위에 떨어졌다가 팬으로 미끄러지는 장면
공식 데모 Chef예요. 출처: rossark-motion-skill GitHub

사람들의 반응

좋았다는 반응

  • “使うと効く場面 ・キャラやマスコットを、待機中も生きてるように見せたいとき ・連打や動きの途中で触られる要素(ガクガク → ふわっと1回で着地) ・跳ねる・着地など、重さを出したい動き”

    효과가 있는 경우: 캐릭터나 마스코트를 가만히 있을 때도 살아 있는 것처럼 보이게 하고 싶을 때, 연타하거나 움직이는 도중에 눌리는 요소(덜컹덜컹 → 사뿐히 한 번에 착지), 점프·착지처럼 무게감을 내고 싶은 동작

    Codex 책을 쓴 웹 엔지니어로, Codex에서 스킬 없이와 켜고를 21초 좌우 영상으로 비교한 뒤 남긴 글이에요. 웹에서 시험했어요.

    스나가쿠(@suna_gaku) · Xx.com
  • “a tiny bit of motion makes a half-built app feel alive. smart skill to have around”

    움직임이 조금만 있어도 반쯤 만든 앱이 살아 있는 느낌이 난다. 곁에 두면 좋은 스킬이다

    iPhone 앱을 공개적으로 만드는 개발자가, 제작자가 이 스킬로 앱 캐릭터들을 움직인 영상에 단 답글이에요.

    Cupsey(@cupseycode) · Xx.com

아쉬웠다는 반응

  • “効かない場面 ・ボタン、タブ、単純なアイコン(素の Codex で十分) ・派手さを出したいとき(控えめな動きになる) トークン消費は約 1.4 倍。影や瞬きなど細かい部分は少し手直しが必要でした”

    효과가 없는 경우: 버튼·탭·단순한 아이콘(기본 Codex로 충분), 화려하게 보이고 싶을 때(움직임이 차분해진다). 토큰 소비는 약 1.4배. 그림자나 깜빡임 같은 세부는 손으로 조금 고쳐야 했다

    스나가쿠(@suna_gaku) · Xx.com
  • “It is a method, not magic, so you still need to look at the result. And Claude told me itself that it did not watch the two videos. It checked the frames and the numbers instead.”

    방법일 뿐 마법이 아니라서 결과는 여전히 직접 봐야 한다. Claude도 두 영상을 보지는 않았고, 대신 프레임과 숫자를 확인했다고 스스로 말했다

    WifiCoding · YouTubeyoutube.com
  • “Really want to use this, but my mascot is just PNG assets”

    정말 쓰고 싶은데, 내 마스코트는 PNG 파일뿐이다

    가계부 앱을 혼자 만드는 개발자가 출시 글에 단 답글이에요.

    İlker(@piecheckapp) · Xx.com

시작하는 법

Claude Code나 Codex 같은 코딩 에이전트에 아래 요청을 붙여 넣으면 돼요. 움직일 그림은 눈·팔·몸이 따로 나뉜 SVG여야 각 부분이 따로 움직여요.

  1. 시작 요청

    https://www.working-ref.com/reference/rossark-motion-2026-10 를 읽고, GitHub의 rossark0/rossark-motion-skill 스킬을 설치해 줘. 그다음 내 프로젝트의 그림과 화면을 보고 움직이면 좋을 것 세 가지를 제안해 줘. 내가 하나 고르면 바로 시작하고, 고를 게 없으면 마스코트가 가만히 있을 때 숨 쉬고 눈을 깜빡이는 것부터 해 줘. 남의 캐릭터가 아니라 내가 가진 원본 그림으로만 작업하고, 결과는 브라우저나 앱 화면에서 바로 확인할 수 있게 해 줘.

이 레퍼런스 공유하기

매주 1회 · 무료

이 레퍼런스가 도움이 되셨나요?

매주 쏟아지는 AI 소식 중 BEST
딱 3개만, 메일함에 꽂아 드릴게요

Work Smarter with AI

420명이 매주 받아보고 있어요

구독 완료 다음 호부터 메일함에서 만나요.