Airbnb
산호색 책갈피 하나가 놓인 조용한 흰색 갤러리 벽
Airbnb는 사진이 중심이 되는 "화이트 캔버스" 스타일을 지향합니다. 거의 모든 화면은 차분한 흑백 프레임으로 구성되어 숙소 사진을 전체 화면으로 보여주며, 풍부한 산호색(Rausch) 포인트 컬러만 사용하여 활동 여부를 나타냅니다. 본문, 인터페이스, 섹션 제목에는 기하학적 산세리프체(Airbnb Cereal VF)를 사용하며, 대부분 작고 가독성 좋은 크기를 적용했습니다(22-22). 줄 간격을 좁게 설정하거나 넓게 설정하여 텍스트가 빽빽한 카드도 읽기 쉽게 만들었습니다. 인터페이스는 평면적이고 프레임이 없으며 모서리가 둥글게 처리되었습니다. 카드와 컨트롤에는 12-3 반경의 곡률을, 버튼은 둥근 알약 모양을 사용했으며, 검색창과 같은 주요 요소에만 부드러운 레이어드 그림자를 적용했습니다. 카드, 목록 항목, 링크 등 나머지 모든 요소는 크롬 액센트 대신 여백과 가는 선을 사용하여 표현했습니다.
최대 너비 제한이 없는 전체 너비 레이아웃으로, 콘텐츠는 데스크톱 환경에서 각 측면에 약 40px의 가로 여백이 있는 표시 영역 내에서 가장자리까지 확장됩니다. 히어로 영역은 이미지나 제목 없이 중립적인 흰색 캔버스 중앙에 배치된 플로팅 검색 캡슐입니다. 검색창 자체가 히어로 영역입니다. 검색창 아래로는 세로로 쌓이고 가로로 스크롤되는 섹션(추천 주택, 우수 호텔, 기타 도시, 다음 달 예약 가능)이 네 줄로 표시됩니다. 각 섹션은 약 320px 높이이며 48px의 세로 간격으로 구분됩니다. 각 섹션은 가로 오버플로 및 화살표 탐색 기능을 갖춘 7칸 그리드를 사용합니다. 푸터는 #f7f7f7 배경에 3열 링크 그리드로 구성되어 있으며, 그 아래에 저작권 정보, 언어/통화 옵션, 소셜 미디어 아이콘이 있는 하단 바가 있습니다. 탐색 메뉴는 중앙에 탭 탐색이 있고 컨트롤이 오른쪽으로 정렬된 고정 상단 바입니다.
사진이 시각 시스템의 중심을 이루며, 부동산 매물 사진이 전체 화면으로 주요 콘텐츠 유형 역할을 합니다. 모든 사진은 실제 주택과 호텔의 따뜻하고 밝은 조명 아래 실내외를 촬영한 것으로, 자연스러운 색상 보정(과도한 필터나 듀오톤 사용 없음)을 거쳤습니다. 매물 카드 이미지는 1:1 비율로 깔끔하게 잘라내어 카드 가장자리까지 꽉 채우도록 구성했습니다. 인터페이스 전체의 아이콘은 단색 윤곽선(선 굵기 약 16-16)으로 이루어져 있으며, 탐색 카테고리와 UI 컨트롤에 최소한으로 사용되었습니다. 로고(Rausch)만이 유일하게 다채로운 색상을 사용한 그래픽 요소입니다. 일러스트레이션, 3D 렌더링, 추상적인 그래픽은 전혀 사용되지 않았으며, 시각적 언어는 순수한 사진과 부드러운 흰색 배경 위에 미니멀한 단색 아이콘으로 구성되어 있습니다.
팔레트
상표
- Rausch
#ff385c— 빨간색은 아이콘, 표지판 및 작은 그래픽 요소에 장식적인 포인트 색상으로 사용됩니다. 행동 유도 문구의 주요 색상으로 사용해서는 안 됩니다. - Rausch 600
#e00b41— 라우쉬 페인트의 압축된 어두운 버전으로, 호버링/액티브 표면의 브랜드 포인트로 사용됩니다.
중립적
- Hof
#222222— 본문, 주요 텍스트, 제목, 아이콘 윤곽선 및 반전된 배경은 검정색에 가까운 중립적인 색상으로, 전체 무채색 시스템의 기본이 됩니다. - Foggy
#6a6a6a— 보조 텍스트, 흐릿한 캡션, 보조 텍스트, 아이콘 채우기 비활성화, 카드 제목 아래에 눈에 띄지 않는 메타데이터 표시. - Grey 500
#c1c1c1— 상태를 강조하지 않아야 할 경우 텍스트는 비활성화되고, 입력 필드의 자리 표시자 텍스트가 표시되며, 아이콘 윤곽선은 흐릿하게 처리됩니다. - Bebe
#ebebeb— 얇은 테두리, 밑줄이 그어진 입력 필드, 목록 줄 사이의 구분선, 그리고 미묘한 구분선. - Deco
#dddddd— 비활성화된 컨테이너, 플레이스홀더 및 비활성화된 카드 상태에 사용되는 카드 배경 이미지입니다. - Faint
#f7f7f7— 페이지 캔버스의 배경 이미지, 바닥글 표면, 그리고 인터랙티브 요소의 마우스 오버 상태는 부드럽고 크리미한 색조를 사용하여 순백색의 카드들과 차별화를 꾀했습니다.
타이포그래피
11픽셀에서 28픽셀로 · 5단계
- Airbnb Cereal VF — 대사: Circular · 요점 400, 500, 600, 700 · Airbnb를 위해 디자인된 맞춤형 기하학적 산세리프 폰트입니다. 본문 텍스트는 14px/400, UI 레이블은 16px/500, 섹션 제목은 20px/600, 22px/500(자간 -0.02em), 페이지 제목은 28px/700에 배치됩니다. 음수 자간은 화면 크기가 커질수록 감소하는데, 이는 큰 화면에서 기하학적 산세리프 폰트의 특징입니다. "솔트(salt)" 대체 글리프 기능을 사용할 수 있습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 12px |
| 버튼 반경 | 9999px |
| 카드 반경 | 12px |
| 그림자 | 부드러운 그림자 |
| 구간 사이 | 48px |
| 페이지 너비 | 1440px |
AI가 Airbnb 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Apple (España) — 흰색 갤러리 디스플레이 케이스
- Silencio — 하얀 방 안에는 떠다니는 유물들이 놓여 있다. 따뜻한 색감의 종이로 만들어진 전시 공간은 각각의 요소들이 음영 배경 위에 자리 잡고 있으며, 이러한 침묵은 의도적인 디자인 요소이다.
- Oakâme — 따스한 돌로 지어진 햇살 가득한 프로방스풍 작업장
- Nike — 흑백으로 표현된 스포츠 업적 갤러리 – 흰 벽, 예술 작품으로서의 제품, 배경에 녹아든 크롬 소재
- Arc — 한밤중의 물 위로 펼쳐진 산업적인 흰색 갤러리
- Rivian — 갤러리 콘크리트 벽 위에 세워진 전기 모놀리스. 리비안은 각각의 차량을 광활한 흰색 공간을 배경으로 한 조각품처럼 전시하며, 건축적 요소처럼 보이는 거대한 타이포그래피와 무광택 표면에 비치는 햇빛처럼 단조로운 분위기를 깨뜨리는 따뜻한 노란색 한 줄을 더했다.
- Analogue — 검은색 갤러리 진열장 – 상품들이 허공에 떠 있는 듯하다
- ddna — 가공하지 않은 린넨 소재의 따뜻한 박물관 전시 케이스
- Zellerfeld — 흰 대리석으로 만들어진 조각가의 작업실—받침대의 견고한 표면, 코발트빛 한 줄기, 바닥에서 천장까지 이어지는 소문자들의 속삭임
- UY Studio — 수도원의 석조 복도는 콘크리트 벽으로 둘러싸인 조용한 공간으로, 흰색 받침대 위에 향수병들이 놓여 있고, 400와트 램프 하나와 따뜻한 회색 전구 네 개가 그 공간을 밝히고 있다.
- Basic.Space — 흰색 대리석으로 꾸며진 큐레이터 갤러리
- COS — 흰 벽으로 꾸며진 트렌디한 갤러리