brunch

You can make anything
by writing

C.S.Lewis

by 이재구 Jan 25. 2022

디자인 토큰과 디자인 시스템

디자인 토큰을 활용한 디자인 시스템 제작 프로세스

디자인 시스템을 만든다는 것은 일관성 있고 효율적인 작업을 하겠다는 팀의 약속입니다. 약속의 종류는 다양해서 디자인 시스템은 팀 상황에 따라 스타일 가이드 형태로 정리하기도 하고, 프레이머를 활용해 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 구조를 만들 수 있습니다. 이번 글에서는 토큰 시스템 프로세스를 가볍게 정리했는데요. 다음에는 토큰 구성에 대한 구체적인 내용을 정리할 예정입니다.

매거진의 이전글 글로 디자인하는 UX/UI
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari