Shopyy 뷰티 웹사이트 디자인: Chroma Dewy 메이크업과 컬러 상품 전시

프로젝트 개요

Chroma Dewy의 Shopyy 사이트는 메이크업 테마와 컬러 상품 전시를 중심으로 구성했습니다. 눈 화장 클로즈업과 설명을 홈 배너로 묶고 아래의 아이섀도 팔레트와 카테고리 이미지로 상품 탐색을 연결합니다. 주황색 로고, 밝은 바탕, 선명한 메이크업 사진이 테마 탐색·목록 비교·개별 상품 확인을 이어줍니다.

디자인 과제

뷰티 사이트는 메이크업 효과를 보여주면서 색상과 도구도 비교하기 쉬워야 합니다. 인물 클로즈업은 테마를, 일정한 그리드의 팔레트·브러시·패키지는 상품을 설명하게 해 서로 방해하지 않도록 했습니다.

디자인 전략: 메이크업 테마와 컬러 상품 전시

눈 화장 클로즈업과 테마 설명을 배너로 만들고 팔레트와 카테고리 이미지로 목록을 연결했습니다. 홈은 방향을, 카테고리는 비교를, 상품 페이지는 외관과 규격을 맡으며 메뉴와 링크로 이어집니다.

Josefin Sans를 제목·메뉴·본문에 사용하고 크기·굵기·문단 폭으로 위계를 만들었습니다. 주황색 로고, 밝은 바탕, 선명한 사진을 주요 페이지에 유지했습니다. 그룹 안은 촘촘히, 섹션 사이는 넓게 두어 사진·설명·조작에 각자의 위치를 줬습니다.

모션과 기능: 현재 선택을 지원

홈 배너에는 좌우 전환 화살표를 남기고 하단 카테고리 이미지로 목록에 연결했습니다. 상세의 수량 선택, 사진, 설명은 현재 상품을 중심으로 구성합니다. 모바일 메뉴는 명확한 입구로 접어 연속적인 탐색 흐름을 유지합니다.

홈 배너: 눈 화장을 첫 시각 중심으로

오른쪽에 두 눈 화장 클로즈업, 왼쪽에 테마 설명을 놓고 간단한 헤더에는 주황색 Chroma Dewy 로고를 배치했습니다. 근접 사진이 색과 질감을 보여주고 화살표는 다른 테마로 이동하게 합니다.

가벼운 Josefin Sans가 메뉴와 상품 글을 연결하며 밝은 배경이 선명한 화장에 공간을 줍니다. 사진과 글의 영역을 나눠 첫 화면에 모든 설명을 넣지 않았습니다.

신상품: 정돈된 그리드로 색상 비교

New Arrivals를 여러 열의 팔레트 카드로 구성해 밝은 배경에서 색을 바로 비교하게 했습니다. 아래의 이름과 가격은 짧게 두고 다음 영역에 Brushes, Eyes, Lips 카테고리 이미지를 연결했습니다.

같은 팔레트 크기와 카드 폭으로 질서를 만들고 카테고리 간격을 균등하게 했습니다. 주황색은 일부 브랜드 표시로만 쓰며 실제 색의 주인공은 상품입니다.

브러시 카테고리: 형태와 세트 구성 표시

단일 브러시와 세트 사진을 같은 그리드에 놓고 상단 Makeup Brushes 제목으로 범위를 알립니다. 브러시 끝, 손잡이, 세트 수량을 사진으로 먼저 설명한 뒤 이름과 가격을 둡니다.

흰 바탕과 넓은 카드 간격으로 혼잡을 줄이고 가는 메뉴 글자와 중앙 제목으로 가볍게 구성했습니다. 목록 도구는 별도로 두어 비교 흐름을 방해하지 않습니다.

상품 페이지: 테마 패키지 이미지에서 정보로

The Volturi는 왼쪽에 빨강·검정 패키지 사진, 오른쪽에 이름·가격·수량·짧은 설명을 배치했습니다. 사진이 시각 특징을 먼저 보여주고 글이 구체적인 확인을 이어갑니다.

붉은 사진 배경과 밝은 페이지가 뚜렷한 경계를 만듭니다. 조작 영역은 얇은 선과 촘촘한 간격으로, 사진과 글 사이는 넓게 두어 어두운 테마도 가벼운 화면에서 명확하게 보입니다.

상세 확장: 보충 정보와 추천을 분리

하단에는 썸네일, 리뷰, You May Also Like 추천을 유지했습니다. 섹션 간격으로 연결하면서 현재 상품 정보와 다음 상품을 고르는 입구를 구별했습니다.

추천 이미지의 열 폭을 통일하고 인물·패키지·도구 사진도 밝은 바탕에 놓았습니다. 소제목과 세로 여백으로 내용을 나눠 관심 상품을 계속 찾을 수 있습니다.

모바일 홈: 메뉴를 접고 테마와 신상품 유지

가로 메뉴를 빨간 MENU 입구로 모으고 로고와 검색 정보를 위에 세로로 배치했습니다. 테마 배너 뒤에 New Arrivals를 두어 화장 효과 다음에 상품을 보는 순서를 유지합니다.

좁은 화면에서는 상품 사진 면적을 늘리고 제목·가격을 세로로 보여줍니다. 빨간 메뉴 띠와 밝은 콘텐츠를 구분해 테마 탐색 중에도 카테고리로 돌아가기 쉽습니다.

모바일 상품: 이미지와 설명을 순서대로

경로 탐색과 큰 패키지 사진 다음에 이름·가격·수량을 배치했습니다. 전체 테마를 유지하며 PC의 두 열을 연속적인 읽기 흐름으로 바꿨습니다.

제목은 왼쪽 정렬과 자연스러운 줄바꿈으로 좁은 화면에 맞추고 가격과 조작 사이에 여백을 뒀습니다. 밝은 바탕, 얇은 테두리, 브랜드 색으로 다른 페이지와 같은 디자인을 유지합니다.

디자인 정리: 주제와 구체적인 정보 연결

Chroma Dewy에서는 메이크업 테마와 컬러 상품 전시를 중심으로 주황색 표시, 밝은 바탕, 선명한 사진이 홈·카테고리·상세를 연결합니다. 사진은 주제를, 글은 구체적인 정보를 설명하고 목록과 옵션은 다음 행동을 돕습니다. 모바일도 같은 순서를 유지해 일관된 경험을 제공합니다.

브랜드에 맞는 명확한 Shopyy 웹사이트를 계획하세요

현재 웹사이트, 브랜드 자료, 필요한 페이지 범위를 알려주세요. 상품 유형, 대상 시장, 콘텐츠 우선순위를 고려해 적절한 페이지, 시각 디자인, 기능을 함께 계획합니다.