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

Category: 미디어 및 소비자 모빌리티 플랫폼. 대담한 흑백, 타이트한 타이포그래피, 도시적 에너지.

1. 비주얼 테마 및 분위기

Uber의 디자인 언어는 자신감 넘치는 미니멀리즘의 교과서다——모든 픽셀이 목적을 가지고, 존재 이유 없이 장식되는 것은 아무것도 없는 흑백 세계. 전체 경험은 극명한 이중성 위에 구축된다: 제트 블랙(#000000)과 순백색(#ffffff), 메시지를 희석시키는 중간 그레이는 사실상 없다. 이것은 미완성 스타트업의 삭막한 미니멀리즘이 아니다——속삭임만으로도 전달이 가능할 만큼 확립된 브랜드의 의도적인 절제다.

시그니처 서체인 UberMove는 독자적인 기하학적 산세리프로, 뚜렷하게 정사각형의 엔지니어링된 품질을 지닌다. 52px UberMove Bold의 헤드라인은 광고판의 무게감을 지닌다——권위적이고, 직접적이며, 타협 없다. 보조 서체 UberMoveText는 중간 굵기(500)로 본문과 버튼을 처리하며 약간 더 부드럽고 읽기 쉬운 성격을 가진다. 이 둘이 함께 교통 지도 같은 타이포그래피 시스템을 만들어낸다: 명확하고, 효율적이며, 빠른 스캔을 위해 설계된.

Uber 디자인이 진정으로 독특한 이유는 풀블리드 사진·일러스트와 pill 형태 인터랙티브 요소(999px border-radius)의 조합이다. 내비게이션 칩, CTA 버튼, 카테고리 선택기 모두 이 캡슐 형태를 공유하여, 손으로 조작하기 친화적인 인터페이스 언어를 만들어낸다——한눈에 Uber임을 알 수 있다. 일러스트——드라이버, 라이더, 도시 풍경의 따뜻하고 약간 양식화된 장면들——는 자칫 차가워질 수 있는 단색 시스템에 인간미를 불어넣는다. 사이트는 흰색 콘텐츠 섹션과 완전한 검정 푸터 사이를 교대하며, 카드 기반 레이아웃은 플랫한 미감을 깨지 않는 가장 부드러운 그림자(rgba(0,0,0,0.12-0.16))를 사용해 은은한 입체감을 만든다.

주요 특성:

• UI 크롬에 중간 그레이가 거의 없는 순수한 흑백 기반
• UberMove(헤드라인) + UberMoveText(본문/UI)——독자적인 기하학적 산세리프 패밀리
• 모든 것이 pill 형태: 버튼, 칩, 내비 아이템 모두 999px border-radius 사용
• 따뜻하고 인간적인 일러스트와 단색 인터페이스의 대비
• 카드 기반 레이아웃에 속삭임 같은 부드러운 그림자(불투명도 0.12-0.16)
• 컴팩트하고 정보 밀도 높은 레이아웃, 8px 간격 그리드
• 풀블리드 히어로 배경으로 통합된 대담한 사진
• 어두운 고대비 환경으로 페이지를 고정시키는 검정 푸터

2. 컬러 팔레트 및 역할

프라이머리

• Uber Black(#000000): 브랜드를 정의하는 색상——프라이머리 버튼, 헤드라인, 내비게이션 텍스트, 푸터에 사용. “거의 검정”이나 “오프블랙”이 아닌, 타협 없는 진정한 블랙.
• Pure White(#ffffff): 프라이머리 서피스 색상과 반전 텍스트. 페이지 배경, 카드 서피스, 검정 요소 위의 텍스트에 사용.

인터랙티브 & 버튼 상태

• Hover Gray(#e2e2e2): 흰색 버튼 호버 상태——따뜻함 없이 명확한 피드백을 제공하는 깔끔하고 쿨한 라이트 그레이.
• Hover Light(#f3f3f3): 올라온 흰색 버튼의 은은한 호버——부드러운 인터랙션 피드백을 위한 거의 느낄 수 없는 그레이.
• Chip Gray(#efefef): 세컨더리/필터 버튼과 내비게이션 칩의 배경——중립적이고 초경량 그레이.

텍스트 & 콘텐츠

• Body Gray(#4b4b4b): 세컨더리 텍스트와 푸터 링크——따뜻함도 차가움도 없는 진정한 중간 그레이.
• Muted Gray(#afafaf): 3차 텍스트, 강조도 낮춘 푸터 링크, 플레이스홀더 콘텐츠.

테두리 & 구분

• Border Black(#000000): 구조적 구분을 위한 얇은 1px 테두리——구분선과 폼 컨테이너에 드물게 사용.

그림자 & 깊이

• Shadow Light(rgba(0, 0, 0, 0.12)): 표준 카드 입체감——콘텐츠 카드를 위한 깃털처럼 가벼운 리프트.
• Shadow Medium(rgba(0, 0, 0, 0.16)): 플로팅 액션 버튼과 오버레이를 위한 약간 강한 입체감.
• Button Press(rgba(0, 0, 0, 0.08)): 세컨더리 버튼의 활성/눌린 상태를 위한 인셋 그림자.

링크 상태

• Default Link Blue(#0000ee): 본문 콘텐츠의 밑줄 텍스트 링크에 사용되는 표준 브라우저 블루.
• Link White(#ffffff): 어두운 서피스의 링크——푸터와 어두운 섹션에 사용.
• Link Black(#000000): 밝은 서피스의 밑줄 장식 링크.

그라디언트 시스템

• Uber의 디자인은 완전히 그라디언트 없음. 흑/백 이중성과 플랫 컬러 블록이 모든 시각적 계층을 만들어낸다. 시스템 어디에도 그라디언트는 나타나지 않는다——모든 서피스는 단색이고, 모든 전환은 하드 엣지 또는 그림자다.

3. 타이포그래피 규칙

폰트 패밀리

• 헤드라인/디스플레이: UberMove, 폴백: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
• 본문/UI: UberMoveText, 폴백: system-ui, Helvetica Neue, Helvetica, Arial, sans-serif

참고: UberMove와 UberMoveText는 독자적인 서체입니다. 외부 구현에는 system-ui 또는 Inter를 가장 가까운 대안으로 사용하세요. UberMove의 기하학적이고 정사각형 비율은 Inter 또는 DM Sans로 근사할 수 있습니다.

계층 구조

원칙

• 굵은 헤드라인, 중간 본문: UberMove 헤드라인은 독점적으로 굵기 700(볼드)——모든 헤드라인이 광고판 같은 힘으로 전달된다. UberMoveText 본문과 UI 텍스트는 400-500을 사용해 굵기 대비로 명확한 시각적 계층을 만든다.
• 타이트한 헤드라인 행간: 모든 헤드라인은 1.22-1.40 사이의 행간 사용——읽기 위한 것이 아닌 스캔을 위해 설계된, 컴팩트하고 펀치감 있는 행간.
• 기능적 타이포그래피: 어디에도 장식적인 텍스트 처리가 없다. 자간, 텍스트 변환, 장식적 크기 조정 없음. 모든 텍스트 요소는 직접적인 커뮤니케이션 목적에 봉사한다.
• 두 폰트, 엄격한 역할: UberMove는 독점적으로 헤드라인에만. UberMoveText는 독점적으로 본문, 버튼, 링크, UI에만. 그 경계는 절대 넘지 않는다.

4. 컴포넌트 스타일링

버튼

프라이머리 블랙(CTA)

• 배경: Uber Black(#000000)
• 텍스트: Pure White(#ffffff)
• 패딩: 10px 12px
• 반지름: 999px(풀 pill)
• 아웃라인: 없음
• 포커스: 인셋 링 rgb(255,255,255) 0px 0px 0px 2px
• 프라이머리 액션 버튼——굵고, 고대비, 놓칠 수 없는

세컨더리 화이트

• 배경: Pure White(#ffffff)
• 텍스트: Uber Black(#000000)
• 패딩: 10px 12px
• 반지름: 999px(풀 pill)
• 호버: 배경이 Hover Gray(#e2e2e2)로 전환
• 포커스: 배경이 Hover Gray로 전환, 인셋 링 나타남
• 어두운 서피스 또는 프라이머리 블랙 옆의 세컨더리 액션으로 사용

칩/필터

• 배경: Chip Gray(#efefef)
• 텍스트: Uber Black(#000000)
• 패딩: 14px 16px
• 반지름: 999px(풀 pill)
• 활성: 인셋 그림자 rgba(0,0,0,0.08)
• 내비게이션 칩, 카테고리 선택기, 필터 토글

플로팅 액션

• 배경: Pure White(#ffffff)
• 텍스트: Uber Black(#000000)
• 패딩: 14px
• 반지름: 999px(풀 pill)
• 그림자: rgba(0,0,0,0.16) 0px 2px 8px 0px
• 변환: translateY(2px) 약간의 오프셋
• 호버: 배경이 #f3f3f3으로 전환
• 지도 컨트롤, 맨 위로 스크롤, 플로팅 CTA

카드 & 컨테이너

• 배경: 흰색 페이지에서 Pure White(#ffffff); 뚜렷한 카드 배경 차별화 없음
• 테두리: 기본 없음——카드는 스트로크가 아닌 그림자로 정의
• 반지름: 표준 콘텐츠 카드 8px; 피처/프로모트 카드 12px
• 그림자: 표준 리프트 rgba(0,0,0,0.12) 0px 4px 16px 0px
• 카드는 최소한의 내부 패딩으로 콘텐츠가 밀집
• 이미지 주도 카드는 텍스트 오버레이 또는 하단 배치와 함께 풀블리드 이미지 사용

입력 & 폼

• 텍스트: Uber Black(#000000)
• 배경: Pure White(#ffffff)
• 테두리: 1px 솔리드 블랙(#000000)——눈에 띄는 테두리가 나타나는 유일한 곳
• 반지름: 8px
• 패딩: 표준적인 편안한 간격
• 포커스: 커스텀 포커스 상태 없음——표준 브라우저 포커스 링에 의존

내비게이션

• 흰색 배경의 스티키 상단 내비게이션
• 로고: 24x24px 검정색 Uber 워드마크/아이콘
• 링크: UberMoveText, 14-18px, 굵기 500, Uber Black
• 카테고리 내비게이션(“타기”, “운전하기”, “비즈니스”, “Uber Eats”)용 Chip Gray(#efefef) 배경의 pill 형태 내비 칩
• 메뉴 토글: 50% border-radius의 원형 버튼
• 모바일: 햄버거 메뉴 패턴

이미지 처리

• 따뜻하고 손으로 그린 일러스트 장면(피처 섹션에는 사진 불사용)
• 일러스트 스타일: 약간 양식화된 인물, 일러스트 내 따뜻한 컬러 팔레트, 현대적인 느낌
• 히어로 섹션은 대담한 사진 또는 일러스트를 전폭 배경으로 사용
• 앱 다운로드 CTA에 QR 코드
• 카드 내 모든 이미지는 표준 8px 또는 12px border-radius 사용

특징적인 컴포넌트

카테고리 Pill 내비게이션

• 최상위 내비게이션용 pill 형태 버튼 수평 행(“타기”, “운전하기”, “비즈니스”, “Uber Eats”, “회사 소개”)
• 각 pill: Chip Gray 배경, 검정 텍스트, 999px 반지름
• 활성 상태는 흰색 텍스트의 검정 배경으로 표시(반전)

듀얼 액션 히어로

• 스플릿 히어로: 좌측에 텍스트/CTA, 우측에 지도/일러스트
• 픽업/목적지를 위한 두 개의 나란한 입력 필드
• 검정 pill의 “가격 보기” CTA 버튼

Plan-Ahead 카드

• “Uber Reserve”와 여행 계획 같은 기능을 홍보하는 카드
• 따뜻하고 인간 중심적인 이미지가 풍부한 일러스트
• 하단에 흰색 텍스트의 검정 CTA 버튼

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px
• 스케일: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px
• 버튼 패딩: 10px 12px(컴팩트) 또는 14px 16px(편안함)
• 카드 내부 패딩: 약 24-32px
• 섹션 수직 간격: 넉넉하지만 효율적——주요 섹션 사이 약 64-96px

그리드 & 컨테이너

• 최대 컨테이너 너비: 약 1136px, 중앙 정렬
• 히어로: 좌측 텍스트, 우측 비주얼의 스플릿 레이아웃
• 피처 섹션: 2열 카드 그리드 또는 전폭 단일 열
• 푸터: 검정 배경의 멀티컬럼 링크 그리드
• 뷰포트 엣지까지 확장하는 전폭 섹션

여백 철학

• 효율적이며 에어리하지 않음: Uber의 여백은 기능적——분리하기엔 충분하지만, 비어 보이게 할 만큼은 아니다. 이것은 교통 시스템의 간격이다: 컴팩트하고, 명확하며, 목적 지향적.
• 콘텐츠 밀집 카드: 카드는 최소한의 내부 간격으로 정보를 타이트하게 압축하고, 그림자와 반지름에 경계 정의를 의존한다.
• 섹션 호흡 공간: 주요 섹션은 넉넉한 수직 간격을 갖지만, 섹션 내부 요소는 긴밀하게 그룹화된다.

Border Radius 스케일

• 샤프(0px): 인터랙티브 요소에 직각 없음
• 표준(8px): 콘텐츠 카드, 입력 필드, 리스트박스
• 편안함(12px): 피처드 카드, 더 큰 컨테이너, 링크 카드
• 풀 Pill(999px): 모든 버튼, 칩, 내비게이션 아이템, pill
• 서클(50%): 아바타 이미지, 아이콘 컨테이너, 원형 컨트롤

6. 깊이 & 엘리베이션

그림자 철학: Uber는 그림자를 순수하게 구조적 도구로 사용하며, 장식적으로는 절대 사용하지 않는다. 그림자는 항상 매우 낮은 불투명도(0.08-0.16)의 검정으로, 콘텐츠 레이어를 분리하는 데 필요한 최소한의 리프트를 만든다. 블러 반지름은 중간 정도(8-16px)——자연스러움을 느끼기에 충분하지만 절대 극적이지 않다. 컬러 그림자, 레이어드 그림자 스택, 앰비언트 글로우 효과는 없다. 깊이는 그림자 엘리베이션보다 흑/백 섹션 대비로 더 많이 전달된다.

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

해야 할 것

• 프라이머리 팔레트로 진정한 블랙(#000000)과 순수한 화이트(#ffffff)를 사용——그 극명한 대비가 바로 Uber다
• 모든 버튼, 칩, pill 형태 내비게이션 요소에 999px border-radius 사용
• 광고판 수준의 임팩트를 위해 모든 헤드라인을 UberMove Bold(700)로 유지
• 카드 엘리베이션에 속삭임 같은 부드러운 그림자(불투명도 0.12-0.16) 사용——거의 보이지 않게
• 컴팩트하고 정보 밀집 레이아웃 스타일 유지——Uber는 에어리함보다 효율성을 우선시
• 모노크롬 인터페이스를 부드럽게 하기 위해 따뜻하고 인간 중심적인 일러스트 사용
• 콘텐츠 카드에 8px 반지름, 피처드 컨테이너에 12px 적용
• 내비게이션과 눈에 띄는 UI 텍스트에 굵기 500의 UberMoveText 사용
• 듀얼 액션 레이아웃에서 검정 프라이머리 버튼과 흰색 세컨더리 버튼 페어링

하지 말아야 할 것

• UI 크롬에 컬러를 도입하지 않음——Uber의 인터페이스는 엄격히 흑, 백, 회색
• 버튼에 999px보다 작은 모서리 둥글기를 사용하지 않음——풀 pill 형태는 핵심 아이덴티티 요소
• 무거운 그림자나 높은 불투명도의 드롭 섀도를 적용하지 않음——깊이는 속삭임처럼 은은해야 함
• 어디에도 세리프 폰트를 사용하지 않음——Uber의 타이포그래피는 독점적으로 기하학적 산세리프
• 과도한 여백이 있는 에어리하고 넓은 레이아웃을 만들지 않음——Uber의 밀도는 의도적인 것
• 그라디언트나 컬러 오버레이를 사용하지 않음——모든 서피스는 플랫하고 단색
• UberMove를 본문 텍스트에, 또는 UberMoveText를 헤드라인에 섞지 않음——계층 구조는 엄격함
• 장식적인 테두리를 사용하지 않음——테두리는 기능적(입력, 구분선)이거나 완전히 없음
• 오프화이트나 니어블랙으로 흑/백 대비를 부드럽게 하지 않음——그 이중성은 의도적인 것

8. 반응형 동작

브레이크포인트

터치 타겟

• 모든 pill 버튼: 최소 높이 44px(10-14px 수직 패딩 + 행간)
• 내비게이션 칩: 편안한 엄지 탭을 위한 넉넉한 14px 16px 패딩
• 원형 컨트롤(메뉴, 닫기): 50% 반지름으로 크고 쉬운 타겟 확보
• 카드 서피스는 모바일에서 전체 영역 터치 타겟으로 기능

접히는 전략

• 내비게이션: 수평 pill 내비가 원형 토글이 있는 햄버거 메뉴로 접힘
• 히어로: 스플릿 레이아웃(텍스트 + 지도/비주얼)이 단일 열로 스택——텍스트 위, 비주얼 아래
• 입력 필드: 나란한 픽업/목적지 입력이 수직으로 스택
• 피처 카드: 2열 그리드가 전폭 스택 카드로 접힘
• 헤드라인: 52px 디스플레이가 36px, 32px, 24px, 20px으로 축소
• 푸터: 멀티컬럼 링크 그리드가 아코디언 또는 스택 단일 열로 접힘
• 카테고리 pill: 작은 화면에서 오버플로와 함께 수평 스크롤

이미지 동작

• 일러스트는 컨테이너 내에서 비례적으로 스케일
• 히어로 이미지는 화면 비율을 유지하며, 작은 화면에서 크롭될 수 있음
• QR 코드 섹션은 모바일에서 숨김(앱 다운로드가 직접 스토어 링크로 전환)
• 카드 이미지는 모든 크기에서 8-12px border-radius 유지

9. Agent 프롬프트 가이드

빠른 컬러 참조

• 프라이머리 버튼: “Uber Black(#000000)”
• 페이지 배경: “Pure White(#ffffff)”
• 버튼 텍스트(검정 위): “Pure White(#ffffff)”
• 버튼 텍스트(흰색 위): “Uber Black(#000000)”
• 세컨더리 텍스트: “Body Gray(#4b4b4b)”
• 3차 텍스트: “Muted Gray(#afafaf)”
• 칩 배경: “Chip Gray(#efefef)”
• 호버 상태: “Hover Gray(#e2e2e2)”
• 카드 그림자: “rgba(0,0,0,0.12) 0px 4px 16px”
• 푸터 배경: “Uber Black(#000000)“

예시 컴포넌트 프롬프트

• “Pure White(#ffffff) 위에 히어로 섹션 생성, 헤드라인 52px UberMove Bold(700), 행간 1.23. Uber Black(#000000) 텍스트 사용. Body Gray(#4b4b4b)로 서브타이틀, 16px UberMoveText 굵기 400, 행간 1.50. Uber Black(#000000) pill CTA 버튼 배치, 순백 텍스트, 999px 반지름, 패딩 10px 12px.”
• “수평 pill 버튼의 카테고리 내비게이션 바 디자인. 각 pill: Chip Gray(#efefef) 배경, Uber Black(#000000) 텍스트, 14px 16px 패딩, 999px border-radius. 활성 pill은 Uber Black 배경에 Pure White 텍스트로 반전. UberMoveText 14px 굵기 500 사용.”
• “Pure White(#ffffff) 위에 피처 카드 구성, 8px border-radius, 그림자 rgba(0,0,0,0.12) 0px 4px 16px. 제목은 UberMove 24px 굵기 700, 설명은 Body Gray(#4b4b4b) 16px UberMoveText. 하단에 검정 pill CTA 버튼 추가.”
• “Uber Black(#000000) 위에 다크 푸터 생성, Pure White(#ffffff) 제목 텍스트, UberMove 20px 굵기 700. 푸터 링크는 Muted Gray(#afafaf) 14px UberMoveText. 링크 호버 시 순백으로. 멀티컬럼 그리드 레이아웃.”
• “플로팅 액션 버튼 디자인, Pure White(#ffffff) 배경, 999px 반지름, 14px 패딩, 그림자 rgba(0,0,0,0.16) 0px 2px 8px. 호버 시 배경이 #f3f3f3으로 전환. 맨 위로 스크롤 또는 지도 컨트롤에 사용.”

반복 가이드

1. 한 번에 하나의 컴포넌트에 집중
2. 엄격한 흑/백 팔레트 참조——“어둡게 만들어”가 아닌 “Uber Black(#000000) 사용”
3. 버튼과 pill에 항상 999px 반지름 지정——이것은 Uber 아이덴티티에 있어 비협상 사항
4. 폰트 패밀리를 명시적으로 설명——“헤드라인은 UberMove Bold, 레이블은 UberMoveText Medium”
5. 그림자에는 “속삭임 그림자(rgba(0,0,0,0.12) 0px 4px 16px)” 사용——무거운 드롭 섀도 절대 사용 안 함
6. 레이아웃은 컴팩트하고 정보 밀도 높게 유지——Uber는 에어리함이 아닌 효율성
7. 일러스트는 따뜻하고 인간적이어야 함——추상적인 형태가 아닌 “따뜻한 톤의 양식화된 인물” 묘사
8. 균형 잡힌 듀얼 액션 레이아웃을 위해 흰색 세컨더리와 검정 CTA 페어링