웹사이트 포트폴리오
의류 브랜드 온라인 스토어
MAISON NOIR — 프리미엄 의류 브랜드 온라인 스토어
탐색·검색부터 장바구니, 주문서 작성, 결제 완료까지 실제 쇼핑 흐름 전체가 동작하는 커머스 데모입니다. 정적인 디자인 시안이 아니라 상태 관리·인터랙션·반응형 대응까지 실서비스 수준으로 구현했습니다. 상품 21종의 카탈로그, 제품컷·모델컷 이중 갤러리, 검색·정렬, 리뷰·사이즈 가이드·재입고 알림·프로모션 코드까지 — 화면의 모든 버튼이 실제로 동작하는 브랜드 커머스의 완성형을 보여줍니다.
인터랙티브 프로토타입
AW25 Collection
타임리스 에센셜
시즌을 초월한 프리미엄 컬렉션. 21개의 엄선된 피스.
21 개의 상품
니트웨어
크림 케이블 크루넥
$298
니트웨어
카멜 케이블 스웨터
$278
니트웨어
올리브 브이넥 니트
$258
니트웨어
그레이 립 터틀넥
$268
니트웨어
아이보리 케이블 브이넥
$288
니트웨어
카멜 다이아몬드 니트
$278
니트웨어
포레스트 브이넥 스웨터
$258
니트웨어
차콜 콘트라스트 터틀넥
$298
탑
바시티 브이넥 스웨터
$228
탑
로고 목넥 탑
$168
아우터
레더 봄버 재킷
$698
아우터
크롭 만다린 재킷
$458
아우터
벨트 더블 코트
$798
아우터
코쿤 울 코트
$748
아우터
밀리터리 피코트
$628
바텀
크림 와이드 트라우저
$228
바텀
체크 와이드 트라우저
$248
바텀
워시드 와이드 데님
$198
바텀
블랙 와이드 트라우저
$228
바텀
차콜 슬림 트라우저
$238
바텀
블랙 코튼 치노
$198
구현 기능
카테고리 브라우징
니트웨어·탑·아우터·바텀 4개 카테고리 실시간 필터링과 상품 수 카운트
검색·정렬
상품명 실시간 검색, 추천·신상품·가격순 정렬, 검색 0건 빈 상태 디자인
이중 갤러리
상품마다 제품컷·모델 착용컷을 전환하는 이미지 갤러리
사이즈 가이드·재입고 알림
카테고리별 실측 사이즈표 모달, 품절 사이즈를 누르면 재입고 알림 신청까지 이어지는 재고 UX
장바구니·체크아웃
수량 조절·삭제, 무료 배송 게이지, 프로모션 코드 할인, 배송지 입력 → 결제 → 주문 완료까지 이어지는 주문 플로우
리뷰·별점 분포
별점 분포 그래프와 구매 리뷰, 도움이 돼요 투표 토글
위시리스트
하트 토글과 전용 드로어에서 담은 상품 확인·삭제, 애니메이션 피드백
최근 본 상품·다중 통화
둘러본 상품 히스토리 제안과 KRW·USD 실시간 가격 전환