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

📌 한 줄 통찰 (The Karpathy Summary)

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

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

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

Design-System, Atomic-Styling-and-Design-Systems, Web-Accessibility, Reusable-UI-Components, Scalable-UI-Systems
Raw Source: 00_Raw/Base Web.md