PINAFORE 피나포어 앞치마 단일 상품 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 상품 한두 개로 시작하는 1인 브랜드를 위한 단일 상품 몰입니다. 메인을 상품 상세처럼 구성해 왼쪽에는 끈, 주머니, 원단, 만드는 곳 네 챕터를, 오른쪽에는 색과 사이즈, 이름 자수, 수량, 합계를 고르는 구매 칸을 고정했습니다. 색 스와치를 누르면 첫 사진이 그 색 앞치마로 바뀌고 키를 넣으면 사이즈가 정해집니다. 앞치마를 다른 단품으로 바꿔도 같은 뼈대로 쓸 수 있습니다. [주요 기능] 1. 메인이 곧 상세 - 큰 사진과 네 챕터의 사진, 세리프 제목, 사실 세 칸을 내려가며 읽는 동안 오른쪽 구매 칸이 따라옵니다. 무료배송까지 남은 수량도 함께 보여 줍니다. 2. 색 스와치 사진 전환 - 색을 누르면 첫 사진이 그 색 앞치마로 바뀌고, 입고 예정 색은 사선으로 표시합니다. 3. 키로 사이즈 찾기 - 키 슬라이더를 움직이면 맞는 사이즈와 앞치마가 끝나는 위치 문장이 나오고 치수표 행과 사람 선 그림이 함께 바뀝니다. 4. 입어 본 사람들 - 후기마다 키, 사이즈, 색을 머리에 적고 사이즈와 무게, 세탁 후 만족도를 막대로 보여 줍니다. 5. 모바일 고정 구매 바 - 모바일에서는 하단 탭 대신 선택 요약과 합계, 구매 버튼이 붙은 바를 화면 아래에 고정했습니다. [디자인] - 흰 바탕과 분홍 회벽 면에 리넨 그린 한 색을 혜택 띠, 할인, 주 버튼에 썼습니다. - 제목과 브랜드는 고운바탕, 본문과 가격은 Pretendard입니다. - 상품 카드는 4:5 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조