A Comprehensive guide to design-system(정리글)

👊0👊·2020년 5월 17일

디자인시스템

디자인시스템 조사

목록 보기

2/4

https://www.invisionapp.com/inside-design/guide-to-design-systems/ 글을 정리했습니다.

요약

디자인 시스템이 무엇이고, 어떻게 구축했는지 설명하고 기업들의 예시를 살펴보는 글
디자인 시스템은 반복 가능한 컴포넌트들의 모음을 구성하고 사용을 안내하는 표준 집합을 활용하여 팀 내에서 생성과 혁신의 속도를 올려준다.
많은 조직들이 디자인 시스템을 가지고 있다고 착가한다. 실제로는 대부분 단순한 엘레먼트와 코드조각들에 불과하다.
스타일 가이드와 패턴 라이브러리는 디자인 시스템의 출발점이지, 모든 것이 아니다.
패턴 라이브러리는 무한한 방식으로 앱이나 웹을 만들 수 있는 레고박스와 같지만, 실제 제품은 재사용 가능한 UI집합 그 이상의 의미를 갖는다.
디자인 시스템은 의미와 구조를 모두 가지고 있어야 한다. 차이점은 에셋과 제공되는 표준 및 문서에 있다.
컴포넌트를 사용하는 이유와 방법에 대한 안내서를 제공하여 사용하기 쉽고 명확하게 식별될 수 있는 컴포넌트를 제작하라.
디자인 시스템 구축단계
1. 시각적 검사 : 현재 디자인을 제품에 상관없이 검사.
1. 비주얼 디자인 언어 만들기 : 디자인 언어는 디자인 시스템의 핵심. 모든 컴포넌트들은 디자인 언어로 이야기되어야 한다.
  - 색상
    - 타이포그래피
    - 크기 및 간격
2. ui/패턴 라이브러리 제작 : 현재 제품이나 제작 중인 ui의 모든 부분(버튼, 모달, 카드 등)을 모두 수집하세요.
3. 각 컴포넌트가 무엇이고 언제 사용하는지 기록하세요.

본문

에어 비앤비, 우버, 아이비엠고 ㅏ같은 회사들은 고유한 디자인 시스템을 통합하여 디지털 제품을 디자인하는 방식으로 변경했다. 반복 가능한 구성 요소 모음과 해당 구성 요소의 사용을 안내하는 표준 집합을 활용하여 각 회사는 팀 내에서 생성과 혁신의 속도를 향상시킬 수 있었다.

많은 조직들이 디자인 시스템을 갖추고 있다고 생각하지만, 실제로는 단순한 엘레먼트와 코드 조각들에 불과하다. 스타일 가이드 또는 패턴 라이브러리는 디자인 시스템의 출발점이 될 수 있지만, 이것들이 유일한 구성요소는 아니다. 이 글에선, 디자인 시스템의 기본 사항을 파고, 조직에서 이를 구축하고 구현하는 방법을 계획하고, 디자인 시스템을 사용하여 성공을 이끄는 여러 조직들의 예를 살펴보려한다.

“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.” —Chris Messina, tech evangelist and former developer experience lead at Uber

디자인 시스템의 중요성

디자인 시스템이란 무엇인가?

디자인 시스템은 재사용 가능한 컴포넌트들의 모음이다. 명확한 기준으로 안내되어야 되고, 앱들을 만들 때, 컴포넌트들의 조합으로 쉽게 조립할 수 있게 도와준다.

디자인 시스템은 스타일 가이드나 패턴 라이브러리와 무엇이 다른가?

디자인 시스템은 디지털 제품을 만들기 위해서 사용되는 에셋이나 컴포넌트의 모음이 아니다. 인터콤의 emmet connolly에 따르면, 대부분 디자인 시스템은 정말로 단지 패턴 라이브러리에 불과하다.라고 한다.
패턴 라이브러리는 거의 무한한 방식으로 조립할 수 있는 레고가 들어있는 상자와 같다. 모든 조각이 일관성을 가지고 있지만, 이 조립 된 결과가 전부는 아니다. 제품은 재사용 가능한 UI 요소 이상의 의미를 갖기 때문이다.
제품은 구조와 의미를 가지고 있습니다. 단순한 웹 페이지가 아닙니다. 콘셉 시스템의 구현(the embodiment of a system of concepts)입니다.

