Shopyy 유니폼 웹사이트 디자인: MMJerseys 리그 목록과 상품 선택

프로젝트 개요

MMJerseys의 Shopyy 사이트는 리그 목록과 유니폼 선택을 중심으로 구성했습니다. 리그 메뉴, 목록 입구, 신상품 그리드를 서로 다른 단계에 두어 팀부터 찾는 사람과 디자인을 바로 보는 사람 모두를 안내합니다. 흰 상품 그리드, 빨간 메뉴 강조, 검은 글자가 테마 탐색·목록 비교·개별 상품을 연결합니다.

디자인 과제

리그, 팀, 시즌, 디자인이 모두 선택에 영향을 줍니다. 목록 위계를 먼저 명확히 하고 사진과 규격으로 구체적인 판단을 지원해 모든 분류와 설명이 한 단계에 몰리지 않게 했습니다.

디자인 전략: 리그 목록과 유니폼 선택

리그 메뉴, 목록 입구, 신상품 그리드를 나눠 팀 검색과 디자인 탐색을 함께 지원합니다. 홈은 방향을, 카테고리는 비교를, 상세는 외관과 규격을 설명하며 메뉴와 콘텐츠 링크로 이어집니다.

제목·메뉴·본문에 Arial과 Helvetica를 쓰고 상단 행사 띠는 좁은 글꼴로 강조했습니다. 크기·굵기·문단 너비로 위계를 만들었습니다. 흰 그리드, 빨간 강조, 검은 글자를 주요 페이지에 유지하고 그룹 안은 촘촘히, 섹션 사이는 넓게 했습니다.

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

마우스를 올리면 목록 메뉴가 열리고 상품 영역에는 탭과 디자인 썸네일을 남겼습니다. 상세에서 사이즈, 번호, 추가 옵션을 차례로 배치합니다. 명확한 선택 상태와 그룹 간격으로 탐색과 선택을 연결하며 불필요한 애니메이션이 사진을 방해하지 않게 했습니다.

홈 상품 영역: 외관 비교 후 디자인 이름 확인

New Arrivals, World Cup 2026 등의 탭을 그리드 위에 배치했고 현재 화면은 신상품입니다. 카드마다 정면 사진, 이름, 가격, 보충 정보 순서로 보여줍니다. 한 줄의 이미지 크기를 비슷하게 맞춰 색과 무늬를 비교하기 쉽게 했습니다.

흰 배경과 가는 검은 글자로 팀별 선명한 색을 돋보이게 했습니다. 탭과 상품 사이에는 여백을, 카드 내부에는 밀도 있는 구성을 적용해 먼저 스타일을 훑고 이름을 읽을 수 있습니다.

리그 목록: 팀 입구로 선택 범위 축소

Premier League에서는 상단에 팀 이름 링크, 아래에 상품 그리드를 두었습니다. 페이지 제목, 하위 분류, Refine·Sort By를 별도 단계에 배치해 많은 정보에도 순서를 유지했습니다.

빨강은 메뉴와 신상품 표시에만 사용하고 상품 영역은 밝게 유지했습니다. 큰 사진과 일정한 카드 폭이 비교를 돕고, 상세 규격은 개별 페이지에 남겨 카드가 긴 설명으로 늘어나지 않게 했습니다.

상품 상세: 사진과 선택 정보를 나란히

왼쪽에 큰 유니폼 사진, 오른쪽에 이름·가격·행사 띠·Similar Style 입구를 놓았습니다. 파랑·빨강 줄무늬 유니폼이 중심이며 썸네일은 같은 상품의 다른 각도를 제공합니다.

짧은 문단과 그룹 여백으로 오른쪽을 정리하고 노란 행사 띠로 일부를 강조했습니다. 사진과 글의 폭을 정해 외관을 확인하면서 선택을 이어가게 했습니다.

옵션 영역: 디자인과 맞춤 선택 구분

왼쪽 사진과 하단 썸네일을 유지하고 오른쪽은 작지만 정렬된 관련 스타일 카드, 그 아래는 사이즈와 맞춤 옵션으로 구성했습니다. 여러 판단을 긴 드롭다운 하나로 합치지 않고 순서로 나눴습니다.

작은 사진의 간격을 고정하고 문자 옵션은 밝은 테두리와 여백으로 묶었습니다. 스타일이 많아도 비교 질서를 유지하고 사이즈·번호를 상품 정보 가까이 두어 이동하며 찾는 수고를 줄였습니다.

소개 페이지: 짧은 문단으로 사업 배경 설명

가운데 제목과 짧은 문단으로 사업을 소개하고 스토어의 헤더·푸터를 유지했습니다. 배경 보충에 역할을 한정해 읽은 뒤 메뉴로 목록에 돌아갈 수 있습니다.

분명한 산세리프 글꼴, 넉넉한 행간, 문단 간격을 적용했습니다. 흰 바탕·검은 글자를 유지하고 상품 배너를 더 쌓지 않아 선택 페이지와 다른 읽기 리듬을 만듭니다.

연락처: 메시지 입구의 위치를 명확하게

상단에 연락 안내를 두고 파란 원형 메시지 이미지로 다음 입구를 강조했습니다. 이메일·안내·입구를 여백으로 묶어 연락 수단을 이해한 뒤 고르게 합니다.

간단한 흰 콘텐츠 영역을 유지하며 파란 입구와 상단의 빨간 메뉴를 구분했습니다. 이 페이지는 소통을 안내하고 상품 목록과 가격은 해당 페이지에 남깁니다.

모바일 홈: 배너와 2열 상품으로 주제 유지

좁은 화면에서도 상단 행사 띠, 유니폼 배너, 신상품 입구를 남기고 그리드를 모바일 폭에 맞췄습니다. 배너로 주제를 제시한 다음 바로 상품 선택으로 이어집니다.

제목과 이름은 카드 폭에 맞춰 줄바꿈하며 사진 크기를 확보했습니다. 세로 간격으로 배너·탭·상품을 나눠 같은 콘텐츠 순서를 유지합니다.

모바일 상품: 큰 사진으로 스타일 소개

큰 유니폼 사진과 각도 썸네일을 먼저, 이름·가격·행사 정보를 다음에 보여줍니다. PC의 두 열을 세로로 바꿔 각 그룹에 충분한 폭을 줬습니다.

사진을 크게 유지하고 왼쪽 정렬과 그룹 안 간격으로 글을 구성했습니다. 스타일과 규격이 아래로 이어지며 사진·이름·선택 정보 사이의 관계가 유지됩니다.

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

MMJerseys에서는 리그 목록과 유니폼 선택을 축으로 흰 그리드, 빨간 메뉴, 검은 글자가 홈·카테고리·상품 페이지를 연결합니다. 이미지는 주제를, 글은 상세 정보를 설명하며 목록과 옵션은 다음 행동을 지원합니다. 모바일도 같은 순서로 일관된 시각·탐색 경험을 제공합니다.

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

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