Design system with tokens

1. 디자인시스템 활용의 어려움

eyeCloudXOAR UI 스타일 가이드(컴포넌트 라이브러리) 일부

 

디자인 시스템은 제품 개발 워크플로우를 향상시키기 위한 효과적인 도구로서 활용되었습니다.

그러나 위와 같은 ui컴포넌트 설명서를 실제 구현할 때, 아래와 같은 문제들이 발생할 수 있습니다. (아래의 예시는 의역된 부분입니다.)

• 우리팀은 eyeCloudXOAR ui style guide v4.0을 정확히 적용했습니다.
• 다른팀도 eyeCloudXOAR ui style guide v4.0를 쓰는데, css variable이 아닌 themeprovider를 사용한다 하네요. 공통화합니다.
• 다른팀이 vue를 사용하기로 해서 스타일을 stylis 파일로 뽑아냅니다.
• 또 다른 팀이 외주를 줬다고 하네요. 제이쿼리입니다. 다 같이 css로 옮깁시다.
• 모바일 컴포넌트를 참고해야 하는데 모바일 팀은 plain JSX에 스타일 객체를 사용하고 있었다고 하네요. 공통화를 먼저 진행해야겠습니다.
• 디자이너가 스타일 재설계를 시작했다고 합니다. 

위와 같은 시나리오에서 통일된 하나의 소스를 사용해야 할 필요성이 드러납니다.

 

2. 디자인 토큰의 필요성

모든 디자인 시스템은 UI 구성요소의 스타일에 대한 상세정보를 제공합니다.

이렇게 스타일을 지정하는 근본적인 목표는

회사의 모든 애플리케이션(모바일, 웹, 데스크톱 및 React, Vue 등)이 동일한 모양과 느낌을 갖도록 하는 것입니다.

 

eyeCloudXOAR UI 스타일 가이드(컴포넌트 라이브러리) 일부

 

사내의 모든 솔루션에서 일관된 모양과 느낌을 유지하는 첫번째 방법은 공유 UI 컴포넌트 라이브러리를 만드는 것입니다.

각 컴포넌트는 설계 시스템의 문서에서 요구하는 정확한 사양을 구현해야 합니다.

 

그러나, 디자인 시스템을 만드는 데는 세가지 어려움이 있습니다.

• 첫째, 공유 UI 컴포넌트 라이브러리를 구현하는 개발자 팀이 문서를 코드로 변환할 때 실수를 할 수 있습니다. 

• 둘째, UI 컴포넌트 라이브러리가 다른 플랫폼에서 작동하지 않을 수 있습니다. (웹용 컴포넌트는 모바일 앱에서 작동하지 않을 수 있습니다.)
• 셋째, UI 라이브러리는 다른 기술에서 작동하지 않을 수 있습니다.(React와 Vue 구현 사이에 문제 등)

 

이를 해결하기 위해 디자인 토큰이 필요합니다.

디자인 프로그램(XD, Sketch, Figma...)에서 자동 생성될 수 있도록 디자인 시스템의 토큰을 관리 가능한 영역으로 만들 수 있습니다. 또한 소비자의 선호도에 맞는 형식(예: CSS, SASS, JavaScript)으로 자동으로 내보낼 수도 있습니다.

정리하자면, 디자인 토큰은 많은 디자인 시스템에서 UI 요소를 더 쉽게 구현, 관리 및 업데이트할 수 있도록 채택한 도구 중 하나입니다.

 

3. 디자인 토큰 사용의 이점

1) 단일정보소스

디자인 토큰은 단일 정보 소스를 만드는 데 유용합니다. 여러 제품 팀, 엔지니어 및 디자이너가 동일한 제품에 대해 작업할 때 모두가 동일한 디자인 언어를 사용해야 합니다.
디자인 토큰을 통해 팀은 역할, 플랫폼, 프로그래밍 언어 또는 책임에 관계없이 동일한 언어를 사용할 수 있습니다.

2) UI 일관성

디자이너가 실수로 제품에 대해 크기, 메인 컬러 및 간격을 조금씩 다르게 사용하는 일이 생기곤 합니다. 이러한 불일치로 인해 제품의 사용성 문제가 발생할 수 있습니다. 디자인 토큰은 이러한 불일치를 제거하여 디자이너가 동일한 스타일과 속성을 사용하도록 합니다.

3) 확장성/유연성

디자인 토큰은 제품 및 디자인 시스템에 변경 및 확장을 위한 유연성을 제공합니다. 속성을 추가해야 하는 경우 디자인 토큰을 업데이트하기만 하면 됩니다. 예를 들어 솔루션 제품의 폰트가 Noto Sans에서 Spoqa Han Sans로 변경되면 팀은 타이포그래피 토큰만 업데이트하여 제품 전체의 변경 사항을 구현하면 됩니다.

