애니메이션 라이브러리 개발 경험: 성능과 DX를 모두 잡는 방법

본문에서는 CSS 애니메이션(CSS Animation)과 JS 스프링(JS Spring)의 상반된 장단점을 분석한다. CSS 애니메이션은 컴포지터 스레드(Compositor Thread)에서 실행되어 성능이 우수하지만, 현재 속도를 알 수 없어 스프링 물리를 구현하기 어렵다. 반면, JS 스프링은 메인 스레드(Main Thread)에서 실행되므로 다른 JS 작업에 의해 애니메이션이 버벅거릴 수 있다. SSGOI 3.0은 스프링 시뮬레이션을 미리 계산하여 Web Animation API(WAAPI)로 실행하는 방식으로 이 딜레마를 해결했다.

WAAPI는 CSS 애니메이션처럼 컴포지터 스레드에서 실행되므로 성능이 뛰어나지만, 현재 속도를 직접 가져오는 API가 없어 스프링 물리를 구현하는 데 어려움이 있다. SSGOI는 시뮬레이션 데이터를 보관하여 이 문제를 해결했다. 즉, WAAPI에서 속도를 가져올 수 없지만, 시뮬레이션 데이터를 통해 현재 속도를 계산하고, 방향 전환 시 새로운 키프레임(Keyframe)을 생성하여 부드러운 애니메이션을 구현한다. 이 방식은 CPU 6x slowdown 테스트에서도 60fps를 유지하며 성능을 입증했다.

React와 같은 프레임워크에서 DOM이 제거될 때, 애니메이션 상태가 초기화되는 문제를 해결하기 위해 DOM 소멸 감지(DOM Destruction Detection) 기술을 활용한다. motion의 AnimatePresence는 자식 컴포넌트의 소멸을 감지하여 퇴장 애니메이션을 관리하지만, 모든 컴포넌트를 감싸야 하는 번거로움이 있다. SSGOI는 MutationObserver(MutationObserver)를 사용하여 DOM 변화를 직접 감시함으로써 프레임워크에 의존하지 않고 범용적인 퇴장 애니메이션을 구현한다. 또한, 언마운트/리마운트 시 애니메이션 상태를 유지하기 위해 상태를 컴포넌트 외부에서 관리하고, 빌드 타임 키 자동 생성을 통해 개발 편의성을 높였다.

SSGOI는 개발자 경험(DX) 향상을 위해 빌드 타임(Build Time)에 키를 자동 생성하는 방식을 채택했다. 개발자가 직접 key를 지정하는 번거로움을 줄이고, 소스 코드의 위치를 기반으로 키를 생성하여 상태 관리의 일관성(State Management Consistency)을 확보한다. unplugin을 사용하여 여러 번들러(Vite, Webpack, Rollup)를 지원하고, AI 기반 코드 생성을 통해 빌드 플러그인 개발의 효율성을 높였다. 이처럼 개발 생산성을 높이는 것은 라이브러리 개발의 중요한 부분이다.

본문은 애니메이션 라이브러리 개발 과정에서 마주치는 다양한 문제와 해결책을 제시하며, 기술적 트레이드오프(Trade-off)를 어떻게 해결하는지가 핵심임을 강조한다. CSS 애니메이션과 JS 스프링의 장단점, WAAPI의 한계, DOM 생명주기 관리, DX 개선 등 다양한 측면에서 고민하고, Web Animation API, MutationObserver, unplugin과 같은 기술을 활용하여 성능, 자연스러움, 개발 편의성을 모두 잡으려는 노력을 보여준다. 결국, 문제 정의(Problem Definition)가 중요하며, AI를 활용하여 구현을 자동화하는 시대가 도래했음을 시사한다.