커머스
쇼핑몰 '오프무드' — 장바구니·주문서 전 과정
상품 그리드부터 옵션 선택·장바구니·주문서까지 구매 흐름 전체가 실제로 도는 패션 셀렉트샵입니다. 색을 쓰지 않고 타이포와 여백만으로 위계를 만든 에디토리얼 커머스입니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
브로슈어 사이트와 달리 쇼핑몰은 '돌아가는 것'이 곧 역량이다. 옵션을 안 고르면 담기가 막히고, 담으면 헤더 배지가 오르고, 수량을 바꾸면 합계가 다시 계산돼야 한다. 동시에 데모라서 결제·저장·외부 전송은 하나도 있으면 안 된다. 두 조건은 장바구니에서 정면으로 부딪힌다. 장바구니는 상품 상세와 목록, 주문서를 넘나들며 유지돼야 하는 상태인데 localStorage나 쿠키에 쓰는 순간 저장하지 않는다는 원칙이 깨지고 아무것도 안 하면 페이지를 옮길 때마다 담은 것이 사라진다. 저장 없이 흐름만 잇는 방법이 필요했다. 정적 파일 위에서 커머스의 상호작용이 어디까지 재현되는지 보여 주는 것이 이 데모의 목적이었다.
해결
상품 카탈로그 12종과 장바구니 엔진을 바닐라 JS로 짜서 옵션 선택 → 담기 → 드로어 → 수량 변경 → 합계 재계산 → 주문서 → 결제 alert까지 전 과정을 붙였다. localStorage·쿠키 없이 메모리와 URL 쿼리로만 흐름을 잇고, 외부 요청은 0건이다. 장바구니 구성은 페이지를 옮길 때 링크 쿼리에 실려 넘어간다 — 저장이 아니라 전달이라 원칙이 지켜진다. 배송비는 10만원 미만 3,000원, 이상이면 무료라는 규칙까지 합계에 반영했고 마지막 결제 버튼은 입력한 배송지·연락처가 어디에도 전송되지 않는다는 안내로 닫힌다. 가격·세일 배지는 실제 쇼핑몰처럼 두되 '상품·가격·재고는 가상 데이터' 고지를 그리드·상세·장바구니·주문서에 상시 노출했다.
- 12
- 상품 카탈로그
- 0
- 외부 요청(XHR·fetch)
- 0
- 가로 오버플로(5뷰포트)
제작 노트
담기부터 결제 직전까지
상품 상세에서는 사이즈와 컬러를 모두 골라야 담기 버튼이 열리고 고르기 전에는 무엇이 빠졌는지 문구가 알려 줍니다. 담는 순간 오른쪽에서 장바구니 드로어가 열리며 헤더 배지 숫자가 오르고, 드로어 안에서 수량을 바꾸거나 지우면 합계가 그 자리에서 다시 계산됩니다. 장바구니 페이지는 정가와 할인가를 나란히 보여 주며 10만원 미만이면 배송비 3,000원이 붙습니다. 주문서에서 결제 버튼을 누르면 데모라는 안내창으로 닫히고 입력한 배송지와 연락처는 어디에도 남지 않습니다.
저장 대신 전달
장바구니 상태는 메모리에만 두고 페이지를 옮길 때는 담은 구성을 링크 쿼리 문자열에 실어 넘깁니다. 쿠키도 localStorage도 쓰지 않아 브라우저에 흔적이 남지 않고, 개인정보를 다루지 않는 데모라는 경계가 코드 구조로 지켜집니다. 서버 요청이 0건이라 카탈로그 12종과 배송비 계산 규칙은 전부 스크립트 안에 있습니다. 정적 파일만으로 커머스 화면의 상호작용을 재현하는 구성이라 실제 서비스로 만들 때는 같은 자리에 결제와 재고 API를 연결하는 그림을 그리기 쉽습니다.
화보에서 매대로
첫 화면은 매거진처럼 이번 주 들어온 옷과 룩북 화보로 시작하고 구매 동선은 상단 숍 메뉴로 모입니다. 상품 목록에서는 카테고리 칩과 신상품·가격·이름순 정렬이 새로고침 없이 그 자리에서 카드를 걸러 내고 남은 개수를 보여 줍니다. 목록 카드의 빠른 담기 버튼은 기본 옵션으로 바로 드로어까지 이어져 상세를 거치지 않는 짧은 동선도 살렸습니다. 색을 거의 쓰지 않고 타이포와 여백으로 위계를 만든 만큼 무료배송 기준과 교환 안내 같은 구매 정보는 별도 스트립으로 또렷하게 남겼습니다.
화면
