[디자인부트캠프] Chapter 8. 디자인 시스템 구조

1. 디자인 시스템 필수 개념

디자인과 개발에 사용되는 일관된 컴포넌트, 가이드라인, 디자인 가치를 포괄하는 체계적인 구조

➡ 레고 블록을 조합하여 어떤 집이든 자동차든 만들 수 있는 세트처럼, 레고 블록(컴포넌트)을 조립해서 디자인 시스템의 요소들을 조합해서 다양한 화면을 만들 수 있다.

2. 디자인 시스템의 구조

 

✅ Foundations

디자인의 기본 언어. 브랜드 정체성과 감성을 결정짓는 요소들.

 

✅ Components

기초 요소를 조합해 만들어진 재사용 가능한 UI 단위

 

✅ Patterns

여러 컴포넌트를 조합해 만든 사용자 흐름 중심의 디자인 (UX 문제 해결을 위한 구조화된 설계 방식, 사용자 흐름에 맞는 구성의 모범 사례 제공)

 

✅ Templates

전체 페이지나 섹션의 구조. 보통 제품의 UX흐름을 시각적으로 구성할 때 사용.

 

✅ Style Guidelines

Foundation을 중심으로 전체 스타일을 설명하는 문서 (계층 외부에 있는 "설명서" 역할)

 

구조를 어떻게 쓸지 알려주는 가이드라인 문서 - 사용자의 입장, 브랜드 성격, 접근성, UX원칙을 포함한 제품 고유의 모양과 느낌을 총괄 / 같은 시각적 요소와 제품 전반에 걸친 콘텐츠 디자인의 표준 사례 등이 포함됨 / 디자인 시스템의 일부로써 제품에 사용하는 시각적 언어의 표준을 정의하는 문서 ➡ 디자이너와 개발자에게 유용