웹사이트콘셉트 데모
애플 스타일 모션 패션 스토어
시네마틱 스크롤과 커머스를 결합한 인터랙티브 데모
풀 퍼널구매·AI·관리자
- 누구를 위해
- 브랜드 무드와 구매 전환을 함께 보여주려는 패션 브랜드
- 무엇이 문제였나
- 옷의 분위기만 보고 끝나지 않도록 사이즈·옵션 선택과 구매를 연결하는 과제입니다.
- 무엇을 했나
- 상품 탐색·장바구니·주문서와 AI 피팅 예시, 상품·주문 관리 화면을 만들었습니다.
- 무엇이 달라지나
- 고른 옵션과 수량이 주문 합계에 반영되고, 입력을 마치면 주문 완료로 이어집니다.
어떻게 움직이나
한 건의 일이 처음부터 끝까지 어떻게 흘러가는지 순서대로 보여드립니다.
상품 하나가 주문 완료되기까지
재생을 누르거나 단계를 눌러 순서대로 살펴보세요.
고른 옵션과 수량이 주문 합계에 그대로 반영됩니다
- 상품 카탈로그
- 21종
- AI 체험
- 가상 피팅 3종
- 운영 화면
- 관리자 5개 탭
옷의 분위기만 보고 끝나지 않고 선택과 구매로 이어집니다.
직접 써보기
가상 브랜드로 만든 데모입니다. 주문·예약·상담은 실제로 전송되지 않습니다.
이렇게 해보세요
- 첫 화면부터 천천히 스크롤해 히어로 확대, 원단 스티키 장면, 카피 교차 전환을 확인해보세요
- 상단 룩북·저널·매장·마이페이지를 이동하며 각 페이지가 상품 상세와 어떻게 연결되는지 살펴보세요
- 최상단 스위처로 Customer Store·AI Fit Guide·Operations를 바로 전환해보세요
체험 가이드 7개 더 보기
- AI Fit Guide에서 작동 방식·사진 처리·3가지 예시를 확인한 뒤 미리 입어보기로 연결해보세요
- Operations에서 주문 상태를 바꾸고, 상품 재고·게시 여부와 캠페인 콘텐츠를 직접 운영해보세요
- 상품 카드를 클릭해 상세로 들어가고, 사이즈·수량을 골라 장바구니에 담아보세요
- 주문서에서 프로모션 코드 WELCOME10 을 입력하면 10% 할인이 합계에 반영됩니다
- 사이즈 가이드로 실측 사이즈표를 열어보고, 품절 사이즈를 눌러 재입고 알림을 신청해보세요
- 리뷰 섹션의 별점 분포와 도움이 돼요 버튼, 소재·배송 아코디언도 모두 동작합니다
- 하트로 위시리스트에 담고, USD·KRW 버튼으로 통화를 바꿔보세요
화면 크기를 바꿔 PC와 모바일에서 같은 흐름을 확인할 수 있습니다.
Maison Noir · Edition 01
Less, but
considered.
계절보다 오래 남는 옷.
21개의 타임리스 에센셜.
Scroll to discover
Our point of view
유행은 빠르게.
좋은 옷은 천천히.
보여주기 위한 장식은 덜어내고, 손끝에 남는 원단과 오래 입을수록 좋아지는 실루엣에 집중했습니다.
Material 01 · Cashmere
Feel the quiet.
18.5 micron · Grade A
가볍게 닿고,
깊게 남습니다.
결이 긴 원사만을 골라 저밀도로 편직했습니다. 부드러움은 더하고, 불필요한 무게는 덜었습니다.
The Seoul Edit
City, softened.
Autumn · Winter 2026
Shop the edit.
소재, 무게, 쓰임을 기준으로 고른 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
PUBLIC SITE + ADMIN OS
보이는 사이트와
운영하는 관리자까지
애플 스타일 모션 패션 스토어 같은 공개 화면을 만든다면, 실제 담당자가 매일 사용할 관리자 환경도 함께 설계합니다. 오픈 이후 수정·응대·성과 확인과 장애 대응까지 한 프로젝트로 책임집니다.
통합 어드민 직접 보기상품·재고·품절
01상품 옵션과 재고 임계치, 판매 가능 상태 관리
주문·배송·환불
02결제 이후 처리 상태와 예외·정산 업무 관리
콘텐츠·배너 CMS
03페이지와 프로모션을 직접 수정하고 승인·예약 발행
고객·문의 CRM
04유입 채널부터 담당자 배정과 후속 업무까지 연결
성과·전환 분석
05방문과 광고비를 문의·예약·주문·매출로 연결
권한·보안·백업
06역할별 권한, 변경 이력과 장애·복구 상태 관리
만든 범위
제품 하나에 시선을 집중시키는 대형 히어로와 스크롤에 맞춰 확대되는 원단 스토리를 의류 브랜드에 맞게 재해석한 커머스 데모입니다. 21종 상품 카탈로그와 검색·상세·장바구니·결제, 룩북, 저널, 회원 주문조회와 매장 예약을 하나의 고객 여정으로 연결했습니다. 상단 프리뷰 스위처로 고객 스토어, AI 피팅 소개, 브랜드 무드의 운영 스튜디오를 즉시 전환하며 비교할 수 있습니다.
구현한 기능
- 스크롤 모션 스토리텔링히어로 패럴랙스, 스티키 원단 확대, 카피 크로스페이드와 모듈형 캠페인 전환
- AI 가상 피팅 스튜디오사진 선택 → 상품 선택 → 생성 진행 → 전후 슬라이더 비교와 체형별 예시 3종
- 카테고리 브라우징니트웨어·탑·아우터·바텀 4개 카테고리 실시간 필터링과 상품 수 카운트
- 룩북·저널 콘텐츠룩별 구성 상품과 관련 상품을 연결한 룩북, 기사 상세를 갖춘 브랜드 저널
- 매장 찾기·방문 예약지역별 스토어 선택, 영업 정보 확인, 이름·날짜·시간 기반 방문 예약 완료
- 사이즈 가이드·재입고 알림카테고리별 실측 사이즈표 모달, 품절 사이즈를 누르면 재입고 알림 신청까지 이어지는 재고 UX
4개 더 보기
- 장바구니·체크아웃수량 조절·삭제, 무료 배송 게이지, 프로모션 코드 할인, 배송지 입력 → 결제 → 주문 완료까지 이어지는 주문 플로우
- 관리자 커머스 OS매출 대시보드, 주문 상태 변경, 재고 조정, 상품 게시와 캠페인 운영
- 위시리스트하트 토글과 전용 드로어에서 담은 상품 확인·삭제, 애니메이션 피드백
- 회원 주문·케어 서비스배송 단계 추적, 반품 상담, 프로필 수정과 리페어·시즌 케어 접수
사용한 기술
Next.js · React · TypeScript · TailwindCSS · Framer Motion
확인된 사실
- 유형
- 풀 퍼널 커머스
- 상품 카탈로그
- 21종
- AI 체험
- 가상 피팅 3종
- 운영 화면
- 관리자 5개 탭
데모의 구현 범위입니다. 실제 고객 성과가 아니며, 브랜드와 인물은 체험을 위해 만든 가상 콘셉트입니다.