---
id: FE-DS-BASEWEB-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [uber, baseweb, design-system, react, overrides-pattern, styletron, scalability, accessibility]
last_reinforced: 2026-04-26
---

# Uber Base Web Design System (우버 베이스 웹 디자인 시스템)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "수백 개의 내부 앱을 일관된 디자인 언어로 통합하고, '오버라이드(Overrides)' 패턴을 통해 컴포넌트의 유연성과 API의 간결함 사이의 모순을 해결하라" — 우버에서 개발한, 극도의 커스터마이징과 접근성을 보장하는 엔터프라이즈급 React UI 프레임워크.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Granular Override and Observability-driven Governance" — 컴포넌트 내부의 모든 하위 요소에 접근할 수 있는 고유한 오버라이드 인터페이스를 제공하고, 시스템의 채택률을 데이터로 측정하여 디자인 품질을 관리하는 패턴.
- **핵심 혁신 요소:**
    - **Overrides Pattern:** 'Prop Soup' 문제를 해결하기 위해 컴포넌트의 스타일과 구조를 하위 요소 단위로 정밀하게 조정할 수 있는 단일 prop 제공.
    - **Styletron Integration:** 런타임에 아토믹 CSS를 생성하여 성능을 최적화하고 스타일 충돌 방지.
    - **Design Observability:** 'Base Counter' 도구를 통해 실제 프로젝트에서의 컴포넌트 사용 비율을 측정하고 디자인 거버넌스 구현.
    - **Native Accessibility:** 키보드 내비게이션, 화면 판독기 호환성 및 ARIA 역할을 기본적으로 완벽 지원.
- **의의:** 대규모 조직에서 개발 속도를 3배 향상시키고 시각적 불일치를 4배 감소시키는 등, 엔지니어링 효율성과 디자인 일관성의 양립 가능성을 증명함.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거 UI 라이브러리는 모든 요구사항을 별도의 Prop으로 처리하려 했으나, Base Web 정책은 '오버라이드'라는 단일 통로를 통해 무한한 확장성을 제공하는 정책으로 전환함.
- **정책 변화:** Antigravity 프로젝트는 복잡한 SaaS 대시보드 구축 시 Base Web의 오버라이드 철학을 참고하며, 모든 디자인 시스템 컴포넌트에 대해 '사용자 정의 가능성(Customizability)' 점수를 매겨 관리함.

## 🔗 지식 연결 (Graph)
- [[Design-System|Design-System]], [[Atomic-Styling-and-Design-Systems|Atomic-Styling-and-Design-Systems]], Web-Accessibility, Reusable-UI-Components, Scalable-UI-Systems
- **Raw Source:** 00_Raw/Base Web.md