# Component-Driven Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: component-driven
- **카테고리**: ui-pattern
- **연도**: 2010s
## 설명
재사용 가능한 컴포넌트를 중심으로 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 문제 발생 가능
- 과도한 추상화 위험
## 관련 스타일
- [atomic-design](https://ui.buildersgate.com/styles/atomic-design)
- [card-design](https://ui.buildersgate.com/styles/card-design)
- [mobile-first](https://ui.buildersgate.com/styles/mobile-first)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #FF4785
- secondary: #1EA7FD
- accent: #37D5D3
- background: #FAFBFC
- surface: #FFFFFF
- text: #2E3438
- textSecondary: #73828C
- border: #D9E8F2
### 헤더
- background: linear-gradient(135deg, #FF4785 0%, #c8276a 100%)
- textColor: #FFFFFF
- accentColor: #37D5D3
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 4px rgba(0,0,0,0.08)
- md: 0 4px 14px rgba(0,0,0,0.10)
- lg: 0 8px 28px rgba(0,0,0,0.12)
- xl: 0 20px 48px rgba(0,0,0,0.14)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #D9E8F2
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease-out
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=glow
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Component-Driven Design이란 무엇인가요?
A: 재사용 가능한 컴포넌트를 중심으로 UI를 구축하는 방법론입니다.
### Q: Component-Driven Design의 핵심 디자인 원칙은 무엇인가요?
A: Component-Driven Design의 핵심 원칙은 모듈화, 독립성, 재사용성입니다.
### Q: Component-Driven Design은 어떤 프로젝트에 적합한가요?
A: Component-Driven Design은 React·Vue·Angular 프로젝트, 디자인 시스템 구축, 스토리북 기반 개발, 팀 기반 프론트엔드 개발, React·Vue 기반 웹앱, 디자인 시스템 팀, 스토리북 기반 개발, 대규모 프론트엔드 등의 프로젝트에 적합합니다.
### Q: Component-Driven Design의 장단점은 무엇인가요?
A: 장점으로는 개발 생산성 대폭 향상, 버그 격리 및 유지보수 용이, 독립 컴포넌트 단위 테스트 가능, Storybook으로 문서화 자동화이 있습니다. 단점으로는 컴포넌트 수 증가로 관리 복잡도 상승, props drilling 문제 발생 가능, 과도한 추상화 위험이 있습니다.
### Q: Component-Driven Design에서 색상은 어떻게 사용하나요?
A: 컴포넌트 단위 color scope. 전역 token + 컴포넌트 local token 분리 색상 역할은 global-token: 전체 시스템 색상 기반, component-token: 컴포넌트별 local color 재정의 가능입니다. 주의사항: 컴포넌트 외부 색이 내부 스타일에 직접 침투하면 안 됨 (CSS scoping), global token 없이 컴포넌트 내부에서 직접 HEX 사용 금지.
### Q: Component-Driven Design에 어울리는 폰트 스타일은 무엇인가요?
A: Component-Driven Design에는 컴포넌트별 typography scope 가능. 전역 스케일 + 컴포넌트 오버라이드 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 타이포도 token으로 관리, 컴포넌트 외부에서 내부 텍스트 직접 스타일링 금지.
### Q: Component-Driven Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Component-Driven Design에서 피해야 할 것: 전역 CSS로 컴포넌트 내부 스타일 강제 변경 금지, props 없이 컴포넌트 외관 분기 금지 — variant prop 사용.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=component-driven
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=component-driven&merged=true
Component-Driven Design의 핵심 원칙은 모듈화, 독립성, 재사용성입니다.
Component-Driven Design은 어떤 프로젝트에 적합한가요?
Component-Driven Design은 React·Vue·Angular 프로젝트, 디자인 시스템 구축, 스토리북 기반 개발, 팀 기반 프론트엔드 개발, React·Vue 기반 웹앱, 디자인 시스템 팀, 스토리북 기반 개발, 대규모 프론트엔드 등의 프로젝트에 적합합니다.
Component-Driven Design의 장단점은 무엇인가요?
장점으로는 개발 생산성 대폭 향상, 버그 격리 및 유지보수 용이, 독립 컴포넌트 단위 테스트 가능, Storybook으로 문서화 자동화이 있습니다. 단점으로는 컴포넌트 수 증가로 관리 복잡도 상승, props drilling 문제 발생 가능, 과도한 추상화 위험이 있습니다.
Component-Driven Design에서 색상은 어떻게 사용하나요?
컴포넌트 단위 color scope. 전역 token + 컴포넌트 local token 분리 색상 역할은 global-token: 전체 시스템 색상 기반, component-token: 컴포넌트별 local color 재정의 가능입니다. 주의사항: 컴포넌트 외부 색이 내부 스타일에 직접 침투하면 안 됨 (CSS scoping), global token 없이 컴포넌트 내부에서 직접 HEX 사용 금지.
Component-Driven Design에 어울리는 폰트 스타일은 무엇인가요?
Component-Driven Design에는 컴포넌트별 typography scope 가능. 전역 스케일 + 컴포넌트 오버라이드 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 타이포도 token으로 관리, 컴포넌트 외부에서 내부 텍스트 직접 스타일링 금지.
Component-Driven Design 디자인에서 하면 안 되는 것은 무엇인가요?
Component-Driven Design에서 피해야 할 것: 전역 CSS로 컴포넌트 내부 스타일 강제 변경 금지, props 없이 컴포넌트 외관 분기 금지 — variant prop 사용.