자체 시안

[쇼핑몰] 패션 편집숍 쇼핑몰 「매무새」

고객 의뢰 없이 직접 기획하고 만든 예시 작업입니다

패션 편집숍 쇼핑몰 「매무새」
  • PC
  • Mobile

패션 편집숍 쇼핑몰 「매무새」

치수를 한 번 적으면 상품마다 추천 사이즈를 붙여 주는 패션 편집숍 시안

제작 방식
HTML · CSS · JavaScript (디자인 시안)
작업 기간
2026년 10월
타입
패션 편집숍 쇼핑몰 · 상품 목록 · 사이즈 추천
메인 컬러
#141414#1f2b45#ffffff
폰트
Pretendard
사이트 보러가기 ↗

시안을 직접 띄워 둔 주소입니다. 눌러 보며 움직임까지 확인하실 수 있습니다.

작업 리포트

작은 패션 편집숍이 쇼핑몰을 새로 만든다면 어떤 모습이 좋을지 가정하고 직접 기획한 시안입니다. 「매무새」와 상품 · 가격 · 실측은 모두 가상이며, 상품 · 화보 이미지는 AI(Gemini)로 만든 시안용 이미지입니다. 실존 인물은 쓰지 않았고, 사람이 나오는 컷은 얼굴이 보이지 않게 잘랐습니다. 아래 「사이트 보러가기」에서 실제로 눌러 볼 수 있습니다.

무엇을 중심에 두었나

작은 편집숍이 가장 아까워하는 비용은 사이즈가 안 맞아 돌아오는 교환 · 반품입니다. 그래서 첫 화면 아래에 **「내 치수 메모」**를 두었습니다. 키와 평소 상의 · 허리 · 신발 사이즈를 한 번 고르면, 아래 상품마다 「내 사이즈 M」과 이유(「오버핏이라 평소대로」「어깨가 좁게 나와 한 치수 크게」)가 붙습니다.

  • 에디토리얼 히어로 세 칸 · 카테고리 동그라미 · 필터와 정렬이 있는 상품 목록 — 편집숍에 익숙한 구성을 따랐습니다
  • 혜택 띠는 쿠폰 대신 「치수 메모로 고른 옷은 첫 교환 무료」로, 사이즈 추천과 이어지게 했습니다
  • 상품 컷은 같은 배경 · 같은 조명으로 맞춰 목록이 한 화면처럼 보이게 하고, 화보 위 제목은 아래쪽만 어둡게 깔아 읽히게 했습니다

휴대폰에서

한 페이지가 화면 폭에 맞춰 바뀝니다. 휴대폰에서는 히어로를 옆으로 넘기고, 상품은 두 줄로, 치수는 버튼만 눌러 고릅니다. 화면 아래에 홈 · 카테고리 · 내 치수 · 찜 · 장바구니 메뉴를 고정했습니다.

실제로 만든다면

카페24 · 아임웹 같은 쇼핑몰 빌더 위에서 만들거나 직접 개발할 수 있습니다. 추천 사이즈는 상품마다 실측과 핏(오버 · 레귤러 · 슬림)을 입력해 두면 계산되고, 고객의 치수는 회원 정보에 저장해 다음 방문에도 이어집니다. 전자상거래법에 맞춰 사업자 정보 · 통신판매업 신고 번호 · 교환 · 반품 안내를 바닥글과 상품마다 둡니다.

  • 치수는 한 번, 추천은 상품마다

    키와 평소 사이즈를 한 번 고르면, 상품마다 핏과 실측에 맞춘 추천 사이즈와 이유가 붙습니다. 실측표를 상세마다 열어 보는 수고와 사이즈 교환을 줄입니다.

  • 편집숍다운 화보와 제품 컷

    같은 배경 · 조명의 제품 컷으로 목록을 맞추고, 화보 세 칸으로 계절의 분위기를 냈습니다. 이미지는 AI로 만든 시안용이라, 실제로는 매장 촬영본으로 바꿔 끼우면 됩니다.

  • 휴대폰 하단 메뉴와 넘기는 히어로

    히어로는 옆으로 넘기며 번호가 따라가고, 화면 아래에 홈 · 카테고리 · 내 치수 · 찜 · 장바구니를 고정했습니다.

제공 서비스

  • 쇼핑몰 기획
  • 웹디자인
  • 반응형 웹
  • 모바일 최적화
  • 상품 목록·필터 설계

메인 전체

모바일