풀스크린 이미지 슬라이더

풀스크린 슬라이더는 7개의 독립 UI 컴포넌트로 구성됩니다. 각 영역은 자체 애니메이션 로직을 가지며, 하나의 커스텀 훅이 전체 오케스트레이션을 담당합니다.

NavBar

로고 · 메뉴 · 햄버거

BigText

글자 분할 애니메이션

InfoBox

카테고리 · 제목 · 설명

StripClip

6-strip SVG 마스크

SlideCounter

현재 / 전체 슬라이드

BottomBar

SNS 링크 · 카피라이트

Feature-Sliced Design 기반으로 슬라이더 관련 모든 코드를 하나의 feature 폴더에 응집합니다. UI · 로직 · 데이터 · 스타일이 명확히 분리되어 있어 유지보수와 팀 협업에 유리합니다.

데이터는 단방향으로 흐릅니다. JSON에서 시작해 커스텀 훅이 애니메이션 로직을 처리하고, UI 컴포넌트는 순수하게 렌더링만 담당합니다.

ANIMATION OUTPUT

SlideItem

비디오 전환

scale 1.3 → 1.0

StripClip

마스크 리빌

6-strip 교차 슬라이드

BigText

글자 분할

char stagger 60ms

InfoBox

정보 전환

라인별 fade 40ms

슬라이드 전환은 약 2.1초 동안 6개의 애니메이션 레이어가 정밀하게 오케스트레이션됩니다. GSAP Timeline의 절대 시간 오프셋으로 각 레이어의 시작 · 종료를 제어합니다.

사용자 입력은 Wheel과 Drag 두 갈래로 분기됩니다. Drag는 실시간 프리뷰 → 60% 임계값 판정 → 완료/취소 3단계를 거치며, 모든 경로에서 isAnimating 가드가 중복 실행을 차단합니다.

단순히 모션이 예쁜 것이 아니라, 프로덕션에서 유지보수 가능한 구조로 설계했습니다. 메모리 누수 방지 · DOM 쿼리 최적화 · 상태 충돌 가드까지 — 실무에서 바로 적용할 수 있는 패턴입니다.

GSAP Context

라이프사이클 안전성

gsap.context()로 모든 트윈을 스코프화 — 언마운트 시 ctx.revert() 한 줄로 전체 클린업

ctx = gsap.context(() => { ... }, container)

Selector Cache

DOM 쿼리 최적화

gsap.utils.selector()로 초기화 시 한 번만 DOM을 탐색 — 매 전환마다 재탐색 제거

q = gsap.utils.selector(container) q("[data-slider='slide']")

Timeline Composition

정밀한 시간 제어

절대 시간 오프셋으로 6개 레이어의 시작점을 지정 — 병렬 + 순차 혼합 오케스트레이션

tl.to(el, {...}, 0.3) // 0.3s에 시작

Data Attributes

JS-HTML 디커플링

data-slider 속성으로 GSAP 셀렉터 바인딩 — 클래스 충돌 없이 구조 독립적 쿼리

<figure data-slider="slide" />

Animation Guard

상태 충돌 방지

useRef 기반 isAnimating 플래그로 wheel + drag 중복 실행 원천 차단 — 리렌더 없이 상태 관리

if (isAnimating.current) return

Video Lifecycle

리소스 효율화

활성 슬라이드의 비디오만 재생 — 전환 완료 시 이전 비디오 정지, 새 비디오 0초부터 시작

v.currentTime = 0; v.play().catch(() => {})

데스크탑 퍼스트로 설계하고 max-xl · max-md 2단계 브레이크포인트만 사용합니다. CSS 변수 clamp()로 박스 사이즈가 뷰포트에 맞게 자연스럽게 스케일됩니다.