INO
고요한 박물관 진열장 – 각각의 전시품은 마치 유리 뒤에 놓인 하나의 물체처럼 하얀 공간에 떠 있고, 거의 검은색에 가까운, 거의 들리지 않는 글꼴로 테두리가 둘러싸고 있다.
INO는 거의 흑백에 가까운 주얼리 갤러리처럼 기능합니다. 깨끗한 흰색 캔버스에 따뜻하고 거의 검은색에 가까운 단일 잉크가 사용되었고, 색상은 거의 전무합니다. 시각적 시스템은 각각의 반지를 박물관 소장품처럼 다룹니다. 마치 임상적인 제품 사진이 넓은 네거티브 공간에 떠 있는 듯하며, 글꼴 크기나 색상이 아닌 위치, 자간, 그리고 여백의 양을 통해 위계가 구성됩니다. 내비게이션은 페이지 하단에 레이블(채워지거나 비어 있음)이 있는 네 개의 점으로 구성되어 있으며, 이는 기존 전자상거래 상단 바와는 의도적으로 반대되는 배치입니다. 브랜드 마크 자체는 제품의 형태를 반영하는 동심원 모양의 윤곽선으로, 로고라기보다는 타이포그래피 조각품에 가깝습니다.
콘텐츠 너비에 최대 제한이 없는 전체 너비 캔버스입니다. 메인 화면은 페이지 전체 너비를 차지하며, 사진과 그래픽이 50/50으로 균등하게 배치됩니다. 제품 그리드는 뷰포트 가장자리에서 충분한 가로 여백을 두고 3열 행으로 표시됩니다. 하단 내비게이션은 페이지 바닥글에 고정되어 중앙에 위치합니다. 섹션 구분은 전체 화면 편집 사진이나 순수한 흰색 공간을 사용하며, 색상 막대, 구분선 또는 그라데이션은 사용하지 않습니다. 세로 비율은 주요 섹션 간에 80/1/1로 자유롭게 배치되어 페이지가 콘텐츠로 가득 차기보다는 숨 쉴 공간을 제공합니다. 사이드바, 메가 메뉴, 상단 헤더 바는 없으며, "INO" 로고는 메인 화면의 왼쪽 상단에만 위치합니다.
두 가지 이미지 표시 모드가 공존합니다. 하나는 평평하고 밝은 회색의 매끄러운 배경에 임상적인 제품 사진을 보여주는 모드입니다(각 반지는 손이나 스타일리시한 소품, 표면 그림자 없이 중앙에 촬영되어 제품 자체가 주인공입니다). 다른 하나는 스토리텔링 형식의 에디토리얼 이미지(잔디가 깔린 상자 안의 반지, 체인을 든 손 등)로, 채도가 낮은 전체 화면 에디토리얼 조각으로 표시됩니다. 제품 이미지는 제품 카드 역할을 하고, 에디토리얼 이미지는 브랜드의 분위기를 전달합니다. 두 이미지 모두 흑백 또는 거의 흑백에 가깝습니다. 메인 이미지의 잔디만이 유일하게 녹색을 띠고 있으며, 그마저도 숲 색조로 은은하게 처리되었습니다. 인터페이스에는 아이콘이 사용되지 않고, 동심원 모양의 심볼이 모든 아이콘을 대체합니다.
팔레트
중립적
- Obsidian Ink
#212123— 색상 구성표가 눈에 거슬리지 않도록 중립적인 형태 상태, 아이콘 텍스트 및 은은한 UI 피드백을 사용합니다. - Bone
#ffffff— 캔버스 페이지, 판지 표면, 어두운 배경에 반전된 텍스트. 가장 눈에 띄는 표면이며, 웹사이트의 거의 모든 콘텐츠가 여기에 있습니다. - Carbon
#000000— 아이콘 채우기, 장식적인 그래픽 윤곽선, 그리고 내비게이션 포인트 표시기의 활성 상태 채우기에 사용됩니다. "본" 색상과의 명암 대비를 극대화하기 위해 최소한으로 사용됩니다. - Ash
#999999— 중간 정도의 대비를 가진 테두리, 제어 윤곽선 및 구조적 구분선. - Pebble
#a6a6a7— 보조 텍스트는 은은하게 처리하고, 본문과 보조 메타데이터 사이에는 얇은 구분선을 사용합니다. 가격표와 배경에 묻혀야 하는 관련 텍스트에는 가장 밝은 회색을 사용합니다.
타이포그래피
11픽셀에서 18픽셀로 · 4단계
- Sequel100Wide — 대사: Jost (400 · 요점 400 · 내비게이션, 본문, 제목, 가격표, 캡션 등 모든 맥락에서 400포인트 두께로만 사용되는 유일한 기업용 서체입니다. 넉넉한 자간과 간격을 가진 기하학적 심볼은 기업 전체의 스타일을 반영합니다. 굵은 서체가 없는 것은 의도적인 것으로, 서체 두께를 변화시키는 대신 대문자 사용, 자간, 위치 조정을 통해 계층 구조를 구현합니다.
- Arial — 대사: system-ui · 요점 400 · 기존 환경에서 버튼을 렌더링하기 위한 시스템 전반의 대체 기능입니다. 브랜드 디자인의 일부는 아니며, Sequel100Wide가 로드되지 않을 경우에만 나타납니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 23px |
| 버튼 반경 | 50px |
| 카드 반경 | 8px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80-120px |
AI가 INO 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Airbnb — 산호색 책갈피 하나가 놓인 조용한 흰색 갤러리 벽
- Peak Design — 갤러리 벽, 부분적으로 조명됨
- 099 SUPPLY — 흑백 오브제로 가득 찬 갤러리 벽
- Apple (España) — 흰색 갤러리 디스플레이 케이스
- Apple (España) — 아침 안개 속 갤러리 창가
- Custo — 건메탈 색상의 갤러리에 거대한 글꼴이 눈에 띈다. 은은한 회록색 톤의 쇼룸에는 어두운 색상의 오브제 하나와 57px 크기의 글꼴이 그 자체로 모든 것을 말해준다.
- Silencio — 하얀 방 안에는 떠다니는 유물들이 놓여 있다. 따뜻한 색감의 종이로 만들어진 전시 공간은 각각의 요소들이 음영 배경 위에 자리 잡고 있으며, 이러한 침묵은 의도적인 디자인 요소이다.
- Oakâme — 따스한 돌로 지어진 햇살 가득한 프로방스풍 작업장
- Nike — 흑백으로 표현된 스포츠 업적 갤러리 – 흰 벽, 예술 작품으로서의 제품, 배경에 녹아든 크롬 소재
- Sociotype — 흰 종이 위에 놓인 전형적인 박물관 표본
- Arc — 한밤중의 물 위로 펼쳐진 산업적인 흰색 갤러리
- Rivian — 갤러리 콘크리트 벽 위에 세워진 전기 모놀리스. 리비안은 각각의 차량을 광활한 흰색 공간을 배경으로 한 조각품처럼 전시하며, 건축적 요소처럼 보이는 거대한 타이포그래피와 무광택 표면에 비치는 햇빛처럼 단조로운 분위기를 깨뜨리는 따뜻한 노란색 한 줄을 더했다.