GSAP와 Three.js를 활용한 인터랙티브 무한 스크롤 갤러리 컴포넌트 2종 개발

Context

기존 Awwwards受賞 사이트에서 사용되는 무한 스크롤 갤러리는 스크롤 방향 제약과 카드 확장 애니메이션 단조로움이라는 한계가 있었다. DOM 기반 컴포넌트는 3D 깊이감 부족, Three.js 기반 컴포넌트는 커스텀 셰이더 구현의 복잡성 문제점을 가졌다.

Technical Solution

• DOM + CSS translate3d 기반 2D 그리드 → 양축 모듈식 래핑으로 omnidirectional 스크롤 구현
• 위치 기반 내부 패럴랙스 → 카드 화면 위치에 따른 이미지 오프셋 조절
• Off-screen culling 적용 → 화면 밖 카드 렌더링 제외로 성능 최적화
• Three.js 커스텀 vertex 셰이더 → uCorners vec4 유니폼으로 각 코너 독립 애니메이션 구현
• Bilinear interpolation → 커브 상태와 풀스크린 상태 간 연속적인 셰이더 보간 수행

Impact

모바일 터치 드래그 시 lerp 우회 방식으로 即時 응답 확보 40개 이상 설정 변수로 컴포넌트 커스터마이징 가능

Key Takeaway

GSAP timeline으로 DOM 애니메이션을, 커스텀 vertex 셰이더로 WebGL 애니메이션을 각각 최적화하면 다양한 비주얼 요구사항 대응 가능