Design System #3 - 비주얼랭귀지 구축하기

 

오늘은 Visual Language를 어떠한 기준으로 분류하여

만들어야하는지 알아볼 것이다.

 

본 포스팅은 InVision에서 무료로 제공하는 핸드북을

번역하여, 내가 이해한대로 디자인시스템의 중요 포인트와 핵심만을 담았다.

 

---

 

🤔 Creating A Visual Design Language

이제 본격적으로 Visual Attributes에 해당하는 Visual Design Language를 제작해볼 것이다.

기본적으로는 다음과 같은 요소가 포함된다.

 

1. Color

2. typography (size, leading, typeface, ...)

3. Spacing (margins, paddings, positioning coordinates, border spacing, ...)

4. Images (icons, illustrations)

+) Visual Form (depth, elevations, shadows, rounded corner, texture, ...)

+) Motion

+) Sound

 

---

* 디자인토큰이란?

나중에 더 많은 내용을 다루겠지만 디자인토큰에 대해 간단히 짚고 넘어가려 한다. 디자인토큰이란 디자인시스템 완성에 있어서 제일 작은 기초 요소다. 예를 들어 버튼은 디자인토큰보다 더 큰 요소이다. 디자인토큰이란 버튼을 구성하는 폰트 및 박스이다.

 

🖍 Color

흔히 컬러는 단순히 브랜드를 표현하는 것이라고 생각하는데 그렇지 않다. 컬러는 훨씬 다양한 기능으로 작동한다.

 

1. Feedback : 사용자 행동에 따른 에러 및 성공 결과 표시

2. Information : 차트, 그래프, 길안내

3. Hierarchy : 구조화된 순서, 위계를 직관적으로 표현

 

그래서 보통은 1~3 Primary Colors로 만드는데 Extra Colors가 들어가기도 한다. (버튼 등에). 또 background color와 Line Color도 선정할 수 있다. 내가 만든 컬러 팔레트를 최대한 유지하고 싶다면 그 안에서 베리에이션을 주는 것이 좋다. 예를 들면 기본 옐로우 색깔에 흰끼를 섞거나 블랙을 섞는 것이다. 혹은 오렌지를 섞을 수도 있다.

⭐️ 컬러에 Creative Freedom을 줄 지, Tighter Consistency를 줄 지는 나의 아이디어에 따라 고려해볼 사항이다

 

- Creative Freedom (Google)

- Tighter Consistency (Toss)

📄 Typography

폰트는 항상 폰트 종류와 굵기에 따라 구분해야 하며, San Serif나 Serif를 상황에 따라 다르게 사용하는 경우도 있다. 항상 중요한 것은 가독성!! 16픽셀이 기본이며, 가장 읽기 편안한 크기라고 한다. (특히 웹)

⭐️ Line Spacing < 1.5배 < Paragraph Spacing

⭐️ Line Height : 기본적으로 폰트 사이즈의 1.4-1.5X 이다.

 

📦 Spacing & Sizing

패턴과 비율을 이용하여 리듬감과 밸런스를 유지하는 것이 중요하다.

⭐️ 4-based (16,24,32)가 가장 베스트이다.

⭐️ 브라우저 폰트 사이즈는 디폴트값 16px

⭐️ 가로 사이즈는 8based scale을 권장한다. (12 column)

 

💬 Iconography

아이콘은 네 가지 기준으로 분류할 수 있다. 이 기준으로 아이콘을 구분하여 디자인시스템을 구축하자.

1. Outline OR be filled?

2. Line weight?

3. More than 1 color?

4. Size?

 

🤔 Visual Form

비주얼폼은 말 그대로 비주얼적인 요소로 작동하는 컴포넌트(?)를 말한다.

1. Background Image

2. Gradients

3. Textures

4. Shadows

5. Rounded corners

6. Borders

 

---

벌써 다음 포스팅이 마지막 포스팅이 될 것 같다...

하지만 내가 다룬 것은 정말 기초 중의 기초인 것 같다.

디자인시스템은 전 포스팅에서도 언급했지만,

유지와 보수, 그리고 진전이 무조건 필요한 부분이다.

 

나처럼 디자인시스템을 한 번도 만들어보지

않았거나, 이제 막 개인 프로젝트로

만들어보려고 한다면, 어차피 지속적으로

발전시켜나가야 할 부분이기 때문에

무작정 시작하는 걸 추천한다.

 

다음 포스팅에서는 User Interface Library에

대해 알아보고 마무리할 것이다.

 

그럼 뿅!