Revideo Rive 애니메이션

Rive는 디자이너가 인터랙티브 벡터 애니메이션을 만드는 도구다. Revideo는 .riv 파일을 <Rive/> 컴포넌트로 불러와서 비디오에 넣을 수 있다.

---

🎨 Rive가 뭔가요

항목	설명
Rive	디자인 친화적 벡터 애니메이션 에디터 (Lottie의 인터랙티브 버전)
형식	.riv (Rive 전용 압축 포맷)
장점	디자이너가 직접 애니메이션을 만들고, 개발자는 .riv만 가져다 쓰면 됨
상태 머신	Rive 파일 안에 트리거·조건부 애니메이션 내장 가능

디자이너 협업 워크플로에서 특히 강력. 디자이너가 Rive에서 만든 애니메이션을 .riv로 export → 개발자가 Revideo에 임포트.

---

🛠️ Revido에서 Rive 사용하기

기본 코드

import {Rive, makeScene2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';

export default makeScene2D('scene', function* (view) {
  yield view.add(
    <Rive
      src={'https://revideo-example-assets.s3.amazonaws.com/emoji.riv'}
      animationId={1}
      size={[600, 600]}
    />,
  );
  yield* waitFor(5);
});

---

📋 <Rive/> Props

Prop	타입	필수	설명
src	string	✅	.riv 파일 경로 (URL 또는 public/)
animationId?	string | number	❌	재생할 애니메이션 ID/index. 미지정 시 기본 애니메이션
artboardId?	string | number	❌	아트보드 ID/index. 미지정 시 기본 아트보드
size?	[number, number]	❌	렌더 크기 (px). 기본값은 .riv 메타데이터

⚠️ <Rive/>는 <Rect/>의 자식으로 추가해야 한다. (Revideo의 노드 트리 규칙)

---

💡 실전 패턴

1. 특정 애니메이션만 재생

// .riv 안에 여러 애니메이션이 있을 때 ID로 선택
<Rive
  src="/animations/character.riv"
  animationId="wave"   // 또는 0, 1, 2...
  size={[400, 400]}
/>

2. 로컬 .riv 파일 사용

// public/ 폴더에 .riv 파일을 넣고
<Rive src="/character.riv" animationId={1} size={[400, 400]} />

빌드 시 자동으로 처리됨. Vite가 public 자산 인식.

3. Rive 상태 머신 트리거 (Revideo 0.4+)

// Rive 파일에 "hover" 같은 state machine이 있다면
// (Revideo 향후 버전에서 지원 예정 — 현재는 animationId로 직접 제어)

---

⚠️ 주의사항

이슈	해결
.riv 파일이 너무 크면 렌더 느려짐	디자이너에게 최적화 요청 (예: 5MB 이하)
애니메이션이 끝나면 멈춤	Rive 파일에서 loop 설정 확인
Rive가 인스톨 안 됐다면	Rive 에디터(rive.app)에서 .riv export
Headless 렌더에서 텍스처 깨짐	Rive의 비트맵 임베드 옵션 확인

---

🆚 Rive vs Lottie vs GIF

	Rive	Lottie	GIF
상태 머신	✅	❌	❌
벡터	✅	✅	❌
런타임 크기	중간 (WASM)	작음 (JS)	큼
디자이너 도구	Rive 에디터	After Effects + 플러그인	모든 도구
Revideo 통합	<Rive/> 네이티브	(별도 어댑터 필요)	<Img src="x.gif"/>

Revideo는 Rive와 네이티브 통합. Lottie는 별도 처리 필요. 상태 머신이 필요 없으면 GIF가 가장 간단.

---

🎯 다음 단계

• 3D: Revideo Three.js 3D 애니메이션 → 다음 손자 페이지
• 이모지: Revideo 이모지 활용 → 이전 손자 페이지
• 씬 작성: Revideo Scene Flow 이해하기 → Revideo 시작하기 → 이전 hub

🔗 공식 리소스

• Revideo Rive: https://midrender.com/revideo/docs/guide/designing-animations/rive-animations
• Rive 공식: https://rive.app
• Rive 예제: https://rive.app/experts

상위 문서: ← Revideo 애니메이션 & 디자인 출처: Revideo 공식 문서 — Rive Animations + Rive 한글화 (2026-07-29) 공급사: Revideo (현 Midrender) / Rive Inc.

변경 이력

날짜	변경
2026-07-29	초안 작성 — Rive 개념 + <Rive/> 컴포넌트 + props 표 + 실전 패턴 + Rive/Lottie/GIF 비교 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동