Rive CLI와 코딩 agent, hover 애니메이션을 prompt로 제작

Spotify의 연말 결산 Wrapped나 FigJam의 로딩 아이콘처럼 마우스와 손가락에 반응하는 그래픽은 Rive로 만들었습니다. 지금까지는 Rive 편집기에서 artboard(그림을 그리는 작업 화면)를 만들고 뼈대를 심고 상태 전환을 하나씩 잇느라 몇 시간이 걸렸습니다. Rive가 내놓은 CLI(명령줄 도구)를 Claude Code나 Codex 같은 코딩 agent에 연결하면 이 작업을 prompt로 지시할 수 있습니다. 기타 줄 물리 효과, 입력창 UI, 웹사이트 hover(마우스를 올려 두는 동작) 효과 복제, 캐릭터 로딩 화면, Blender 3D 모델을 쓴 집중 타이머까지 다섯 가지 작업으로 agent에 무엇을 맡기고 무엇을 직접 손봐야 하는지 정리합니다.

Rive 그래픽이 Lottie·MP4와 다른 점

Rive 그래픽은 앱이 실행되는 동안 실시간으로 그려지고, state machine(입력에 따라 애니메이션 상태를 바꾸는 규칙 묶음)을 품고 있습니다. 그래서 마우스 hover, 탭, 제스처, 입력값에 따라 반응이 달라집니다. 정해진 장면을 그대로 재생하는 Lottie나 MP4 파일과 가장 크게 다른 점입니다.

Duolingo의 캐릭터가 대표적인 예입니다. 여러 층의 state machine이 캐릭터를 대기, 정답, 오답, 중립 상태 사이로 옮기고 입 모양까지 말소리에 맞춥니다. 스마트워치 화면이나 스마트 홈 기기의 조작 화면 시안도 Rive로 만듭니다.

걸림돌은 만드는 수고였습니다. artboard 설정, 뼈대 연결, 상태 전환, 상호작용 코드를 모두 편집기에서 손으로 맞춰야 했습니다. Rive CLI는 이 단계를 코딩 agent의 몫으로 넘깁니다. 자연어 prompt만으로 인터랙티브 벡터 그래픽을 만들고, 스크립트를 쓰고, 미리 볼 수 있습니다.

시작 준비: 요금제와 설치

Rive는 무료 요금제에서도 편집기와 CLI를 모두 쓸 수 있습니다.

시험해 보는 데는 무료 요금제로 충분합니다. 다만 무료 요금제로 내보낸 애니메이션에는 Rive 시작 화면이 반드시 붙으므로, 실제 서비스에 넣으려면 유료 요금제가 필요합니다.

준비 순서는 다음과 같습니다.

1. Rive 계정을 무료로 만듭니다.
2. Claude Code 데스크톱 앱에서 Rive 작업만 하는 프로젝트 폴더를 만듭니다.
3. 모델은 Claude Opus 5.5, 추론 effort는 High로 고릅니다. 파일을 빠르게 연달아 고치는 동안 승인 창이 계속 뜨지 않도록 Bypass permissions도 켭니다.
4. Rive 사이트에 있는 한 줄짜리 설치 스크립트를 그 폴더에서 Claude Code로 실행합니다.

설치가 끝나면 Claude Code가 로컬에서 Rive artboard를 만들고, 스크립트를 쓰고, 미리보기를 띄울 수 있습니다. Bypass permissions는 확인 절차를 건너뛰는 설정이므로 이처럼 전용 폴더에서만 켜 두는 편이 안전해 보입니다.

그림 한 장을 손에 반응하는 그래픽으로

첫 작업은 가장 단순한 상호작용입니다. 가운데가 흐려지는 그러데이션 세로줄 그림을 참고 이미지로 주고, 검은 배경에 파란 줄로 다시 그리되 마우스를 올리면 뻣뻣한 기타 줄처럼 움직이게 하라고 지시합니다.

