디자인 토큰이란 무엇이며 언제 사용합니까?

가장 강력한 제품 개발 결정 중 하나는 코드 전체에서 디자인 토큰을 사용하는 것입니다. 

 

디자인 시스템을 구축하기 시작할 때 디자인 토큰이라는 용어를 많이 접하게 될 것입니다. 올바르게 구성된 경우 이러한 토큰은 몇 가지 원자적 결정으로 많은 마찰 없이 설계에서 개발에 이르기까지 전체 프로덕션에 영향을 줄 수 있습니다. 이번 포스팅에서는 기본적인 개념을 간단히 살펴보도록 하겠습니다.

 

디자인 토큰 입력

디자인 토큰은 창의적인 도구와 코딩 언어 전반에 걸친 스타일 결정을 위한 단일 정보 소스입니다. 거의 모든 것이 토큰이 될 수 있습니다. 색상, 글꼴, 그림자, 테두리 반경, 간격, 테두리, 애니메이션 및 아이콘 크기는 이러한 항목으로 수행할 수 있는 작업의 일부일 뿐입니다. 코드에 적용한 후 몇 가지 전역 값을 변경하여 한 번에 여러 제품을 업데이트할 수 있습니다.

앱 코딩과 마찬가지로 초기 설계 단계에서 구성 요소 스타일에 의미론적 의미를 부여하여 생산 중 오류 가능성을 제거합니다.

최근 디자인 커뮤니티에서 디자인 토큰이 화두로, 개발자들이 한동안 사용하던 방식을 도입해 디자이너와 개발자의 간극을 메우고자 한다. 왜 지금 막? 글쎄요, 디자이너들이 사용하는 도구도 과대 광고를 따라잡아야 했기 때문입니다.

개발자가 토큰에 액세스할 수 있다면 디자이너도 토큰을 사용하기 시작한 다음 프로덕션에 넘겨야 한다는 사실을 깨달았습니다. 또는 다른 방법으로 프로덕션에서 가져오고 구성 요소를 토큰화하여 좋은 수준의 일관성을 유지합니다.

 

디자인 토큰의 예

글로벌 토큰:

이 토큰은 다른 별칭 토큰이 값을 상속하는 시작점입니다.

 

별칭 토큰:

이러한 토큰은 글로벌 토큰에 대한 참조입니다. 단 하나의 소스 토큰에서 색상 변형, 간격 계산, 테두리-반지름 곱셈 등을 생성합니다. 따라서 소스를 변경하면 모든 것이 하나의 원자적 결정으로 업데이트됩니다. 현재 시스템을 사용하여 브랜드를 변경하거나 처음부터 새로 구축하기로 결정한 경우 엄청난 시간을 절약할 수 있습니다.

 

버튼 토큰을 만들고 싶다고 가정해 봅시다. 다음과 같이 보일 것입니다.

이러한 토큰은 CTA 버튼의 색상 스타일(테두리 비율, 간격 등을 위한 다른 것도 있음)을 브랜드의 기본 색상으로 구성합니다. 무엇을 위한 것인지 이해하기 위해 원시 값을 알 필요도 없습니다. 이것이 바로 아이디어입니다.

HTML 구조와 Sass 스타일시트 전체에서 토큰을 사용하면 나중에 스타일 가이드를 업데이트하여 원시 값을 간단히 변경할 수 있으며 많은 노력 없이 소프트웨어를 업데이트할 수 있습니다.

 

 

디자인 토큰 생성 방법

많은 방법이 있습니다. JSON 파일을 생성하고 Figma 및 Sketch로 가져와서 해당 파일에서 스타일을 생성하고 디자인 시스템에 저장할 수 있습니다 . 또한 플러그인을 사용 하여 기존 스타일에서 토큰을 생성하고 새 스타일을 생성할 수 있는 Figma토큰과 같은 토큰을 관리할 수 있습니다.  

또 다른 큰 이점은 플러그인을 GitHub와 동기화할 수 있다는 것입니다. GitHub는 이를 스타일 가이드로 변환하는 작업을 실행합니다. 나중에 여러 플랫폼에서 이러한 스타일을 사용하여 디자인 토큰을 기술에 구애받지 않게 만들 수 있습니다.

일부 도구는 모든 무거운 작업을 수행할 수 있습니다. 모든 토큰을 디자인에 적용한 후에는 올바른 토큰 이름을 사용하여 스타일 가이드 및 스타일시트로 변환할 수 있습니다. 

 

 

시간 투자

토큰을 한 번에 모두 만들 필요는 없습니다. 색상, 글꼴 및 간격과 같은 기본 사항부터 시작하여 토큰 라이브러리를 점진적으로 확장할 수 있습니다.

여러 플랫폼의 여러 제품에 영향을 미치는 완전한 디지털 변환이 필요한 프로젝트에는 더 많은 시간, 때로는 몇 개월의 계획이 필요합니다. 개발 중인 기술의 유형에 따라 다릅니다. 그러나 일단 설정되면 프론트 엔드에 큰 영향을 미치기 위해 최소한의 유지 관리만 필요합니다.

 

---

디자인 토큰은 처음에는 지루한 작업일 수 있습니다. 여러 팀이 완전한 채택을 위해 개발자를 구성하고 교육하기 위해 앞뒤로 이야기해야 하는 경우가 많습니다. 그러나 장기적으로 많은 시간과 비용을 절약할 수 있습니다.