SNUGFIT 스너그핏 휴대폰 케이스 액세서리 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 케이스, 필름, 충전기, 스트랩을 파는 휴대폰 액세서리 몰입니다. 케이스는 내 기종에 맞는지가 전부라는 점에서 출발해 첫 화면을 기종 선택 격자로 만들고, 고른 기종에 맞춰 진열 제목과 카드 호환 표시, 세트 구성이 모두 바뀌게 했습니다. 아래로 기종별 케이스, 3종 세트, 필름과 충전기, 신기종 케이스 출고 일정, 기종별 후기가 이어집니다. 지원 기종 32개로 구성했습니다. [주요 기능] 1. 기종 선택 격자 - 제조사 탭과 타일마다 카메라 배치로 그린 폰 뒷면 윤곽, 모델명을 넣었고 고른 타일은 네온 블루로 채웁니다. 2. 선택 요약 판 - 고른 기종의 모델명과 케이스, 필름, 렌즈, 충전, 스트랩 개수를 보여 주고 선택은 다시 방문해도 유지됩니다. 3. 기종에 맞춰 바뀌는 화면 - 진열 제목과 모든 카드의 호환 표시, 세트 구성, 모바일 하단 탭의 기종 칸까지 고른 기종으로 바뀝니다. 4. 케이스, 필름, 렌즈 세트 - 세 단계 버튼에서 하나씩 고르면 15% 할인과 결제 금액이 계산됩니다. 5. 신기종 케이스 출고 일정 - 기종별 공개일과 케이스 출고일, 준비 상품 수, 판매 상태를 표로 보여 주고 사전예약과 입고 알림으로 이어집니다. [디자인] - 흰 바탕과 옅은 회색 판에 네온 블루 한 색을 선택 표시와 할인율, 주 버튼에 썼습니다. - 한글은 Pretendard, 영문 모델명과 숫자는 Space Grotesk입니다. - 모서리 없이 카드끼리 1px 선을 공유하는 격자로 정리했습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조