2022
Cauworks 홈페이지 메인 리뉴얼
GSAP 애니메이션과 fullpage.js 기반 섹션 전환을 결합하여 코즈웍스 자사 홈페이지 메인 페이지를 전면 리뉴얼했습니다. PC·모바일 모든 환경에서 충돌 없이 부드러운 인터랙션을 구현하는 것이 핵심 과제였습니다.
Preview
Background
코즈웍스는 웹 에이전시로, 자사 홈페이지 메인 페이지 리뉴얼을 통해 서비스 역량을 더 직관적이고 인상적으로 전달하는 것이 목표였습니다. fullpage.js 기반의 섹션 전환에 GSAP 애니메이션을 결합하여, 회사의 인터랙티브한 작업 스타일을 사이트 자체로 보여주는 방향으로 기획했습니다.
Responsibilities
- fullpage.js 기반 섹션 전환 구조 설계 및 전체 구현
- GSAP를 활용한 섹션 진입 타이밍 애니메이션 구현
- PC · 태블릿 · 모바일 반응형 레이아웃 대응
- PC(mousewheel) · 모바일(touchmove) 커스텀 스크롤 이벤트 제어
- 크로스 브라우징 검수 및 전반 QA
Key Challenge
fullpage.js가 스크롤 이벤트를 자체적으로 점유하는 구조라, GSAP 및 커스텀 휠 스크립트와 동시에 사용할 때 이벤트 충돌이 발생했습니다.
mousewheel(PC) · touchmove(Mobile) 이벤트를 직접 제어하는 스크립트를 별도 작성하여 fullpage.js와 병행 동작하도록 구조를 조정했습니다.
PC · 모바일 모두 섹션 전환과 GSAP 애니메이션이 충돌 없이 매끄럽게 동작하는 인터랙션 환경 완성.
Retrospective
라이브러리를 가져다 쓰는 것과, 구조를 이해하고 쓰는 것은 다르다는 걸 체감한 프로젝트였습니다. fullpage.js처럼 스크롤 이벤트를 강하게 점유하는 라이브러리일수록, 내부 동작 흐름을 먼저 파악한 뒤 커스텀 스크립트와의 충돌 지점을 예측하며 접근해야 합니다. 이 경험 이후로 새 라이브러리를 도입할 때 이벤트 처리 방식부터 확인하는 습관이 생겼습니다.