스케치에서 디자인 시스템 만들기 1
강력한 디자인 시스템을 구축하기 위해 준비해야 할 기초적인 내용이다.
스케치에서 프로젝트를 훨씬 빠르게 진행할 수 있도록 강력하고 다양한 디자인 시스템 / 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 버전의 모든 스타일을 만든 후, 각각의 폰트 패밀리에 여러 가지 색상을 적용한 버전을 제작하였다.
처음에 설정한 기본 색상의 16진수 값을 복사하여 모두 적용하고, 다음 색상이 적용된 새 텍스트 스타일을 만들었다.
회색
세미 그레이
흰색
흰색 (불투명도 70%)
첫 번째 순위
두 번째 순위
세 번째 순위
녹색 (성공)
빨간색 (오류)
고도 및 그림자도 중요한 역할을 할 수 있다.
처음부터 좀 더 다양한 스타일을 만들기 위해 Light 및 Dark 디자인과 기본 및 보조 색상에 모두 적용할 수 있는 다양한 높이를 표현하는 그림자를 만들었다.
Sketch에서 빠르게 모양을 만들고 곧바로 다양한 그림자를 적용해 볼 수 있으면 Sketch Inspector에서 일일이 그림자를 만드는 데 걸리는 시간을 대폭 줄일 수 있다.
Color 및 Type과 같은 기본 요소를 설정하고 나면, Icon과 같은 요소를 만들고 견고한 디자인 시스템을 구축할 수 있는 Symbol, Nested Symbol 및 Components를 만들 수 있다. 이 시리즈의 후반부에서 이에 대해 다룰 예정이다.
색상, 타이포그래피 및 아이콘은 훌륭한 시스템에서 중요한 역할을 하며, 이후에 생성하는 다른 모든 구성 요소 또는 심벌은 이러한 요소를 바탕으로 한 형태로 제공할 것이므로 다른 것들을 만들기 전에 먼저 이러한 요소를 정확히 만들어 두는 것이 좋다.
김준범님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