Claude Code는 Rive의 스크립트 언어인 Luau로 물리 동작을 직접 씁니다. 커서 위치를 따라가고, 닿은 지점에서 줄이 걸려 휘고, 놓으면 5Hz로 튕기며 울리다가 점점 잦아드는 감쇠까지 들어갑니다. 미리보기에서 커서로 화면을 훑으면 닿은 지점의 줄만 탄력 있게 밀렸다가 부드럽게 멈춥니다.

스크린숏 두 장으로 UI 부품 만들기

다음은 정지 화면을 작동하는 UI로 바꾸는 작업입니다. OpenAI 홍보물의 장면 두 개를 스크린숏으로 줍니다. 하나는 ’Ask ChatGPT’라고 적힌 알약 모양의 접힌 입력창이고, 다른 하나는 수족관 사진과 입력 중인 질문이 들어간 펼쳐진 흰 카드입니다. 지시는 짧습니다. prompt 사각형에 마우스를 올리면 이렇게 열리는 애니메이션을 만들어 달라는 한 문장입니다.

Claude Code는 두 장면을 읽고 모서리가 둥근 벡터 상자를 만듭니다. 마우스를 올리면 카드가 살짝 넘쳤다가 제자리로 돌아오는 easing(움직임의 가속과 감속 곡선)으로 커지고, 아이콘이 바뀌고, 사진이 서서히 나타나고, 깜박이는 커서와 함께 글자가 하나씩 입력됩니다.

이 작업에서 얻을 요령은 시작 상태와 끝 상태의 스크린숏을 함께 주는 것입니다. 그래야 모델이 애니메이션의 처음과 끝을 분명히 알고 그 사이를 채웁니다.

같은 방식으로 스마트 홈 온도 조절기의 원형 다이얼도 만들 수 있습니다. 여러 장의 스크린숏을 주고 처음부터 만들게 하면 냉방에서 난방까지 끌어 돌리는 다이얼, 바뀌는 온도 숫자, 모드 전환 버튼, 은은하게 바뀌는 배경 빛을 갖춘 시제품이 나옵니다.

웹사이트의 hover 효과를 읽어 옮기기

복잡한 웹 레이아웃은 Dropbox 브랜드 가이드라인 사이트로 시험합니다. 이 사이트 아래쪽에는 Framework, Voice & Tone, Logo, Typography, Color, Imagery, Iconography, Motion의 여덟 칸으로 된 bento grid(크기가 다른 칸을 도시락처럼 맞춰 배치한 레이아웃)가 있습니다. 칸마다 마우스를 올리면 곡선이 휘고, 인용문이 미끄러지고, 로고 마름모가 벌어지고, 자물쇠 고리가 열리는 식으로 움직임이 다릅니다.

Claude Code에는 사이트 주소와 함께 맨 아래로 내려가 bento grid를 분석하고 hover 애니메이션까지 Rive로 다시 만들라고 지시합니다. Claude Code는 페이지를 읽고 1024x768 화면을 기준으로 칸마다 너비, 간격, RGB 색값을 계산해 같은 배치의 벡터 그래픽과 hover 동작을 만듭니다.

첫 결과는 구조와 움직임을 잘 잡지만, 자물쇠 고리처럼 세밀한 동작은 사람이 손볼 여지가 남습니다. 한 번에 완성품이 나오기보다 빠른 초안이 나온다고 보는 편이 맞습니다.

복제한 결과는 다른 분위기로 바꿀 수도 있습니다. X에서 본 어두운 네온 버튼의 휴대용 게임 컨트롤러를 참고로 주고 Claude Code 테마로 바꾸라고 하면, Chat, Write, Code, Edit, Work, Analyze, Research 카드가 마우스를 올릴 때 보라색과 흰색 선으로 빛나는 다크 모드 bento grid가 됩니다.

