디자인 토큰이란?
디자인 토큰이란게 뭔가요?
최근 디자인 토큰이란 단어가 무엇인지 확실히 모르면서 사용되는 화두로 나오고 있는데 정확히 디자인 토큰이 무엇인지 어떻게 작동하지는지 그리고 얼마나 유용한지 여러분께 알려드리고 싶습니다. 디자인 토큰은 디자인 속성을 매우 다양한 방법으로 공유하는 방법이며 디자인 속성이 어떻게 작동하는지 알려드리겠습니다.
만든이가 설명하는 디자인 토큰
디자인 업계에 잘 알려진 Lightning Design System을 만들었고 디자인 토큰을 만든 Jina님의 말을 종종 인용하는데요.
디자인 토큰은 디자인 시스템의 시각적 원자(atom)이며, 특히 시각적 디자인 속성을 저장하는 실체(entities)로 정의합니다. 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 하드 코딩된 값 대신 이 값(디자인 토큰)을 사용합니다."
Jina의 작업물 덕분에 복잡한 회사 멀티플랫폼 시스템에서 어떻게 디자인 작업 가능한지 소통하고 여러 어려운 문제들을 해결 하게 해주었습니다. 그 당시에는 "스타일 가이드"라고 불렀지만 디자인 토큰이 있는 디자인 시스템이라고 하는게 더 맞는 표현같네요.
내가 설명하는 디자인 토큰
여러분의 회사가 웹사이트, 아이폰 앱, 그리고 브로셔가 있다고 가정해 봅시다. 브랜드와 관련된 모든 것에 대해 스타일 가이드를 사용하는데, 이는 상당히 까다로운 표준입니다. 하지만 어쩌면 이런 스타일 가이드는 개발자에게 큰 의미가 없는 수많은 정보가 담긴 PDF문서인 경우가 많습니다.
이 스타일 가이드에는 브랜드 색상, 타이포그래피 및 로고 사용 방법과 같은 정보가 포함되어 있지만, 몇 가지 예를 들어 설명하자면 읽기 스타일 가이드에 익숙하지 않은 개발자에게 해당 정보를 제공하는 것은 매우 위험할 수 있습니다.
여기서 디자인 토큰은 본질적으로 JSON과 같은 표준을 이해하는 모든 사용자가 사용할 수 있는 중앙 집중식 데이터(디자인 밸류 데이터베이스)이기 때문에 매우 유용합니다.
일반 데이터 포맷에서의 디자인 토큰은 아래와 같이 보입니다.
JSON:
여기서 디자인 토큰은 색상, 글꼴 및 스케일을 참조합니다. 색상은 HEX 값이고 스케일은 픽셀 기준입니다.
이러한 데이터는 플랫폼별로 치환해야 되는데 예를 들어 인쇄를 하려면 픽셀과 HEX 값을 CMYK으로 변환해야 됩니다. 웹의 경우 픽셀값을 rem 이나 em과 같은 반응형 단위로 변경한다고 하면 주위에 이러한 종류의 변환툴이 많기 때문에 걱정안해도 됩니다. 중요한 것은 서로 다른 플랫폼에 고루 사용할 수는 중앙집중식 정의 구조를 가지고 있다는 것입니다.
다음은 해당 JSON이 Sass로 변환된 경우의 출력 예제입니다.
토큰 유지하기
지금까지 디자인 토큰의 산출물이 어떤 것이 될 수 있는지 살펴봤습는데 어떻게 유지되고 있을까요? 디자인과 개발이 모든 부분에 그렇듯이, 유지하는것은 다릅니다.
Figma 와 Sketch와 같은 툴은 토큰 디자인 시 몇 가지 옵션을 제공합니다. Figma를 사용하면 정적 디자인 토큰을 개발자가 사용할 수 있게 유용한 데이터로 변환하는 Figgo와 같은 플러그인이 있습니다.
Sketch를 사용하면 쉽게 이름이 지정되는 Design Tokens Plugin과 같은 플러그인을 사용할 수 있습니다.
더 많은 기술 툴에는 대규모 디자인 시스템 사이에서 인기 있는 Theo(세일즈포스 제작)가 있습니다. Style Dictionary와 같은 도구도 있습니다. 이 도구는 더욱 큰 시스템에 적합하며 Google Sheet와 Theo를 사용하여 디자인 토큰을 유지 및 관리할 수도 있습니다.
SuperFriendly의 디자인 시스템 전문가들이 만든 Arcade라는 앞으로 기대가 촉망되는 툴도 있고 Gorko와 Goron 같이 디자인 토큰을 CSS/SCSS로 변환해주는 툴도 있습니다.
마치며
짧은 내용이지만 디자인 토큰이 무엇인지에 대해 이해되기를 바랍니다.
또한 더 자세히 알고 싶으시면 CSS-Tricks 글도 추천드리고 끝으로 디자인 토큰을 만든 Jina의 영상을 보시기를 권합니다.
https://www.youtube.com/watch?v=wDBEc3dJJV8
출처
https://piccalil.li/tutorial/what-are-design-tokens/
물론 평소에 많이 들으신 분들도 계시겠지만,
저는 최근에 들은거라 생소해서...이건 뭐지? 이거 유용하다 생각하면서 공유해봅니다.
