← 포트폴리오 목록
럭셔리 앤틱 갤러리 커머스 웹사이트
에디토리얼 디자인 & 모션 인터랙션 프론트엔드
라이브 데모 보기외부 프레임워크 0 · Vanilla JS 모션 엔진IntersectionObserver 리빌(6종)과 requestAnimationFrame 패럴랙스를 직접 구현해 라이브러리 의존 없이 부드러운 스크롤 모션을 달성했습니다.
데스크톱·터치 양립 줌 돋보기커서 추적 줌과 touchstart 브리지로 220~240px 렌즈 줌을 모바일까지 동일하게 동작시켰습니다.
단일 데이터 소스 파생 아키텍처12종 상품 데이터 한 곳에서 필터·그리드·상세·갤러리가 파생되는 구조로 일관성과 유지보수성을 확보했습니다.
Overview
프로젝트 개요
럭셔리 앤틱·아트 갤러리 커머스 웹사이트의 디자인과 프론트엔드를 구축한 작업물입니다. 세이지·틸·민트 톤의 미니멀 에디토리얼 디자인 시스템 위에 헤드라인 split-word 모션·자동재생 캐러셀·스크롤 리빌·이미지 패럴랙스로 고급스러운 첫인상을 설계했고, 큐레이티드 카탈로그(카테고리 필터·상품 그리드)와 상품 상세 오버레이·커서 추적 줌 돋보기·풀스크린 갤러리 뷰어, 반응형·터치 인터랙션까지 외부 프레임워크 없이 Vanilla JavaScript로 가볍고 부드럽게 구현했습니다. 정적 페이지가 아니라 "움직이는 편집물"처럼 읽히도록 모션을 설계의 일부로 다뤘고, 단일 상품 데이터에서 필터·그리드·상세·갤러리가 파생되는 구조로 일관성과 유지보수성을 확보했습니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
외부 프레임워크 없이 부드러운 럭셔리 모션을 구현해야 하는 성능 과제
IntersectionObserver 기반 리빌과 requestAnimationFrame 패럴랙스를 직접 설계해, 라이브러리 의존 없이 60fps에 가까운 부드러운 스크롤 모션을 Vanilla JS로 구현했습니다.
데스크톱 커서 줌과 모바일 터치를 같은 인터랙션으로 양립시키는 과제
커서 추적 background-position 줌 돋보기를 touchstart/touchmove 브리지로 모바일까지 동일하게 동작시켜, 디바이스와 무관하게 작품을 정밀 확대해 감상하는 경험을 통일했습니다.
카탈로그·상세·갤러리 간 데이터 정합성과 유지보수성 확보
12종 상품을 단일 데이터 소스로 두고 필터·그리드·상세·갤러리를 모두 파생시키는 구조로 설계해, 데이터 한 곳만 수정해도 모든 뷰가 일관되게 갱신되도록 했습니다.
핵심 기능 1
미니멀 럭셔리 히어로 & 모션 인트로
세이지·틸 컬러 미니멀 히어로에 헤드라인 split-word 스태거 등장과 자동재생 이미지·영상 캐러셀을 결합해 고급스러운 첫인상을 설계했습니다.
핵심 기능 2
큐레이티드 컬렉션 & 스크롤 인터랙션
스크롤 진입 시 IntersectionObserver 리빌(페이드·스케일)과 이미지 패럴랙스, 자동 회전 카테고리 로테이터로 편집형 컬렉션을 연출했습니다.
핵심 기능 3
카탈로그: 카테고리 필터 & 상품 그리드
6개 카테고리 필터와 12종 카탈로그 그리드를 데이터 기반으로 렌더링하고, 카드 호버 리프트·이미지 줌·스태거 등장으로 탐색 경험을 다듬었습니다.
핵심 기능 4
상품 상세 & 줌 돋보기 인터랙션
상품 상세 오버레이와 사양 패널, 커서 추적 220px 줌 돋보기로 작품을 정밀 확대해 살펴보는 디테일 감상 인터랙션을 구현했습니다.
프로젝트 성과
외부 프레임워크 0 · Vanilla JS 모션 엔진IntersectionObserver 리빌(6종)과 requestAnimationFrame 패럴랙스를 직접 구현해 라이브러리 의존 없이 부드러운 스크롤 모션을 달성했습니다.
데스크톱·터치 양립 줌 돋보기커서 추적 줌과 touchstart 브리지로 220~240px 렌즈 줌을 모바일까지 동일하게 동작시켰습니다.
단일 데이터 소스 파생 아키텍처12종 상품 데이터 한 곳에서 필터·그리드·상세·갤러리가 파생되는 구조로 일관성과 유지보수성을 확보했습니다.
Review
기술적 주안점
- 모션을 후처리가 아닌 설계의 일부로 다뤄, 정적 페이지가 아니라 "움직이는 편집물"처럼 읽히는 럭셔리 브랜드 경험을 구현했습니다
- IntersectionObserver·requestAnimationFrame을 직접 조합해 외부 애니메이션 라이브러리 없이 가볍고 부드러운 스크롤 인터랙션을 달성했습니다
- 커서 추적 줌 돋보기를 데스크톱·터치 양쪽에서 동일하게 동작시켜 디바이스 무관 디테일 감상 경험을 통일했습니다
- 단일 상품 데이터에서 필터·그리드·상세·갤러리를 파생시키는 구조로 확장성과 유지보수성을 확보했고, 동일 골격을 럭셔리 브랜드·갤러리/전시·프리미엄 커머스·룩북 도메인에 응용 가능하도록 설계했습니다
