# Component-Driven Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: component-driven
- **카테고리**: ui-pattern
- **연도**: 2010s

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

## 핵심 원칙
- 모듈화
- 독립성
- 재사용성

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

## 사용 사례
- 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

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=component-driven
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=component-driven&merged=true
← 홈으로 돌아가기

Component-Driven Design

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

연도

2010s

#FF4785

핵심 원칙

1

모듈화

2

독립성

3

재사용성

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 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" />
Information
variant="info"
Success
variant="success"
Error
variant="error"

Component Library

컴포넌트 라이브러리 형태로 관리

Component Library

Components

  • • Button
  • • Input
  • • Card
  • • Alert
  • • Modal
COMPONENT

Button

Default

Disabled

Single Responsibility

각 컴포넌트는 하나의 역할만 수행

🎨

Display

데이터 표시만

⚡

Logic

로직 처리만

🔧

Control

상태 관리만

관련 스타일 탐색

Atomic Design

화학의 원자 개념을 차용하여 UI를 5단계로 구조화하는 방법론입니다.

Card-Based Design

정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.

Mobile First

모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.