본문으로 건너뛰기
포트폴리오 목록으로

웹사이트콘셉트 데모

SEAM — 미니멀 컨템포러리 패션 스토어

에디토리얼 룩북·카테고리 필터·사이즈 선택과 LocalStorage 장바구니 드로어를 결합한 패션 커머스

직접 써보기 이 사례를 참고해 문의하기

4개 페이지 · 실시간 카트컬렉션·장바구니 연동

누구를 위해
브랜드 감도를 해치지 않으면서 카탈로그 탐색·사이즈 선택·장바구니 전환을 매끄럽게 연결하려는 패션·라이프스타일 브랜드
무엇이 문제였나
룩북 중심의 감성 사이트는 구매 동선이 끊기고, 일반 쇼핑몰 템플릿은 브랜드 고유의 재단·원단 무드를 살리지 못하는 한계가 있었습니다.
무엇을 했나
26 F/W 에디토리얼 홈과 룩북, 카테고리·정렬 필터를 갖춘 Shop, 사이즈 선택과 LocalStorage 장바구니 드로어가 즉시 연동되는 Product 상세까지 4개 페이지를 통합 설계했습니다.
무엇이 달라지나
카테고리 필터링, 상품별 상세(?id=1~8) 탐색, 사이즈 선택 후 장바구니 담기, 우측 슬라이드 카트 드로어에서의 수량 변경과 새로고침 후 상태 유지가 완벽히 동작합니다.
SEAM — 미니멀 컨템포러리 패션 스토어 체험 화면
가상 브랜드로 만든 체험 화면입니다. 실제 고객 사례가 아닙니다.

어떻게 움직이나

한 건의 일이 처음부터 끝까지 어떻게 흘러가는지 순서대로 보여드립니다.

시즌 룩북 탐색부터 사이즈 선택·장바구니 보관까지 이어지는 커머스 여정

예시 입력컬렉션 탐색 26 F/W 아우터 · 울 개버딘 코트선택 옵션 Size M · 수량 1점

재생을 누르거나 단계를 눌러 순서대로 살펴보세요.

직접 써보기

가상 브랜드로 만든 데모입니다. 주문·예약·상담은 실제로 전송되지 않습니다.

이렇게 해보세요

  1. 상단 스위처에서 01 홈 · 02 숍 · 03 상품 상세 · 04 룩북 4개 페이지를 전환해보세요
  2. 서브 바의 #01 울 개버딘 코트 · #02 워시드 리넨 셔츠 · #03 와이드 울 트라우저 칩을 눌러 상품별 상세 화면을 바로 비교해보세요
  3. 03 상품 상세 화면에서 사이즈를 고르고 장바구니 담기 버튼을 누르면 우측 장바구니 드로어가 열리고 수량·합계가 저장됩니다
체험 가이드 1개 더 보기
  • 04 룩북 화면에서 시즌 화보 시퀀스를 스크롤하며 착용 아이템과 브랜드 스토리를 확인해보세요

화면 크기를 바꿔 PC와 모바일에서 같은 흐름을 확인할 수 있습니다.

https://example.com
SEAM01 홈 · 26 F/W 컬렉션

절제된 재단과 천연 원단 중심의 시즌 에디토리얼 & 베스트셀러 쇼케이스

만든 범위

Editorial Minimalism 감성과 실전 이커머스 상태 관리를 결합한 4페이지 패션 브랜드 웹사이트입니다. 패럴랙스 히어로와 시즌 룩북 시퀀스로 브랜드 무드를 전달하고, Shop 페이지의 실시간 카테고리·정렬 필터와 Product 상세 페이지의 사이즈 선택·원단 스펙 아코디언·장바구니 드로어(localStorage["seam-cart"])를 통해 탐색부터 구매 결정까지의 전환 여정을 완결합니다.

구현한 기능

  • 카테고리 실시간 필터 & 정렬 (Shop)전체·아우터·상의·하의·니트웨어 카테고리 필터와 신상품·가격순 정렬이 페이지 새로고침 없이 즉시 반영
  • 상품 상세 옵션 선택 & 동적 파라미터 (?id=1~8)상품별 컬러·사이즈(S/M/L) 선택, 혼용률·실측 사이즈·세탁법 안내 및 관련 추천 아이템 연결
  • LocalStorage 연동 슬라이드 장바구니 드로어상단 네비게이션 Bag 카운터 실시간 갱신, 드로어 내 수량 증감·삭제·합계 금액 계산 및 브라우저 영속화
  • 26 F/W 시즌 룩북 & 에디토리얼 시퀀스화보 컷별 착용 상품 태그와 상세 페이지 딥링크를 연결해 콘텐츠 감상이 자연스럽게 구매로 이어지도록 설계

사용한 기술

Modernist Design System · Custom Motion Engine (motion.js) · LocalStorage Cart State · React 18 / DC Runtime · Dynamic Query Routing

확인된 사실

페이지 구성
Home · Shop · Product · Lookbook
커머스 기능
카테고리 필터 · 정렬 · 사이즈 선택
장바구니
드로어 수량 조절 · LocalStorage 영속화
아트 디렉션
26 F/W 룩북 시퀀스 · 마그네틱 인터랙션

데모의 구현 범위입니다. 실제 고객 성과가 아니며, 브랜드와 인물은 체험을 위해 만든 가상 콘셉트입니다.