소개 및 역할
제약 바이오 기업을 대상으로 토탈 솔루션 및 컨설팅 서비스를 제공하는 전문 에이전시 홈페이지입니다.
- 퍼블리싱 및 GSAP를 활용한 인터랙션 작업을 담당했습니다.
- 투입인원: 퍼블리싱 및 프론트엔드 개발 2명, 디자이너 2명, PM 1명
기여한 부분
- GSAP를 활용하여 디자인 컨셉에 맞춘 마이크로 인터랙션과 스크롤 인터랙션을 구현
- 브랜딩 페이지의 핵심 타겟인 2030 사용자 유입을 고려한 트렌디한 인터랙션 구상에 참여
- SVG 파일을 활용한 다이나믹 애니메이션 구현
- 컬러 변경, 형태 변형, Path 애니메이션을 적용하여 유연한 그래픽을 연출
- PC, Tablet, Mobile 디바이스에서 일관된 인터랙션과 반응형 적용
- Webpack을 활용한 빌드 환경 구축
인터랙션 작업
-
인트로 인터랙션으로 SVG를 다양한 형태로 변형하며 GSAP **
timeline()**을 통해 다이나믹 인터랙션 구현-
페이지에 처음 진입한 경우에만 인트로 애니메이션을 실행하고
-
한 번 실행 후 재 실행되지 않도록
sessionStorage에 상태를 저장
-
-
Society 페이지에서 드래그 앤 드랍이 가능한 다이나믹 슬라이더를 순수 자바스크립트로 구현
-
마우스가 X축으로 이동한 거리와 드래그 속도값(velocity)을 통해 슬라이더의 회전 정도를 제어
-
드래그가 끝나는 시점에 슬라이더 아이템의 위치로 정렬되는 Snap 효과 적용
-
원활한 인터랙션을 위해 mouse, touch 이벤트 핸들러로 데스크탑, 모바일 대응
-
-
그 외 인터랙션:
- 스크롤 위치에 따라 텍스트, 이미지가 자연스럽게 나타남
- 스크롤 중 특정 섹션에서 가로 스크롤로 동작
- Society 페이지의 숫자 카운팅
- 마우스 커서를 따라다니는 원형
사용 기술
-
GSAP
비교적 간단한 문법으로 복잡한 스크롤 기반의 애니메이션(ScrollTrigger)이나 시퀀스 애니메이션(Timeline)을 디자인 의도에 맞게 정확한 구현이 가능했습니다.
성능 최적화가 잘 되어있어 부드럽고 안정적인 사용자 경험을 제공하기에 적합하다고 판단했습니다.
- GSAP는 내부적으로
requestAnimationFrame을 사용해 자연스러운 구현이 가능하며, 백그라운드 탭에서 자동으로 모션을 중단하기 때문에 CPU 사용을 절감할 수 있음 - 기본적으로 GPU를 사용하는 스타일 속성을 사용하여 reflow, repain를 과정을 줄임
- 자동으로
will-change와 같은 최적화 속성을 부여
- GSAP는 내부적으로