Colin's Blog
[design] Design System Handbook

Design System Handbook

Designing your design system

STEP BY STEP

원문 보기

시각적 인벤토리 만들기

비주얼 디자인 언어 만들기

디자인 시스템의 디자인 언어중 가장 기본적인 속성:

필요에 따라:

디자인 요소가 버튼과 같은 간단한 구성요소에서 수행하는 역할을 고려하라. 버튼에는 background-color, label을 위한 typography, 내부 간격이 있다. 혹은 가장자리에 있는 테두리에 단순 장식으로 사용되며 모서리를 둥글게 만들수도 있다. 마지막으로 마우스를 올려놓거나 클릭했을 때 애니메이션이나 사운드가 피드백으로 표시될 수 있다.

modifiers: primary, secondary, transparent, negative, white, disabled, with icons, social, small, small with icons, small social,

Design Token

비주얼 디자인 스탠다드를 논의하기 전 디자인 토큰에 대해 논의한다. 디자인 토큰은 시스템 구현의 아원자(subatomic) 토대입니다. 가장 간단하게는 이름과 값의 쌍으로 데이터로 저장되어 관리하려는 디자인 속성을 추상화 합니다. 모든 디자인 토큰에 대한 값을 단일 장소에 저장하면 일관성을 유지하면서 디자인 시스템 관리 부담을 줄이는것이 더 쉬워집니다.

디자인 토큰에는 색상, 간격, 크기, 애니메이션 지속 시간등을 저장하고 다양한 플랫폼에 배포할 수 있습니다.

Color

디자인 시스템을 위해 선택한 색상은 단순히 브랜드의 확장 그 이상이다. UI는 전달을 위해 색사을 사용한다:

디자인 시스템은 일반적으로 브랜드를 나타내는 1~3가지 기본 색상이 있다. 이들 중 어느것도 링크 및 버튼 색상으로 작동하지 않으면 그 색상에 대한 추가 색상이 있을수 있다. 사용자가 인터페이스 요소를 더 쉽게 인식할 수 있도록 링크 및 버튼 배경에 동일한 색상을 사용하는것이 좋다.

일반적인 UI 배경과 테두리에는 중립성이 있을 것이다 - 주로 회색을 사용한다. 마지막으로 오류, 경구 및 성공과 같은 상태에 대한 색상을 사용한다. 이 색상을 그룹화하여 함꼐 작동하고 필요한만큼 수정하는 방법이다.

색 이론의 짧은 역사 등 읽는것을 추천

더 큰 디자인 시스템에는 때로 오브젝트나 제품에 대한 색상이 포함된다. 예를들어 연락처, 판매 거리 또는 그룹 등을 구별하는 색상. 영업 클라우드, 마케팅 클라우드, 분석 클라우드 등 제품에 대한 색상 지원은 사용자가 제품을 이용하는데 유용한 나침반이 될 수 있다.

색맹인 사람들은 약간의 차이점을 식별하지 못하기 때문에 접근성을 유지하는것은 까다로울 수 있다.

색상 대비 검사기 를 통해 당신의 컬러 팔레트 작동을 보장하기 위해 사용할 수 있는 배경 및 텍스트 색상들의 명암비를 확인할 수 있다

얼마나 엄격하게 팔레트를 사용하고싶은지에 따라 다양한 색상(흰색 또는 검정색이 섞여 명암을 만든다)을 포함할 수 있다. 때로 노란색이나 검은색을 짙게 하여 갈색으로 보이지 않는 등 진흙색을 피하기 위해 흰색이나 검은 색 대신 다른색을 사용할 수 있다.

이러한 색상 변화는 디자이너가 선택할 수 있도록 해야한다. 그러나 너무 많은 선택을 하면 주요한 디자인 불일치가 발생할 수 있다. 디자이너에게 필요한 유연성을 제공하면서 시스템 오용을 방지하기 위해 색조, 음영 및 중립 팔레트를 포함하고 필요에 따라 항상 더 많은 색상을 추가할 수 있다

