3.4MB 비디오를 40KB GSAP 애니메이션으로 대체하여 성능과 연출력 동시 확보

Part 2: Replacing a 3.4MB video with 40kb of scripted GSAP animations: adding a camera

Sugam Panthi2026년 5월 27일9분intermediate

AI 요약

Context

고용량 비디오 기반 제품 데모의 느린 로딩 속도와 SEO 부재 및 수정 불가한 정적 특성 해결 필요. 단순 평면 애니메이션은 실제 제품의 카메라 워킹(Zoom/Pan)이 주는 몰입감을 재현하지 못하는 한계 존재.

Responsive Scaling 유지와 Zoom 연출의 충돌 해결을 위해 Outer Frame(scale 관리)과 Inner Wrapper(GSAP 제어)로 분리한 계층 구조 설계
특정 타겟 요소 중심의 Zoom-in을 위해 뷰포트 중심점과 타겟 좌표 간의 거리 차이에 Zoom 배수를 곱한 Pan Math 로직 적용
단순 반복 Zoom 대신 '단일 Zoom-in → 타겟 추적 Pan → 단일 Zoom-out'으로 이어지는 시퀀스 설계로 연출의 연속성 확보
하드웨어 가속을 위해 모든 애니메이션을 transform 및 opacity 속성에 한정하여 Compositor 레이어 최적화
기계적 가속도를 제거한 sine.inOut Easing 적용으로 실제 카메라 돌리(Dolly) 샷의 물리적 움직임 구현
카메라 이동 시 커서를 정지시키지 않고 다음 타겟 방향으로 20~30% Drifting 시켜 시각적 연속성 유지

실천 포인트

1. CSS transform 속성 충돌 시 제어 주체를 분리한 Wrapper 구조 검토

2. 카메라 워킹 구현 시 단순 좌표 이동이 아닌 뷰포트 중심 기준의 상대 좌표 계산식 적용

3. 애니메이션의 기계적 느낌을 제거하기 위해 물리 기반 Easing Curve(sine, expo) 교차 검증

4. GPU 가속을 위해 layout shift를 유발하는 속성 대신 compositor-friendly 속성 우선 사용

태그