캐릭터 로딩 화면: MCP로 참고 자료와 포즈를 보탠다

캐릭터 애니메이션에는 다른 도구를 함께 씁니다. MCP(AI가 외부 도구와 데이터에 연결하는 표준 규격) 서버로 필요한 자료를 agent에 바로 넣는 방식입니다.

1. 노트북 앞에 앉은 흰 토끼 캐릭터 그림을 ChatGPT로 만듭니다.
2. Mobbin MCP 서버로 Claude Code를 앱 화면 모음 서비스 Mobbin에 연결하고, 움직임이 있는 모바일 로딩 화면을 찾습니다. 자기 관리 앱 Finch의 원형 진행 표시 안에 캐릭터가 들어간 화면을 참고 자료로 고릅니다.
3. 토끼가 평소에는 노트북 자판을 바쁘게 치다가 마우스를 올리면 고개를 들고 손을 흔들게 하라고 지시합니다.
4. 그림 한 장을 조각내 움직이니 팔 관절이 어색하게 나옵니다. Higgsfield MCP로 GPT Image 2.5를 불러 자세별 이미지를 따로 만들어 보완합니다.
5. 완성한 토끼를 Finch처럼 원형 진행 표시 안에 넣고 준비 중이라는 문구를 달아 온보딩 로딩 화면을 만듭니다.

그림 한 장에서 캐릭터를 자동으로 나누면 관절이나 가장자리가 어색해지기 쉽습니다. 이럴 때는 자세마다 일관된 이미지를 따로 생성해 겹쳐 쓰는 방법이 통합니다.

▲ 캐릭터 로딩 화면과 자세 이미지

Blender 3D 모델을 Rive 위젯으로

가장 손이 많이 가는 작업은 3D입니다. 여기서는 Codex와 Blender를 함께 씁니다. Codex는 운영체제와 Blender 프로그램을 직접 조작해 3D 모델을 만들고 rigging(움직일 수 있게 뼈대를 심는 작업)까지 합니다.

Codex에 세이지 그린색 복고풍 책상 램프를 만들고, 접혀서 잠든 상태와 똑바로 서서 불이 켜진 상태를 오가게 하라고 지시합니다. Codex는 모델을 만들고 관절의 움직임 제한을 걸고 keyframe(동작의 기준이 되는 장면)을 확인한 뒤, 모델과 미리보기를 함께 내보냅니다.

그다음 내보낸 파일과 한 3D 아티스트가 Blender 보물 상자를 Rive로 옮긴 시연 자료를 Claude Code에 주고, 토끼 캐릭터와 같은 그림체로 집중 타이머를 만들게 합니다. 명세는 다음과 같습니다.

완성한 위젯은 마우스를 올리면 램프가 부드럽게 움직이고, 켜면 25:00부터 시간이 줄어드는 타이머가 작동합니다. Blender 작업에는 운영체제 수준의 조작으로 프로그램 화면을 직접 다룰 수 있는 Codex가 지금은 더 알맞은 선택으로 보입니다.

맡길 일과 직접 손볼 일

Rive CLI와 코딩 agent를 묶으면 편집기에서 몇 시간씩 쓰던 일을 몇 분짜리 초안 작업으로 줄일 수 있습니다. 다만 첫 결과가 사람이 공들여 만든 애니메이션만큼 정교한 경우는 드뭅니다. 직접 시작한다면 다음 순서가 무난합니다.

• 무료 요금제로 계정을 만들고 전용 폴더에 CLI를 설치합니다.
• 기타 줄 같은 단순한 hover 효과로 agent의 결과물 수준을 먼저 확인합니다.
• UI를 만들 때는 시작과 끝 상태의 스크린숏을 함께 줍니다.
• 첫 결과는 초안으로 보고 세밀한 동작은 직접 다듬습니다.
• 서비스에 넣기 전에는 Rive 시작 화면을 없애는 유료 요금제가 필요한지 확인합니다.