[디자인 기록 노트] 디자인 토큰과 디자인 시스템

디자인 시스템을 만든다는 것은 일관성 있고 효율적인 작업을 하겠다는 팀의 약속입니다. 약속의 종류는 다양해서 디자인 시스템은 팀 상황에 따라 스타일 가이드 형태로 정리하기도 하고, 프레이머를 활용해 HI-FI 프로토타이핑 단계까지 관리하기도 하며 다양한 방법으로 존재합니다. 최근에는 디자인 토큰을 적용해 디자인 시스템을 만드는 팀이 많아지고 있습니다.

저는 보통의 경우 디자인 시스템을 3단계로 구별합니다. 첫 단계는 ‘스타일 가이드‘ 단계입니다. 제품 Look&Feel을 맞추기 위해 활용하는 방법입니다. 두 번째는 UI 컴포넌트까지 구성된 ‘디자인 컴포넌트’ 단계입니다. 스타일뿐만 아니라, UI 형태 그리고 크게는 모션까지 정의된 단계입니다. 세 번째는 UI 개발 구조에 맞게 UI 스타일과 컴포넌트를 디자인 토큰을 활용해 제작하는 ‘디자인 토큰 시스템‘ 단계입니다.

Intro. 토큰 시스템 프로세스 “Step 4”

디자인 토큰은 2014년 ‘세일즈-포스 디자인 시스템‘부터 주목 받기 시작했습니다. 이 방식은 단순히 코드를 작성하고, 문서로 정리하는 방법이 아니라 UI를 구조적으로 바라보고 설계할 수 있는 디자인 프로세스입니다. 토큰을 활용한 디자인 프로세스는 크게 4단계입니다. 이번 글은 디자인 토큰 시스템 제작 프로세스를 라면을 만들고 끓이는 방법과 비교하며 설명하는 글입니다.

Step 1. 재료 준비 = UI 제작 준비물 list-up

첫 단계는 재료 준비 단계입니다. 라면 재료를 단순하게 나열해보면 ‘C18H27NO3-Powder’와 ‘Gluten-noodle’그리고 ‘H2O’ 세 가지 재료를 준비해야 합니다. UI 시스템 역시 이 단계에서는 텍스트 필드 혹은 버튼과 같은 UI 컴포넌트를 만들기 위한 폰트, 컬러 같은 UI 제작 재료를 준비합니다. 컬러는 ‘#038CFF’와 같이 Hex Code 형태로 존재합니다.

Step 2. 재료 손질 = UI 준비물 네이밍

두 번째 단계는 준비된 재료에 이름을 붙이는 단계입니다. ‘C18H27NO3-Powder’는 지금부터 ‘라면–수프-01′라고 이름을 정의했습니다. 그리고 ‘Gluten-noodle’은 ‘라면–면-01′이라고 부르며, ‘H2O’는 ‘라면–물-01′로 이름을 정의합니다. 마찬가지로 Hex Code, ‘#038CFF’은 ‘color-blue-01’로 이름을 붙일 수 있습니다. 즉, 날것의 재료를 조금 더 효율적으로 커뮤니케이션하고 관리할 수 있도록 다듬는 단계입니다.

Step 3. 재료 조합 = UI 컴포넌트 제작

세 번째는 다듬어진 재료를 조합해서 컴포넌트로 만드는 단계입니다. ‘라면_수프-01‘과 ‘라면_면-01‘, ‘라면_물-01‘을 한 번에 넣고 끓이면 한 형태의 음식이 완성되는데요. 음식 형태를 ‘끓인_라면–기본‘으로 정의했으며, 디자인 시스템에서는 이것을 컴포넌트라고 말합니다. ‘color-blue-01‘ 역시 ‘font-body-01′로 정의된 폰트 UI 재료와 합쳐진다면 텍스트 링크 버튼을 의미하는 ‘button_text_link‘ 컴포넌트가 됩니다.

Step 4. 음식 조리법 = UI 사용 가이드 제작

마지막은 모든 사람이 동일하게 맛을 낼 수 있도록 [‘라면_물-01’이 100°에서 끓기 시작하면 ‘라면_수프-01’과 ‘라면_면-01’을 넣고 3분 더 끓여주세요.]와 같은 ‘끓인_라면–기본 가이드‘를 작업하는 단계입니다. UI의 경우 ‘button_text_link’ 컴포넌트는 [링크가 연결된 텍스트의 경우 사용해주세요.]로 가이드를 만들 수 있고 이런 가이드를 ‘Usage guidelines‘이라고 부릅니다.

디자인 시스템은 팀과 제품 상황에 따라 가장 적절한 단계가 있습니다. 스타일 가이드만으로도 충분한 경우도 있으며, 스타일 가이드 이상이 필요한 상황도 있는데요. 디자인 토큰 적용이 과하다고 생각할 수 있는 상황에서도 디자인 토큰 개념을 가지고 있다면 조금 더 체계적인 UI 구조를 만들 수 있습니다. 이번 글에서는 토큰 시스템 프로세스를 가볍게 정리했는데요. 다음에는 토큰 구성에 대한 구체적인 내용을 정리할 예정입니다.