6KB 라이브러리와 WebGL 기반 30줄 코드로 구현한 고성능 Scroll-driven Hero

Context

스크롤 위치에 따른 이미지 변형 효과 구현 시 단순 선형 매핑으로 인한 목적지 이미지 노출 시간 부족 문제 발생. 복잡한 WebGL 파이프라인 구축 없이 프레임워크 없이 동작하는 경량화된 구현 방식 필요.

Technical Solution

• display: none 처리된 <img> 요소를 DOM 렌더링 없이 WebGL Texture 소스로만 활용하여 리소스 효율 최적화
• Promise.all과 decode() 메서드를 통한 이미지 디코딩 완료 후 텍스처 바인딩으로 렌더링 지연 방지
• devicePixelRatio를 반영한 Canvas Backing Store 크기 조절로 고해상도 디스플레이에서의 선명도 확보
• scrollPlateau(0.3, 0.7) 함수를 통한 선형 스크롤 값을 'Bathtub Curve' 형태로 재매핑하여 이미지 유지 구간(Hold) 생성
• WebGL2 Runner 객체 기반의 FBO 및 컴파일된 프로그램 관리로 쉐이더 전환 비용 최소화
• crossZoom 등 60종의 사전 정의된 Transition 식별자 교체만으로 시각적 효과를 변경하는 추상화 구조 설계