랜딩 페이지에 사용할 15초 분량의 화면 녹화본을 내보내다가 파일 크기가 3.4 MB가 되는 것을 경험했습니다. 모바일에서는 레터박스가 생겼고, prefers-reduced-motion 설정이 되어 있어도 재생되었습니다. 저는 이 비디오를 테마에 맞게 꾸밀 수 없었고, 특정 장면에 일시 정지하거나 스크롤 시 탭으로 이동하며 재생 속도를 조절할 수도 없었습니다. 비디오는 고정된 아티팩트일 뿐입니다. 제품은 살아 움직여야 합니다.

그래서 MP4를 삭제하고 워크스루(walkthrough) 전체를 스크립트 기반 GSAP 애니메이션으로 만들었습니다. 순수 DOM만을 사용했고, 비디오 파일 없이 gzipped 기준으로 40 KB 미만입니다. 모든 요소는 페이지의 실제 요소이며, 나머지 사이트와 동일한 디자인 토큰으로 스타일링되었습니다.

gsap.timeline()을 사용하고, 레이블 기반 위치 지정(label-based positioning), power2.out으로 목표 지점에 감속하는 커서, back.out(2.2) 오버슈트가 적용된 클릭 피드백, 카드별 회전 오프셋을 이용한 스태거링(staggers) 효과, 일정한 속도의 타이핑 텍스트, 그리고 autoAlpha를 사용하여 보이지 않는 요소들이 탭 순서에서 빠지게 하는 장면 간의 크로스페이드(cross-fades) 등을 구현했습니다.

이 게시물에는 사용자가 일시 정지하고 브라우저 내에서 검사할 수 있는 두 개의 라이브 데모가 있습니다. 녹화본도, Lottie도, Rive도 아닙니다. 실행되는 DOM 요소들입니다.

수치 비교:

• GSAP 데모: ~40 KB gzipped
• 동등 MP4: 3.4 MB (85배 더 무거움)
• 동등 GIF: 10+ MB
• 비디오는 레이블이 지정된 장면에 일시 정지할 수 없고, reduced-motion에 반응할 수 없으며, 뷰포트에 적응할 수 없습니다.

전체 글과 라이브 인터랙티브 데모 및 코드는 다음에서 확인하세요: [https://spanthi.com/blog/gsap-choreography/]

실제 적용 사례: [https://costumary.com]