Typography

글꼴 및 무게 (Fonts and weights)

제품의 폰트는 브랜드와 사용자 환경 모두에 큰 영향을 미친다. Helvetica, Times New Roman 또는 Verdana와 같은 일반적인 시스템 글꼴을 유지하는 것은 사용자의 눈에 익숙하므로 매우 간단하다. 일부 회사는 브랜드를보다 잘 반영하기 위해 사용자 정의 웹 글꼴을 선호하지만 성능에 영향을 줄 수 있으므로 사용 방법에 특히주의해야한다.

필자가 작업 한 대부분의 디자인 시스템에는 머리글과 본문 복사본에 대한 글꼴 1 개와 코드 용 모노 스페이스 글꼴 2 개만 포함되어 있습니다. 때로는 본문 글꼴을 보완하는 제목에 대한 추가 글꼴이 있습니다. 대부분의 설계 시스템은 여러 브랜드를 지원하는 시스템이없는 한 더 많은 것을 필요로하지 않습니다. 활자체 디자인의 모범 사례 일뿐만 아니라 웹 글꼴의 과도한 사용으로 인한 성능 문제를 방지하기 때문에 숫자를 낮게 유지하는 것이 가장 좋습니다.

최근에는 매우 얇은 가중치로 글꼴을 사용하는 것이 유행이지만 가독성이 문제가 될 수 있음을 알고 있어야합니다. 가벼운 또는 얇은 가중치를 사용하려면 큰 텍스트 크기로만 사용하십시오.

서체 사이즈 (Type Scale)

폰트 사이즈를 선택할 때 글꼴의 가독성을 고려해야 한다. 대부분의 경우 16px 폰트 사이즈가 적합하다. 대부분의 브라우저에서 기본 글꼴 크기이므로 대부분의 사람들이 읽을 수 있다. 필자는 Apple과 Google이 사용하는 4기반 메트릭과 함께 작동하면서 16px를 사용하는것을 좋아한다(표준 접근 방식으로 인기를 얻고 있다). CSS 기반 시스템의 경우 1rem과 같은 상대적인 형식으로 사용한다.

heading과 같은 요소에 대해 더 크거나 작ㄱ은 글꼴 크기에 대해 모듈러 스케일을 사용할 수 있다. 모듈러 스케일은 1개의 기본 숫자와 다음 숫자를 생성하는 비율이 있는 숫자 집합이다. 비율을 새 번호로 적용하여 다른 번호를 얻는다

보다 의미있는 타이포그래피를 만들기 위해 모듈 스케일을 자세히 알아보라

타입을 설계할 때 가독성으 ㄹ유지하기 위해 다양한 화면에 어떻게 반응하는지 검토하라.

CSS 폴리 사이징이있는 Fluid 메소드입니다. Zell Liew의 Responsive Web Typography의 규칙은 알아야 할 기본 원칙과 시스템을 다룹니다.

Leading

leading 또는 CSS의 line-height는 타이포그래피의 가독성과 미학성을 향상시킬 수 있다. 가장 좋은 행 높이는 글꼴 및 문단 길이에 따라 달라질 수 있지만 일반적으로 글꼴 크기의 1.4~1.5배정도입니다. 1.5는 W3C 웹 접근성 이니셔티브 에서 권장한다

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

줄 간격 (줄 넘김)은 적어도 단락 내에서 공백 및 단락이고 단락 간격은 줄 간격보다 1.5 배 이상 큽니다.

또한 당신의 수는 더 예측가능해지지만 계산할 필요는 없다. 측정 단위 없이 line-height를 정의할 수 있으며 브라우저는 모든 어려운 계산을 수행한다

간격 및 사이징 (Spacing and Sizing)