디자인 시스템의 배경에 대한 이유뿐만 아니라 그 이유를 이해하는 것은 탁월한 사용자 경험을 만드는데 중효합니다. 표준을 정의하고 준사하는 것은 그러한 이해를 만드는 방법입니다.

간단히 말하자면, 차이점은 에셋(자산)과 함께 제공되는 표준 및 문서에 있습니다. 컴포넌트를 사용하는 이유와 방법에 대한 안내서와 함께 사용하기 쉽고 명확하게 식별될 수 있는 컴포넌트를 설계하세요.

디자인 시스템 구축

디자인 시스템 구축의 주요 단계와 이점은 무엇입니까?

1. 시각적 검사를 수행

디자인 시스템을 구축하는 첫 번째 단계는 웹,웹 사이트 또는 기타 디지털 제품의 디자인에 상관없이 현재 디자인을 시각적으로 검사하는 것입니다.
사용중인 css와 요소의 시각적 품질을 조사하면 이 프로세스가 얼마나 많은 작업을 수행해야하는지를 측정할 수 있습니다.

2. 비주얼 디자인 언어 만들기

비주얼 디자인 언어는 디자인 시스템의 핵심입니다. 식별 가능한 컴포넌트는 디지털 제품을 구성할 때 사용할 수 있게해준다. 시각적 디자인 언어는 네 가지 주요 범주로 구성되며 화면의 모든 컴포넌트에서 이러한 각 디자인 요소의 역할을 고려해야합니다.

색상 디자인 시스템
일반적인 색상에는 브랜드를 나타내는 1-3개의 기본 색상이 포함됩니다. 디자이너에게 더 많은 옵션을 제공하기 위해 다양한 색를 포함할 수 있습니다.
타이포그래피
대부분 디자인 시스템의 2개의 글꼴만 있습니다. 제목과 본문을 위한 글꼴 1, 코드를 위한 모노스페이스 폰트 1. 단순하게 하세요. 폰트 수를 적게 유지하세요.
크기 조정 및 간격
간격 및 크기 조정에 사용하는 시스템은 리듬과 균형이 있을 때 가장 잘 보입니다. 4기반 스케일은 ios및 android 표준, ico 크기 형식 및 표준 브라우저 글꼴 크기에서 사용되므로 권장되는 스케일로 인기가 높아지고 있습니다.

3. ui/패턴 라이브러리 만드릭

이미 수행한 시각적 검사(디자인 요소의 시각적 품질을 살표본)와 달리 이 프로세스에서는 ui의 실제 구성 요소를 살펴 봅니다. 현재 제작중인 ui 모든 부분을 수집하세요. 이는 모든 버튼, 형태, 모달 및 이미지를 의미합니다. 필요없는 것을 병합하고 제거하세요.

4. 각 컴포넌트가 무엇이고 언제 사용하는지 기록하세요.

이 단계는 중요합니다. 문서와 표준은 패턴 라이브러리를 실제 디자인 시스템과 분리시킵니다.

👊0👊

ㅎㅎ

이전 포스트

원자 디자인 이해하기: 분자와 유기체 (정리글)

다음 포스트

A Comprehensive guide to design-system(정리글)

디자인시스템 조사

요약

본문

디자인 시스템의 중요성

디자인 시스템이란 무엇인가?

디자인 시스템은 스타일 가이드나 패턴 라이브러리와 무엇이 다른가?

언제, 어느 정도까지 디자인 시스템을 만들어야 하는가?

인터콤 블로그의 풀 스택 디자인 시스템

스매싱 매거진의 단순한 워크플로우가 아닌, 결과를 판다.

Dropbox : Design Systems’ Role in the Evolution of Enterprise User Experience