피그마, 디자인 토큰 그리고 개발
글로만 이해해 보는 디자인 토큰
디자인 시스템
Material은 팀이 Android, iOS, Flutter 및 웹을위한 고품질 디지털 경험을 구축 할 수 있도록 Google에서 만든 디자인 시스템입니다.
https://material.io/design/introduction
디자인 시스템은 재사용 가능한 UI 컨포넌트이다.
머터리얼 디자인 시스템을 들여다 보면 엄청나게 방대한 분량의 문서 및 컴포넌트가 존재하는것을 알 수 있다.
구글은 원칙, 컴포넌트, 테마의 세가지 키워드로 머터리얼 디자인 시스템을 정의하고 있다.
디자인 토큰
머티리얼 디자인은 UI 영역, 표면 및 구성 요소로 표현할 수있는 품질을 정의합니다. 광범위하고 상세한 관점에서 디자인을 다루는 토대를 사용하여 앱 빌드 방법을 디자인하고 전략화합니다.
https://material.io/design/foundation-overview
머터리얼 디자인 시스템을 지탱하는 근간을 Material Foundation이라 정의를 하였는데, 이부분이 디자인 토큰과 상당히 닮아 있다고 생각한다.
머터리얼은 환경, 레이아웃, 네비게이션, 컬러, 타이포, 사운드, 아이콘, 쉐이프, 모션등 각 파트마다 분량 자체가 상당히 방대하고 디테일하다.
필자의 경우 머터리얼에서 정의한 내용중 상당 부분을 레퍼런스로 하여 참여하는 프로젝트에 적용을 하고 있다.
이중 컬러에 대해 실제 프로젝트 상황에 대입해 살펴보자.
서비스 출시 이후
실제 프로젝트를 출시하고 유지보수를 하게 되면 컬러의 디자인 토큰화 필요성을 절실하게 깨닫게 된다.
서비스중인 프로젝트에서 컬러에 대한 변경상황이 발생했을때, 디자이너가 개발자에게 해당 내용을 전달하는 상황을 보자.
디자이너:
ㅇㅇ개발자님 메인페이지 신상품 카테고리내 상품 카드에서 장바구니 버튼의 컬러가 변경되었습니다.
변경된 컬러값은 #3700BB이고 RGB로 하면..
개발자:
일단 변경된 사실은 인지했으니 제플린에 해당 페이지 업로드 해주세요. 변경내용 살펴보고 변경하도록 하겠습니다.
디자이너:
네~(ㅜ.ㅜ) 제플린으로 익스포트 해서 전달드리도록 하겠습니다.
여기서 눈여겨 볼 부분은 변경된 버튼의 컬러값이 기계가 이해하는 언어로 되어 있는것이다.
0과 1 또는 HEX로 된 기계어를 사람이 단박에 이해하기란 불가능하다.
"#3700BB"를 대화를 나누는 상황에서는 기억하지만 막상 코드를 열어 변경할때에는 잊어 버릴 수 있기 때문이다.
그래서, 개발자는 해당 디자인을 제플린에 올려주면 거기서 컬러값을 복사해서 해당 코드에 붙여넣기하여 작업을 진행하려고 위와 같이 답변을 한 것이다.
이러한 일련의 과정들이 진행됨에 있어 많은? 시간이 필요하다는것을 우리는 경험을 통해 잘 알고 있다.
위의 상황을 컬러에 대한 디자인 토큰이 정의된 상황으로 바꿔 다시 살펴보자.
디자이너:
ㅇㅇ개발자님 메인페이지 신상품 카테고리내 상품카드에서 장바구니 버튼 컬러값이 bg-info-300에서 bg-info-600으로 변경되었습니다.
개발자:
지금 바로 적용할테니 확인해 주세요.
앞서 설명한 상황과는 완전히 달라진것을 볼 수 있다.
왜 이런 현상이 일어 났을까?
컬러값을 기계가 이해하는 언어가 아닌 사람이 이해하는 언어로 전달했기 때문이다.
컬러 디자인 토큰에서 정의한 bg-info에 대해 옅은색부터 진한색까지 100, 200, ... ,800, 900까지 정의가 되어 있어 개발자는 "해당버튼 백그라운드 컬러가 좀더 진하게 바뀌는 구나"라고 인식을 하게 된다.
또한 기존에 적용된 코드 "{ new-card__btn-add: btn-info-300 }" 에서 변경될 코드 "{ new-card__btn-add: btn-info-600 }" 으로 300이라는 숫자를 600이라는 숫자로 바꾸면 된다는것을 알기에 바로 적용할테니 확인도 바로 해달라는 답변을 한것이다.
디자인 토큰의 필요성
두 상황을 보면 커뮤니케이션에서 미묘한? 감정이 발생하는것과 시간에 대한 손실의 차이를 옅 볼 수 있다.
서비스를 이용하는 사용자가 많아지고 다양한 요구에 대응을 하다보면 앞서 살펴본 상황은 디자이너와 개발자의 사이를 더욱 멀어지게 할 것이고, 그에 따라 필요한 시간의 양은 기하급수적으로 늘어날 것이다.
디자이너와 개발자 모두 UI에 대한 컴포넌트를 다루기 때문에 두 분야를 연결하는 공통의 다리는 반드시 필요하다.
