[UX디자인 아티클] 스케치에서 디자인 시스템 만들기 1

3월 31, 2021

강력한 디자인 시스템을 구축하기 위해 준비해야 할 기초적인 내용이다.

스케치에서 프로젝트를 훨씬 빠르게 진행할 수 있도록 강력하고 다양한 디자인 시스템 / UI 스타터 키트의 기반을 구축하는 방법을 보여주고자 한다.

다시는 빈 아트보드를 쳐다보며 프로젝트를 시작하지 말기를 바란다.

무엇보다 먼저 강력한 색상 팔레트를 구축하라.

Cabana 및 모든 시스템에서 가능한 한 기본 색상을 최소로 유지해야 한다(Primary, Secondary 및 Tertiary). 물론 Tint와 Shade로 기본 색상을 확장할 수 있지만 가능하면 기본 옵션을 최소로 유지하라.

멋진 타이포 및 색상 선택만으로 아름다운 사이트나 앱을 만들 수 있으며 더 넓은 범위의 tint나 shade를 사용하면 더욱 풍부한 느낌을 전달할 수 있다.

그리고 Black 및 white 옵션과 몇 가지 회색을 추가하는 것을 잊지 말아라.

성공, 경고 및 오류 알림, 배지 및 텍스트 필드 테두리에 대해 필수적인 Red, Green 및 Yellow의 기본 색상도(더 많은 기능을 원할 경우 다양한 Tint와 Shade를 포함하여) 포함해야 한다.

그리고 여러 가지 용도를 위한 브랜드 컬러를 만들어 놓아라.

많은 프로젝트에서 여러 가지 브랜드 컬러에 대한 색상 팔레트가 필요할 수도 있다. 처음에는 필요 없을 수도 있지만 기본 색상 팔레트와 같이 색상을 설정하는 시간을 절약할 수 있다.

그러데이션도 있으면 좋다.

그러데이션이 기본 시스템의 필수 요소는 아니지만 추가해 놓으면 프로젝트에서 필요할 때 편하게 사용할 수 있다. 그러데이션을 추가했을 경우 왼쪽에서 오른쪽, 위에서 아래 옵션을 모두 제공하는 것이 좋다.

타이포그래피 스타일은 다양하게 적용하되, 폰트 종류는 2가지 이하로 하라.

디자인 시스템을 만들 때 2가지 폰트 패밀리 룰을 고수하되, 정렬, 색상, 사이즈 옵션은 폰트마다 가능한 한 다양하게 적용하라.

내 시스템의 경우, 폰트 패밀리도 풍부하고 서로를 잘 보완해 주는 Inter와 Oxygen 폰트를 선택하였다. 폰트 옵션은 프로젝트를 진행하며 추가할 수도 있으므로 기본 옵션으로 폰트를 정교하게 세팅할 필요는 없다.

Uber 및 Hero와 같은 큰 디스플레이 스타일과 모듈러 스케일링, Body 텍스트 크기를 18pt로 설정하고 비율을 1.2배로 한 H1부터 H5까지의 일반적인 옵션들을 제작하였다.

본문은 가독성을 높이고 눈의 피로를 줄이기 위해 18pt로 설정하였다. 특히 긴 형식의 콘텐츠의 Body 스타일을 사용할 때 더욱 적절하다.

Headings 및 Body 스타일뿐만 아니라 Lead, Small, Caption, X-Small 및 Tiny 스타일을 추가하였다. 후자의 스타일은 모바일 용 디자인을 만들 때 아주 적합하며 데스크톱 또는 모바일 용 스타일을 쉽고 다양하게 선택할 수 있게 해 준다.

각 스타일 (Uber, Hero, H1, H2, Body 등…)에 대해 Regular 및 Bold를 모두 만들었다. Regular 대신 Light를 적용하려면 먼저 시스템을 검토해 보아야 한다. 모든 글꼴 패밀리가 여러 가지 두께와 스타일을 가지고 있지 않아서 글꼴 패밀리를 교체할 때 Light가 적용되어 있으면 Sketch에서 일일이 수정을 해야 하므로, 일반적인 Regular와 Bold로 적용하는 것이 좋다.

두 번째 폰트 패밀리로서 Oxygen 글꼴에 대해 이 프로세스를 반복하고 두 가지 폰트 패밀리에 왼쪽, 가운데 및 오른쪽 정렬에 대한 텍스트 스타일도 생성하였다.

두 폰트 패밀리(Inter & Oxygen) Black 버전의 모든 스타일을 만든 후, 각각의 폰트 패밀리에 여러 가지 색상을 적용한 버전을 제작하였다.