Antigravity Agent
4.2 KiB
4.2 KiB
Uber의 Base Web 등 다양한 내부 앱 관리를 위한 디자인 시스템 도입
📌 Brief Summary
Uber는 수백 개의 내부 웹 애플리케이션을 일관되게 관리하고 엔지니어들이 UI 컴포넌트를 중복 개발하는 것을 방지하기 위해 'Base Web'이라는 React 기반의 디자인 시스템을 도입했습니다 [1, 2]. 이 시스템은 접근성, 신뢰성, 그리고 고도의 커스터마이징을 지원하며, 특히 'Overrides API' 패턴을 통해 다양한 내부 앱의 요구사항을 유연하게 충족시킵니다 [3, 4]. 더불어 Uber는 대규모 조직에서 디자인 시스템의 일관성을 유지하기 위해 AI를 활용한 스펙 자동화(uSpec) 시스템과 컴포넌트 채택률을 직접 측정하는 관측 시스템(Design System Observability)을 구축하여 확장 가능한 프론트엔드 생태계를 완성했습니다 [5-7].
📖 Core Content
- Base Web의 도입 배경과 목적: Uber 내에는 개발자, 프로덕트 매니저, 운영팀 등 거의 모든 직원이 사용하는 수백 개의 내부 웹 앱이 존재하며, 각기 다르게 작동하는 앱들은 직원들의 학습 부담과 개발 리소스 낭비를 초래했습니다 [1]. 이를 해결하기 위해 엔지니어와 디자이너 간의 공통 언어 역할을 하는 Base Web 디자인 시스템을 구축 및 오픈소스화하여, 일관되고 접근성 높은 웹 애플리케이션을 빠르게 만들 수 있는 기반을 마련했습니다 [2, 3].
- 고도의 커스터마이징을 위한 Overrides 패턴: 다양한 내부 앱의 요구를 수용하기 위해 Base Web은 **'Overrides API'**를 도입했습니다 [4, 8]. 이 패턴은 컴포넌트 내부의 특정 하위 요소(예: Root, Option 등)를 식별자로 지정하여, 개발자가 최상위 prop을 과도하게 늘리지 않고도 스타일을 변경하거나, 추가 속성을 전달하거나, 컴포넌트 자체를 완전히 교체할 수 있게 해줍니다 [4, 9]. 이는 복잡한 컴포넌트에서 발생하는 'prop soup(과도한 prop의 남용)' 문제를 획기적으로 방지합니다 [10].
- 성능 및 접근성 최적화: Base Web은 시각적 회귀 테스트와 Puppeteer를 통한 E2E 테스트로 UI의 신뢰성을 보장합니다 [11]. 또한 모바일 환경이나 불안정한 네트워크에서도 앱이 빠르게 다운로드될 수 있도록 Styletron을 활용한 원자적(atomic) 스타일링을 적용했으며, 스크린 리더와 키보드 탐색을 위한 접근성을 기본적으로 지원합니다 [12].
- 대규모 디자인 시스템 관리 및 자동화:
- Design System Observability: Uber는 Base UI 컴포넌트의 실제 도입률을 측정하기 위해 뷰 트리를 순회하는 '결정론적 카운터(Deterministic Counter)'를 개발했습니다 [6, 13, 14]. 커스텀 컴포넌트 대신 표준 Base 컴포넌트를 재사용하도록 유도한 결과, 개발 속도는 3배 빨라지고, 시각적 불일치 문제는 4배 감소했으며, 코드량은 50% 줄어드는 효과를 확인했습니다 [15].
- 스펙 문서 자동화 (uSpec): 7개의 프론트엔드 구현 스택 환경에서 컴포넌트 스펙 문서화가 지연되는 문제를 해결하기 위해, AI 에이전트와 Figma Console MCP를 연결한 uSpec 시스템을 구축했습니다 [5, 16]. 이를 통해 디자인 토큰과 구조를 자동으로 읽어들여 단 몇 분 만에 Figma 내에 직접 문서(접근성 속성, API, 크기 구조 등)를 렌더링합니다 [17-20].
🔗 Knowledge Connections
- Related Topics: Overrides Pattern, Atomic Styling (Styletron), Design System Observability, React Component Library, Design Tokens
- Projects/Contexts: Uber Base Web, uSpec, Uber Rider App
- Contradictions/Notes: 재사용 가능한 UI 컴포넌트의 유연성을 확보하기 위해 수많은 prop을 무분별하게 추가하는 전통적인 방식 대신, Uber는 Overrides 패턴을 통해 'prop soup' 현상을 방지하면서도 내부 요소에 대한 완전한 제어권을 소비자(개발자)에게 제공하는 구조를 채택했습니다 [4, 10].
Last updated: 2026-04-26