서론: 디자인 시스템 = UX 패턴 + 스타일 + 컴포넌트
•
디자인 시스템: UX 가이드라인, 디자인 철학, 규칙등을 담고 있는 전체적인 문서
•
스타일 가이드: 시각적 요소의 톤과 매너, 규칙을 담고 있는 비주얼 가이드
•
컴포넌트 라이브러리: 만들어져있는 UI 요소 (버튼, 배너, 모달 등)를 저장해둔 저장소
디자인 시스템이 디자인 구조에 대한 규칙과 추상적인 디자인적 언어를 포함하고 있다면, 스타일 가이드나 컴포넌트 라이브러리는 실질적으로 사용되는 시각적 요소에 집중되어있다.
스타일 가이드에 포함되는 요소:•
Color
•
Typography
•
Icon
•
Layout
컴포넌트 라이브러리에 포함되는 요소:•
Button
•
Alert
•
Banner
•
Modal
예시
스타일 가이드 도입 방식
설계 가이드
스타일 가이드 설계 순서
디자인 토큰
디자인 토큰이란?
디자인 토큰 계층화
적용 방식
다크 모드 적용 방식
디자인 토큰 협업 툴