Shopify
미드나잇 그린하우스 - 짙은 청록색 배경 위에 상표들이 활짝 피어나고, 민트색의 한 줄기 빛이 그 위를 환하게 비춥니다.
쇼피파이의 디자인 시스템은 상거래를 위한 심야 작업실과 같습니다. 짙은 청록색으로 물든 거의 검은색 캔버스, 넓고 자신감 넘치는 산세리프 서체, 그리고 인터랙티브한 순간을 활성화하는 생동감 넘치는 민트색 포인트가 조화를 이룹니다. 인터페이스는 마치 암실처럼 제품과 브랜드가 빛을 발하는 공간입니다. 사진과 매장 전경은 거의 검은색 배경에서 빛나고, 크롬 요소는 뒤로 물러납니다. 구성 요소는 기하학적이면서도 부드럽습니다. 얇은 테두리가 있는 12px 반경의 카드, 알약 모양의 버튼, 그리고 규모감을 은은하게 드러내는 330 굵기의 서체가 사용되었습니다. 링크, 태그, 그리고 포커스 상태에만 단 하나의 색상 포인트(#36f4a4)가 절제되어 사용되었으며, 기능적인 순간에만 색상을 활용하여 판매자의 이야기가 시각적 초점이 되도록 했습니다.
최대 너비는 약 1280px이며, 중앙에 정렬되어 있고, 전체 너비의 스플래시 블록은 사진 컨테이너를 넘어 확장됩니다. 페이지 레이아웃은 다음과 같이 번갈아 나타납니다. (1) 전체 너비의 어두운 스플래시 페이지에 헤드라인과 클릭 유도 버튼이 겹쳐 표시되고, (2) 최대 너비의 텍스트 및 이미지 블록이 2열 또는 3열 이미지 그리드로 구성된 편안한 느낌의 어두운 섹션이 표시되며, (3) 제품 카드, 배송비 계산기, 세계 지도와 같은 인터랙티브 쇼케이스 패널이 더 깊은 캔버스에 입체 카드 형태로 표시됩니다. 내비게이션은 로고, 3개의 내비게이션 요소, 보조 링크, 기본 클릭 유도 버튼으로 구성된 고정 상단 바이며, 모두 오른쪽으로 정렬됩니다. 세로 레이아웃은 섹션 사이에 80px 간격을 두고 부드러운 전환 효과를 적용했습니다. 어두운 섹션 사이에는 구분선이 없고, 표면 색조만 변경됩니다.
시각 디자인은 주로 소매업체에 초점을 맞추고 있습니다. 전체 크기의 제품 사진과 브랜드 행사 사진이 시각적 요소의 대부분을 차지하며, 종종 흰색 텍스트가 겹쳐진 큰 배경 이미지 형태로 사용됩니다. 이미지는 선명하게 잘리고, 대비가 강하며, 축제 분위기를 자아냅니다(나스닥 개장 벨 소리, 단체 인사, 손에 든 제품 클로즈업 등). 어두운 배경은 사진이 스포트라이트를 받고 있는 듯한 인상을 줍니다. 일러스트레이션은 최소화되었으며, 주요 설명은 내장된 제품 이미지와 매장 전경 스크린샷을 통해 전달됩니다. 아이콘은 단색이며, 선 굵기는 1.5~2픽셀이고, 일반적으로 흰색 또는 활성 상태의 경우 #36f4a4 색상입니다.
팔레트
상표
- Shopify Mint
#36f4a4— 활성화된 탐색 표시기, 포커스 링, 태그 강조 표시 및 링크에 마우스 오버 시 나타나는 강조 표시는 어두운 배경에서 상호 작용이 활성화된 느낌을 만들어내는 유일한 색상 요소입니다.
중립적
- Midnight Forest
#02090a— 페이지 캔버스, 헤더 배경 이미지, 섹션 배경 이미지 - Deep Lichen
#061a1c— 메인 카드 표면, 돌출형 패널, 콘텐츠 블록. - Shaded Fern
#072720— 내비게이션 패널, 추가 카드, 패널이 거의 눈에 띄지 않게 약간 올라간 형태입니다. - Spruce Border
#1e2c31— 카드 테두리, 구분선, 입력 필드 윤곽선을 얇게 만듭니다. - Abyss Indigo
#000a1e— 제품/시연용 추가 표면, 기능 설명 패널. - Pure White
#ffffff— 본문, 버튼 채우기, 제목, 로고.
타이포그래피
12픽셀에서 70픽셀로 · 8단계
- Neue Haas Grotesk — 대사: Inter · 요점 330, 400, 500, 550, 600 · 핵심적인 타이포그래피 시스템은 제목에 70~96px(330~400)의 굵기를 사용하여 강렬하기보다는 은은한 느낌을 주고, 본문에는 16~18px(400~500)의 굵기를, 내비게이션 및 사용자 인터페이스에는 14~16px(500~550)의 굵기를 사용하는 것입니다. 특히 큰 화면에서 330의 초경량 글꼴을 사용하는 것이 특징인데, 이는 굵은 글꼴보다는 절제된 표현을 통해 자신감을 전달합니다.
- Inter Variable — 대사: Inter · 요점 400, 420, 450, 550 · 내비게이션 인터페이스 요소, 작은 메모, 탭 컨트롤, 바닥글의 마이크로텍스트 등에 사용되는 보조 글꼴 유형입니다. 소문자 크기가 약간 더 크고 자간이 표준에 가까워 작은 크기에서도 가독성이 뛰어납니다. 또한 420 굵기의 글꼴이 일반 글꼴과 중간 크기 글꼴 사이의 간극을 메워주는 상황에 적합합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 평균 |
| 기본 단계 | 12px |
| 버튼 반경 | 9999px |
| 카드 반경 | 12px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80px |
| 페이지 너비 | 1280px |
AI가 Shopify 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Retool — 따뜻한 흑요석 작업장 - 정밀한 도구들이 놓인 작업대, 타오르는 불씨에 의해 밝혀진, 모든 것이 만들어지는 곳
- Elektron — 한밤중의 장비 제어판은 거의 검은색 캔버스처럼 보이며, 제품 사진은 돋보이지만 인터페이스는 거의 보이지 않습니다.
- REKKI — 사진 현상실의 비행 제어 패널
- OFFFICE : — 거대한 글꼴로 뒤덮인 누아르 갤러리
- Clyde — 쇼룸은 단 하나의 스포트라이트만으로 밝혀진 거의 암흑 같은 갤러리이며, 방 안의 유일한 색상은 따뜻한 그러데이션이 적용된 구형 조명뿐입니다.
- Channel Studio — 산호색 전등갓 하나가 있는 스튜디오 사진 현상소
- Electronic Materials Office — 숯으로 장식된 갤러리 안의 타오르는 불씨
- ORYZO AI — 암실에 관한 사진 에세이. 따뜻한 어둠 속에 홀로 떠 있는 물체, 크림색 글씨만이 유일한 장식이다.
- Factory — 한밤중의 "작전실" 단말기. "공장"은 삭막한 검은색 제어판으로, 손전등에 비친 전령처럼 하얀 카드 한 장이 놓인다. 방 안에 있는 유일한 물건은 바로 작업 그 자체이다.
- Hungry Tiger — 탄두르 벽에 강황처럼 선명한 그래피티가 그려져 있다. 금색과 녹슨 갈색이 조화를 이루는 색감에, 글씨 크기가 너무 커서 웹사이트 간판이라기보다는 향신료 시장 간판처럼 보인다.
- Bibliothèque — 스포트라이트를 받는 검은색 정육면체 모양의 전시실 – 드넓고 어두운 홀 한가운데 홀로 빛나는 접시 하나
- Apple (España) — 조명 장치가 있는 검은색 극장