4개 애니메이션 런타임을 단일 State Machine으로 통합해 번들 190KB 절감 및 개발 공수 66% 단축

Context

Rive, GSAP, Lottie, Framer Motion 등 다수 런타임 혼용으로 인한 Dependency 비대화 및 런타임 간 상태 동기화 복잡도 증가. 각 도구의 서로 다른 Mental Model로 인해 디자인 결과물을 코드로 구현하는 Handoff 과정의 병목 발생.

Technical Solution

• State Machine 기반의 Vector Rendering 런타임 ExodeUI 도입을 통한 애니메이션 제어 로직 단일화
• 시각적 상태를 Node 기반으로 정의하는 통합 파일 포맷 채택으로 외형과 동작의 결합도 강화
• 디자인 툴의 출력을 React Component로 직접 생성하는 Pipeline 구축을 통한 Handoff 단계 제거
• 단일 Visual State Machine 설계를 통한 React Hook 및 외부 Timeline 엔진 간의 상태 파편화 해결
• 동일한 시각적 정의 파일에서 Web(React) 및 iOS(Swift) 코드를 각각 생성하는 Cross-platform Export 구조 적용

Impact

• Runtime Bundle Size: 약 280KB에서 90KB로 감소 (gzipped 기준 약 180KB 절감)
• 개발 생산성: Cross-platform 기능 구현 공수 3-person-week에서 1-person-week로 66% 단축

Key Takeaway

특정 기능(애니메이션)을 위해 다수의 전문 라이브러리를 파편적으로 도입하기보다, 도메인 특성에 맞는 통합 런타임을 선택하여 상태 관리 지점을 단일화하는 것이 유지보수성과 성능 면에서 유리함.