Svgator, Rive, Lottie가 DOM에 너무 무거워서 20KB 모션 엔진을 만들었습니다

Source: Dev.to

The Problem: The “Black Box” of Web Animation

우리는 모두 그런 경험을 해봤습니다. 고품질 애니메이션이 필요해서 Lottie나 Rive를 사용하려고 할 때 말이죠. 보기엔 멋지지만 비용이 따릅니다:

• 무게: Rive 런타임은 280 KB 이상부터 시작합니다. SVGator조차도 약 38 KB 정도입니다.
• SEO 공백: 캔버스 기반 애니메이션은 “블랙 박스”입니다. 검색 엔진이 내부를 볼 수 없습니다.
• 접근성: 스크린 리더는 DOM 외 요소를 다루는 데 어려움을 겪습니다.

성능에 집착하는 시니어 개발자로서 나는 이렇게 물었습니다: DOM을 포기하지 않고 고급 모션을 구현할 수 있을까?

The Solution: Fluv, the Semantic Motion Engine

지난 몇 달 동안 Fluv를 만들었습니다. 이것은 단순한 또 다른 라이브러리가 아니라, 애니메이션을 네이티브 웹 시민으로 다루는 Semantic Motion Engine입니다.

Key Achievement: 20 KB Modular Runtime

• 독자적인 모듈식 아키텍처 덕분에 런타임 크기가 약 20 KB에 불과합니다.
• 선택적 로딩: 특정 애니메이션에 필요한 기능(이징 함수, 스태거링 등)만 로드됩니다.
• 가장 가까운 경쟁 제품보다 10 KB–20 KB 가볍습니다.

Why “Semantic”?

• SEO‑Native: 애니메이션이 SVG 경로를 직접 DOM에서 조작하므로 모든 요소가 크롤링 가능합니다.
• Stylable: 다른 DOM 요소처럼 CSS나 JavaScript로 애니메이션을 제어할 수 있습니다.
• Lightweight: 프레임을 “렌더링”하기 위한 무거운 엔진이 필요 없으며, 브라우저가 가장 잘하는 일을 수행합니다.

Technical Deep Dive

경로 데이터를 파싱하고 보간하는 방식을 재설계했습니다. 방대한 JSON 파일 대신, Fluv는 원시 프레임 데이터보다 수학적 곡선을 우선시하는 압축 로직을 사용합니다.

Support includes

• 확장된 애니메이션 타입(패스 모핑, 변형 등).
• 그룹 요소를 위한 복잡한 스태거링.
• 유기적인 움직임을 위한 커스텀 이징 함수.

Repository

소스 코드는 GitHub에서 확인할 수 있습니다.

Discussion

궁금합니다: 여러분의 프로젝트에서 애니메이션 런타임에 할당하는 “예산”은 얼마인가요? 랜딩 페이지에 280 KB가 너무 무겁다고 생각하시나요? 댓글로 의견을 나눠 주세요!