HALEWELL 헤일웰 영양제 건강기능식품 쇼핑몰 스킨

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.09 ~ 2026.10 관련 기술: 카페24 스마트디자인 Pro, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 카페24 디자인센터에서 판매 중인 영양제와 건강기능식품 반응형 스킨입니다. 패키지 사진이 주인공인 상품 카드에 하루 단가를 자동으로 붙이고, 목적별 찾기와 드시는 분별 찾기, 정기구독 안내, 원료 이야기까지 메인 하나에 담았습니다. 흰 바탕에 헤일웰 그린 한 색만 포인트로 써서 깨끗한 인상을 냈습니다. 카페24 스마트디자인 Pro 기본 스킨의 모듈 구조는 그대로 두고 화면 마크업과 스타일을 새로 짰습니다. [주요 기능] 1. 패키지가 주인공인 카드 - 정사각 사진 칸에 병과 상자를 크게 두고 제품마다 다른 파스텔 색이 바탕을 받쳐 줍니다. 카드마다 담기 버튼이 있어 목록에서 바로 장바구니에 넣습니다. 2. 하루 단가 자동 표시 - 상품 간략설명에 일수를 적으면 판매가를 나눈 하루 금액이 카드와 상세에 자동으로 붙습니다. 3. 목적별, 대상별 찾기 - 피로, 눈, 장 같은 목적 버튼과 여성, 남성, 부모님, 아이 카드로 제품을 찾습니다. 4. 이달의 제품과 정기구독 - 색면 사진 위에 함량, 일수, 하루 금액 세 숫자를 올리고, 배송 주기와 할인, 회차, 변경과 해지 조건을 표 한 장으로 안내합니다. 5. 가격 옆에서 보는 상세 - 큰 패키지 사진과 할인율, 판매가, 배송비와 무료배송 기준, 가입 혜택을 한 화면에 두고 구매 버튼 아래 건강기능식품 표시 문구 자리를 마련했습니다. 6. 무료배송 막대 장바구니 - 장바구니 맨 위에 무료배송까지 남은 금액 막대를, 오른쪽에 결제 예정 금액 상자를 고정했습니다. [디자인] - 흰 바탕과 옅은 회색 교대 면에 헤일웰 그린 한 색을 혜택 띠와 할인율, 주 버튼에 썼습니다. - Pretendard 한 서체로 숫자와 표시 문구가 또렷하게 읽히게 했습니다. [범위] - 메인, 상품 목록, 상품 상세, 장바구니, 주문, 회원가입, 로그인, 게시판까지 전 페이지 디자인 - PC·모바일 한 벌로 맞추는 반응형, 모바일 하단 탭 메뉴 - 관리자에서 배너, 메인 진열, 분류를 바꾸면 화면에 그대로 반영되도록 카페24 모듈 연결 - 업종에 맞춘 분류 구조와 상품 진열 세팅