클릭 시 확장되는 갤러리

갤러리는 8개의 독립 UI 컴포넌트로 구성됩니다. 데스크탑에서는 absolute 레이어로 자유롭게 배치되고, 모바일에서는 flex 세로 레이아웃으로 전환됩니다.

Nav

로고 · 메뉴 · 검색

CircleSvg

SVG 동심원 배경 모션

BigTitle

SplitType 타이틀 애니메이션

Carousel

썸네일 트랙 + 이미지 카드

Counter

현재 / 전체 인덱스

MetaInfo

Established · Based in

SocialLinks

좌측 소셜 아이콘

BottomLeft

Play 버튼 · 설명 텍스트

Feature-Sliced Design 기반으로 갤러리 관련 모든 코드를 하나의 feature 폴더에 응집합니다. 15개 UI 컴포넌트가 역할별로 분리되어 있고, 하나의 커스텀 훅이 전체 애니메이션을 전담합니다.

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

ANIMATION OUTPUT

Carousel

썸네일 슬라이드

track translateX + scale

Flip

이미지 확장

thumbnail → fullscreen 1.25s

SplitType

제목 리빌

chars clipPath stagger

ContentDetail

상세 진입

lines yPercent + swatch scale

상세 뷰 열기는 약 2.0초 동안 9개의 애니메이션 레이어가 정밀하게 오케스트레이션됩니다. GSAP Flip이 이미지 전환을 담당하고, SplitType이 텍스트 리빌을 처리합니다.

사용자 인터랙션은 Carousel Nav, Gallery Click, Detail Click 세 갈래로 분기됩니다. Gallery Click은 GSAP Flip으로 이미지를 확장하고, Detail Click은 역순으로 복원합니다.

단순히 모션이 예쁜 것이 아니라, 프로덕션에서 유지보수 가능한 구조로 설계했습니다. Flip 레이아웃 전환 · SplitType 텍스트 리빌 · AbortController 클린업까지 — 실무에서 바로 적용할 수 있는 패턴입니다.

GSAP Flip

레이아웃 전환 애니메이션

Flip.getState()로 현재 위치 캡처 → DOM 이동 후 Flip.from()으로 자연스러운 위치 · 크기 전환

const state = Flip.getState(img) target.appendChild(img) Flip.from(state, { duration: 1.25 })

SplitType

텍스트 분할 애니메이션

chars · lines 단위로 텍스트를 분할하고, clipPath · yPercent로 글자 단위 리빌 — 래퍼 요소로 오버플로 제어

new SplitType(el, { types: 'chars' }) chars → clipPath: inset(0 100% 0 0)

GSAP Context

라이프사이클 안전성

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

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

Data Attributes

JS-HTML 디커플링

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

<figure data-gallery="image-wrapper" />

AbortController

이벤트 리스너 관리

signal 기반으로 모든 이벤트 리스너 등록 — abort() 한 번으로 전체 정리, 메모리 누수 원천 차단

el.addEventListener('click', fn, { signal }) // cleanup: abort.abort()

Custom Cursor

인터랙티브 커서 UX

rAF 기반 lerp 추적으로 부드러운 커서 — 상세 뷰에서 is-open 클래스로 회전 변환하여 닫기 시그널 제공

cursorX += (targetX - cursorX) * 0.15 cursor.style.transform = translate3d(...)

데스크탑 퍼스트로 설계하고, CSS 변수로 캐러셀 사이징을 제어합니다. 데스크탑은 absolute 레이어 배치, 태블릿 이하는 flex 세로 레이아웃으로 자연스럽게 전환됩니다.