# [[Uber Base Web React Component Library]]

## 📌 Brief Summary
Uber Base Web은 Uber가 사내 및 외부 웹 애플리케이션의 UI를 통합하기 위해 개발하여 2018년에 오픈 소스로 공개한 React 컴포넌트 라이브러리입니다 [1, 2]. 디바이스에 구애받지 않는 기반 환경을 제공하며, 높은 신뢰성과 접근성, 그리고 광범위한 커스터마이징을 지원하는 아키텍처를 특징으로 합니다 [3]. 복잡하고 확장 가능한 프론트엔드 환경에서 재사용 가능한 UI 컴포넌트를 구축하는 데 필요한 디자인 토큰과 아키텍처 패턴을 효과적으로 구현한 대표적인 사례입니다 [2, 4].

## 📖 Core Content
- **도입 배경 및 목적:** Uber는 수백 개의 내부 웹 애플리케이션이 제각각 작동하여 발생하는 학습 곡선과 비효율성을 해결하기 위해 Base Web을 도입했습니다 [1, 2]. 이 디자인 시스템은 엔지니어, 디자이너, 프로덕트 매니저가 공통의 구성 요소(building blocks)를 사용하여 협업할 수 있도록 돕는 공통 언어 역할을 합니다 [3].
- **확장 가능한 컴포넌트 설계 (Overrides Pattern):** Base Web 아키텍처의 가장 강력한 특징 중 하나는 커스터마이징을 위한 **Overrides API**입니다 [5, 6]. 다양한 애플리케이션의 요구사항을 충족하기 위해 컴포넌트에 수많은 prop을 추가하면 코드가 복잡해지는 'prop soup' 현상이 발생합니다 [4]. 이를 방지하기 위해 Base Web의 모든 컴포넌트는 `overrides` prop을 노출합니다 [4]. 개발자는 이 prop을 통해 기본 스타일과 딥 병합(deep-merged)되는 커스텀 스타일을 하위 요소에 주입하거나, 추가 속성을 전달하거나, 프리젠테이셔널 컴포넌트 자체를 완전히 교체할 수 있습니다 [4, 7, 8].
- **스타일링 및 접근성 (Styling & Accessibility):** 성능을 최적화하기 위해 Base Web은 **Styletron**을 활용하여 **Atomic CSS**를 생성합니다 [9]. 이를 통해 애플리케이션이 최소한의 CSS 콘텐츠만 다운로드하도록 하여, 네트워크 연결이 열악한 모바일 환경에서도 빠르게 렌더링될 수 있도록 설계되었습니다 [9]. 또한, 키보드 내비게이션 및 스크린 리더 호환성 등 철저한 접근성(A11y) 표준을 내장하고 있습니다 [9, 10].
- **신뢰성 보장 (Reliability):** 픽셀 단위의 완벽한 레이아웃을 보장하기 위해 매 커밋마다 시각적 회귀(visual regression) 서비스를 통해 스크리닝을 진행하며, Puppeteer를 이용한 E2E(End-to-End) 테스트로 버그를 사전에 차단합니다 [11].
- **디자인 시스템 관측 및 관리 (Design System Observability):** Uber는 확장하는 컴포넌트를 체계적으로 관리하기 위해 'Base Counter'라는 도구를 활용합니다 [12, 13]. 이는 뷰 트리(view tree)를 순회하며 개발자가 일회성 커스텀 컴포넌트 대신 표준 Base 컴포넌트를 얼마나 잘 채택하고 있는지 결정론적(deterministic)으로 시각화하고 측정하여 규모에 맞는 품질을 유지하도록 돕습니다 [13, 14].

## 🔗 Knowledge Connections
- **Related Topics:** [[Overrides Pattern]], [[React Component Library]], [[Design System]], [[Styletron]], [[Atomic CSS]]
- **Projects/Contexts:** [[Uber Internal Web Applications]], [[Modern Frontend Engineering]]
- **Contradictions/Notes:** 소스에 명시적인 모순점은 없으나, Base Web은 재사용성 확장을 위해 컴포넌트 작성자가 모든 엣지 케이스마다 새로운 prop을 노출하는 대신, 통합된 `overrides` API 하나로 하위 요소를 제어하게 함으로써 라이브러리의 비대화를 성공적으로 방지했음이 주요 아키텍처적 특징으로 강조됩니다 [4, 6].

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