세포부터 시작하는 스킨·스칼프 케어 뷰티 쇼핑몰

리셀브가 제안하는 줄기세포 원료 기반의 스킨·스칼프 케어 브랜드 철학과 모지에프·베리온 제품 라인을 구매까지 자연스럽게 연결하기 위해 구축한 카페24 쇼핑몰입니다. 메인 화면은 프로모션 배너 → 카테고리 바로가기 → 두피케어 브랜드 스토리 → 베리온 크림 소개 → 숏클립 → 베스트셀러 → 신상품 → 이벤트 → 회원 혜택 → 베스트 리뷰 → 멤버십·공지·FAQ·Q&A 안내 순서로 구성했습니다. 특히 두피케어와 피부케어를 브랜드별 메뉴(MOGF, BARRI;ON)와 상품 카테고리로 함께 나눠 원하는 제품을 빠르게 찾도록 했으며, 네이비와 세이지 그린, 라일락 컬러에 Pretendard 서체를 더해 깨끗하고 신뢰감 있는 분위기를 완성했습니다.

#리셀브
#뷰티쇼핑몰
#카페24쇼핑몰
#두피케어
#스킨케어
#모지에프
#베리온
#브랜드쇼핑몰
#반응형웹
#UIUX

Client: 리셀브
Category: 쇼핑몰・cafe24

Design Concept

과학의 신뢰를 깨끗하게

화장품을 사는 곳이 아니라 세포부터 시작하는 케어의 이유를 먼저 설명하는 공간으로 느껴지도록 하는 것을 디자인의 출발점으로 삼았습니다.
딥 네이비를 중심으로 세이지 그린, 라일락, 카멜 컬러를 포인트로 더하고 Pretendard 서체로 정돈해, 과학적인 신뢰감과 부드러운 케어의 인상이 함께 전달되도록 했습니다.
또한 두피케어와 피부케어를 브랜드 스토리, 상품, 리뷰, 이벤트 순서로 이어 사용자가 제품을 이해한 뒤 자연스럽게 구매와 회원 가입으로 이동하도록 설계했습니다.

Design Elements

01

브랜드·상품 이중 메뉴 구조

SHOP의 두피케어·피부케어·건강기능식품과 BRAND의 MOGF·BARRI;ON을 따로 나눠 구성했습니다.
제품 유형으로도 브랜드로도 원하는 상품을 바로 찾을 수 있게 했습니다.
02

브랜드 스토리형 메인 섹션

“탈모케어의 새로운 패러다임”, “피부 본연의 힘을 깨우다” 같은 문구로 제품이 만들어진 이유를 먼저 전달했습니다.
상품 정보 이전에 브랜드의 관점을 이해하도록 흐름을 만들었습니다.
03

베스트셀러와 리뷰 노출

세트·토닉·샴푸·여행용 키트를 베스트셀러로 가격과 함께 보여주고, 베스트 리뷰를 슬라이드로 배치했습니다.
구매를 고민하는 사용자가 실제 후기를 바로 확인할 수 있게 했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#2B3C5F

Sub Color#9FA581

Point Color#BEACC4
Deep Navy#2B3C5F
Sage Green#9FA581
Lilac#BEACC4
Camel#D0AC88
Charcoal#222222
Cloud Gray#E6E6E6
White#FFFFFF

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Jost

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Noto Sans KR

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

세포부터 시작하는 스킨·스칼프 케어 뷰티 쇼핑몰 서브 페이지 1 — Sub Page 모지에프 브랜드 페이지 01

세포부터 시작하는 스킨·스칼프 케어 뷰티 쇼핑몰 서브 페이지 2 — Sub Page 두피케어 상품 목록 페이지 02

Note

메인과 서브 페이지가 같은 쇼핑몰 규칙 안에서 일관되게 보이도록 설계했습니다.

모든 페이지가 같은 헤더와 카테고리 메뉴, 푸터 구조를 공유하도록 구성했습니다.
상품 목록과 브랜드 페이지도 같은 타이포그래피와 컬러 규칙을 적용해 브랜드 인상이 끊기지 않도록 했습니다.

Grid: 상품은 카드형 목록으로 이미지·상품명·판매가를 같은 순서로 정렬했습니다.
Header: 프로모션 배너 아래에 로고, 대표 메뉴, 로그인·회원가입·장바구니를 한 줄로 두었습니다.
CTA: 웰컴쿠폰 안내와 회원가입, 장바구니 버튼으로 구매 동선을 이어지게 했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

하단 내비게이션 바네비게이션 · 검색 · 홈 · 장바구니 · 마이쇼핑을 화면 하단에 상시 노출

리뷰·이벤트 슬라이드베스트 리뷰와 이벤트를 스와이프로 넘겨보는 카드 구성

Optimization

Menu

PCMenu · SHOP, BRAND, COMMUNITY, EVENT, SUPPORTS를 한눈에 보이는 가로 메뉴로 제공

MOMenu · 하단 네비게이션 바와 접이식 메뉴로 카테고리 이동 최적화
Layout

PCLayout · 넓은 화면에서 브랜드 이미지와 상품 카드를 나란히 배치

MOLayout · 단일 컬럼으로 브랜드 스토리와 상품 카드를 세로 흐름에 맞게 재배치
Typography

PCTypography · Pretendard 기반의 큰 제목과 짧은 설명 문구

MOTypography · 제목과 본문 크기를 줄여 작은 화면에서도 읽기 쉽게 조정
Image

PCImage · 제품 연출 이미지를 크게 노출해 브랜드 분위기 전달

MOImage · 이미지 비율을 화면 폭에 맞춰 최적화