디자인 시스템 : 프로세스와 레퍼런스 (1)

 

디자인 시스템 3요소 

스타일 가이드  : 컬러, 폰트, 아이콘과 같은 디자인을 설명하는 가이드 
패턴 라이브러리 : 컨퍼넌트를 활용한 패턴 등을 모아놓는 집합
시스템 가이드 : 디자인 시스템을 관리를 위한 업무 가이드

 

시스템 가이드 상세 정의 내용

1. Goal
2. People : 담당부서/담당자, 수정자/검토자, 접근권한이 있는 이해관계자
3. Channal : 이슈 및 파일을 공유할 채널 
4. Share : 변경된 사안을 모두가 숙지하도록 고민 

https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969

Everything you need to know about Design Systems

https://uigstudio.com/insights/pattern-library-vs-style-guide-vs-design-system

Pattern Library vs Style Guide vs Design System

 

디자인 시스템 구축 프로세스 단계 

1. Goal : 디자인 구축 목적과 목표 수립
2. Research : 사례 조사 및 검색 
3. Structure : 디자인 구조 설계 
4. Value : 디자인 및 서비스 핵심 가치 정의
5. Key screen : 주요 화면 디자인 분석 
6. Components : 주요 컨퍼넌트 분류 (구조~키스크린까지 스타일 가이드 잡아나가는 포인트)
7. Style Guide : 기초 디자인 시스템 가이드 수립
8. Pattern Library : 스타일 가이드 토대로 컨퍼넌트 정의 (많이 사용되고 있는 모달, 회원가입 폼 등은 패턴으로 구분함)
9. System Guide : 총 정리 및 공유 

 

Q. 꼭 이 순서대로 진행해야되나요?

익숙해진다면 순서는 상관이 없지만, 처음이고 잘 모를때는 순서대로 진행해보는 것이 도움이 된다. 

 

Q. 디자인 시스템은 언제 만들어야될까?

대부분 회사에서는 핵심 3~4 페이지를 만들어 대략적인 컨셉과 디자인을 만든 상태에서 디자인 시스템을 만들어서 개발자에 공유한다.

 

---

 

Gogoel marterial Design

내가 생각했을때 구글 머테리얼 디자인에서 중점으로 봐야할 부분을 아래에 정리해보았다. 
더 세분화되어서 보고 싶다면 아래 링크로 눌러서 보아도 된다. 

https://material.io/design

Material Design

 

Google marterial design > Color > Text leibility > Text background

텍스트의 위계질서(중요도)에 따라서 세 단계로 나눠서 투명도값을 조절하여 사용할 수 있다. 

Default : #000000 
High Emphasis : op 87%
Medium Emphasis : op 60%
Disable : op38%

Google marterial design > Color > Text leibility > Helper Text

Default : #000000 
High Emphasis : op 87%
Helper text : op 60%
Error text : op 100% (중요한 내용이기 때문에)

Google marterial design > Color > Text leibility > Icons and Other symbols

Default : #000000
Active : op 87%
Inactive : op 60%
Disable : op 38%

Google marterial design > Typography > The type system * 

타이포그래피 종류를 외워두면 좋다. 사용하기 편리하도록.
꼭 이 종류대로 하지 않아도 되지만 기본적으로 쓰임이 그러하다. 

Headline 1, 2, 3, 4, 5, 6
Subtitle 1, 2
Body 1, 2
Button
caption
overline

Google marterial design 컨퍼넌트 종류 

Display : 컨퍼넌트 요소가 놓이거나 조합되는 것 (카드, 시트, 리스트)
Navigation : 사용자 서비스를 이용하는데 페이지 간 도와주는 컨퍼넌트(네비게이션 드로워, 탭)
Action : 사용자가 서비스를 이용할 수 있게 유도하거나 조작을 돕는 것 (버튼)
Input : 유저가 데이터를 입력하거나 선택을 할 수 있게 하는 것 (텍스트필드, 칩, 컨트롤)
Communication : 중요한 알림을 사용자에게 알려줄때 사용함 (스낵바, 배너)

 

Apple  HIG > Interface Essentials

https://developer.apple.com/design/human-interface-guidelines/

Human Interface Guidelines - Design - Apple Developer

 

---

 

디자인 시스템 예시 사이트

https://bi.spoqa.com/

Spoqa Design Guidelines

https://atlassian.design/

Atlassian Design System

https://www.carbondesignsystem.com/

Carbon Design System

https://spectrum.adobe.com/

Spectrum, Adobe’s design system

https://ridi.design/

RIDI Design System

https://www.microsoft.com/design/fluent/#/

Microsoft Design