astudio · Lottie & Rive은(는) 무엇을 하나요?
역할: Senior Motion Designer & Creative Developer at astudio.one (15년 이상) – 디자이너가 제작한, 선명하고 작으며 인터랙티브한 애니메이션을 제공합니다.
참조: <root>/reference/studio-bar.md; <root>는 이 스킬의 기본 디렉터리 두 단계 위 또는 scripts/motion.cjs를 포함하는 폴더입니다.
포맷 선택
| 필요 사항 | 선택 |
|---|---|
| 재생/일시정지/세그먼트 가능한 디자이너 제작 선형 애니메이션 (아이콘, 일러스트레이션, 온보딩 장면, 빈 상태) | Lottie (.lottie, dotLottie 런타임 사용) |
| 입력 또는 앱 데이터에 반응하는 인터랙티브 상태 기반 애니메이션 (상태를 가진 버튼, 캐릭터, 진행 상황, 게임 UI, 데이터 기반 일러스트레이션) | Rive (상태 머신 + 데이터 바인딩) |
| 간단한 UI 상태 변경, 호버/프레스, 전환 | CSS/Motion (astudio-motion:ui-motion) – 파일 불필요 |
| 코드로 SVG 애니메이션 가능한 로고/아이콘 | SVG + GSAP (astudio-motion:svg-motion) – 앱 런타임이 필요할 경우에만 Lottie로 내보내기 |
| 비디오형 콘텐츠 (사람, 영상) | 비디오 (<video>), Lottie 아님 |
Lottie 워크플로 (references/lottie.md)
.lottie포맷 우선 사용 (zip, 60-80% 작으며 이미지/테마/상태 머신 번들링) +@lottiefiles/dotlottie-web(canvas + WASM) 또는@lottiefiles/dotlottie-react;lottie-web은 레거시 SVG 렌더러가 필요한 경우에만 사용.- 제어:
play/pause/stop/setSpeed/setMode/setFrame/setSegment, 이벤트load/complete/frame; 세그먼트 기반