UMBER 엄버 비건 내추럴 화장품 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 클레이 마스크, 클렌징밤, 페이스 오일, 바디 버터처럼 제형이 특징인 비건 브랜드를 위한 몰입니다. 첫 화면을 짙은 흙색 바탕 위 제형 클로즈업 사진으로 채워 손등에 짜 놓은 질감부터 보이게 했습니다. 아래로 제형으로 고르기, 많이 다시 산 제품, 원료 산지, 신제품, 리필 안내가 흙색과 테라코타 면을 번갈아 가며 이어집니다. 스킨케어와 바디 제품 19종으로 구성했습니다. [주요 기능] 1. 제형 매크로 첫 화면 - 펴 바른 크림 사진을 화면 전체에 깔고 왼쪽 아래에 명조 제목, 오른쪽 아래에 가격이 적힌 흰 상품 카드를 놓았습니다. 2. 제형으로 고르기 - 클레이, 밤, 무스, 크림, 오일, 고체 여섯 칸 텍스처 타일을 누르면 아래 상품 네 개가 바뀝니다. 3. 제형 칩과 원료 산지 - 카드 사진 왼쪽 아래에 제형 사진 원형 칩을, 상품명 아래에 원료 산지 한 줄을 붙였습니다. 4. 원료 산지 밴드 - 테라코타 면에 산지와 원료, 가공 방식, 그 원료로 만든 상품 가격을 함께 보여 줍니다. 5. 리필 계산기 - 제품과 1년 사용 개수를 고르면 본품만 살 때와 리필을 쓸 때의 비용, 1년 절약액, 줄어드는 플라스틱 양이 나옵니다. [디자인] - 짙은 흙색과 테라코타, 연한 흙분홍 면을 번갈아 써서 흙냄새 나는 인상을 냈습니다. - 한글 제목은 Gowun Batang 명조, 본문과 가격은 Pretendard, 워드마크는 Cormorant입니다. - 상품 카드는 4:5 비율에 모서리 없이 두고 칩과 버튼만 둥글렸습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조