이러한 토큰을 통해 오류나 불일치를 줄이면서 훨씬 더 빠르게 새 프로젝트를 제공할 수 있습니다.

이렇듯 정의된 토큰 값들은 하드 코딩된 값 대신 사용하여 통일성을 보장하고 유지관리가 편리하며, 작업 시 디자이너와 개발자의 의사소통에 드는 시간을 단축시킬 수 있습니다. 변경사항을 추적하고 프로젝트 전반에 걸쳐 지속적인 일관성을 보장하는 데에도 도움이 됩니다.

 

4. 토큰의 구조

토큰 구조는 계층을 가진 디자인을 기반으로 제작합니다.

토큰화 할 수 있는 요소들은 아래의 그림과 같습니다.

Available tokens (figma token)

 

1. 범주(색상, 시간, 선 높이, 크기, 자산, 콘텐츠 등)
2. 유형
3. 안건
4. 하위 항목
5. 상태

이 구조를 사용하여 기본 활성 버튼에 대한 디자인 토큰을 생성하려는 경우 color_background_button_primary_active 또는 줄여서 color-bg-btn-primary-active 로 정리할 수 있습니다. 

이 토큰에는 플랫폼 간 구현에 필요한 모든 유형의 색상 코드가 포함됩니다.

디자인 토큰 구조의 핵심은 일관성입니다. 사용자가 쉽게 토큰을 찾고 시스템을 확장할 수 있도록 예측 가능한 명명 규칙을 사용해야 합니다.

 

5. XD 디자인 토큰

XD로 디자인 토큰 활용하기

 

디자인 토큰은 디자이너와 개발자가 XD를 통해 함께 작업할 수 있는 새로운 방법입니다. 이제 에셋 패널에서 색상과 문자 스타일에 이름을 지정할 수 있고, 이러한 색상과 문자 스타일은 개발자가 다운로드 가능한 CSS 파일로 자동 게시됩니다. 개발자는 코드에서 이 CSS 파일을 참조할 수 있고, 디자인의 스타일을 변경하면 수동으로 코드를 업데이트하지 않고도 업데이트된 CSS를 간단하게 이용할 수 있습니다. 

XD 디자인 토큰 소개글 中

 

어도비 XD에서도 디자인 토큰을 활용할 수 있도록 업데이트가 되었습니다. ui요소의 수정요청이 생기면 모든 시안에서 하나하나 고치지 않아도 개발자가 편리하게 css를 얻을 수 있습니다.

<디자인 토큰 만들기>

디자인 토큰 만들기

 

디자인 모드:

1. 에셋 패널로 이동합니다. +를 클릭하여 색상 및 문자 스타일을 확인합니다. 
2. 에셋의 기본 이름을 더블 클릭하고 새 이름을 입력합니다. 이름은 색상 및 문자 스타일에 해당하는 변수와 클래스를 만드는 데 사용됩니다.

 

 

 

 

<디자인 토큰 공유>

공유 모드:

1. 보기 설정 드롭다운 메뉴에서 개발을 선택합니다. 
   링크 공유 기능은 웹용으로 내보내진 디자인 사양에서만 지원되므로 웹용으로 내보내기 옵션이 선택되어 있어야 합니다
2. 링크 만들기를 클릭합니다. 생성된 링크를 복사하고, 개발자와 공유합니다. 

 

 

 

 

 

<디자인 토큰 보기> 

 

공유 디자인 사양 링크에서 디자인 토큰을 보려면 브라우저에서 공유 링크를 열고 다음 작업을 수행하십시오.

• 디자인 토큰과 해당 16진수 코드를 보려면 </>를 클릭합니다. 패널에 해당 디자인 토큰이 표시됩니다. 디자인 토큰 위에 마우스를 올려놓으면 16진수 코드를 볼 수 있습니다.
• 변수를 보려면 { }를 클릭합니다. 

         

 

A. 사양 보기 B. 변수 보기                     

 

<디자인 토큰 다운로드>

공유 디자인 사양 링크에서 디자인 토큰을 다운로드하려면:

1. 브라우저에서 공유 링크를 엽니다.
2. CSS 코드 스니펫으로 이동하거나 { } 아이콘을 선택합니다.
3. CSS 다운로드를 클릭하여 이들 변수를 디자인 토큰이 포함된 CSS 코드 스니펫으로 다운로드합니다.
4. 코드 스니펫을 다운로드한 후 복사하여 구현 코드에 붙여넣습니다.

 

 

 

<자세히보기>

 

 

<참고>

https://helpx.adobe.com/kr/xd/help/create-design-tokens-in-XD.html 

https://www.uxpin.com/studio/blog/what-are-design-tokens/

https://itchallenger.tistory.com/637 

https://gsretail.tistory.com/20