Shop
흰 대리석 위에 떠 있는 무역 별자리
이 온라인 스토어는 "화이트 캔버스" 모델을 기반으로 운영되며, 제품은 썸네일 그리드 대신 크고 곡선이 심한 이미지 카드 형태로 표시됩니다. 전체 인터페이스는 놀라울 정도로 매끄럽습니다. 모든 요소에 20~28px의 곡률 반경이 적용되었고, 알약 모양의 컨트롤과 16px GT Standard 글꼴에 촘촘한 네거티브 트래킹을 적용하여 텍스트가 선명하고 굵게 표시됩니다. 시스템에서 유일하게 눈에 띄는 색상은 생생한 보라색(#5433eb)으로, 로고, 원형 검색 결과 필드, 그리고 같은 버튼의 그림자에 사용되었습니다. 나머지 색상은 따뜻한 중성 색조로 구성되어 있습니다. 흰색 표면, 은은한 차가운 회색 바탕, 미묘한 테두리, 그리고 거의 검정색에 가까운 텍스트가 사용되었습니다. 12px의 여백으로 밀도는 유지되지만, 메인 페이지와 카테고리 스트라이프는 64~80px의 넉넉한 세로 간격을 두어 마치 카탈로그를 보는 듯한 편안한 쇼핑 경험을 제공합니다.
최대 너비는 1200px이며, 반투명 #f2f4f5 캔버스 중앙에 배치되어 있습니다. 왼쪽에는 내비게이션 아이콘만 포함된 64px 너비의 사이드바가 고정되어 있습니다. 메인 요소는 전체 너비의 스트립 형태로, 중앙에 위치한 보라색 "쇼핑" 로고 위에 제품 카드가 배치되어 있고, 그 바로 아래에 알약 모양의 검색창이 있습니다. 카테고리 알약은 검색창 아래 중앙에 한 줄로 배열되어 있습니다. 콘텐츠 섹션(여성, 남성, 뷰티, 홈, 유아 및 아동)은 각각 지정된 스트립 형태로 제공되며, 각 스트립에는 제품 이미지가 포함된 4열 그리드 또는 메인 요소와 그리드가 포함된 2열 구성이 있습니다. 세로 간격은 메인 섹션 사이에 64~80px로 넉넉합니다. 푸터는 페이지 하단에 있는 어두운 스트립 형태로, 열 형태의 링크 그룹이 있습니다. 가로 제품 패널 오른쪽에 있는 캐러셀 화살표는 페이지네이션 없이 스크롤 가능한 콘텐츠를 나타냅니다.
사진은 시각적 요소의 핵심입니다. 흰색 배경에 전체 화면으로 배치된 제품 사진, 1:1 비율로 자른 사진, 그리고 따뜻한 흙색 계열(베이지, 테라코타, 세이지, 아이보리)의 라이프스타일 이미지가 사용됩니다. 제품 이미지는 고유한 색상을 가지고 있으며, 사용자 인터페이스는 무채색으로 유지되어 제품의 색상이 시각적 다양성을 제공합니다. 브랜드 로고는 개별 아이콘이 아닌 어둡거나 밝은 메인 이미지 위에 텍스트로 겹쳐 표시됩니다. 메인 레이아웃에서 제품 카드는 워드마크 위에 약간 겹치는 형태로 배치됩니다. 아이콘은 카테고리 아이콘을 제외하고는 미니멀하고 단색(검은색 윤곽선)이며, 카테고리 아이콘은 단일 브랜드 색상을 사용합니다. 제품 이미지에는 일러스트레이션, 3D 효과 또는 그라데이션이 사용되지 않습니다.
팔레트
상표
- Shop Violet
#5433eb— 전송 버튼, 점선으로 된 텍스트 표시, 그리고 브랜드 로고는 흰색 배경 위에서 동작과 개성을 강조하는 유일한 요소입니다. - Violet Wash
#c0b5f3— 보라색 전송 버튼 뒤에 반투명한 후광이 있어 색조 변화 없이 빛을 유지합니다.
중립적
- Canvas Mist
#f2f4f5— 페이지 배경 및 양각 카드 뒤쪽의 추가 표면 처리. - Pure White
#ffffff— 카드, 입력 필드, 플로팅 사인 및 알약 모양 버튼을 위한 주요 표면입니다. - Ink Black
#000000— 본문, 제목, 아이콘, 탐색 기호 및 제품 카드가 다크 모드로 표시됩니다. - Faint Border
#ebebeb— 카드에 있는 얇은 구분선, 입력 필드 윤곽선, 그리고 알약 모양의 버튼 프레임. - Muted Gray
#787574— 보조 텍스트, 탐색 레이블, 아이콘 윤곽선(비활성 상태일 때) - Cool Stone
#cccccc— 자리 표시자, 비활성화 상태 및 비활성 아이콘 배경
타이포그래피
11픽셀에서 16픽셀로 · 4단계
- GT Standard — 대사: Inter · 요점 400 · 본문과 제목 모두 모든 크기에서 기본 글꼴로 사용됩니다. GTStandard-MRegular(16px/-0.031em)는 본문, 버튼, 레이블의 기본 글꼴입니다. GTStandard-MSemibold(20px/-0.05em)는 여러 큰 제목에 사용되며, GTStandard-MMedium(11~12px)은 마이크로캡션에 사용됩니다. 각 글꼴 변형은 400의 시각적 두께로 표시되며, 글꼴 계층 구조는 굵은 대비보다는 미묘한 그라데이션과 조밀한 음의 자간을 통해 구현됩니다. 이는 Shop만의 특징적인 스타일로, 굵은 글꼴로 강렬하게 강조하기보다는 자간을 통해 텍스트의 형태를 잡아줍니다.
- Shopify Sans — 대사: Inter · 요점 400, 700 · 앱 로딩 배너 및 쿠키 동의 문구와 같은 시스템 수준 메시지에 사용됩니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 12px |
| 버튼 반경 | 9999px |
| 카드 반경 | 28px |
| 그림자 | 부드러운 그림자 |
| 구간 사이 | 64px |
| 페이지 너비 | 1200px |
AI가 Shop 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Cursor — 타오르는 숯불 불빛 아래 아늑한 양피지 작업실
- Slush — 파스텔톤 종이에 붙인 스티커로 만든 풍선 세상
- MindMarket — 크림색 종이에 인쇄된 아늑한 동화책은, 커다란 인터(Inter) 헤드라인과 오려낸 종이 캐릭터들이 햇살 가득한 부드러운 스티커 표면 위에 조화롭게 어우러진 친근한 편집 공간을 제공합니다.
- Airbnb — 산호색 책갈피 하나가 놓인 조용한 흰색 갤러리 벽
- Superr — 따뜻한 오후 햇살에 비친 학교 공책. 크림색 페이지, 뚜껑 없는 주황색 마커, 그리고 떼어낼 준비가 된 코팅된 이름 스티커 더미.
- Apple (España) — 부드러운 자연광이 비추는 박물관 전시실은 매혹적이고 가벼운 하얀 공간으로, 은은하게 색이 들어간 벽을 배경으로 각 전시품이 스포트라이트를 받아 밝게 빛나고 있다.
- Lamborghini — 쇼룸에서 조명 아래 검은색 차체로 서 있는 노란색 차 한 대
- Amplemarket — 색종이 조각이 흩뿌려진, 햇살이 쏟아지는 작업 공간
- Getharvest — 황금 시간대의 책상 – 따뜻한 크림색 캔버스, 캔버스에 걸린 하얀 엽서들, 그리고 선명한 오렌지색 불꽃 하나
- Agence Foudre — 잡지 표지는 립스틱을 연상시키는 부드러운 핑크색이다.
- Drive Capital — 따뜻한 종이에 인쇄된 레트로 로드 트립 포스터
- Apple (España) — 흰색 갤러리 디스플레이 케이스