Airbnb에서 영감을 받은 디자인 시스템

Category: 이커머스 및 리테일 여행 마켓플레이스. 따뜻한 코럴 액센트, 사진 중심, 둥근 UI.

1. 비주얼 테마와 분위기

Airbnb의 2026년 디자인은 우연히 앱이 된 여행 잡지처럼 느껴진다——순수한 흰 캔버스는 전면 사진에 자리를 내주고, 인터페이스 자체는 뒤로 물러나 숙소 사진이 숨 쉴 수 있게 한다. 트레이드마크인 Rausch 코럴 핑크(#ff385c)는 절제되어 있지만 분명하게 쓰인다: 검색 CTA, 활성 탭 인디케이터, 주요 액션 버튼, 그리고 가끔 가격이나 위시리스트 하트에 포인트로 사용된다. 나머지는 철저한 그레이스케일로, #222222가 거의 모든 텍스트를 담당한다.

이 시스템이 한눈에 Airbnb임을 알아볼 수 있는 이유는 콘텐츠에 대한 엄청난 신뢰 때문이다. 숙소 사진은 히어로 크기로 표시되며, 4:3 비율에 가장자리까지 둥근 처리를 한다. 카테고리 전환은 세 탭 피커(홈 / 체험 / 서비스)를 통해 이루어지며, 3D 렌더링 일러스트 아이콘(경사 지붕 집, 열기구, 서비스 벨)이 함께한다——물리적이고 촉각적이며 거의 장난감 같은 느낌——Airbnb Cereal VF 레이블과 짝을 이룬다. 3D 렌더와 순수 타이포그래픽 UI가 어색함 없이 공존하는 보기 드문 소비자 제품이다.

가장 새로운 화면은 체험 프로덕트 라인——같은 크롬이지만 카드 밀도가 더 높고 사진이 더 풍부하며, 중앙 앵커 예약 패널에 스티키 우측 레일 가격이 붙는다. 숙소와 체험 모두 세부 페이지는 엄격한 템플릿을 따른다: 전면 히어로 이미지 그리드 → 겹쳐지는 둥근 예약 카드(스크롤 시 고정) → 편의시설 → 리뷰(게스트 즐겨찾기 어워드는 큰 중앙 4.81 평점과 월계관 lockup으로 표시) → 지도 → 호스트 프로필 → 안내사항. 방을 예약하든 요트 투어를 예약하든 리듬은 일정하다.

주요 특징:

• Rausch 코럴 핑크(#ff385c)를 단일 액센트 브랜드 컬러로, 주요 CTA와 검색 버튼에만 사용
• 4:3 / 16:9 전면 사진과 부드러운 코너 라운딩(14–20px)을 주요 비주얼 어휘로 사용
• 3D 렌더링 카테고리 아이콘과 타이포그래픽 탭을 페어링——시스템에서 일러스트가 허용되는 유일한 공간
• 원형 50% 아이콘 버튼(뒤로 화살표, 공유, 즐겨찾기, 캐러셀 화살표)이 인터페이스 전반에 배치
• Airbnb Cereal VF가 8px 법적 각주부터 28px 섹션 제목까지 모든 레이블을 담당——단일 패밀리 시스템
• 프로덕트 티어 컬러 코딩: Airbnb Plus(마젠타 #92174d), Airbnb Luxe(딥 퍼플 #460479), Airbnb(Rausch 코럴)
• 게스트 즐겨찾기 어워드 lockup——두 월계관 사이에 중앙 정렬된 거대한 평점 숫자, 시스템에서 가장 알아볼 수 있는 순간 중 하나
• 스티키 예약 패널, 가격 → 날짜 → 게스트 스택으로 데스크톱 우측 레일에 고정되며 모바일에서는 하단 고정 “예약” 바로 변환
• 모바일 하단 고정 네비게이션(탐색 / 위시리스트 / 로그인), 활성 상태는 Rausch 틴트

2. 컬러 팔레트 및 역할

프라이머리

• Rausch(#ff385c): 브랜드의 트레이드마크 코럴 핑크. CSS 변수 --palette-bg-primary-core. 사용처: 주요 “예약” 버튼, 검색 제출 버튼, 활성 탭 밑줄, 위시리스트 하트 채우기, 가격 강조. 모든 페이지에서 가장 높은 시인성을 가진 단일 컬러.

세컨더리 및 액센트

• 딥 Rausch(#e00b41): 더 채도가 높은 변형. CSS 변수 --palette-bg-tertiary-core. 누름/활성 버튼 상태와 그라디언트 끝점에 사용.
• Plus 마젠타(#92174d): CSS 변수 --palette-bg-primary-plus. Airbnb Plus 프로덕트 티어의 브랜드 컬러——고급 큐레이팅 숙소 오퍼링.
• Luxe 퍼플(#460479): CSS 변수 --palette-bg-primary-luxe. Airbnb Luxe 프로덕트 티어의 브랜드 컬러——빌라/에스테이트 수준 렌탈.
• 인포 블루(#428bff): CSS 변수 --palette-text-legal. 법적/정보 링크(약관, 개인정보, 안내)에 사용——시스템에서 유일한 모노크롬이 아닌 링크 컬러.

서피스 및 배경

• 캔버스 화이트(#ffffff): 기본 페이지 배경. 모든 카드, 컨테이너, 세부 페이지가 여기서 시작된다.
• 소프트 클라우드(#f7f7f7): 푸터 배경, 지도 뷰 래퍼, 그리고 프라이머리 화이트에서 한 단계 물러나고 싶은 “기타” 섹션에 쓰이는 미묘한 서브서피스 틴트.
• 헤어라인 그레이(#dddddd): 어디에나 있는 1px 테두리 컬러——카드, 편의시설 행, 리뷰 패널, 푸터 컬럼을 분리한다. 레이아웃 시스템의 일꾼.

뉴트럴 및 텍스트

• 잉크 블랙(#222222): CSS 변수 --palette-text-primary. 시스템의 거의 검정. 모든 제목, 본문 단락, 내비 레이블, 가격. 페이지의 모든 텍스트 중 약 90%에 사용.
• 차콜(#3f3f3f): CSS 변수 --palette-text-focused. 포커스 상태 입력 텍스트와 한 단계 아래 강조 카피에 사용.
• 애시 그레이(#6a6a6a): CSS 변수 --palette-bg-tertiary-hover. 세컨더리 레이블, 도시명 아래 “코티지 렌탈” 스타일의 서브타이틀 카피, 차분한 푸터 링크.
• 뮤트 그레이(#929292): CSS 변수 --palette-text-link-disabled. 비활성화 버튼과 낮은 우선순위 메타데이터.
• 스톤 그레이(#c1c1c1): 3차 구분선, 아이콘 스트로크, 플레이스홀더 아바타.

시맨틱 및 액센트

• 에러 레드(#c13515): CSS 변수 --palette-text-primary-error. 폼 유효성 검사 오류, 파괴적 액션 경고.
• 딥 에러(#b32505): CSS 변수 --palette-text-secondary-error-hover. 에러 상태의 누름/활성 변형.
• 반투명 블랙(rgba(0, 0, 0, 0.24)): CSS 변수 --palette-text-material-disabled. 비활성화된 Material 스타일 레이블.

그라디언트 시스템

Airbnb의 브랜드 그라디언트는 드물게 등장하며, 보통 워드마크와 검색 버튼의 브랜드 순간에만 사용된다:

linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)

이 코럴 → 마젠타 스윕은 “브랜드 순간”——전체 서피스에는 절대 사용하지 않고, 오직 좁은 필 형태나 로고 처리로만 사용한다.

3. 타이포그래피 규칙

폰트 패밀리

• Airbnb Cereal VF(프라이머리이자 유일한 폰트): 시스템 전체를 담당하는 독점 가변 웨이트 산세리프체. 폴백(순서): Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif.

추출된 토큰에서 관찰된 웨이트: 500, 600, 700. 400 레귤러 없음——시스템의 “본문” 웨이트는 500으로, 모든 텍스트 블록에 자신감 있고 의도적으로 읽히는 미묘한 추가 밀도를 부여한다.

OpenType 기능: salt(스타일리스틱 얼터네이트)는 콤팩트한 11px와 14px 600 웨이트 레이블에 사용——숫자와 특수 문자 조형을 더 촘촘하게 하기 위한 것으로 보인다. 리가처나 분수 숫자 기능은 관찰되지 않았다.

위계

원칙

• 하나의 패밀리, 다양한 웨이트. Airbnb Cereal VF가 8px 법적 텍스트부터 28px 페이지 제목까지 모두 처리한다——비주얼 아이덴티티는 서체 혼용이 아닌 패밀리 자체에서 온다.
• 500이 새로운 400. 시스템의 “레귤러” 웨이트는 500으로, 모든 단락에 웹 기본값보다 약간 더 자신감 있는 텍스처를 부여한다.
• 네거티브 트래킹은 디스플레이 타입에만. 20px 이상의 제목은 트래킹을 -0.18에서 -0.44px 압축하여 조각된 느낌을 낸다; 본문 크기는 가독성을 위해 트래킹 0을 유지한다.
• 제목은 타이트한 줄 높이, 본문은 여유롭게. 디스플레이 타입은 1.18–1.25(타이트)로 설정; 본문과 캡션은 장문 읽기 편의성을 위해 1.43으로 확장된다.
• 8px를 제외하고 올대문자 없음. 시스템에서 유일한 대문자 변환은 8px 위첨자——나머지는 모두 문장 대문자에 미묘한 웨이트 변화로 처리한다.

폰트 대체품에 대한 참고사항

Airbnb Cereal VF는 독점 폰트다. 가장 가까운 오픈소스 대체품은 Circular Std(여전히 상업용) 또는 Inter(무료, Google Fonts)로, 디스플레이 크기에서 자간을 -0.01em 줄인다. 엄격한 브랜드 충실도를 원한다면, 문서화된 폴백 체인(Circular, -apple-system, system-ui)은 macOS/iOS에서 system-ui가 비슷한 비율을 가진 San Francisco로 해석되어 허용 가능한 렌더링을 제공한다.

4. 컴포넌트 스타일링

버튼

프라이머리 CTA(“예약”, “검색”, “날짜 추가”)

• 배경: Rausch #ff385c
• 텍스트: 캔버스 화이트 #ffffff, Airbnb Cereal 500, 16px
• 패딩: 세로 약 14px, 가로 24px
• 반경: 8px(직사각형) 또는 50%(원형 아이콘 변형)
• 테두리: 없음
• 활성/누름: transform: scale(0.92) 더하기 0 0 0 2px의 2px #222222 포커스 링

세컨더리 버튼(“호스트 되기”, 아웃라인 3차 액션)

• 배경: #ffffff
• 텍스트: 잉크 블랙 #222222, Airbnb Cereal 500, 14–16px
• 패딩: 10px 16px
• 반경: 20px(필) 또는 8px(직사각형)
• 테두리: 1px solid 헤어라인 그레이 #dddddd

아이콘 전용 원형 버튼(뒤로 화살표, 공유, 즐겨찾기, 캐러셀 컨트롤)

• 배경: #f2f2f2(약간 오프화이트) 또는 1px 반투명 블랙 테두리가 있는 화이트
• 아이콘: #222222 아웃라인 스트로크, 16–20px
• 크기: 직경 32–44px
• 반경: 50%
• 활성/누름: transform: scale(0.92); 컬러풀한 사진 배경과 분리하는 4px 화이트 링 0 0 0 4px rgb(255,255,255)

비활성화 버튼

• 배경: #f2f2f2
• 텍스트: 스톤 그레이 #c1c1c1
• 불투명도: 0.5

필 탭 버튼(카테고리 선택기 “홈 / 체험 / 서비스”)

• 배경: 투명
• 텍스트: 잉크 블랙 #222222, Airbnb Cereal 500, 16px
• 패딩: 8px 14px
• 활성 상태: 레이블 아래 2px 잉크 블랙 밑줄
• 레이블 위에 36–48px 3D 렌더링 일러스트 아이콘과 페어링

카드 및 컨테이너

숙소 카드(홈페이지 그리드, 검색 결과)

• 배경: #ffffff
• 반경: 이미지에 14px, 텍스트는 투명 배경 위에 직접 배치
• 이미지: 4:3 비율, 전면, 동일한 14px 반경
• 패딩: 외부 컨테이너 없음; 이미지와 메타데이터 행 사이 12px 간격
• 그림자: 없음——분리는 여백과 사진 고유의 반경에서 온다
• 메타데이터 패턴: 1행에 도시/지역(16px 600), 2행에 거리/소요시간(14px 500 애시 그레이), 3행에 날짜 범위, 하단에 “1박당” 가격 행

세부 페이지 예약 패널(객실/체험 페이지의 스티키 우측 레일)

• 배경: #ffffff
• 반경: 14–20px
• 테두리: 1px solid 헤어라인 그레이 #dddddd
• 그림자: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0 — 3겹으로 쌓인 미묘한 엘리베이션
• 패딩: 24px
• 너비: 약 370px, 뷰포트 상단에서 120–140px 아래에 고정
• 내용: 가격 헤드라인 → 날짜 피커 → 게스트 드롭다운 → 프라이머리 CTA → “아직 청구되지 않습니다” 각주

편의시설 그리드 카드(숙소 세부 페이지)

• 배경: #ffffff
• 테두리: 행 수준에서 1px solid 헤어라인 그레이 #dddddd(항목별 아님)
• 패딩: 편의시설 행당 세로 16px
• 아이콘 + 레이블 패턴: 왼쪽에 24px 아웃라인 아이콘, 오른쪽에 16px 500 웨이트 레이블

리뷰 카드(세부 페이지의 개별 리뷰)

• 배경: #ffffff, 테두리 없음
• 패딩: 0(그리드 갭에 의존)
• 내용: 40px 원형 아바타 + 16px 600 웨이트 이름 + 14px 400 애시 그레이 날짜를 한 행에, 아래에 14px 500 본문 단락

입력 필드 및 폼

검색 바(홈페이지 주요)

• 배경: #ffffff
• 테두리: 세 세그먼트(어디 / 언제 / 인원)를 감싸는 1px solid 헤어라인 그레이 #dddddd
• 반경: 32px(풀 필)
• 그림자: rgba(0, 0, 0, 0.04) 0 2px 6px 0 — 미묘하게 떠 있는 느낌
• 구조: 얇은 세로 구분선으로 나뉜 세 세그먼트, 각 세그먼트에 12px 500 레이블과 14px 500 플레이스홀더
• 제출: 우측 끝에 Rausch 원형 아이콘 버튼, 직경 48px

텍스트 입력(일반 폼)

• 배경: #ffffff
• 테두리: 1px solid 헤어라인 그레이 #dddddd
• 반경: 8px
• 패딩: 14px 16px
• 포커스: 테두리가 잉크 블랙으로 전환되고 0 0 0 2px 블랙 외부 링이 추가됨
• 에러: 테두리가 #c13515(에러 레드)로 전환되고 헬퍼 텍스트도 같은 색

날짜 피커

• 달력 그리드: 7열 레이아웃, 원형 50% 날짜 셀, 너비 40–44px
• 선택된 범위: 잉크 블랙 #222222 배경에 흰 숫자
• 시작/끝 앵커: 더 큰 채워진 원; 중간 날짜는 소프트 클라우드 #f7f7f7 틴트

내비게이션

상단 내비(데스크톱)

• 높이: 약 80px
• 배경: #ffffff
• 왼쪽: Rausch 색의 Airbnb 워드마크+로고 lockup(102×32px)
• 중앙: 세 탭 카테고리 피커(홈 / 체험 / 서비스), 36–48px 3D 아이콘을 위에, 16px 500 레이블을 아래에; 활성 탭은 2px 잉크 블랙 밑줄
• 오른쪽: “호스트 되기” 텍스트 링크, 32px 원형 글로브(언어), 36px 햄버거 아바타 메뉴
• 하단 테두리: 1px solid 헤어라인 그레이 #dddddd

상단 내비(모바일)

• 전체 너비 검색 필이 한 행을 차지: “여행지를 찾아보세요” 플레이스홀더와 작은 돋보기 아이콘
• 아래: 세 탭 카테고리 피커가 유지됨(홈 / 체험 / 서비스)——일러스트 아이콘이 약 28px로 축소
• 하단 고정 탭 바: 탐색(활성 상태 Rausch) / 위시리스트 / 로그인——24px 아이콘 위에 12px 레이블

숙소 세부 보조 내비

• 히어로 이미지를 스크롤하면 나타나는 스티키 수평 스크롤 앵커 링크(사진 · 편의시설 · 리뷰 · 위치 · 호스트)
• 높이: 56px
• 하단 테두리: 1px solid 헤어라인 그레이

이미지 처리

• 주요 비율: 홈페이지 숙소 그리드 4:3, 체험 히어로 사진 16:9, 아바타 1:1
• 반경: 숙소 그리드 이미지 14px, 세부 페이지 히어로 사진 프레임 20px, 아바타 50%
• 세부 페이지 이미지 그리드: 큰 왼쪽 이미지(50% 너비) 1장과 오른쪽 2×2 작은 사진 4장으로 구성된 다섯 사진 그리드, 모두 20px 둥근 외부 컨테이너 공유
• 지연 로딩: loading="lazy"를 광범위하게 사용하고 블러 처리된 플레이스홀더 미리보기 먼저 제공
• 캐러셀: 32px 원형 화살표 버튼이 이미지에 겹쳐 수직 중앙에 배치; 도트 인디케이터는 하단에서 12px 위

시그니처 컴포넌트

게스트 즐겨찾기 어워드 Lockup(높은 평점의 숙소 세부 페이지에 두드러지게 표시)

• 700 웨이트로 44–56px 중앙 정렬된 평점 숫자
• 좌우에 손그림 월계관 SVG 일러스트, 각 약 48px 높이
• 아래: 12px 700 대문자 “게스트 즐겨찾기” 레이블, 자간 0.32px, 14px 500 애시 그레이 서브레이블
• 전체 너비 블록, 컨테이너 테두리 없음——흰 캔버스 위에 직접 배치

세 탭 카테고리 피커(모든 탐색 화면 상단에 표시)

• 세 탭: 홈 / 체험 / 서비스
• 각 탭: 약 48px 높이의 3D 렌더링 일러스트 아이콘(집, 기구, 벨)과 16px 500 레이블 조합
• 체험과 서비스에는 현재 아이콘 우측 상단에 작은 네이비 블루 “NEW” 필(12px 700 흰 텍스트에 다크 블루 배경)이 떠 있음
• 활성 탭: 레이블 아래 2px 잉크 블랙 밑줄

영감 도시 그리드(홈페이지 “미래 여행을 위한 영감”)

• 데스크톱 6열, 모바일 2열의 목적지 링크 그리드
• 각 셀: 1행에 16px 600 도시명, 2행에 14px 500 애시 그레이 렌탈 유형 서브타이틀(“코티지 렌탈”, “빌라 렌탈”)
• 이미지 없음——텍스트 전용 그리드
• 카테고리 탭으로 상단 구분(인기 / 예술 & 문화 / 해변 / 산 / 아웃도어 / 체험 / 여행 팁 & 영감 / Airbnb 친화 아파트)——활성 탭은 2px 밑줄과 웨이트 변화

예약 스티키 카드(숙소 세부 페이지)

• 사용자가 히어로를 스크롤하면 데스크톱에서 뷰포트 상단에서 120px 아래에 고정
• 모바일에서는 “₩X부터 / 박” 레이블과 Rausch “예약” 필이 있는 전체 너비 하단 바로 접힘
• 항상 표시: 가격 헤드라인 → 날짜 표시 → 게스트 선택기 → Rausch CTA → “아직 청구되지 않습니다” 면책사항

체험 호스트 카드(체험 세부 페이지)

• 상단에 3:2 커버 사진이 있는 전체 너비 둥근 컨테이너
• 원형 호스트 아바타(56px)가 커버 하단 가장자리에 50% 겹쳐 표시
• 겹침 아래: 호스트 이름 16px 700, 호스팅 기간 14px 500 애시 그레이, 작은 Rausch “호스트에게 연락” 필 버튼
• 리뷰와 편의시설/위치 블록 사이의 전환으로 사용

“알아두어야 할 사항” 스트립(숙소 세부 페이지)

• 규칙/정책의 3열 블록(하우스 규칙, 안전 및 재산, 취소 정책)
• 각 열: 상단에 아이콘, 16px 600 제목, 14px 500 애시 그레이 본문, 잉크 블랙 밑줄 “더 보기” 링크
• 구분선: 전체 스트립의 상하에 1px 헤어라인 그레이 테두리

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px
• 추출된 스케일: 2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px——픽셀 퍼펙트 아이콘 정렬을 위한 오프그리드 값 몇 가지가 포함된 세밀한 스케일
• 섹션 패딩: 데스크톱 상하 약 48–64px, 모바일 24–32px
• 카드 내부 패딩: 예약 패널과 대형 카드에 24px, 편의시설 행에 16px, 숙소 카드 메타데이터에 12px
• 숙소 카드 사이 거터: 데스크톱 24px, 모바일 16px
• 쌓인 텍스트 행 사이: 4–8px(매우 촘촘——여행 숙소의 “정보 밀도” 느낌을 강화)

그리드 및 컨테이너

• 최대 콘텐츠 너비: 초와이드에서 1760–1920px(Airbnb는 대부분의 사이트보다 그리드를 더 넓게 확장); 대부분의 세부 페이지는 1280px
• 홈페이지 숙소 그리드: ≥1760px에서 6열, ≥1440px에서 5열, ≥1128px에서 4열, ≥800px에서 3열, ≥550px에서 2열, 이하 1열
• 세부 페이지: 2열 비대칭——메인 콘텐츠 약 58%, 스티키 예약 패널 오른쪽 약 36%, 약 6% 거터
• 푸터: 3열 지원 / 호스팅 / Airbnb

여백 철학

Airbnb는 정보 밀도가 높지만 결코 답답하지 않다. 여백은 그룹화를 위해 사용된다——숙소 카드에는 24px의 거터가 있어 각 사진이 별도의 객체로 읽힌다. 그러나 각 카드 아래의 메타데이터는 4–8px 간격을 사용하여 가격/도시/날짜가 하나의 단위처럼 느껴진다. 세부 페이지 예약 패널에는 24px의 내부 패딩이 있지만, 내부 행(날짜 피커, 게스트 선택기, CTA)은 12px로 쌓여 있다——카드와 페이지 사이의 경계가 내부 콘텐츠보다 더 많은 분리 작업을 한다.

테두리 반경 스케일

6. 깊이 및 엘리베이션

그림자 철학: Airbnb는 단일 드롭 대신 쌓인 레이어드 그림자를 사용한다. 3겹 예약 패널 그림자는 하나의 응집된 리프트로 읽히지만 실제로는 서로 다른 불투명도/블러 값의 세 개의 독립된 그림자——그림자 주변에 미묘한 안티앨리어싱을 생성하여 무겁지 않으면서도 프리미엄하게 느껴진다.

장식적 깊이

• 사진이 곧 깊이: 시스템은 시각적 깊이를 만들기 위해 전면 사진에 크게 의존한다; 그림자와 그라디언트는 아껴 사용되어 사진이 무거운 작업을 하도록 한다
• 월계관 Lockup: 게스트 즐겨찾기 어워드는 두 SVG 월계관 일러스트를 사용하여 그렇지 않으면 평평했을 평점 숫자에 의식적인 트로피 같은 존재감을 부여한다
• 3D 렌더링 카테고리 아이콘: 홈/체험/서비스 아이콘에는 아트워크에 구워진 부드러운 내부 조명과 미묘한 그림자가 있다——브랜드가 “입체적인” 일러스트를 허용하는 유일한 곳

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

• Rausch #ff385c를 주요 액션과 활성 탭 인디케이터를 위해 아껴두기——장식적 사용으로 희석하지 않는다.
• 사진이 숨 쉬게 하기——4:3 크롭, 14–20px 둥근 모서리, 텍스트 오버레이 없음, 그라디언트 스크림 없음.
• Rausch 아래의 모든 텍스트 레이어에 잉크 블랙 #222222 사용——이것이 시스템의 니어블랙이며, 순수한 #000000이 아니다.
• 세 탭 카테고리 피커의 3D 일러스트 아이콘을 플랫 타이포그래피와 페어링——단일 화면 내에서 일러스트 스타일을 혼용하지 않는다.
• 세 개의 낮은 불투명도 그림자(약 2%, 4%, 10%)를 쌓아 시그니처 예약 패널 엘리베이션을 만든다.
• 모든 카드 간 및 행 간 구분선에 헤어라인 그레이 #dddddd 1px 테두리를 사용한다.
• 데스크톱에서는 예약 패널을 스티키로, 모바일에서는 하단 고정 예약 바로 접는다.
• 메타데이터 그룹 내에는 4–8px 간격을, 카드 사이에는 24px를 사용——정보 밀도는 의도된 것이다.

하지 말아야 할 것

• Rausch / Plus 마젠타 / Luxe 퍼플 프로덕트 티어 팔레트 외에 세컨더리 액센트 컬러를 도입하지 않는다.
• 사진 안에 텍스트를 배치하지 않는다——캡션은 항상 이미지 아래에, 오버레이하지 않는다.
• 8px 위첨자 역할을 제외하고 올대문자 레이블을 사용하지 않는다.
• 아이콘 버튼을 50% 이외의 각도로 둥글게 하지 않는다——원형이 시스템의 시그니처 기하학이다.
• 숙소 카드에 드롭 그림자를 추가하지 않는다——그것들은 흰 캔버스 위에 엘리베이션 없이 놓인다.
• 그라디언트 배경을 사용하지 않는다——시스템의 유일한 그라디언트는 워드마크 위의 좁은 Rausch → 마젠타 스윕이다.
• 400 레귤러 폰트 웨이트를 사용하지 않는다——Airbnb Cereal의 본문 웨이트는 500이다.
• Airbnb Cereal VF를 다른 디스플레이 서체로 재정의하지 않는다——시스템은 의도적으로 단일 패밀리다.

8. 반응형 동작

브레이크포인트

Airbnb는 약 60개의 브레이크포인트를 선언하지만(컴포넌트 라이브러리의 디자인 타임 아티팩트), 의미 있는 레이아웃 변화는 훨씬 작은 세트에서 일어난다:

터치 타깃

모든 인터랙티브 요소는 44×44px 이상을 충족한다. 원형 아이콘 버튼 패밀리는 32–44px로 설계되었으며 8–12px의 확장 히트 에어리어 패딩이 있다. Rausch 주요 예약 버튼은 약 48px 높이. 세 탭 카테고리 피커의 히트 에어리어는 레이블+아이콘 전체 직사각형(일반적으로 탭당 약 64×80px).

접기 전략

• 내비: 태블릿 이상에서는 Airbnb 워드마크 + 세 탭 피커를 유지; 모바일에서는 피커가 검색 필 바로 아래로 슬라이드되고, 글로브/아바타 컨트롤은 하단 고정 탭 바로 이동.
• 검색 바: 데스크톱에서는 Rausch 원형 제출 버튼이 있는 세 세그먼트 필(어디 / 언제 / 인원); 모바일에서는 단일 행 “여행지를 찾아보세요” 필로 접히고, 탭하면 전체 화면 검색 시트가 열린다.
• 예약 패널: ≥1128px에서 스티키 우측 레일; 800–1127px에서 메인 콘텐츠 열 인라인; <800px에서 하단 고정 “예약” 필.
• 숙소 그리드: 브레이크포인트를 가로질러 6 → 5 → 4 → 3 → 2 → 1열로 리플로우.
• 세부 페이지 이미지 그리드: 데스크톱에서 5장 레이아웃(큰 1장 + 작은 4장); 모바일에서 페이지 도트 인디케이터가 있는 스와이프 가능한 전면 캐러셀로 변환.
• 푸터: 3열 레이아웃이 <800px에서 단일 열 쌓기로 접힘.

이미지 동작

• loading="lazy" 전역 적용, 블러 처리된 im_w= URL 파라미터화 미리보기 썸이 먼저 제공됨
• 반응형 이미지는 Airbnb의 muscache.com CDN을 사용하며 im_w 쿼리 파라미터로 너비 기반 전달(im_w=240, im_w=720, im_w=1200, im_w=2400)
• 아트 디렉션 크롭 없음——같은 이미지가 브레이크포인트를 가로질러 스케일 업/다운
• 캐러셀은 소스 비율에 관계없이 일관된 4:3 비율을 유지하기 위해 사진 높이를 자동 조정

9. 에이전트 프롬프트 가이드

빠른 컬러 참조

• 주요 CTA: “Rausch (#ff385c)”
• 페이지 배경: “Canvas White (#ffffff)”
• 서브서피스: “Soft Cloud (#f7f7f7)”
• 제목/본문 텍스트: “Ink Black (#222222)”
• 보조 텍스트: “Ash Gray (#6a6a6a)”
• 테두리/구분선: “Hairline Gray (#dddddd)”
• 에러: “Error Red (#c13515)”
• 인포 링크: “Info Blue (#428bff)”
• Luxe 티어 액센트: “Luxe Purple (#460479)”
• Plus 티어 액센트: “Plus Magenta (#92174d)“

컴포넌트 프롬프트 예시

• “주요 예약 버튼 만들기: Rausch (#ff385c) 배경, 흰 Airbnb Cereal 500 웨이트 16px 레이블, 14px × 24px 패딩, 8px 테두리 반경, 그림자 없음. 활성/누름 시 transform: scale(0.92) 추가와 2px 잉크 블랙 포커스 링(0 0 0 2px #222222).”
• “숙소 카드 만들기: 14px 테두리 반경의 4:3 전면 사진, 컨테이너 그림자 없음; 이미지 아래 4px 간격으로 세 텍스트 행 쌓기: 도시명 16px 600 잉크 블랙, 렌탈 유형 14px 500 애시 그레이(#6a6a6a), 가격 범위 16px 500 잉크 블랙과 14px ‘1박당’ 접미사.”
• “스티키 예약 패널 디자인: 흰 배경, 14px 테두리 반경, 1px 헤어라인 그레이(#dddddd) 테두리, 3겹 엘리베이션 그림자(rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0), 24px 패딩, 370px 너비, 데스크톱에서 뷰포트 상단에서 120px 아래에 고정. 내용: 가격 헤드라인, 날짜 피커, 게스트 드롭다운, Rausch 주요 CTA, 12px 애시 그레이 ‘아직 청구되지 않습니다’ 면책사항.”
• “세 탭 카테고리 피커 만들기: 홈, 체험, 서비스로 레이블된 세 개의 등너비 탭; 각 탭에 약 48px 3D 렌더링 일러스트 아이콘(집, 기구, 벨)을 위에, 16px 500 잉크 블랙 레이블을 아래에; 활성 탭은 2px 잉크 블랙 밑줄; 체험과 서비스 아이콘 우측 상단에 다크 네이비 배경의 작은 12px 700 흰 ‘NEW’ 필 추가.”
• “게스트 즐겨찾기 어워드 Lockup 렌더링: 52px 700 웨이트 잉크 블랙으로 중앙 정렬된 평점 숫자, 좌우에 손그림 SVG 월계관(높이 약 48px); 아래에 12px 700 대문자 ‘GUEST FAVORITE’ 레이블, 자간 0.32px; 서브레이블 14px 500 애시 그레이; 컨테이너 테두리 없이 흰 캔버스 위에 전체 너비 블록으로 직접 배치.”

반복 가이드

이 디자인 시스템으로 생성된 기존 화면을 다듬을 때:

1. 한 번에 하나의 컴포넌트에 집중한다.
2. 이 문서의 구체적인 컬러 이름과 헥스 코드를 참조한다(예: “잉크 블랙 #222222”, “다크 그레이” 아님).
3. 자연어 설명과 측정값을 함께 사용한다(“긴 그림자 문자열”이 아닌 “미묘한 3겹 엘리베이션”).
4. 원하는 “느낌”을 설명한다(“매거진 같은, 사진 우선” vs “고밀도 유틸리티”).
5. 항상 본문에는 Airbnb Cereal VF 500 웨이트, 강조에는 600–700을 기본으로——400 사용 금지.
6. Rausch 핑크를 희소하게 유지——하나의 뷰포트에 Rausch 색의 요소가 두 개 이상 나타나면 그 중 하나를 중화할지 고려한다.

알려진 격차

• 홈페이지 숙소 그리드 카드: 주요 숙소 카드 그리드(airbnb.com의 주요 비주얼 서피스)는 추출된 홈페이지 스크린샷에서 완전히 캡처되지 않았다——콘텐츠가 부분적으로만 로드되었다. 위의 숙소 카드 사양은 영감 그리드 구조와 Airbnb의 더 넓은 관행에서 추론된 것이다; 프로덕션 사용 전에 라이브 사이트에서 정확한 비율과 메타데이터 위계를 확인한다.
• 체험 카테고리 아이콘: 홈/체험/서비스의 3D 일러스트 아이콘은 래스터 자산으로 제공된다; 정확한 소스 파일 사양(SVG 대 PNG, 렌더링된 픽셀 치수)은 여기에 문서화되어 있지 않다.
• 애니메이션 및 전환 타이밍: 캡처되지 않음——정적 추출 범위.
• 다크 모드: Airbnb는 추출된 프로덕트 서피스에서 네이티브 다크 모드를 출시하지 않았다; 이 문서는 단일 라이트 모드 테마만 설명한다.