Component-Driven Design
재사용 가능한 컴포넌트를 중심으로 UI를 구축하는 방법론입니다.
- YEAR
- 2010s
#FF4785
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Independent Components
독립적으로 작동하는 재사용 가능한 컴포넌트
Component A
독립적으로 작동합니다
Component B
다른 컴포넌트에 독립적
Component C
재사용 가능한 모듈
Reusable Button Variants
하나의 컴포넌트, 다양한 변형
Composable Cards
조합 가능한 카드 컴포넌트
Image Card
이미지 + 텍스트
User Card
@username
아바타 + 정보
Simple Card
텍스트만 포함
Props-Based Configuration
Props로 제어되는 컴포넌트
<Alert variant="info" title="Information" />Component Library
컴포넌트 라이브러리 형태로 관리
Components
- • Button
- • Input
- • Card
- • Alert
- • Modal
Button
Default
Disabled
Single Responsibility
각 컴포넌트는 하나의 역할만 수행
Display
데이터 표시만
Logic
로직 처리만
Control
상태 관리만
이웃 스타일
어디에 쓰나
사용 사례
- React·Vue·Angular 프로젝트
- 디자인 시스템 구축
- 스토리북 기반 개발
- 팀 기반 프론트엔드 개발
이런 프로젝트에 맞습니다
- React·Vue 기반 웹앱
- 디자인 시스템 팀
- 스토리북 기반 개발
- 대규모 프론트엔드
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 모듈화
- 독립성
- 재사용성
주요 특징
- 독립적인 컴포넌트
- 재사용 가능한 모듈
- 스토리북 활용
- 단일 책임 원칙
- 테스트 용이성
장점과 한계
장점
- 개발 생산성 대폭 향상
- 버그 격리 및 유지보수 용이
- 독립 컴포넌트 단위 테스트 가능
- Storybook으로 문서화 자동화
한계
- 컴포넌트 수 증가로 관리 복잡도 상승
- props drilling 문제 발생 가능
- 과도한 추상화 위험
컬러 시스템
컴포넌트 단위 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으로 관리
- 컴포넌트 외부에서 내부 텍스트 직접 스타일링 금지
설계 제약
반드시 포함
- 명확한 컴포넌트 API (props, variant, size)
- Storybook 등 컴포넌트 문서화
하지 말 것
- 전역 CSS로 컴포넌트 내부 스타일 강제 변경 금지
- props 없이 컴포넌트 외관 분기 금지 — variant prop 사용
모션 — 모션도 컴포넌트 props로 제어 가능하게 (animated?: boolean). 전역 모션 override 금지.
자주 묻는 질문
Component-Driven Design이란 무엇인가요?
재사용 가능한 컴포넌트를 중심으로 UI를 구축하는 방법론입니다.
Component-Driven Design의 핵심 디자인 원칙은 무엇인가요?
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 사용.