플러스프로젝트 배경
1) 문제점 - 일반적인 아임웹 기능만으로는 브랜드 캠페인에 필요한 인터랙티브 경험 구현이 어려움 - GSAP 기반 인터랙션을 적용할 경우 아임웹 기본 구조와 스크립트 충돌 가능성 존재 - 디바이스별 화면 크기 차이로 스크롤 길이와 애니메이션 구간이 달라져 동일한 사용자 경험 제공이 어려움 2) 프로젝트 목표 - 아임웹 환경에서도 고품질 인터랙티브 캠페인 웹사이트 구현 - GSAP ScrollT
프로젝트 성과
아임웹 기반 인터랙티브 구현
아임웹 기본 구조를 유지하면서 GSAP ScrollTrigger와 Swiper 기반 인터랙션을 안정적으로 구현했습니다.
디바이스별 사용자 경험 개선
노트북·태블릿·모바일 환경에서 스크롤 길이와 애니메이션 구간을 반복적으로 조정해 사용자 경험을 개선했습니다.
커스텀 코드 충돌 최소화
아임웹 기본 기능과 충돌하지 않는 구조를 설계하여 유지보수성과 안정성을 확보했습니다.
핵심 기능
GSAP ScrollTrigger 인터랙션
스크롤 위치에 따라 콘텐츠와 애니메이션이 자연스럽게 전환되는 인터랙션을 구현했습니다.
진행 단계
인터랙션 설계
2025.12.
캠페인 콘텐츠 흐름을 분석하고 스크롤 기반 인터랙션과 페이지 전환 방식을 설계했습니다.
프로젝트 상세
1) 포트폴리오 소개 브랜드 캠페인 메시지를 몰입감 있게 전달하기 위해 제작한 아임웹 기반 인터랙티브 웹사이트입니다. GSAP ScrollTrigger와 Swiper를 활용해 스크롤에 따라 콘텐츠와 슬라이드가 전환되는 캠페인 페이지를 구현했습니다. 2) 작업 범위 - 캠페인 웹사이트 개발 - 아임웹 기반 커스텀 코드 구현 - GSAP ScrollTrigger 인터랙션 개발 - Swiper와 페
