# Design System

## 1. 디자인 시스템이란?

* 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템
* 단순히 UI 키트라기 보다 디자인 원칙, 스타일 가이드, 컴포넌트, 패턴 그리고 디자인 및 개발 프로세스에 대한 지침까지 포함하는 포괄적인 개념

\


## 2. 디자인 시스템이 구축되어 있다면 개발자는

* 디자인 시스템에 포함된 디자인 토큰(JSON, YAML 등)을 통해 색상, 폰트, 간격 등의 스타일을 **일관되게 적용**
* CSS 전처리기나 CSS-in-JS 라이브러리(Styled-components, Emotion 등)를 사용해 **컴포넌트를 만들고 이를 디자인 시스템의 컴포넌트 라이브러리에 적용**
* 디자인 시스템에서 제공하는 컴포넌트 라이브러리를 활용하여 데스크톱 버전의 UI를 구현하고, CSS 미디어 쿼리를 사용해 **반응형 레이아웃을 적용**
* 디자인 시스템의 크로스 플랫폼 원칙을 참고하여 **플랫폼별 특성을 고려한 코드를 작성**
* 디자이너와 긴밀하게 협업하여, 디자인 시스템에서 정의된 가이드에 따라 일**관성 있는 사용자 경험을 제공하는 애플리케이션을 구현**

\


## 3. 디자인 시스템의 이점

* 팀 간의 원활한 협업 촉진
* 일관성 있는 사용자 경험 제공
* 효율적인 디자인 및 개발 과정
* 브랜드 인지도 강화
