STOCKROOM 스톡룸 가방 신발 카탈로그 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 가방과 신발을 여러 종 파는 셀렉트숍과 도매형 몰을 위한 디자인입니다. 분위기 사진 대신 흰 바탕 누끼와 품번, 색, 사이즈 재고를 앞세워 인쇄 카탈로그처럼 빠르게 비교하도록 했습니다. 첫 화면 표지 격자에 상품 다섯 개의 가격이 보이고, 아래로 가방, 신발, 색상으로 고르기, 신발 사이즈 찾기, 사진 속 상품이 이어집니다. 가방 18종과 신발 20종으로 구성했습니다. [주요 기능] 1. 카탈로그 표지 - 1px 선 격자에 큰 칸 하나와 작은 칸 네 개를 두고 누끼 사진, 품번, 가격, 색 스와치를 넣었습니다. 2. 색상으로 고르기 - 색 원 열한 칸에 개수를 적고, 누르면 그 색 상품만 남습니다. 결과가 없으면 조건 지우기 버튼이 나옵니다. 3. 격자와 표 보기 전환 - 표 보기로 바꾸면 사진, 품번, 이름, 색, 스펙, 사이즈 범위, 판매가가 한 줄씩 정리됩니다. 4. 카드 스펙과 사이즈 재고 - 가방은 크기와 무게, 신발은 굽과 소재, 핏을 적고 사이즈별 재고 칸에서 품절은 회색 취소선으로 표시합니다. 5. 신발 사이즈 찾기 - 발 길이와 발볼, 신발 종류를 고르면 맞는 사이즈를 큰 숫자로 보여 주고 KR, EU, US 표의 해당 칸을 강조합니다. [디자인] - 흰 바탕과 무채색으로 정리하고 할인 빨강 한 색만 남겼습니다. - 워드마크와 품번, 큰 숫자는 넓은 폭 Archivo, 한글은 Pretendard로 맞췄습니다. - 상품 카드는 1:1 흰 누끼이고, 카드끼리 1px 선을 공유해 카탈로그 지면처럼 붙였습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조