Shopyy 신발 웹사이트 디자인: StocksKick 상품 전시와 사이즈 선택

프로젝트 개요

StocksKick의 Shopyy 사이트는 신발 테마 전시와 사이즈 선택을 중심으로 구성했습니다. 큰 신발 배너로 첫인상을 만들고 서비스 아이콘과 카테고리별 상품 그리드로 선택을 이어갑니다. 흑백 화면, 큰 신발 이미지, 정돈된 카드가 테마 탐색, 목록 비교, 개별 상품 확인을 연속된 흐름으로 연결합니다.

디자인 과제

신발의 형태와 색상을 보여주면서 사이즈 선택도 명확해야 합니다. 테마 배너, 목록 비교, 상품 사진, 규격 선택을 구분해 시각 표현과 구체적인 판단에 각각 공간을 마련했습니다.

디자인 전략: 신발 테마 전시와 사이즈 선택

큰 신발 배너가 첫인상을 만들고 서비스 아이콘과 카테고리 그리드가 상품 선택으로 안내합니다. 홈은 방향을, 카테고리는 비교를, 상세는 외관과 규격을 설명하며 탐색 메뉴와 콘텐츠 링크로 연결됩니다.

제목, 메뉴, 본문에 Poppins를 사용하고 크기·굵기·문단 너비로 위계를 만들었습니다. 주요 페이지에 흑백 화면, 큰 신발 이미지, 정돈된 카드를 유지하면서 정보 그룹 안은 촘촘하게, 섹션 사이는 넓게 두어 사진·설명·동작을 구분했습니다.

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

홈 배너는 자동 전환되며 헤더 카테고리가 각 목록으로 연결됩니다. 상세에는 여러 각도의 썸네일, 묶음 사이즈 버튼, 펼칠 수 있는 정보 영역을 배치했습니다. 사진 전환, 비교, 설명 확인을 지원하며 흑백 화면의 조작 위계를 유지합니다.

홈페이지: 신발 배너로 주제를 전달

가로형 신발 배너를 첫 화면의 중심으로 삼고 로고, 검색, 카테고리 메뉴를 헤더에 정렬했습니다. 큰 신발 사진과 제목이 시각 중심을 이루고 주변 흑백 화면이 테마 색상을 돋보이게 합니다.

Poppins 제목과 메뉴는 간결하게, 검색창과 기능 아이콘은 같은 수평선에 놓았습니다. 첫 화면에서는 테마에 공간을 주고 상품 세부 정보는 다음 페이지에서 단계적으로 펼칩니다.

홈 상품 영역: 서비스 안내와 상품 선택을 구분

배너 아래 서비스 안내와 상품 전시로 테마 탐색에서 개별 스타일 선택으로 이어집니다. 아이콘과 짧은 문장은 가벼운 정보 띠를 만들고, 상품 카드는 일정한 이미지 크기·이름·가격 순서로 비교를 돕습니다.

흰색 영역과 고정 열 너비로 시각적 방해를 줄이고 이미지 간격을 균등하게 했습니다. 제목과 카드 사이의 여백이 서비스와 상품 정보를 별도로 묶습니다.

카테고리: 형태와 색상을 나란히 비교

여러 열의 카드에 사진, 이름, 가격을 일정한 순서로 배치했습니다. 신발 윤곽을 충분히 크게 보여 주어 색상을 이미지로 먼저 비교할 수 있습니다.

밝은 배경과 검은 글자, 일정한 행·열 간격으로 정돈했습니다. 목록 도구와 상품 영역을 분리해 후보를 좁힌 뒤 상세에서 사이즈를 확인하게 했습니다.

상품 페이지: 큰 사진과 사이즈 매트릭스

왼쪽에는 빨간 신발의 큰 실사진, 오른쪽에는 제목·가격·사이즈 버튼을 놓았습니다. 같은 폭의 옵션 버튼을 격자로 배열하고 US와 EU 대응 정보를 선택 영역에 직접 표시했습니다.

큰 사진은 형태와 소재를 보여주고 오른쪽은 글자 굵기와 간격으로 제목·가격·사이즈를 나눕니다. 흑백 버튼을 유지해 현재 신발과 선택 가능한 규격에 집중시킵니다.

상세 하단: 여러 각도 사진과 접이식 설명

큰 신발 사진과 하단 썸네일을 유지하고 오른쪽에는 사이즈, 수량, 구매 동작, Detail과 Customer Reviews를 배치했습니다. 각도 확인과 설명 읽기를 이웃하게 두고 아래에는 관련 신발을 추천합니다.

썸네일은 일정한 작은 크기로, 접이식 정보는 얇은 선과 더하기·빼기 기호로 구분했습니다. 사진과 글 사이의 넓은 여백으로 빽빽한 규격도 읽기 쉽게 했습니다.

소개 페이지: 소제목으로 긴 설명 구분

브랜드 설명을 별도 페이지에 두고 거래·상품·서비스 내용을 소제목으로 나눴습니다. 스토어 헤더를 유지하면서 본문은 글 읽기에 집중합니다.

Poppins 소제목과 본문을 굵기로 구별하고 문단 사이를 띄웠습니다. 긴 내용을 주제별로 나눠 필요한 정보를 찾은 뒤 헤더를 통해 목록으로 돌아갈 수 있습니다.

연락처: 운영 시간과 연락 수단을 한곳에

운영 시간, 이메일, WhatsApp을 차례로 배치했습니다. 단순한 세로 구조로 한 영역에 모아 푸터 여러 곳을 찾는 수고를 줄였습니다.

왼쪽 정렬과 정보 그룹 사이 여백으로 읽기 쉽게 했습니다. 헤더·푸터는 스토어 구성을 유지하며 간결하고 명확한 글을 중심으로 구성했습니다.

모바일 상세: 사진, 이름, 사이즈 순서

모바일에서는 신발 사진에 전체 너비를 주고 이름, 가격, 옵션을 아래로 이어갑니다. PC의 병렬 구조를 세로로 바꿔 사진과 사이즈 정보에 충분한 공간을 확보했습니다.

사진 아래 명확한 제목과 간격으로 정보를 연결하고 버튼은 PC의 흑백 스타일을 유지합니다. 먼저 신발을 확인한 뒤 자신에게 맞는 사이즈를 살펴볼 수 있습니다.

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

StocksKick은 신발 테마와 사이즈 선택을 중심으로 흑백 화면, 큰 배너, 정돈된 카드로 홈·카테고리·상세를 연결했습니다. 사진은 주제를, 글은 세부 정보를 설명하고 목록과 규격 선택이 다음 행동을 돕습니다. 모바일도 같은 순서를 유지해 일관된 시각·탐색 경험을 제공합니다.

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

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