WanderWorld Parallax Scroll 랜딩페이지 개발 후기
Source
Evernote/Inbox/WanderWorld의 Parallax Scroll 랜딩페이지 개발 후기.md
Summary
본문은 WanderWorld 서비스의 랜딩페이지에 Parallax Scroll 기법을 적용한 개발 과정과 기획 의도를 정리한 글이다. 랜딩페이지의 본질적 목적(서비스 전환 유도)과 Parallax Scroll의 과도한 스크롤 요구 사이의 긴장 관계를 논의하며, 초기 서비스의 주목도 확보를 위해 의도적으로 이 기법을 선택했음을 설명한다. 개발 측면에서는 기존 라이브러리(Stellar.js, skrollr 등)의 한계와 교체 리스크를 고려해 Dave Gamache의 ‘Parallax Done Right’ 예제 코드를 분석하고, 이를 기반으로 keyframes 배열을 활용한 자체 구현 방식을 채택했다. 성능 최적화를 위해 translate, scale, opacity 등 GPU 가속 가능한 CSS 속성만 사용했으며, 씬(Scene) 단위의 div 구조와 스크롤 기반 애니메이션 로직을 직접 구축했다.
Key Points
- Parallax Scroll은 전경/배경의 속도 차이를 이용한 기법으로, 웹에서는 스크롤 기반 애니메이션을 포괄적으로 지칭하는 경향이 있음
- 랜딩페이지는 서비스 전환을 목적으로 하나, 초기 서비스의 경우 주목도 확보를 위해 Parallax Scroll과 같은 시각적 효과를 의도적으로 활용함
- 기존 Parallax 라이브러리(Stellar.js, Jarallax, skrollr 등)는 테스트 및 교체 비용이 크고 한계가 명확해 자체 구현을 결정함
- Dave Gamache의 ‘Parallax Done Right’ 예제 코드를 분석하여 동작 원리를 파악하고, 이를 개선한 자체 솔루션을 개발함
- 구현 구조: 각 씬을 div로 분리하고, JavaScript의 keyframes 배열을 통해 스크롤 위치와 애니메이션 매핑을 관리함
- 성능 최적화: repaint 최소화를 위해 translateX/Y, scale, opacity 속성만 사용하며, 값은 퍼센티지 또는 픽셀 중 하나로 통일하여 계산 오류를 방지함