# Component-Driven Design

> 재사용 가능한 컴포넌트를 중심으로 UI를 구축하는 방법론입니다.

- 층: 아카이브 (UI 패턴)
- ID: component-driven
- 연도: 2010s
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/component-driven

## 정의

재사용 가능한 컴포넌트를 중심으로 UI를 구축하는 방법론입니다.

## 주요 특징

- 독립적인 컴포넌트
- 재사용 가능한 모듈
- 스토리북 활용
- 단일 책임 원칙
- 테스트 용이성

## 핵심 원칙

- 모듈화
- 독립성
- 재사용성

## 컬러 시스템

컴포넌트 단위 color scope. 전역 token + 컴포넌트 local token 분리

### 색상 역할

- global-token: 전체 시스템 색상 기반
- component-token: 컴포넌트별 local color 재정의 가능

### 색상 제약

- 컴포넌트 외부 색이 내부 스타일에 직접 침투하면 안 됨 (CSS scoping)
- global token 없이 컴포넌트 내부에서 직접 HEX 사용 금지

### 다크모드 전략

CSS custom property 레이어로 테마 전환 — 컴포넌트가 token만 참조하면 자동 적용

### 대비 요구사항

컴포넌트 단위 대비 검증 도구 권장

## 타이포그래피

- 폰트 성격: 컴포넌트별 typography scope 가능. 전역 스케일 + 컴포넌트 오버라이드
- 권장 폰트 수: 최대 2개
- 타입 스케일: 전역 type scale 정의 후 컴포넌트가 참조

### 타이포그래피 제약

- 타이포도 token으로 관리
- 컴포넌트 외부에서 내부 텍스트 직접 스타일링 금지

## 설계 제약

### 하면 안 되는 것

- 전역 CSS로 컴포넌트 내부 스타일 강제 변경 금지
- props 없이 컴포넌트 외관 분기 금지 — variant prop 사용

### 반드시 포함할 것

- 명확한 컴포넌트 API (props, variant, size)
- Storybook 등 컴포넌트 문서화

### 모션 가이드

모션도 컴포넌트 props로 제어 가능하게 (animated?: boolean). 전역 모션 override 금지.

## 사용 사례

- React·Vue·Angular 프로젝트
- 디자인 시스템 구축
- 스토리북 기반 개발
- 팀 기반 프론트엔드 개발

## 추천 프로젝트 유형

- React·Vue 기반 웹앱
- 디자인 시스템 팀
- 스토리북 기반 개발
- 대규모 프론트엔드

## 장단점

### 장점

- 개발 생산성 대폭 향상
- 버그 격리 및 유지보수 용이
- 독립 컴포넌트 단위 테스트 가능
- Storybook으로 문서화 자동화

### 단점·한계

- 컴포넌트 수 증가로 관리 복잡도 상승
- props drilling 문제 발생 가능
- 과도한 추상화 위험

## 자주 묻는 질문

### Q1. Component-Driven Design이란 무엇인가요?

재사용 가능한 컴포넌트를 중심으로 UI를 구축하는 방법론입니다.

### Q2. Component-Driven Design의 핵심 디자인 원칙은 무엇인가요?

Component-Driven Design의 핵심 원칙은 모듈화, 독립성, 재사용성입니다.

### Q3. Component-Driven Design은 어떤 프로젝트에 적합한가요?

Component-Driven Design은 React·Vue·Angular 프로젝트, 디자인 시스템 구축, 스토리북 기반 개발, 팀 기반 프론트엔드 개발, React·Vue 기반 웹앱, 디자인 시스템 팀, 스토리북 기반 개발, 대규모 프론트엔드 등의 프로젝트에 적합합니다.

### Q4. Component-Driven Design의 장단점은 무엇인가요?

장점으로는 개발 생산성 대폭 향상, 버그 격리 및 유지보수 용이, 독립 컴포넌트 단위 테스트 가능, Storybook으로 문서화 자동화이 있습니다. 단점으로는 컴포넌트 수 증가로 관리 복잡도 상승, props drilling 문제 발생 가능, 과도한 추상화 위험이 있습니다.

### Q5. Component-Driven Design에서 색상은 어떻게 사용하나요?

컴포넌트 단위 color scope. 전역 token + 컴포넌트 local token 분리 색상 역할은 global-token: 전체 시스템 색상 기반, component-token: 컴포넌트별 local color 재정의 가능입니다. 주의사항: 컴포넌트 외부 색이 내부 스타일에 직접 침투하면 안 됨 (CSS scoping), global token 없이 컴포넌트 내부에서 직접 HEX 사용 금지.

### Q6. Component-Driven Design에 어울리는 폰트 스타일은 무엇인가요?

Component-Driven Design에는 컴포넌트별 typography scope 가능. 전역 스케일 + 컴포넌트 오버라이드 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 타이포도 token으로 관리, 컴포넌트 외부에서 내부 텍스트 직접 스타일링 금지.

### Q7. Component-Driven Design 디자인에서 하면 안 되는 것은 무엇인가요?

Component-Driven Design에서 피해야 할 것: 전역 CSS로 컴포넌트 내부 스타일 강제 변경 금지, props 없이 컴포넌트 외관 분기 금지 — variant prop 사용.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #FF4785
- secondary: #1EA7FD
- accent: #37D5D3
- background: #FAFBFC
- surface: #FFFFFF
- text: #2E3438
- textSecondary: #73828C
- border: #D9E8F2

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 12px / full 9999px
- shadow sm: 0 1px 4px rgba(0,0,0,0.08)
- shadow md: 0 4px 14px rgba(0,0,0,0.10)
- shadow lg: 0 8px 28px rgba(0,0,0,0.12)
- border: 1px solid #D9E8F2

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus glow
- badge: pill / solid
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section normal
- animation: 200ms ease-out

## 관련 링크

### 관련 스타일

- [Atomic Design](https://ui.buildersgate.com/styles/atomic-design)
- [Card-Based Design](https://ui.buildersgate.com/styles/card-design)
- [Mobile First](https://ui.buildersgate.com/styles/mobile-first)

---

HTML 버전: https://ui.buildersgate.com/styles/component-driven

이 문서는 https://ui.buildersgate.com/styles/component-driven.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.