디자인 시스템이란?
디자인 시스템이란, 디지털 프로덕트의 디자인 및 앱이나 웹사이트와 같은 제품의 개발을 돕기 위해 일관된 디자인 원칙과 이를 이용한 패턴, 공유 방식의 집합이다.
디자인 시스템은 시각적 요소, 비시각적 요소를 모두 포괄하는 가이드입니다.그 안에 스타일 가이드, 패턴 라이브러리가 있는데요
스타일 가이드(Style Guide)는 시각적인 내용 중심의 가이드이고 패턴 라이브러리(Pattern Library)는 시각적인 것 외에도 자주 사용되는 디자인 요소들을 모두 포함한 집합체이자 저장소입니다.
디자인 시스템은 디자인의 일관성을 유지하는 데 도움이 되고- 재활용 가능한 컴퍼넌트(component) 사용을 통해 작업 시간을 단축시킬 수 있으며- 이해관계자인 다른 직무의 사람들이나 팀들과 함께 협업할 수 있게 해주고 디자인의 의사결정을 도울 수 있습니다.
또한, 개발에 필요한 리소스를 줄이고 개발 과정에서 유지보수하는 데 도움을 주고, 디자이너 개인과 조직, 프로덕트의 지속적 성장에도 도움을 줍니다.
디자인 시스템은 이걸 보면서 공부하면 도움이 됩니다! 잘 설명되어있는 아티클들이에요.
https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
Everything you need to know about Design Systems
→ Pour la version en Français, c’est par ici
uxdesign.cc
https://uigstudio.com/insights/pattern-library-vs-style-guide-vs-design-system
Pattern Library vs Style Guide vs Design System
Get to know the differences between design system, style guide and pattern libraries, so you can choose the best option!
uigstudio.com
디자인 시스템은 디지털 프로덕트의 디자인 및 앱, 웹사이트 서비스(service=product) 개발을 돕기 위해 만들어진 일관된 디자인 원칙입니다. 사용자 중심으로 브랜드 가치를 담아낸 서비스 속의 디자인 패턴이라고 볼 수 있을 것 같습니다. 디자인 시스템은 시각적인 것뿐만 아니라 비시각적 요소를 모두 포함하는 (ex. 사용자의 서비스 경험 프로세스 등) 가이드인데, 그 중 시각적인 내용을 정립한 가이드가 스타일가이드입니다.
디자인 시스템의 점 선 면은 앱, 웹 서비스의 요소들을 구분하는 범주인데 면이 가장 큰 각각의 페이지라면, 선은 그 안의 부분집합으로서 페이지 속의 버튼/네비게이션/이미지이고, 점은 그 안의 가장 작은 부분집합으로서 각 components (uiux 디자인에서 디자인적 구성요소들)를 이루는 컬러, 타이포그래피, 이미지 등이 있습니다. 그래서 디자인 시스템의 실용적 장점 중 하나는 에셋화, 심볼화 기능을 사용해서 버튼 클릭 한 번으로 수백 수천 장에 뿌려져있는 버튼의 디자인을 한 번에 바꿀 수 있다는 점입니다. 그리고 디자인 시스템을 통해 코워커들과 커뮤니케이션을 원활히 할 수 있습니다.
조금 더 명확히 정리해보자면, 디자인 시스템 안에는 Style Guide, Pattern Library, System Guide 가 있고,
1. 스타일 가이드는 디자인 원칙을 정의하는 것입니다.
스타일가이드에서는 컬러, 타이포그래피, 아이콘과 같은 components들 그리고 각 shape들을 정의하는 Design Foundation을 잡습니다. 이러한 원칙을 기반으로 각 요소를 구성하고 그로 인해 매력적인 서비스 결과물이 나오는 겁니다.
그렇기 때문에 이 원칙을 정의할 때에는 사용자 중심으로 유저를 위한 서비스 경험을 고안하고 브랜드의 핵심 가치를 담아내어 브랜딩도 정확히 해야 합니다.
2. 패턴 라이브러리는 각 components와 이를 활용한 패턴을 모아놓은 집합 저장소입니다.
앱바, 버튼, 카드, 리스트 등의 user interface 상에 존재하는 모든 요소들을 패턴으로 확립하여 코워커들과 공유할 수 있도록 합니다.
3. 시스템 가이드는 디자인 시스템을 관리하는 데 필요한 업무적 가이드를 부르는 말입니다.
디자인 시스템의 목적, 이해관계자, 업데이트 및 공유 방법 등을 포함합니다. 서비스나 조직의 문제와 목적을 명확하게 하기 위해 시스템 가이드를 만드는 것인데 그 목적 Goal 아래에는 (1) 사람들 People (2) 채널 Channel (3) 공유 Share의 범주가 있습니다. 사람들은 채널을 통해 디자인 시스템을 잘 공유해야 합니다.
이제 디자인 시스템 구축 프로세스를 알아볼까요?
1. Goal: 디자인 구축의 목적과 목표 수립
ex. 회의 시간 1시간 단축/ 컴퍼넌트 확립/ 일관성 있는 ui 디자인/ 브랜딩 강화 등
2. Research: 다양한 디자인 시스템 사례 조사 및 수집
-> 구글의 머테리얼 디자인 가이드나 애플의 휴먼 인터페이스 가이드 등 다양한 디자인 시스템들이 존재하니 사례들을 살펴보고 조직
의 형태라든가 만들고자하는 디자인 시스템 목적에 맞는 틀을 벤치마킹하기
3. Structure: 전반적인 디자인 시스템 구조 설계
-> 디자인 시스템을 만드는 이해관계자들을 나열하고, 그것을 공유하는 채널이라든가 공유 프로세스를 디테일하지 않아도 좋으니 간략하게라도 적는 것을 추천함. 스타일 가이드나 패턴 라이브러리에 대략적이라도 큰 그림을 잡아두는 것을 추천함.
4. Value: 핵심 가치 또는 디자인 원칙 수립
= 디자인 시스템을 만드는 데 있어서 중요시여겨야되는 것을 정해두는 구간
그래서 키스크린, 컴퍼넌트를 뽑아내고 스타일가이드를 만들고 패턴라이브러리를 정하는 등 의사결정의 원칙을 세울 수 있음.
브랜드나 프로덕트, 디자인팀의 주요한 핵심 가치를 적음.
5. Key Screen: 핵심 화면 디자인 및 분석
= 디자인 시스템을 컴퍼넌트로 잘 정리하기 직전의 단계
우리 주요 화면이 어떻게 이루어져있고 어떤 요소들이 반복적으로 사용되고 있는지를 살펴보고 분석하는 단계
6. Components: 주요 컴포넌트 분류
가령, 가장 많이 쓰는 앱바나 버튼, 배너, 바텀시트 등 키 화면에 있었던 컴퍼넌트들을 하나하나 라이브러리에 올려놓는 것.
이런 기본적인 컴포넌트들이 스타일가이드나 패턴라이브러리를 만드는 데 중심축이 되어줄 것임.
이때 키 화면에 있는 모든 컴퍼넌트들을 웬만하면 한번씩은 만들어보기
전 단계에서 키 화면 분석을 통해 다양한 패턴, 공통적 컴퍼넌트가 어떤 게 있는지 살펴봤을 텐데 이제 이런 컴퍼넌트들을 하나하나 라이브러리에 저장하는 과정.
7. Style Guide: 디자인 시스템의 기초 가이드 수립
주요 컴퍼넌트들의 이름을 정하고 정의를 세우고 대표적 사례를 정리하고 어떤 변수에 따라 바뀌는 모습은 없는지를 정하고 전반적인 수치값, 크기라든가 컴포넌트들 사이에 공간은 얼마나 되는지를 남기면서 차근차근 스타일 가이드를 만들어나가는 단계.
8. Pattern Library: 위 가이드를 통해 컴퍼넌트 정리
컴퍼넌트들의 반복된 패턴이 발견된다면 회원가입 폼, 모달, 바텀시트 안에 들어가는 요소들 등을 잘 정리해서 따로 구분지어두기.
9. System Guide: 원활한 운영을 위한 내용 정리
원활한 운영을 위한 내용 정리. 총정리하고 팀원들과 공유하는 것
이 글은 클래스 101의 아래 UI UX 강의를 듣고 관련 책을 두어 권 읽으며 제가 혼자 노션에 정리해본 것들이에요.
추가적으로 이야기해 주실 게 있다면 댓글 남겨주세요~ 그리고 디자인 시스템이나 ui ux 디자인에 대한 기초 지식이 없는 분들은 클래스 101 아래 강의에서 배울 수 있는 게 많을 거에요! 제가 그랬거든요. 그래서 개인적으로 추천드립니다! (광고 아니고 그냥 개인적 추천입니다)
