# [[Uber]]

## 📌 Brief Summary
Uber는 수백 개의 내부 웹 애플리케이션과 모바일 앱 전반에 걸쳐 일관되고 확장 가능한 UI를 구축하기 위해 **Base Web**이라는 자체 React 컴포넌트 라이브러리 및 디자인 시스템을 구축한 기업입니다 [1, 2]. 대규모 컴포넌트 라이브러리를 효율적으로 관리하기 위해 'Overrides API' 아키텍처 패턴을 도입하여 무분별한 prop 증가 없이 높은 수준의 컴포넌트 맞춤화(Customization)를 달성했습니다 [3-5]. 또한 확장 가능한 프론트엔드 유지를 위해 'uSpec'이라는 AI 에이전트 시스템으로 디자인 스펙을 자동화하고, '디자인 시스템 관측성(Design System Observability)' 도구를 통해 사내 디자인 시스템의 채택률을 엔지니어링 지표 수준으로 관리하고 있습니다 [6-9].

## 📖 Core Content
*   **Base Web과 Overrides 패턴 (재사용 가능한 UI 아키텍처)**
    Uber의 Base Web은 접근성과 신뢰성을 갖춘 React 기반의 오픈소스 UI 컴포넌트 라이브러리로, 내부적으로 'Styletron'을 사용해 원자적(atomic) 스타일링을 적용합니다 [2, 10]. 다양한 애플리케이션의 복잡한 요구사항을 수용하기 위해 Uber는 **Overrides 패턴**을 도입했습니다 [3, 5]. 이 패턴은 컴포넌트 내부의 하위 요소(sub-element)에 식별자를 부여하고, 개발자가 최상위 수준에서 `overrides` 속성을 통해 하위 요소에 추가 속성을 전달하거나 스타일을 덮어쓰고 컴포넌트 전체를 교체할 수 있게 해줍니다 [4, 5, 11]. 이를 통해 'Prop Soup(무분별한 속성 과부하)' 현상을 방지하고, 유지보수가 용이한 확장성 있는 프론트엔드 환경을 구성했습니다 [4, 5].

*   **AI 기반 디자인 토큰 및 스펙 자동화 (uSpec)**
    Uber는 7개의 구현 스택과 수백 개의 컴포넌트를 다루는 과정에서 사양(spec) 문서화의 병목 현상을 해결하기 위해, Cursor AI 에이전트와 Figma Console MCP를 결합한 **uSpec**을 구축했습니다 [6, 12, 13]. 이 시스템은 Figma 파일에서 직접 디자인 토큰, 변수 구조, 컴포넌트 부모-자식 관계를 읽어와 해부도(Anatomy), 속성, 접근성(스크린 리더) 스펙 등을 단 몇 분 만에 자동 생성합니다 [8, 14, 15]. 이를 통해 디자인 의도(Design intent)와 엔지니어링 구현 사이의 간극을 줄였습니다 [16].

*   **디자인 시스템 관측성 (Design System Observability)**
    대규모 프론트엔드 환경에서 일관된 UI를 유지하기 위해, Uber는 코드 및 UI 수준에서 디자인 시스템 채택률을 정량적으로 측정하는 관측성(Observability) 시스템을 도입했습니다 [7]. 'Deterministics Counter'라는 알고리즘을 사용해 앱의 뷰 트리를 탐색하며 Base 컴포넌트와 비표준 커스텀 컴포넌트의 사용을 시각적으로 강조 및 집계합니다 [9, 17, 18]. Base 컴포넌트 사용 시 개발 속도가 3배 빠르고 코드를 50%나 줄일 수 있으며, 이러한 지표 자동화를 통해 디자인 품질 지표를 엔지니어링 및 비즈니스 성능 지표와 동등한 수준으로 끌어올렸습니다 [9, 19, 20].

## 🔗 Knowledge Connections
- **Related Topics:** [[Base Web]], [[Overrides Pattern]], [[Design System Observability]], [[Design Tokens]], [[React Component Architecture]]
- **Projects/Contexts:** [[uSpec (AI Agentic System for Design Specs)]], [[Uber Base Design System]]
- **Contradictions/Notes:** 소스에 Uber의 내부 기술 선택에 대한 명확한 모순은 나타나지 않으나, 컴포넌트의 확장성을 확보하는 방식으로 일반적인 수많은 prop을 추가하는 대신 'Overrides 패턴'을 채택한 점이 대규모 컴포넌트 라이브러리 아키텍처 설계에 있어 Uber만의 특징적인 해결책으로 강조됩니다 [3-5].

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