피부의 시간을 되돌리는 안티에이징 스킨케어 쇼핑몰
Design Concept
시간이 지나도 변하지 않는 결
시간의 흔적을 되돌리는 스킨케어라는 브랜드 메시지를 쇼핑몰 전체의 분위기로 옮기는 것을 디자인의 출발점으로 삼았습니다.
크림 톤 배경과 캐멀 베이지, 웜 브라운 컬러를 중심으로 세리프 서체를 더해 화려함보다는 차분하고 고급스러운 인상을 주었습니다.
또한 영상 히어로에서 브랜드 메시지, 제품 슬라이드, 라인별 소개, 상품 구매로 이어지는 흐름을 만들어 처음 방문한 고객도 자연스럽게 제품을 탐색하도록 설계했습니다.
Design Elements
-
01
영상 배경 히어로 배너
메인 첫 화면에 영상 배경과 대표 제품 문구, Shop Now 버튼을 배치했습니다.
브랜드 분위기를 전달하며 곧바로 대표 상품 구매로 이어집니다. -
02
라인별 카테고리 구조
Basic Line, Hair Care, Face Care, Makeup, Men’s Basic Line, Color Cosmetic으로 상품을 나누었습니다.
고객이 원하는 제품군을 메뉴에서 바로 찾을 수 있습니다. -
03
브랜드 스토리 섹션
동물 실험 없음과 식물성 콜라겐, 제주 카멜리아, 해녀콩 등 핵심 원료를 브랜드 페이지에 정리했습니다.
제품의 신뢰와 차별점을 함께 전달합니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#C79370
- Ink Black#1A1A1A
- Cream Ivory#FDFBF4
- Camel Beige#C79370
- Warm Brown#6E5E4E
- Charcoal#222222
- Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 Noto Serif KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Poppins
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Sans KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
상품 목록과 브랜드 페이지를 같은 헤더와 카드 규칙 안에서 일관되게 확장할 수 있도록 설계했습니다.
카테고리 메뉴, 상품 카드, 브랜드 소개가 동일한 상단 구조와 여백 규칙을 공유합니다.
제품이 추가되어도 같은 카드 형식으로 자연스럽게 이어집니다.
- Grid
- 상품 목록은 균등한 카드 그리드로 구성해 상품명과 가격, View Details·Add to Cart 버튼 위치를 일정하게 유지했습니다.
- Header
- 상단에 SHOP·BRAND·COMMUNITY·FLAGSHIP 메뉴와 로그인, 한국어·영어 전환, 장바구니, 검색을 모아 배치했습니다.
- CTA
- 메인에는 Shop Now 와 View More 버튼, 하단에는 제휴 문의 폼을 두어 구매와 문의 동선을 나눴습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCSHOP·BRAND·COMMUNITY·FLAGSHIP 메뉴를 상단에 노출
MO하단 네비게이션과 슬라이드 메뉴로 전환
-
Layout
PC상품 카드를 여러 열 그리드로 배치
MO상품 카드를 화면 폭에 맞춰 열 수를 줄여 재배치
-
Typography
PC세리프 서체의 큰 문구로 브랜드 메시지를 강조
MO문구 크기를 화면 폭에 맞춰 줄이고 줄바꿈을 조정
-
Image
PC영상 배경과 와이드 이미지를 크게 사용
MO이미지를 화면 폭에 맞춰 비율 조정
