플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - Three.js 파티클 씬과 DOM 기반 GSAP 애니메이션의 렌더링 루프 충돌을 방지하기 위해 useFrame 훅 내부에서 GSAP context를 격리하는 구조를 채택할 예정입니다. - 모바일 환경에서 Three.js 씬의 GPU 부하를 줄이기 위해 파티클 수를 동적으로 조절하는 성능 분기 로직을 구현할 계획입니다. - GSAP ScrollTrigger pin 구간
프로젝트 성과
GSAP ScrollTrigger 수평 핀 레이아웃 구현
세로 스크롤 중 가로 이동 패널을 구현하기 위해 GSAP ScrollTrigger의 pin + scrub 조합을 적용할 예정이며, 섹션 진입/이탈 타이밍 정밀 제어가 핵심 과제입니다.
Three.js 파티클 씬과 React 상태 동기화
React Three Fiber의 useFrame 훅과 GSAP ticker를 연동하여 스크롤 진행률 값을 3D 씬에 실시간 반영하는 구조를 설계할 예정입니다.
비정형 CSS Grid 갤러리 레이아웃
grid-template-areas와 grid-column/row span 조합으로 각 카드가 고유한 크기를 갖는 비정형 배치를 구현하고, 필터 변경 시 GSAP stagger 재배치 애니메이션을 적용할 계획입니다.
CSS Grid 비정형 갤러리 반응형 최적화
grid-template-areas 기반 비정형 레이아웃이 모바일에서 단열 스택으로 자연스럽게 전환되도록 @container 쿼리와 grid-column auto-fit을 조합하는 반응형 전략을 설계할 예정입니다.
핵심 기능
히어로 & 파티클 인트로
페이지 진입 시 Three.js 파티클이 사운드 파형 형태로 펼쳐지며 브랜드 메시지를 노출합니다. React Three Fiber로 파티클 씬을 구성하고, GSAP timeline으로 진입 시퀀스를 제어합니다
진행 단계
인터랙티브 UX 기획 및 스토리보드
2026.04
스크롤 시퀀스 흐름 설계, 섹션별 애니메이션 트리거 포인트 정의, 와이어프레임 작성
프로젝트 상세
1) 포트폴리오 소개 글로벌 사운드 스튜디오의 브랜드 아이덴티티를 스크롤텔링으로 전달하는 인터랙티브 기업 웹사이트를 구현합니다. GSAP ScrollTrigger 기반 시퀀스 애니메이션과 Three.js 파티클 씬을 결합해 음향 작업물의 몰입감을 시각적으로 표현할 예정입니다. 2) 작업 범위 - 히어로 & 파티클 인트로: 페이지 진입 시 Three.js 파티클이 사운드 파형 형태로 펼쳐지며 브랜드 메
