HOPSCOTCH 홉스카치 양말 모자 소품 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 양말, 모자, 헤어소품처럼 단가가 낮고 종류가 많은 소품 몰입니다. 섹션 바탕을 깅엄과 스트라이프 무늬로 깔고 둥근 글꼴과 굵은 선을 써서 경쾌하게 만들었고, 여러 개를 함께 담을수록 이득인 구조를 첫 화면부터 보여 줍니다. 아래로 많이 산 것, 3+1 묶음 만들기, 새로 들어온 모자, 양말 사이즈와 모자 머리둘레 안내가 이어집니다. [주요 기능] 1. 무늬 바탕 섹션 - 첫 화면은 분홍 깅엄, 묶음 칸은 버터색 스트라이프, 사이즈 칸은 초록 깅엄으로 깔았습니다. 무늬는 이미지 없이 CSS로만 그렸습니다. 2. 3+1 양말 묶음 만들기 - 양말 여섯 종에서 네 켤레를 고르면 오른쪽 칸이 차고 가장 싼 한 켤레가 자동으로 빠지며 결제 금액이 계산됩니다. 3. 무늬로 고르기 탭 - 스트라이프, 무지, 컬러믹스 탭 앞에 작은 무늬 원을 두고 카드에도 같은 무늬를 표시했습니다. 4. 머리둘레 슬라이더 - 52~62cm 사이에서 머리둘레를 고르면 버킷햇, 비니, 볼캡의 맞는 사이즈가 문장으로 나옵니다. 5. 둥근 칸과 굵은 선 - 모든 칸을 2px 선과 둥근 모서리로 감싸고 순위는 버터색 원 숫자로 표시했습니다. [디자인] - 토마토, 분홍, 초록, 버터, 하늘 다섯 색과 짙은 잉크 선으로 피크닉 담요 같은 인상을 냈습니다. - 한글 제목은 둥근 Jua, 영문은 Fredoka, 본문과 가격은 Pretendard입니다. - 상품 카드는 1:1 비율에 그림자 없이 선으로만 구분했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조