Antigravity Agent
f541717fe1
Processed 80+ files including Skybound playtest feedback, Monorepo strategies, and Modern Component Patterns.
4.4 KiB
4.4 KiB
Component-Based Design
📌 Brief Summary
컴포넌트 기반 디자인(Component-Based Design)은 사용자 인터페이스를 재사용 가능하고 이식성이 뛰어나며 예측 가능한 모듈식 구성 요소로 구축하는 아키텍처 접근 방식입니다 [1, 2]. 이는 거대한 단일 컴포넌트를 구성하는 방식에서 벗어나, 조합(Composition)을 통해 레이아웃과 동작을 조립함으로써 '프롭 드릴링(prop drilling)'과 숨겨진 결합도를 줄입니다 [3-5]. 단일 책임 원칙과 명시적인 API 계약을 준수함으로써, 변화하는 요구사항에 유연하게 적응하고 확장할 수 있는 확장성 높은 UI 시스템을 구축하는 데 핵심적인 역할을 합니다 [6-8].
📖 Core Content
- 원자적 설계(Atomic Design) 계층 구조: 사용자 인터페이스는 더 이상 분해할 수 없는 기본 요소인 원자(Atoms), 이들이 모인 분자(Molecules), 더 복잡한 유기체(Organisms), 구조를 정의하는 템플릿(Templates), 그리고 실제 콘텐츠가 채워지는 페이지(Pages)의 5단계로 체계화하여 설계할 수 있습니다 [9-12].
- 재사용성을 위한 핵심 원칙: 훌륭한 재사용 가능 컴포넌트는 단일 책임(Single Responsibility) 원칙을 따르고, 상속보다는 조합(Composition)을 우선하며, 명확한 API 계약을 가져야 합니다 [8]. 내부 상태를 최소화하여 예측 가능성을 높이고, 접근성(Accessibility)을 기본적으로 내장해야 합니다 [8, 13].
- 프롭(Prop) 기반에서 조합(Composition) 기반 API로의 전환: 모든 구성 옵션을 프롭으로 전달하는 방식은 컴포넌트를 변경하기 어려운 '블랙 박스'로 만들며 기하급수적인 복잡성을 초래합니다 [14-16]. 대신, 책임을 분산시켜 사용자가 필요에 따라 하위 요소를 조립하게 하는 조합 기반 접근 방식이 대규모 UI 확장에 유리합니다 [3, 5].
- 확장 가능한 컴포넌트 패턴:
- 복합 컴포넌트(Compound Components): React 컨텍스트를 활용하여 탭(Tabs)이나 아코디언(Accordion)과 같은 여러 컴포넌트가 암시적으로 상태를 공유하는 패턴으로, 프롭 비대화 없이 높은 레이아웃 조립 유연성을 제공합니다 [4, 16-18].
- 헤드리스 컴포넌트(Headless Components): 복잡한 상태 관리와 논리만 캡슐화하고 UI 마크업과 스타일링은 온전히 소비자에게 위임하여, 특정 디자인 시스템에 구애받지 않는 유연성을 제공합니다 [16, 19, 20].
- 렌더 프롭(Render Props): 렌더링 함수를 자식이나 프롭으로 전달하여 논리를 공유하는 기법으로, 사용자에게 렌더링 결과에 대한 완전한 제어권을 줍니다 [16, 20, 21].
- 오버라이드 패턴(Overrides Pattern): 컴포넌트 내부의 하위 요소에 대한 식별자를 노출하여, 매번 새로운 프롭을 추가할 필요 없이 특정 내부 요소의 스타일이나 하위 컴포넌트를 깊게 커스터마이징할 수 있게 합니다 [16, 22, 23].
- 디자인 토큰(Design Tokens) 바인딩: 컴포넌트는 하드코딩된 리터럴 값(예:
#dc2222)을 피하고 디자인 토큰(예:color.error)을 참조하여 바인딩해야 합니다 [24, 25]. 이를 통해 간격, 색상, 타이포그래피 등의 디자인 요소가 변경될 때 시스템 전체에 일관된 업데이트가 자동으로 반영됩니다 [24].
🔗 Knowledge Connections
- Related Topics: Atomic Design, Compound Components, Headless Components, Design Tokens, Feature-Sliced Design
- Projects/Contexts: Uber Base Web, Shopify Polaris, Radix UI
- Contradictions/Notes: 원자적 설계(Atomic Design)는 시각적 일관성을 유지하는 데 효과적이지만, 복잡한 비즈니스 로직을 포함하는 컴포넌트를 엄격한 범주에 억지로 맞출 때 구조적 한계에 부딪힐 수 있으므로 실무에서는 기능(Feature) 기반 구조와 결합하여 사용하는 것이 권장됩니다 [26, 27]. 또한, 복합 컴포넌트 패턴은 소비자에게 막강한 유연성을 제공하지만, 너무 많은 자유를 허용하면 일관된 UI나 접근성이 훼손될 수 있으므로 디자인 시스템 차원에서 안전한 구성 경계(composition boundaries)를 문서화하는 것이 필수적입니다 [28, 29].
Last updated: 2026-04-26