번들 크기 27% 절감, Framer Motion 제거로 달성한 모바일 성능 최적화

Context

모바일 Lighthouse 점수가 70점대 초반으로 정체된 상황. Framer Motion 라이브러리가 전체 프로젝트에서 가장 큰 의존성을 차지함. 단순 애니메이션 구현을 위해 40KB 이상의 JavaScript가 매 페이지 로드마다 전송되는 구조.

Technical Solution

• Framer Motion 의존성을 완전히 제거하고 브라우저 표준 플랫폼 API로 전환하는 전략 채택
• 스크롤 기반 페이드인 효과를 구현하기 위해 IntersectionObserver와 CSS Transition 조합 활용
• 모바일 네비게이션 슬라이드 애니메이션을 JS 기반의 Spring Physics에서 CSS cubic-bezier 기반의 Transform 방식으로 변경
• 단순 호버 효과를 React 리렌더링이 발생하는 JS 로직에서 CSS :hover 가상 클래스 기반의 전이 효과로 대체
• 애니메이션 연산을 메인 스레드에서 GPU를 사용하는 브라우저 컴포지터 스레드로 이전하여 TBT 발생 요인 제거

Impact

• Bundle size 27% 감소
• Mobile Lighthouse Performance 점수 72점에서 89점으로 상승
• Total Blocking Time 약 180ms 감소
• Mobile Time to Interactive 약 0.4s 개선

Key Takeaway

모든 npm 의존성은 사용자에게 비용을 전가하는 세금과 같음. 브라우저 네이티브 API로 구현 가능한 기능을 위해 무거운 라이브러리를 도입하는 과잉 설계를 지양하고 CSS First 원칙을 준수해야 함.