Nike
흑백으로 표현된 스포츠 업적 갤러리 – 흰 벽, 예술 작품으로서의 제품, 배경에 녹아든 크롬 소재
Nike.com은 제품 중심의 흑백 갤러리처럼 구성되어 있습니다. 사용자 인터페이스는 거의 보이지 않아 모든 화면이 제품 사진으로 채워져 있습니다. 전체 인터페이스는 검정색, 흰색, 그리고 세 가지 회색 음영으로 이루어져 있으며, 강조 색상이나 장식적인 그라데이션, 따뜻한 느낌의 크롬 색상은 전혀 사용되지 않았습니다. 나이키 특유의 스타일은 갤러리 로고와 사진에만 드러나고 사용자 인터페이스 자체에는 나타나지 않습니다. 타이포그래피는 간결하고 실용적이며, 12~20px 크기의 맞춤 디자인된 Helvetica Now 폰트 패밀리와 76px 크기의 오버사이즈 Nike Futura ND 로고를 제목에 사용합니다. 구성 요소는 미니멀리즘을 추구합니다. 30px 반경의 알약 모양 버튼, 평면 제품 카드, 얇은 테두리, 그리고 거의 차이가 없는 높이 차이를 특징으로 합니다. 페이지는 순백색의 제품 화면과 강렬한 어두운 색상의 편집 섹션이 번갈아 나타나며, 장식보다는 대비를 통해 리듬감을 만들어냅니다.
이 페이지는 탄탄한 편집 리듬을 따릅니다. 눈길을 사로잡는 전체 너비의 어두운 헤더에는 단일 제품과 큰 제목이 표시되고, 그 뒤로 전체 너비의 2x2 카테고리 그리드, 3열로 배열된 가로 스크롤 방식의 제품 카드 그리드, 그리고 마지막으로 밀도 높은 다단 푸터가 이어집니다. 모든 콘텐츠 블록은 최대 컨테이너 너비 제한 없이 전체 뷰포트 너비를 차지하며, 최대 너비 제한은 내비게이션과 푸터 링크 그리드에만 적용됩니다. 섹션 간의 전환은 깔끔합니다. 검은색 헤더 → 흰색 카테고리 그리드 → 흰색 제품 그리드 → 흰색 푸터 순으로 이어지며, 얇은 회색 테두리가 유일한 시각적 경계 역할을 합니다. 내비게이션은 최소한의 요소만 담은 2단 바(상단에는 보조 링크, 중앙에는 주요 카테고리)로 구성되어 있으며, 고정, 배경 채우기, 그림자 효과는 없습니다. 제품 그리드에서는 콘텐츠 밀도가 낮고(카드 간격이 좁음), 헤더에서는 여유롭게(전체 너비 뷰포트) 콘텐츠를 배치했습니다.
사진은 브랜드의 정체성을 규정하는 핵심적인 시각적 요소입니다. 이 시스템은 고품질의 전체 화면 제품 사진을 활용합니다. 운동화는 어두운 배경이나 그라데이션 배경에서 개별적으로 촬영되어 프레임을 가득 채우도록 크롭되며, 라이프스타일 이미지는 포함되지 않습니다. 라이프스타일 이미지는 카테고리 내에 배치되어 움직이는 운동선수의 발과 다리를 보여줍니다. 고대비의 채도가 높은 색상 구성이 사용됩니다. 예를 들어 검은색 배경에 빨간색 운동화, 흰색 밑창의 네온 색상 포인트, 소재를 강조하는 따뜻한 조명과 차가운 조명 등이 있습니다. 일러스트레이션, 추상적인 그래픽 또는 3D 렌더링은 사용하지 않습니다. 이미지는 항상 깔끔한 가장자리(사진 컨테이너의 모서리가 둥글지 않음)를 가지며, 각 블록 내 공간을 완전히 차지하고, 최소한의 텍스트 오버레이만 함께 제공됩니다. 아이콘은 순전히 기능적인 용도로 사용됩니다. 검색, 위시리스트, 장바구니, 계정 아이콘은 옵시디언 또는 스틸 색상의 윤곽선으로 표시됩니다.
팔레트
중립적
- Obsidian
#111111— 어두운 색상은 중립적인 텍스트와 아이콘을 보완하고 강한 대비를 만들어냅니다. 하지만 클릭 유도 버튼(CTA)의 주요 색상으로는 사용하지 않는 것이 좋습니다. - Paper White
#ffffff— 페이지 배경, 카드 표면, 어두운 배경의 버튼 텍스트, 아이콘 윤곽선—제품 그리드 및 카테고리 섹션의 기본 캔버스입니다. - Concrete Gray
#e5e5e5— 테두리, 구분선, 격자 영역을 나누는 가는 선, 입력 필드의 미묘한 윤곽선. - Soft Mist
#f5f5f5— 보조 화면, 탐색 메뉴의 검색 필드 채우기, 태그 배경 등에 은은한 배경색을 적용합니다. - Steel
#707072— 보조 텍스트, 흐릿한 도움말 텍스트, 축소된 아이콘 윤곽선, 탐색 경로 레이블, 바닥글 링크 구분선. - Faint Gray
#9e9ea0— 아이콘 윤곽선, 작은 UI 요소 및 최소한의 강조 표시가 있는 테두리는 비활성화됩니다.
타이포그래피
12픽셀에서 76픽셀로 · 6단계
- Helvetica Now Text Medium — 대사: Inter · 요점 500 · Helvetica Now Text Medium 글꼴 - 스크랩된 데이터에서 발견되었지만 AI가 설명하지 못했습니다.
- Helvetica Now Text — 대사: Inter or Helvetica Neue · 요점 400, 500 · 사용자 인터페이스의 주요 텍스트 - 탐색 링크, 버튼 레이블, 카드 제목, 제품명, 바닥글 목록, 모든 본문 텍스트.
- Helvetica Now Display Medium — 대사: Inter Medium or Helvetica Neue Medium · 요점 500 · 섹션 제목, 카드 카테고리 레이블, 중간 크기 제목 - 중간 글꼴(20-24px)은 크기가 크지 않은 디자인 요소인 나이키 제목의 특징입니다. 절대 굵게 표시하지 않고 항상 간결하게 표현합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8px |
| 버튼 반경 | 30px |
| 카드 반경 | 0px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 48px |
| 페이지 너비 | 1440px |
AI가 Nike 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Airbnb — 산호색 책갈피 하나가 놓인 조용한 흰색 갤러리 벽
- Apple (España) — 흰색 갤러리 디스플레이 케이스
- Silencio — 하얀 방 안에는 떠다니는 유물들이 놓여 있다. 따뜻한 색감의 종이로 만들어진 전시 공간은 각각의 요소들이 음영 배경 위에 자리 잡고 있으며, 이러한 침묵은 의도적인 디자인 요소이다.
- Oakâme — 따스한 돌로 지어진 햇살 가득한 프로방스풍 작업장
- Arc — 한밤중의 물 위로 펼쳐진 산업적인 흰색 갤러리
- Rivian — 갤러리 콘크리트 벽 위에 세워진 전기 모놀리스. 리비안은 각각의 차량을 광활한 흰색 공간을 배경으로 한 조각품처럼 전시하며, 건축적 요소처럼 보이는 거대한 타이포그래피와 무광택 표면에 비치는 햇빛처럼 단조로운 분위기를 깨뜨리는 따뜻한 노란색 한 줄을 더했다.
- Analogue — 검은색 갤러리 진열장 – 상품들이 허공에 떠 있는 듯하다
- ddna — 가공하지 않은 린넨 소재의 따뜻한 박물관 전시 케이스
- Zellerfeld — 흰 대리석으로 만들어진 조각가의 작업실—받침대의 견고한 표면, 코발트빛 한 줄기, 바닥에서 천장까지 이어지는 소문자들의 속삭임
- UY Studio — 수도원의 석조 복도는 콘크리트 벽으로 둘러싸인 조용한 공간으로, 흰색 받침대 위에 향수병들이 놓여 있고, 400와트 램프 하나와 따뜻한 회색 전구 네 개가 그 공간을 밝히고 있다.
- Basic.Space — 흰색 대리석으로 꾸며진 큐레이터 갤러리
- COS — 흰 벽으로 꾸며진 트렌디한 갤러리