ASSAY 어세이 더마 화장품 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 성분과 함량을 따져 고르는 손님을 위한 더마 화장품 몰입니다. 첫 화면에 대표 제품 하나와 함량, pH, 용량을 숫자 표로 올려 무엇이 몇 % 들었는지가 먼저 보이게 했습니다. 아래로 많이 산 제품, 성분으로 찾기, pH로 보는 전 제품, 같이 써도 되는지 표가 이어집니다. 세럼, 토너, 크림, 선케어, 클렌저, 아이크림 12종으로 구성했습니다. [주요 기능] 1. 함량 판독 카드 - 모든 상품 카드에 주성분 두 가지의 %와 막대, pH 점, 제조월을 표기했습니다. 2. 첫 화면 판독표 - 제품명 아래 함량, pH, 용량을 네 칸 숫자 표로 놓고 로트 번호와 제조일을 함께 적었습니다. 3. 성분으로 찾기 - 성분 탭 여섯 개를 누르면 왼쪽에 권장 함량과 잘 맞는 pH, 같이 쓰는 법이, 오른쪽에 함량 순 제품 표와 담기 버튼이 나옵니다. 4. pH 점 그래프 - 전 제품을 pH 순으로 한 줄씩 놓고 피부 표면 pH 범위 띠 위에 점으로 찍었습니다. 5. 같이 써도 되는지 표 - 성분끼리 같이, 아침과 저녁 나눠서, 다른 날로 쓰는지를 표로 정리하고 옆에 단계별 가격과 세트 할인이 붙은 루틴 세트 두 개를 두었습니다. [디자인] - 흰 바탕과 연회색 면, 가는 선과 표로 실험실처럼 정돈하고 민트를 막대와 혜택 띠에, 짙은 민트를 할인율과 순위에 썼습니다. - 한글은 Pretendard, 숫자와 영문은 IBM Plex Sans로 나눠 숫자가 또렷하게 읽히게 했습니다. - 상품 카드는 1:1 비율에 모서리 없이 4열로 놓았습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조