TEMPER 템퍼 남성 그루밍 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 스킨케어를 단순하게 끝내고 싶은 남성을 위한 그루밍 몰입니다. 첫 화면에서 피부 타입을 고르면 세안, 정돈, 보습 세 제품과 세트 가격이 바로 정해지도록 했습니다. 검정 면과 흰 면을 번갈아 두고 구리색 선으로 리듬을 냈으며, 쉐이빙은 면도날 교체 주기 계산과 정기배송으로 따로 묶었습니다. 스킨케어, 쉐이빙, 바디와 헤어 제품, 3단계 세트로 구성했습니다. [주요 기능] 1. 피부 타입 3단계 첫 화면 - 지성, 복합, 건성, 민감 탭을 누르면 세안, 정돈, 보습 세 칸의 제품명과 용량, 가격이 바뀌고 아래 세트 줄에 15% 세트가가 계산됩니다. 2. 구리 금속 선 - 구리 그라데이션은 2px 선에만 쓰고 넓은 구리 면은 혜택 띠 한 곳에만 두었습니다. 3. 루틴 단계 칩 - 모든 스킨케어 카드 맨 위에 세안, 정돈, 보습 단계 번호와 맞는 피부 타입을 붙이고, 베스트 탭도 단계로 거릅니다. 4. 면도날 교체 주기 계산기 - 일주일 면도 횟수와 수염 굵기를 넣으면 날 하나의 사용 횟수와 교체 주기가 나오고, 그 주기에 맞춘 리필 정기배송 가격과 신청 버튼이 이어집니다. 5. 피부 타입 배지 후기 - 후기마다 피부 타입과 나이대를 먼저 보여 같은 타입의 후기를 찾기 쉽게 했습니다. [디자인] - 검정과 석탄색 면, 돌회색 면을 번갈아 두고 구리색을 선과 숫자에만 써서 담금질한 금속 같은 인상을 냈습니다. - 한글과 가격은 Pretendard, 워드마크와 단계 번호, 계산 숫자는 Barlow Condensed입니다. - 상품 카드는 4:5 비율에 모서리 없이 두었습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조