플러스프로젝트 배경
1) 프로젝트 목표 - 세이지·틸 팔레트와 DM Sans 기반 에디토리얼 디자인 시스템을 수립해 럭셔리 갤러리 커머스의 고급스러운 브랜드 무드를 구현했습니다. - split-word 모션·자동재생 캐러셀·스크롤 리빌·패럴랙스로 정적 화면이 아닌 "움직이는 편집물"로서의 첫인상을 설계했습니다. - 6개 카테고리 필터와 12종 상품 그리드, 상품 상세 줌 돋보기·풀스크린 갤러리로 작품 디테일을 감상하는 커머
프로젝트 성과
에디토리얼 럭셔리 디자인 시스템 구축
DM Sans 타이포·세이지/틸/민트 컬러 토큰·라운드/그림자 규칙으로 일관된 에디토리얼 럭셔리 디자인 시스템을 설계했습니다.
스크롤 모션 & 패럴랙스 엔진 구현
IntersectionObserver 기반 data-anim 리빌(6종)과 requestAnimationFrame 패럴랙스로 부드러운 스크롤 모션을 구현했습니다.
줌 돋보기 & 풀스크린 갤러리 구현
커서 추적 background-position 계산으로 220~240px 렌즈 줌과 썸네일·키보드 탐색 풀스크린 갤러리를 구현했습니다.
데이터 기반 카탈로그 아키텍처 설계
12종 상품을 단일 데이터 소스로 두고 필터·그리드·상세·갤러리를 모두 파생시키는 구조로 일관성을 확보했습니다.
반응형 & 터치 인터랙션 구현
1024·640px 브레이크포인트 재구성과 슬라이드 모바일 메뉴·touchstart 브리지 줌으로 모바일까지 인터랙션을 구현했습니다.
핵심 기능
미니멀 럭셔리 히어로 & 모션 인트로
세이지·틸 컬러 미니멀 히어로를 디자인하고, 헤드라인 split-word 스태거 등장과 자동재생 이미지·영상 캐러셀로 첫인상을 설계했습니다
진행 단계
디자인 시스템 & 와이어프레임
2026.05
컬러·타이포·컴포넌트 토큰 정의, 홈·샵 화면 구성과 에디토리얼 레이아웃 와이어프레임 설계
프로젝트 상세
1) 포트폴리오 소개 럭셔리 앤틱·아트 갤러리 커머스 웹사이트의 디자인과 프론트엔드를 구축한 작업물입니다. 세이지·틸·민트 톤의 미니멀 에디토리얼 디자인 시스템 위에 헤드라인 split-word 모션·자동재생 캐러셀·스크롤 리빌·이미지 패럴랙스로 고급스러운 첫인상을 설계했고, 큐레이티드 카탈로그(카테고리 필터·상품 그리드)와 상품 상세 오버레이·커서 추적 줌 돋보기·풀스크린 갤러리 뷰어, 반응형·터치 인터랙
