디자인 시스템 실무! 디자인 토큰이란?

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템의 조금 더 심화된 개념, 바로 디자인 토큰에 대해 이야기해보려고 해요. 디자인 토큰은 처음 들었을 때 좀 어렵게 느껴졌지만, 알고 나니 디자이너와 개발자 모두에게 정말 유용한 도구라는 걸 알게 됐어요. 저도 처음엔 이 개념 때문에 머리가 아팠던 경험이 있어서, 오늘은 그 이야기를 공유하면서 쉽게 풀어볼게요. 그럼 저와 함께 디자인 토큰의 세계로 들어가 볼까요?

 

ChatGPT 생성 이미지

개발자가 '토큰' 얘기할 때마다 머리가 아팠어요

제가 디자인 공부를 시작하고 처음 팀 프로젝트를 할 때의 일이에요. UI 디자인을 열심히 만들고 개발자에게 넘겼는데, 개발자가 "이 버튼 색상은 토큰으로 정의했나요?"라고 물어보더라고요. 저는 "토큰이 뭐지?" 하면서 당황했죠. 개발자는 또 "색상 값을 #FF0000 이렇게 주지 말고, $color-primary로 변수화해야 한다고!" 하면서 설명을 시작했는데, 솔직히 머리가 아팠어요. 디자인 툴에서 색상을 고르는 게 전부인 줄 알았던 저에게는 완전히 새로운 개념이었거든요. 하지만 디자인 토큰을 이해하고 나니, 디자이너와 개발자 간의 협업이 훨씬 수월해졌어요. 여러분도 이런 경험 있지 않나요? 저는 그 이후로 디자인 토큰을 제대로 공부하게 됐답니다.

디자인 토큰 정의: 색상, 크기 등을 변수화

그럼 디자인 토큰이 뭔지부터 알아볼게요. 디자인 토큰은 쉽게 말해 디자인 시스템의 가장 기본적인 값들을 변수로 정의한 것이에요. 색상, 크기, 간격, 글씨체 같은 디자인 요소를 코드처럼 변수 화해서 관리하는 거죠. 비유하자면, 요리 레시피에서 "간장 2스푼" 같은 구체적인 값을 정해놓고, 그 값을 여러 요리에서 재사용하는 것과 비슷해요.

예를 들어, 버튼의 색상을 생각해 봅시다. 일반적으로 디자이너는 색상 코드를 직접 지정해서 "이 버튼은 #FF0000(빨강)이야!" 하고 넘겨주죠. 하지만 디자인 토큰을 사용하면 이 색상을 변수로 정의해요:

• #FF0000 → $color-primary
  이렇게 하면 디자이너와 개발자가 모두 $color-primary라는 변수를 사용해서 버튼 색상을 적용할 수 있어요. 나중에 색상을 바꿀 때, #FF0000을 #00FF00(초록)으로 바꾸려면 변수 값만 변경하면 모든 버튼이 한 번에 초록색으로 바뀌죠. 이게 바로 디자인 토큰의 힘이에요!

디자인 토큰은 색상뿐 아니라 다양한 요소에 적용돼요:

• 크기: 버튼 높이를 48px로 직접 쓰는 대신, $button-height: 48px로 정의.
• 간격: 요소 간 간격을 16px로 쓰는 대신, $spacing-medium: 16px로 정의.
• 글씨체: 본문 글씨 크기를 16px로 쓰는 대신, $font-size-body: 16px로 정의.

이런 식으로 디자인 토큰을 사용하면, 디자인 시스템의 모든 값을 체계적으로 관리할 수 있어요. 저는 처음엔 "그냥 직접 값 쓰면 되지, 왜 이렇게 복잡하게 하냐?" 했는데, 프로젝트가 커질수록 토큰의 유용함을 실감했어요.

실무 적용 사례: 효율성과 확장성

디자인 토큰의 실무 적용 사례를 통해 더 구체적으로 이해해 볼게요. 예를 들어, 제가 참여했던 쇼핑 앱 프로젝트에서 디자인 토큰을 사용해 봤어요. 앱의 주요 색상은 파랑(#007BFF)이었는데, 이 색상을 $color-primary: #007BFF로 정의했어요. 버튼, 링크, 헤더 등 모든 요소에서 $color-primary를 사용했죠. 그러다 클라이언트가 "파랑 대신 초록(#28A745)으로 바꿀 수 있나요?"라고 요청했어요. 만약 토큰 없이 색상을 직접 지정했다면, 모든 화면을 일일이 수정해야 했을 거예요. 하지만 $color-primary 값만 #28A745로 바꾸니까 모든 요소가 한 번에 초록색으로 바뀌더라고요. 이게 정말 시간 절약이 많이 됐어요!

또 다른 사례로, 다크 모드(Dark Mode)를 지원하는 앱을 만들 때도 디자인 토큰이 유용했어요. 라이트 모드에서는 $background-color: #FFFFFF(흰색), 다크 모드에서는 $background-color: #1A1A1A(검정)으로 설정해 놓고, 모드에 따라 변수 값을 바꿔서 적용했어요. 이렇게 하면 한 번의 변경으로 모든 화면이 모드에 맞게 바뀌죠. 이런 확장성은 특히 큰 프로젝트에서 빛을 발해요.

디자인 토큰은 디자이너와 개발자 간의 커뮤니케이션도 개선해 줘요. 예를 들어, 디자이너가 "이 버튼은 #FF0000이야!"라고 말하는 대신, "이 버튼은 $color-primary를 써!"라고 하면 개발자가 바로 이해하고 적용할 수 있죠. 저는 이런 협업 방식 덕분에 개발자와의 마찰이 줄어들었어요.

실무 팁: 디자인 토큰 관리하기

디자인 토큰을 실무에서 사용할 때 몇 가지 팁을 드릴게요. 먼저, 명명 규칙을 정하는 게 중요해요. 예를 들어, 색상은 $color-로 시작하고, 크기는 $size-로 시작하는 식으로요. 제가 사용한 명명 규칙은:

• 색상: $color-primary, $color-secondary, $color-accent
• 크기: $size-button, $size-icon
• 간격: $spacing-small, $spacing-medium

또, 디자인 토큰은 Figma 같은 툴에서 관리할 수 있어요. Figma 플러그인 중 "Design Tokens" 플러그인을 사용하면 토큰을 JSON 파일로 내보내서 개발자와 공유할 수 있죠. 저는 처음엔 엑셀로 토큰을 정리했는데, 나중엔 Figma로 옮기니까 훨씬 편리하더라고요.

 

이제 실전으로 넘어가 볼까요?

디자인 토큰을 이해하니, 디자인 시스템이 더 체계적으로 관리될 수 있다는 걸 알게 됐어요. 색상, 크기, 간격 같은 기본 값을 변수 화하면, 변경이 쉬워지고 협업도 효율적이 되죠. 이제 디자인 토큰의 기본을 알았으니, 다음 포스트에서는 실전에서 디자인 시스템을 어떻게 운영하고 유지보수하는지 알아볼게요. 여러분은 디자인 토큰을 어디에 써보고 싶나요? 저는 색상 관리에 정말 유용하더라고요. 댓글로 여러분의 생각도 공유해 주세요!