디자인 시스템의 정의

sususu ·2024년 9월 5일

디자인 가이드

목록 보기

3/5

디자인 시스템이란?

디자인의 의미가 넓은 의미로 '개선한다', '새롭게한다' 등으로 사용된다.
시스템의 의미는 그리스어 'systema'에서 유래된 것으로 '특정한 목적을 달성하기 위해 여러 가지 관련된 구성요소들이 상호작용하는 유기적 집합체'를 말한다.

디자인 + 시스템 = 컴포넌트와 패턴을 정의하여 새롭게 만들거나 개선하기 위한 조직화된 요소들의 집합체로 전체 디자인에 일관성있게 적용하도록 사용되는 UX/UI를 위한 가이드라인이나 규칙이라고 생각하면 된다.

디자인 시스템의 목적

사용자 측면에서의 디자인 시스템

: 일관적인 디자인을 경험하게 되면서 서비스를 이용하는 유저가 헷갈릴만한 요소를 배제시킴.

디자이너, 개발자 측면에서의 디자인 시스템

: 디자인 대신 기능에 집중하게 되어 개발이 수월하게 된다.
개발자 - 디자인이나 레이아웃에 신경쓰지 않고 로직에 더욱 집중할 수 있게 됨.
디자이너 - 작은 컴포넌트를 만들어 조합해 화면구성을 쉽게 할 수 있고, 디자인 변경이 있을 경우에도 라이브러리 업데이트로 쉽게 변경할 수 있다.

디자인 시스템의 구성요소

: 기초가 되는 파운데이션과 그것을 활용하여 만든 컴포넌트로 구성된다.

파운데이션(Foundation)

파운데이션이란 ?

: 가장 기초가 되는 엘리먼트로 구성품인 컴포넌트를 만들기 위해 사용하는 공통 재료
ex) 컬러,폰트,타이포그래피,이미지,레이아웃(간격,여백,곡률,그리드,고도) 등

컴포넌트(component) 또는 패턴(Pattern)

컴포넌트란?

: 파운데이션들이 모여서 UI 컴포넌트를 구성
ex) 버튼,오버레이,카드, 네비게이션,모달,드롭다운 등

## 아토믹 디자인 : 가장 작은 원자 단위부터 쪼개서 점점 분자, 유기체로 확장시키는 개념

디자인 토큰

"디자인 토큰은 디자인 시스템의 시각적 원자(atom)이며, 특히 시각적 디자인 속성을 저장하는 실제(entities)로 정의합니다. 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 하드 코딩된 값 대신 이 값(디자인 토큰)을 사용합니다"
by. Lightning Design System과 디자인 토큰을 만든 Jina

토근의 3단계구조

출처: krds 소개

Reference Token (참조 토큰)

: 서비스에 사용할 모든 컬러, 크기, 폰트 등 정적인 값들. 참조 토큰은 일관된 색상,유형 등을 위한 시작점을 제공한다.
: 디자인 언어의 기본 값으로 색상팔레트, 애니메이션,타이포그래피 등의 정적인 값으로 기록해야하며 사용 맥락에 구애받지 않는 이름으로 표현해야한다.
ex) primary-50