2024
IBA Renewal
종합 컨설팅 기업 IBA의 기업 사이트 전면 리뉴얼로, GSAP과 Lenis를 중심으로 스크롤 인터랙션과 모션 중심의 경험을 구현했습니다.
사이트 방문하기Background
IBA는 종합 컨설팅 기업으로, 기업 이미지 쇄신을 위한 사이트 전면 리뉴얼을 진행했습니다. 디자인팀은 영상·모션 중심의 고품질 인터랙션 경험을 목표로 했고, 각 섹션마다 스크롤 연동 애니메이션, 패럴렉스, 카운터 모션 등 다양한 인터랙션이 요구되었습니다. GSAP과 Lenis를 조합하여 부드러운 스크롤 기반 경험을 구현하는 것이 이 프로젝트의 핵심이었습니다.
Responsibilities
- GSAP ScrollTrigger 기반 섹션별 스크롤 인터랙션 구현 (Fade, Parallax, Pin 등)
- Lenis smooth scroll 설정 및 GSAP ticker 통합으로 이벤트 루프 단일화
- 수치 카운터 애니메이션 구현 (IntersectionObserver + gsap.to)
- 배너 슬라이더 커스텀 트랜지션 구현 (Swiper.js)
- will-change, GPU 가속 적용으로 애니메이션 성능 최적화
- PC · 태블릿 · 모바일 반응형 인터랙션 분기 처리
Key Challenge
각 컴포넌트마다 스크롤 이벤트 리스너를 개별 등록하면서 스크롤 시 심각한 프레임 드롭(30fps 이하)이 발생했고, 모바일에서는 인터랙션이 끊기는 현상이 있었습니다.
Lenis의 raf 콜백을 GSAP ticker에 단일 등록하여 이벤트 루프를 통합하고, ScrollTrigger.create()로 인스턴스를 컨텍스트 단위로 관리하도록 구조를 변경했습니다.
스크롤 성능 60fps 안정화 달성. 모바일 환경에서도 버벅임 없는 인터랙션 구현, Lighthouse 성능 점수 기존 대비 18점 향상.
Retrospective
인터랙션의 품질은 라이브러리 선택보다 사용 방법에 달려 있다는 것을 실감한 프로젝트입니다. GSAP과 Lenis를 함께 쓸 때 이벤트 루프를 단일화하지 않으면 오히려 성능이 저하될 수 있다는 점을 직접 디버깅하며 배웠습니다. 이 경험을 통해 브라우저 렌더링 파이프라인과 requestAnimationFrame에 대한 이해가 한 단계 깊어졌습니다.