Allbirds
흰색 린넨 위에 천연 소재
올버즈는 차분하고 자연스러운 자신감을 바탕으로 디자인되었습니다. 거의 무채색에 가까운 배경에 따뜻한 모래색(#e0dacf)과 제품 사진에서 직접 가져온 은은한 흙색 계열 색상이 조화를 이루고 있습니다. 사용자 인터페이스는 제품 경험을 방해하지 않도록 설계되었는데, 흰색 바탕, 얇은 테두리, 대문자로 표시된 내비게이션, 그리고 웹 요소라기보다는 실제 버튼처럼 느껴지는 알약 모양의 컨트롤이 특징입니다. 헤드라인과 컬렉션 이름처럼 편집상의 주의가 필요한 중요한 부분에는 맞춤형 세리프 폰트인 Self Modern을 사용했고, 글자, 본문, 버튼에는 Geograph 폰트를 세 가지 굵기로 균형 있게 적용했습니다. 카테고리 카드는 색상 시스템을 활용하여 각 카드의 배경색을 해당 제품의 색상으로 지정함으로써 마치 살아있는 팬톤 팔레트처럼 시각적인 효과를 극대화했습니다.
최대 너비는 약 1200px이며, 중앙에 배치되고 측면 여백이 넉넉합니다. 메인 요소는 따뜻한 모래색 배경 위에 전체 너비의 에디터 스트립이 있고, 그 중앙에서 제품 캐러셀이 방사형으로 펼쳐지는 형태입니다. 카테고리 탐색 메뉴는 4개의 동일한 색상 카드가 4열로 배열된 그리드 형태로, 각 카드에는 중앙에 배치된 신발 모델 이미지가 하나씩 있습니다. 하단 레이아웃은 전체 너비의 분할 패널(왼쪽에는 라이프스타일 사진, 오른쪽에는 제품 샘플)과 작고 밑줄이 그어진 섹션 제목 아래 중앙에 배치된 제품 캐러셀이 번갈아 나타납니다. 전체적인 레이아웃 흐름은 전체 너비 에디터 패널 → 4열 그리드 → 중앙 제품 캐러셀 → 2열 분할 → 중앙 제품 캐러셀입니다. 섹션 간 간격은 40~56px로, 부드러우면서도 과하지 않은 전환을 만들어냅니다. 탐색 메뉴는 중앙에 주요 링크가 배치된 미니멀한 고정형 상단 바입니다.
사진은 전체 시각 시스템의 핵심입니다. 모든 제품 사진은 신발의 포인트 색상과 일치하거나 보완하는 단색 배경을 사용하여 약간 비스듬한 각도에서 클로즈업으로 촬영하여, 각 사진을 효과적인 색상 연구로 활용합니다. 라이프스타일 사진은 따뜻하고 햇살 가득한 색조로 자연 환경(아가베 밭, 나무 데크, 거친 지형)에서 촬영하며, 전체적인 색상 팔레트에 맞춰 은은하게 톤을 조절합니다. 일러스트레이션, 3D 렌더링, 추상적인 그래픽은 전혀 사용하지 않습니다. 팬톤과의 협업을 통해 실제 색상 팔레트를 그래픽 요소로 활용합니다. 아이콘은 미니멀하고 단색으로 디자인되었습니다(내비게이션 및 보조 위치에 윤곽선 아이콘 사용).
팔레트
중립적
- Canvas White
#ffffff— 페이지 배경 이미지, 카드 표면, 제품 카드 배경 이미지. - Charcoal
#212121— 중립적인 색상은 보조 UI 요소, 구분선 및 차분한 레이블에 사용할 수 있습니다. 하지만 클릭 유도 버튼의 기본 색상으로는 사용해서는 안 됩니다. - True Black
#000000— 제목, 아이콘, 고대비 프레임, 탐색 텍스트. - Warm Sand
#e0dacf— 주요 부분 배경, 추가 표면 음영, 대형 편집 패널. - Olive Char
#222519— 중립적인 색상은 보조 UI 요소, 구분선 및 차분한 레이블에 사용할 수 있습니다. 하지만 클릭 유도 버튼의 기본 색상으로는 사용해서는 안 됩니다. - Iron Gray
#525252— 보조 텍스트, 부가 텍스트, 눈에 띄지 않는 프레임.
타이포그래피
12픽셀에서 40픽셀로 · 6단계
- Self Modern — 대사: Playfair Display · 요점 400 · 제목과 사설은 최소한으로 사용하여 핵심 문구와 컬렉션 제목을 강조합니다. 세리프체와 이탤릭체는 산세리프체의 단조로움을 깨고 "이것이 이야기의 핵심이다"라는 메시지를 전달합니다.
- Geograph — 대사: Inter · 요점 400, 500, 700 · 사용자 인터페이스의 기본 글꼴은 본문, 탐색 레이블, 버튼, 제품 제목, 바닥글, 입력 필드 및 아이콘에 사용됩니다. 강조된 제목에는 500, 제품명에는 700을 사용합니다. 탐색 레이블과 카테고리의 대문자에는 넓은 자간(0.025em~0.10em)을 적용하여 일관된 브랜드 스타일을 유지합니다.
- HurmeGeometricSans3 — 대사: Inter · 요점 400 · 버튼의 백업 또는 전용 라벨로 거의 사용되지 않습니다. 지오그래프에서는 이 시스템을 매일 사용합니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 8-16px |
| 버튼 반경 | 9999px (pill) |
| 카드 반경 | 16px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 40-56px |
| 페이지 너비 | 1200px |
AI가 Allbirds 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Lightship — 탁 트인 도로를 담은 영화 같은 디오라마. 따뜻한 크림색 갤러리 벽에는 촘촘하게 걸린 커다란 풍경 사진들이 장식되어 있고, 액자에는 가늘고 희미하게 보이는 검은색 글씨가 새겨져 있으며, 밝은 오렌지색 포인트 하나가 마치 들판의 모닥불처럼 흑백의 풍경을 깨뜨리고 있다.
- Faire ES — 따뜻한 크림 도매 카탈로그
- Adanola — 흰 종이에 인쇄된 에디토리얼 룩북. 타이포그래피와 사진이 깨끗한 흰 표면 위에서 생동감 넘치게 어우러지는 패션 화보로, 검정 잉크로 인쇄된 타이포그래피와 은은한 시그니처 산세리프체(Favorit)가 브랜드의 전반적인 스타일을 반영합니다.
- Oura Ring — 은은한 햇살이 가득한 아늑한 오트밀 만들기 작업실
- Stykka — 하얀 조명 아래 스칸디나비아풍 작업실 – 사진만이 유일한 목소리로 들리는 조용하고 수공예적인 쇼룸
- DJI — 항공우주 산업을 위한 검은색 캔버스에 강렬한 파란색 하이라이트 하나만 더한 디자인
- Altitude Beverages — 흑백 잡지 지면. 사진만 남기고 모든 색상을 제거한 패션 잡지 지면을 상상해 보세요. 텍스트와 여백만으로 모든 이야기가 전달됩니다.
- AATHER — 펼친 손바닥과 하나의 불꽃 - 고요함 속에 담긴 조용한 사치
- Cowboy — 새하얀 도자기로 장식된 벨기에 자전거 갤러리. 무광 표면, 편집 자료에 사용된 큰 글꼴, 그리고 장식이 거의 없는 이 쇼룸은 시선을 자전거와 그 안에 담긴 물건들로 집중시킨다.
- Refero — 흰색 대리석 바탕의 편집 레이아웃 - 타이포그래퍼가 제작한 제품 페이지로, 세리프체로 된 헤드라인이 브랜드의 상징 역할을 하고 나머지 요소들은 눈에 거슬리지 않도록 디자인되었습니다.
- Face Formula — 스칸디나비아풍의 에디토리얼 인물 사진. 차분하고 잡지 스타일의 이 화보는 모델의 시선과 간결한 세리프체로 쓰인 헤드라인이 시원하고 안개 낀 배경을 배경으로 강렬한 인상을 남긴다.
- Shupatto — 흰색 대리석으로 된 박물관 진열장