Design System이란?

❓ Design System 이란?

• 재사용 가능한 UI 구성 요소의 모음
• 버튼과 같은 UI 요소와 텍스트 요소 및 디자인 파일에서 재사용될 요소를 정의할 수 있음
  • 미리 만들어놓고 하나씩 꺼내서 쓰는 시스템으로 이해하면 됨
    ex. apple 디자인 시스템

출처: https://www.figma.com/file/iW1vny8BTy7udPqjQukENG/SwiftUI-Input-Kit-(Community)?type=design&node-id=3-13&mode=design&t=KVprzS1iTu36syWk-0

❗️❗️ Design System을 사용하는 이유

• 디자인 시스템의 주요 이점 중 하나는 일관성!!
• 색상, 타이포그래피, 간격 및 기타 많은 항목이 명확하게 정의된 디자인 시스템이 있다면 디자인 파일 전체에 일관성이 보장되게 됨 → 일관성이 보장된다는 것은 브랜드를 가지게 된다는 뜻!
• 구축된 시스템은 디자인 & 개발의 워크플로우를 매우 쉽게 만듦 → 디자이너가 모듈(컴포넌트) 형태로 작업물을 만들면 이를 가지고 개발자가 컴포넌트 중심의 개발을 할 수 있게 되기 때문에

📁 Atomic Design System

출처: https://atomicdesign.bradfrost.com/chapter-2/

• 화학원료의 명칭을 따와서 원자, 분자 조직체, 템플릿, 페이지의 형태로 나오는 워크플로우를 이야기함
• 원자 → 분자 → 조직체 → 템플릿 → 페이지의 형태를 이루게 되는 구조를 뜻함
• 원자
  → 가장 작은 단위들을 먼저 원자의 형태로 구성을 함
  ex. Label, Input, Button
• 분자
  → 원자들이 모여서 하나의 기능을 할 수 있게 함
  ex. 검색기능

출처: https://atomicdesign.bradfrost.com/chapter-2/

• 조직체
  → 분자들이 모여서 하나의 조직체를 이루게 됨

출처: https://atomicdesign.bradfrost.com/chapter-2/

• 템플릿
  → 많이 사용될 것 같은 것들의 묶음
  ex. header, banner …

출처: https://atomicdesign.bradfrost.com/chapter-2/

• 페이지
  → 모든 것들이 합쳐 저서 페이지를 이루게 됨

디자인 시스템은 다양한 페이지와 채널을 걸쳐 공통의 언어와 시작적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞는 디자인을 관리하기 위한 표준의 집합 디자인 시스템은 결과물이 아닌, 결과물들의 집합으로 잘 만들어 놓은 디자인 시스템은 디자이너와 개발자들 간의 협업을 원활하게 하며, 일관된 규칙을 정의하며 회사의 브랜딩을 유지할 수 있음