간격과 크기 조정에 사용하는 시스템은 리듬과 균형이 있을 때 가장 잘 보인다. 즉, 패턴과 비율에 따라 숫자를 사용하는것이다. 일관된 간격 척도를 사용하면 레이아웃을 보다 예측 가능하고 잘 맞추고 잘 정렬함으로써 비율을 통환 유지 관리 가능성을 높일 수 있다.

안드로이드 앱 디자인할 때 Google의 디자인 가이드 라인을 공부했다. 요소들 사이에 8dp를 사용하는 패턴과 바깥 쪽 거터에 16dp를 사용하는 패턴을 발견했다. 내가 익숙했던 10기반 척도를 사용하지 못했고 4기반이 훨씬 효과적인것을 발견했다.

4기반 스케일은 여러 이유로 권장되고 널리 사용되고 있다. iOS, Android모두 4로 나눌 수 있는 측정 항목을 사용하고 추천하고 있다. 아이콘에 대한 표준 ICO 크기 형식 은 4 기반 (16, 24, 32 등) 이므로 더 쉽게 확장된다. 브라우저의 기본 글꼴 크기는 대개 16이다. 모든것이 시스템을 사용할 때 제자리에 잘 정렬될 가능성이 크다. 그리고 마지막으로 반응형 수학은 잘 풀린다.

수평 간격의 경우 8기준 스케일이 잘 작동한다. 여백과 여백을 글꼴 크기와 같거나 비례하도록 설정할 수 있다. 그러나 수직 간격의 경우 12기반 시스템을 사용하는 경향이 있다. 이는 line-height를 1.5로 설정해 24를 사용했기 때문이다.(기본 글꼴 크기가 16px인 경우)

때로는 이 규칙을 어겨야할 수도 있다. 1px 테두리를 어디에 추가한 경우 이 경계선이 정렬되지 않을 수 있다. 그래서 패딩이나 마진으로 그 값을 뺄 수 있다. 이것은 케이스에 따라 다르게 수행된다

콘텐츠로 요소를 늘이고 줄이기 원할것이다. 일반적인 사이징의 경우, 꼭 필요한 경우가 아니면 폭과 높이를 설정하지 말아야한다. 레이아웃에서 주어진 공간을 채우기 위해 요소가 흐르도록 하면 반응형 디자인을 훨씬 쉽게 구현할 수 있다.

이미지

파일 형식

아이콘과 일러스트레이션의 경우 벡터 형식(SVG)을 사용하면 확장성과 반응성이 뛰어난 디자인에 적합하다. 그러나 사진을 사용해야 할 경우는 JPG, PNG와 같은 래스터화 된 이미지 형식을 사용해야할 수도 있다.

대부분의 사진, 일러스트레이션 및 다이어그램의 경우 이미지를 컨테이너 또는 뷰포트에 100%로 설정하고 높이는 자동으로 설정되도록 사용한다. 너비가 전체 너비(예를들어: half-width, 1/3 또는 1/4)가 되는것을 원하지 않는 경우 이미지에 미리 설정된 너비를 정의할 수도 있다. 이미지를 작은 화면에 맞게 크기를 조정하도록 max-width로 설정하는것이 좋다

Icongroaphy

아이콘을 그리기 전에 먼저 가이드라인을 떠올려라. 그들은 채워지거나 윤곽을 그릴까? 라인의 두께는 몇인가? 1컬러 이상으로 사용할 것인가? 어떤 사이즈로 사용될것인가? 가장자리 경계 안에 아이콘이 잘 들어가 있는가?

그 외 원근감, 획 및 색상과 같은 스타일 지침을 설명할 수 있다.

아이콘 스타일에 따라 여러 스타일을 사용할 수 있다.

Illustrations

일러스트레이션은 제품에 개성을 부여하는 좋은 방법이다. 빈 상태, 화면 로드, 모달 및 기타 시각적 관심을 불러일으키는 구성 요소에 이 값을 사용할 수 있다.

Visual form

