# [[Uber Base Web Design System]]

## 📌[[ brief]] Summary
[[Uber Base Web]] Design[[ system]]은 Uber에서 수백 개의 내부 웹 애플리케이션 간의 일관성을 유지하고 개발 오버헤드를 줄이기 위해 구축한 React 컴포넌트 라이브러리이다 [1, 2]. 2018년에 오픈 소스로 공개되었으며, 기기에 구애받지 않고 빠르고 쉽게 웹 애플리케이션을 만들 수 있는 탄탄한 기반을 제공한다 [2]. 특히 접근성과 성능을 중시하며, 독자적인 'Overrides API 패턴'을 통해 유연하고 확장 가능한 컴포넌트 커스터마이징을 지원하는 것이 핵심적인 특징이다 [3-5].

## 📖 Core Content
- **탄생 배경 및 목적:** Uber의 수많은 내부 웹 애플리케이션들이 각기 다르게 작동하여 발생하는 학습 오버헤드와 중복 개발(바퀴의 재발명) 문제를 해결하기 위해 도입되었다 [1]. Base 디자인 언어를 코드로 구현하여 디자이너, 엔지니어, 프로덕트 매니저 간의 공통 언어 역할을 수행한다 [2, 6].
- **신뢰성 ([[Reliability]]):** 각 커밋마다 시각적 회귀(visual regression) 서비스 테스트와 Puppeteer를 활용한 엔드투엔드(End-to-End) 테스트를 거쳐 픽셀 단위의 완벽한 레이아웃을 보장하고 버그 발생을 방지한다 [7].
- **접근성 및 성능 ([[Accessibility]] & Performance):** 키보드 내비게이션 및 스크린 리더와 원활하게 작동하도록 설계되어 엄격한 접근성 기준(ARIA 등)을 충족한다 [3, 8]. 또한, 모바일 기기 및 열악한 네트워크 환경에서의 최적화를 위해 [[Styletron]]을 활용하여 원자적(atomic) 스타일링을 생성, 다운로드되는 콘텐츠 페이로드를 최소화한다 [3].
- **Overrides API 패턴:** Base Web이 채택한 가장 핵심적인 확장 아키텍처 패턴이다 [9]. 개발자가 컴포넌트 내부의 하위 요소(sub-element)에 식별자를 통해 접근하여 스타일과 속성을 덮어쓰거나, 컴포넌트 자체를 완전히 교체할 수 있도록 `overrides` 속성을 제공한다 [5, 9-11].
- **확장성 및 유지보수 이점:** Overrides 패턴을 통해 최상위 컴포넌트에 무수히 많은 속성(prop)을 추가해야 하는 'prop soup' 문제를 방지한다 [9, 10]. 라이브러리 개발자가 모든 사용 사례를 예측해 속성을 노출하지 않아도, 소비자가 직접 엣지 케이스에 맞춰 UI를 재정의할 수 있어 거대한 스케일에서도 라이브러리가 비대해지지 않고 유연함을 유지한다 [9].

## 🔗 Knowledge Connections
- **Related Topics:** [[Overrides Pattern]], [[React Component Architecture]], [[Styletron]], [[Design Tokens]], [[Accessibility (A11y)]]
- **Projects/Contexts:** [[Building Reusable UI Components]], [[Scalable [[Frontend]] Design Systems]]
- **Contradictions/Notes:** 소스에 상충하는 내용에 대한 관련 정보가 부족합니다.

---
*Last updated: 2026-04-26*