자체 시안
[쇼핑몰] 패션 편집숍 쇼핑몰 「매무새」
고객 의뢰 없이 직접 기획하고 만든 예시 작업입니다
- PC
- Mobile
패션 편집숍 쇼핑몰 「매무새」
치수를 한 번 적으면 상품마다 추천 사이즈를 붙여 주는 패션 편집숍 시안
- 제작 방식
- HTML · CSS · JavaScript (디자인 시안)
- 작업 기간
- 2026년 10월
- 타입
- 패션 편집숍 쇼핑몰 · 상품 목록 · 사이즈 추천
- 메인 컬러
- #141414#1f2b45#ffffff
- 폰트
- Pretendard
시안을 직접 띄워 둔 주소입니다. 눌러 보며 움직임까지 확인하실 수 있습니다.
작업 리포트
작은 패션 편집숍이 쇼핑몰을 새로 만든다면 어떤 모습이 좋을지 가정하고 직접 기획한 시안입니다. 「매무새」와 상품 · 가격 · 실측은 모두 가상이며, 상품 · 화보 이미지는 AI(Gemini)로 만든 시안용 이미지입니다. 실존 인물은 쓰지 않았고, 사람이 나오는 컷은 얼굴이 보이지 않게 잘랐습니다. 아래 「사이트 보러가기」에서 실제로 눌러 볼 수 있습니다.
무엇을 중심에 두었나
작은 편집숍이 가장 아까워하는 비용은 사이즈가 안 맞아 돌아오는 교환 · 반품입니다. 그래서 첫 화면 아래에 **「내 치수 메모」**를 두었습니다. 키와 평소 상의 · 허리 · 신발 사이즈를 한 번 고르면, 아래 상품마다 「내 사이즈 M」과 이유(「오버핏이라 평소대로」「어깨가 좁게 나와 한 치수 크게」)가 붙습니다.
- 에디토리얼 히어로 세 칸 · 카테고리 동그라미 · 필터와 정렬이 있는 상품 목록 — 편집숍에 익숙한 구성을 따랐습니다
- 혜택 띠는 쿠폰 대신 「치수 메모로 고른 옷은 첫 교환 무료」로, 사이즈 추천과 이어지게 했습니다
- 상품 컷은 같은 배경 · 같은 조명으로 맞춰 목록이 한 화면처럼 보이게 하고, 화보 위 제목은 아래쪽만 어둡게 깔아 읽히게 했습니다
휴대폰에서
한 페이지가 화면 폭에 맞춰 바뀝니다. 휴대폰에서는 히어로를 옆으로 넘기고, 상품은 두 줄로, 치수는 버튼만 눌러 고릅니다. 화면 아래에 홈 · 카테고리 · 내 치수 · 찜 · 장바구니 메뉴를 고정했습니다.
실제로 만든다면
카페24 · 아임웹 같은 쇼핑몰 빌더 위에서 만들거나 직접 개발할 수 있습니다. 추천 사이즈는 상품마다 실측과 핏(오버 · 레귤러 · 슬림)을 입력해 두면 계산되고, 고객의 치수는 회원 정보에 저장해 다음 방문에도 이어집니다. 전자상거래법에 맞춰 사업자 정보 · 통신판매업 신고 번호 · 교환 · 반품 안내를 바닥글과 상품마다 둡니다.
치수는 한 번, 추천은 상품마다
키와 평소 사이즈를 한 번 고르면, 상품마다 핏과 실측에 맞춘 추천 사이즈와 이유가 붙습니다. 실측표를 상세마다 열어 보는 수고와 사이즈 교환을 줄입니다.
편집숍다운 화보와 제품 컷
같은 배경 · 조명의 제품 컷으로 목록을 맞추고, 화보 세 칸으로 계절의 분위기를 냈습니다. 이미지는 AI로 만든 시안용이라, 실제로는 매장 촬영본으로 바꿔 끼우면 됩니다.
휴대폰 하단 메뉴와 넘기는 히어로
히어로는 옆으로 넘기며 번호가 따라가고, 화면 아래에 홈 · 카테고리 · 내 치수 · 찜 · 장바구니를 고정했습니다.
제공 서비스
- 쇼핑몰 기획
- 웹디자인
- 반응형 웹
- 모바일 최적화
- 상품 목록·필터 설계