MZ세대에 대한 이야기부터 세상의 변화를 선도하는 디자인까지 디자인 뿐만 아니라 글로벌 IT 업계 전반의 트렌드를 살펴볼 수 있었다. 앞부분은 최근 1~2년 사이에 벌어지고 있는 다양한 현상들에 대해 다뤄서 대략적으로 미래를 상상해보게 해주었다. 기억에 남는 현상은 미국의 배달의 민족이라 불리는 '도어대시'가 팬데믹으로 엄청난 성장을 이루었지만 팬데믹이 끝난 후에도 계속 성장할 수 있을까라는 내용이다. 당장 나도 쿠팡이츠를 자주 사용하는데 배달료가 계속 올라서 코로나 이후에는 배달을 줄이게 되지 않을까 생각하다가도 이미 배달 시스템의 편리함에 습관이 되어버린 것 같아서 끊지 못할 것 같다는 생각이 들었다.
무엇보다 도움이 많이 되었던 내용은 'Chapter 3 프로세스와 시스템으로 디자인하기'였다. 현재 회사에서 2년째 디자인 시스템을 구축하고 있어서 마이크로소프트에서 디자인 시스템을 디자인했던 저자의 경험과 지식이 인사이트를 주었고 도움이 많이 되었다. 특히 디자인 원칙이나 디자인 토큰 개념에 대해서 정리가 되었다.
프로세스와 시스템으로 디자인하기
플레이북(사용 설명서)
종합적인 접근 및 프로세스에 관한 가이드를 담고 있다. 가령 디자인 시스템을 담당하는 팀이 있다면, 디자인 시스템 팀 플레이북을 만들어 이 팀이 어떠한 방식으로 작업을 진행하는지, 다른 프로덕트 팀과 어떻게 연계하는지, 그들이 사용하는 기술이나 프로그램에는 어떤 것들이 있는지를 설명한다.
디시전 트리(의사 결정 사다리)
특정 상황 속에서 결정을 내리는 데 도움을 준다. 플레이북 안에 포함되기도 하는데, 어떤 프로덕트가 사용하는 디자인 컴포넌트를 어떠한 테크 스텍을 통해 엔지니어링할지 고민될 때 결정을 내릴 수 있게 한다. 디시전 트리를 효과적으로 구축하기 위해선 다음과 같은 룰을 명심해야 한다.
•
솔루션까지 가는 단계가 멀지 않도록 해야 한다.
•
질문은 세 단계를 넘지 않도록 해야 한다.
•
예/아니오로 간결하게 결정이 나뉠수록 좋다.
•
추가 질문은 이전 질문보다 더 구체적이어야 한다.
•
솔루션과 함께 예시 디자인을 함께 수록해야 한다.
•
궁금증이 해결되지 않았을 때 어떤 액션을 취해야 하는지 명시해야 한다.
•
다양한 예시가 더 필요한 경우에는 디시전 트리보다 구체적 적용 예시(Dos&Don’ts)를 사용해야 한다.
구체적 적용 예시(Dos&Don’ts)는 컬렉션 모음집이다
디자인 룰을 적용했을 때 결과가 원래 목적과 다르게 나오는 경우도 종종 있다. 그 이유는 제시된 가이드와 룰이 충분히 구체적이지 못했기 때문일 수도, 그것을 사용하는 디자이너의 해석 때문일 수도 있다. 이 차이를 해결하기 위한 가장 확실한 방법은 구체적인 예시를 보여주는 것이다.
경험의 통합을 위한 테크놀로지 스택과 디자인 토큰 시스템
디자인 토큰이란
프로덕트가 구현되는 플랫폼이 웹, 네이티브 앱, 증강현실 등으로 서로 다르면 하나의 테크롤로지 스택이 모든 엔지니어링을 소화하지 못한다. 또 프로덕트마다 구현해야 하는 기능과 목적이 다르기에 백엔드 엔지니어링을 모두 일치시키는 것은 불가능하다. 그런 만큼 디자인 시스템 측면에서 사용자 경험의 일관성은 백엔드보다 프론트엔드 통일로 추구하는 것이 현실적이다.
화면을 구성하는 시각 디자인 요소를 디자인 파일뿐 아니라 여러 프로덕트에서 사용 가능한 범용 프론트엔드 코드 라이브러리 형태로 구축해 함께 관리하는 것이다. 이를 효과적으로 도와주는 것이 바로 토큰이다.
디자인 토큰은 디자이너와 엔지니어가 더 쉽게 소통할 수 있게 도와주는 일종의 ‘소통 창구’다. 예를 들어 웹사이트에 회사 로고를 넣을 때 이 로고 안에는 다양한 Value(Hex값, 사이즈 값 등)가 존재한다. 디자이너가 로고 색상을 파란색에서 초록색으로 바꿔야 한다고 엔지니어에게 이야기하면 엔지니어는 색상의 Hex값을 물어볼 것이다. 그런데 만약에 이 색상이 로고 한 곳이 아니라 프로덕트 곳곳에 쓰여서 모두 바꿔야 한다면? 수작업으로 모두 업데이트해야 할 것이다.
이런 문제를 해결하기 위해 이 색상 값을 지닌 토큰을 만들고, 여기에 ‘브랜드 메인 컬러’ 같은 호칭을 붙여 처음 컴포넌트를 만들 때 이 토큰을 수치 대신 입력하는 것이다. 그리고 업데이트가 필요할 때 이 기본 토큰 하나만 바꿔주면 토큰이 적용된 모든 곳이 플랫폼에 상관 없이 자동으로 업데이트된다.
기본 토큰과 함께 엘리아스(Alias) 토큰도 만들 수 있다. 기본 토큰이 단품 메뉴라면 엘리아스 토큰은 세트 메뉴라고 보면 된다. 버튼을 만들 때 색상, 서체, 아이콘 등의 토큰을 하나로 모아 버튼 토큰을 생성할 수 있고, 로고의 색상이 상황이나 상태에 따라 바뀌어야 하는 패턴이 있다면, 그 조건을 충족시키는 여러 토큰을 하나로 합쳐 적용할 수 있다.
