JS 런타임 제거와 Native CSS 기반의 120fps 고성능 인터랙션 구현

Context

럭셔리 커머스의 고도화된 인터랙션 구현을 위한 GSAP, Framer Motion 등 JS 애니메이션 엔진 도입 시 발생하는 Layout Thrashing과 메인 스레드 부하 문제 분석. 특히 모바일 및 중저가 기기에서의 성능 저하로 인한 User Experience 훼손이라는 Paradox 상황 직면.

Technical Solution

• JS를 Animation Engine이 아닌 Spatial/Time/Scroll 데이터 공급을 위한 Input Engine으로 역할 재정의
• Cursor.js, Trig.js를 통한 좌표 및 스크롤 상태의 CSS Variable 매핑으로 렌더링 제어권을 Browser Native Engine으로 위임
• Passive Event Listeners 채택을 통한 스크롤 및 입력 이벤트의 Non-blocking 처리 구조 설계
• Element Boundary Caching을 통한 반복적인 Layout Read 제거 및 Layout Thrashing 원천 차단
• IntersectionObserver 연동을 통한 비가시 영역 내 데이터 트래킹 완전 중단으로 CPU 오버헤드 최소화
• Motion.js의 Time Interpolation과 CSS Transition의 결합을 통한 RAF Loop 없는 부드러운 보간 애니메이션 구현