시각적 양식 또는 UI의 재질은 배경 이미지, 그라디언트 및 텍스처, 그림자 및 입면도(z-index), 둥근 모서리 및 테두리와 관련되어있다. 시각적 계층과 미학을 추가하기 위해 요소를 강조하고 장식하는데 도움이되는 시각적 특성이다. 어떤 경우이든 모두 표즌화해야하는 장식품의 예이다.

z-index와 그림자를 통해 구현된 입체감을 보여준다.

대체

Motion and sound

시각적 언어를 정의하면 동작 및 사운드가 마음에들지 않을 수 있다. 모션 및 사운드는 앱의 경험에 큰 영향을 줄 수 있다. 일관성을 위해 시스템화되어야 한다.

Creating a user interface library

비주얼 인벤토리를 수행하기 전, 색상, 간격 및 타이포그라피와 같은 요소의 시각적 특성을 살펴보았다. 이제 우리는 실제 UI와 유사한 버튼, 카드, 목록, 양식 등을 보는 UI 인벤토리를 수행할것이다. 시각적 언어가 시각적 접근 방식에 관한 것이고 전체적인 시각적 수준에서의 상황을 파악하는 사용자 인터페이스 라이브러리(패턴 라이브러리라고도 함)는 UI의 실제 구성요소를 살펴본다.

디자인 요소와 디자인 시스템에서 수행할 역할에 대해 살펴본다. 프로덕션 환경의 모든 인터페이스 요소를 고려하여 디자인 부채를 해결해야하는지, 어떤 요소가 가장 일반적으로 사용되는지 확인하라. 대부분의 회사에는 UI에 모순이 심각하다

인터페이스 인벤토리를 만들려면 조직의 모든 포로덕션 제품을 열거나 스크린샷을 떠서 모든 버튼, 폼, 여러 서체 스타일, 이미지를 모아 슬라이드 데크 또는 전체 팀이 볼수 있는 큰 포스터에 수집하라

Visualizing desgin debt

경영진 또는 엔지니어가 디자인 시스템에 대한 필요성에 회의적인 경우 비주얼 인벤토리가 현재 제품의 디자인 부채를 해결할 수 있는 파워풀한 방법이라는것을 보여줘라

인쇄물을 자르거나 스크린샷을 통해 작업을 수행할 수 있다. 참여자를 모으고 그들에게 공유 프레젠테이션을 통해 실습 활동을 하고, 아래 아이디어는 사용중인 여러 구성요소를 모으고 분류하고 병합하는것이다

요소를 엘리먼트, 콤포넌트, regions, utilites 등으로 구분하는 아토믹 디자인은 훌륭한 컨셉화 모델의 한 예이다. 그러나 일이 모드 끝날 무렵 모든것이 하나의 구성요소이므로 같은 레이블로 지정할 수 있다. 일반적으로 대부분의 설계 시스템에서 볼 수 있는 것들은 다음과 같다.

인벤토리를 완료한 후에는 필요없는 것을 병합하고 제거할 수 있다. 또한 콤포넌트의 내용과 사용 예제를 문서화하라. 이것은 UI 라이브러리(패턴 라이브러리, 컴포넌트 라이브러리..)가 된다.

대부분의 디자인 시스템 설명서에는 구성요소의 이름, 설명, 예제 및 코드가 포함된다. 메타 데이터, 릴리즈 이력, 예제 등을 더 보여줄 수 있다. 가장 중요한것은 당신의 팀이 작업을 수행하는데 필요한것이 무엇인지 보여주는것이다.

결론

디자인 시스템을 구축하면 팀이 보다 일관된 사용자 경험을 생산할 수 있을뿐 아니라 디자인과 개발 사이에 다리가 생긴다. 디자인 토큰을 통해 코드화된 공통 시각언어와 UI 라이브러리에 카탈로그화된 콤포넌트 및 패턴 집합을 작성하면 디자이너/개발자간의 커뮤니케이션이 크게 향상된다. 또한 관리가 용이하고 확장 가능하며 강력한 방식으로 UI를 제어할 수 있다.

© 2018 Colin. All rights reserved.