Shopyy 가발·속눈썹 웹사이트 디자인: Lash & Wigs 착용 이미지와 상품 상세

프로젝트 개요

Lash & Wigs의 Shopyy 사이트는 헤어·메이크업 이미지와 상품 상세의 연결을 중심으로 구성했습니다. 모델 사진 콜라주로 카테고리 인상을 만들고 모발 묶음, 속눈썹, 착용 사진을 같은 상품 전시에 배치합니다. 모델 배너, 흰 그리드, 검은 푸터가 테마 탐색·비교·개별 확인을 연결합니다.

디자인 과제

가발과 속눈썹은 전체 착용 효과와 구체적인 형태를 함께 보여줘야 합니다. 모델 이미지로 스타일을 만들고 선명한 상품 사진으로 컬, 길이, 포장을 설명해 사진마다 역할을 나눴습니다.

디자인 전략: 착용 이미지와 상품 상세 연결

모델 콜라주로 카테고리 인상을 전달하고 모발 묶음, 속눈썹, 착용 사진을 같은 전시에 넣었습니다. 홈은 방향을, 카테고리는 비교를, 상세는 외관과 규격을 맡으며 메뉴와 링크로 연결됩니다.

주요 화면은 Poppins, 일부 설명은 Helvetica로 구성하고 크기·굵기·문단 폭으로 제목·메뉴·본문을 구분했습니다. 모델 배너, 흰 그리드, 검은 푸터를 주요 페이지에 유지하며 그룹 안은 촘촘히, 섹션 사이는 넓게 했습니다.

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

상품의 여러 각도 썸네일과 길이 옵션이 선택을 지원하며 모바일에도 이미지 번호와 접힌 메뉴를 남겼습니다. 상품을 자세히 보고 길이를 고르는 데 상호작용을 집중하고, 사진·글 구분과 스크롤 읽기가 페이지 흐름을 이끌게 했습니다.

홈페이지: 착용 효과 다음에 상품 보기

여러 모델의 헤어·메이크업 사진을 가로 배너로 조합하고 중앙 LASH & WIGS로 카테고리를 표시했습니다. 바로 아래 Top Sellers에 컬 모발, 속눈썹, 착용 사진을 같은 상품 영역으로 연결했습니다.

인물 사진 위에 흰 글자를 놓고 주변 헤더는 간단히 유지했습니다. 이미지가 스타일을 만든 뒤 흰 목록에서 구체적인 상품을 고르는 순서입니다.

인기 상품: 형태가 다른 상품에 각자의 위치

모발, 속눈썹 세트, 착용 사진을 같은 폭의 카드로 나란히 배치했습니다. 이름과 가격을 아래에 두어 형태를 본 다음 상품을 확인하게 합니다.

흰 목록에서 카드 사이를 균등하게 띄웠습니다. 어두운 컬 모발은 밝은 배경에서 윤곽이 분명하고 컬러 속눈썹 포장도 같은 그리드에서 식별됩니다.

속눈썹 카테고리: 같은 이미지 크기로 비교

착용 모습, 세트 포장, 개별 형태를 규칙적인 그리드에 배치했습니다. 상단 제목과 목록 도구로 범위를 먼저 알리고 서로 비교할 수 있게 했습니다.

사진 아래 짧은 이름과 가격을 붙이고 그룹 안은 가깝게, 행 사이는 넓게 뒀습니다. 흑백 글자와 밝은 배경이 속눈썹 윤곽과 포장색을 주요 비교 단서로 만듭니다.

모발 상세: 컬 사진과 길이 선택을 이웃하게

왼쪽에 깊은 컬의 큰 사진, 오른쪽에 이름·가격·길이·조작 영역을 순서대로 놓았습니다. 윤곽을 충분히 보여주고 길이 버튼을 같은 정보 영역에 모았습니다.

큰 산세리프 제목과 밝은 테두리로 길이 옵션을 구분했습니다. 아래의 노란 결제 입구는 부분 강조로 사용하되 사진과 규격의 읽기 영역은 각각 유지합니다.

세부 설명: 컬과 사용 정보 이어보기

아래에도 큰 모발 사진과 여러 각도 썸네일을 유지하고 오른쪽은 짧은 설명을 배치했습니다. 같은 두 열 구조로 사진과 글을 이어가며 아래 리뷰 영역으로 연결합니다.

썸네일 간격을 고정하고 설명을 소제목과 문단 여백으로 나눴습니다. 흰 바탕의 어두운 모발 윤곽이 선명해 전체 형태에서 세부로 확인할 수 있습니다.

브랜드 소개: 짧은 글로 사업 방향 전달

About Us 제목과 짧은 문단으로 ExcitingFashion의 사업 배경을 설명합니다. 상품 페이지와 같은 헤더 아래 검은 커뮤니티·탐색 푸터를 연결해 위아래 경계를 만듭니다.

가벼운 글자 굵기와 넓은 문단 간격으로 흰 본문을 간결하게 했습니다. 배경 설명에 집중하고 상품 이미지를 반복하지 않아 페이지 역할이 분명합니다.

연락처: 연락 수단을 한곳에

제목 아래 안내, WhatsApp, 이메일을 모으고 단순한 글 구조를 사용했습니다. 채널을 함께 배치해 읽은 뒤 바로 방법을 고를 수 있습니다.

흰 본문과 검은 푸터를 분리하고 왼쪽 정렬과 명확한 행간을 유지했습니다. 상품 페이지보다 가벼운 구성으로 정보를 빠르게 찾게 합니다.

모바일 홈: 배너 주제와 상품 순서 유지

모델 콜라주 다음에 Top Sellers와 큰 상품 사진을 보여줍니다. PC의 카테고리 주제를 유지해 좁은 화면에서도 헤어·메이크업 방향을 먼저 이해할 수 있습니다.

상단 메뉴는 아이콘 입구로 바꾸고 상품 사진의 너비를 충분히 확보했습니다. 배너·제목·상품 사이의 세로 여백으로 각 콘텐츠가 독립적으로 읽힙니다.

모바일 상세: 모발 질감을 먼저 확인

큰 모발 사진과 이미지 번호를 먼저, 이름·가격·길이를 다음에 보여줍니다. 컬과 모발 윤곽을 크게 보여 형태를 먼저 확인하게 했습니다.

좁은 폭에 맞춰 줄을 바꾸고 이름과 가격 사이를 명확히 띄웠습니다. PC의 두 열을 세로로 바꾸면서도 사진 다음 규격이라는 선택 순서를 유지합니다.

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

Lash & Wigs는 착용 이미지와 상품 상세를 축으로 모델 배너, 흰 그리드, 검은 푸터가 홈·카테고리·상품을 연결합니다. 이미지는 주제를, 글은 상세 정보를 전달하고 목록과 규격이 다음 행동을 돕습니다. 모바일에도 같은 순서를 유지해 일관된 경험을 제공합니다.

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

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