디자인 토큰 활용법: 이름부터 라이브러리 업데이트까지

디자인 토큰은 색상, 간격, 글꼴처럼 반복해서 쓰는 디자인 값에 이름을 붙여 관리하는 단위입니다. 중요한 것은 값을 한곳에 모으는 데서 끝내지 않고, 어떤 역할에 쓰는지와 변경을 어떻게 배포할지까지 정하는 것입니다. 같은 파란색이라도 기본 버튼과 오류 안내에 연결되어 있다면 한 번의 변경이 서로 다른 결과를 만들 수 있습니다.

팀의 디자인 시스템과 공유 라이브러리에 토큰의 용도와 적용 범위를 함께 정리하면 디자이너와 개발자가 같은 기준으로 화면을 검토하기 쉬워집니다. 여러 파일에서 사용하는 자원은 라이브러리 게시와 사용하는 파일의 업데이트 검토 과정을 구분해 관리합니다.

1부. 디자인 토큰이란 무엇인가?

가장 기본적인 수준에서 디자인 토큰은 디자인 시스템의 구성 요소입니다. 색상, 타이포그래피, 간격, 그림자와 같은 속성의 값을 재사용 가능한 이름으로 관리합니다. 값 자체뿐 아니라 의도와 연결 관계를 공유하면 화면과 코드에서 같은 개념을 추적할 수 있습니다.

예를 들어, 수백 개의 컴포넌트에서 특정 파란색을 수동으로 적용하는 대신 기본 파란색에 이름을 붙일 수 있습니다. 이를 기본 버튼 배경처럼 역할이 분명한 이름과 연결하면 팔레트를 바꿀 때 영향을 받는 사용처를 살펴보기 쉽습니다. 다만 연결이 끊긴 값, 개별 재정의, 아직 라이브러리 업데이트를 받지 않은 파일까지 함께 바뀌는 것은 아닙니다.

Pixso에서 공통 속성을 관리할 때는 해당 속성이 변수로 연결되어 있는지, 스타일로 묶여 있는지, 컴포넌트 속성으로 제어되는지 구분합니다. 토큰은 팀이 값을 정의하는 방식이고, 변수·스타일·컴포넌트는 그 정의를 디자인에 적용하는 수단입니다. 세 가지를 같은 기능 이름으로 취급하면 변경 범위를 판단하기 어려워집니다.

2부. 디자인 토큰 유형과 그 활용

다양한 유형의 토큰은 디자인 시스템에서 각기 다른 목적을 가집니다. 아래 분류를 기준으로 팀에서 반복되는 값과 예외를 구분할 수 있습니다.

(1) 색상 토큰: 기본 색상, 보조 색상, 상태 색상을 정의합니다. 팔레트의 이름과 ‘본문 텍스트’, ‘기본 작업 배경’ 같은 용도 이름을 구분하면 같은 색을 사용하는 서로 다른 역할을 따로 바꿀 수 있습니다.

(2) 타이포그래피 토큰: 글꼴, 두께, 크기, 줄 높이를 다룹니다. 화면과 컴포넌트 전반에서 텍스트의 일관성을 유지하는 데 사용합니다. 한글과 영문에 같은 숫자를 적용하더라도 실제 줄바꿈과 읽기 경험이 같아지는 것은 아니므로 대표 문구로 확인합니다.

(3) 간격 토큰: 마진, 패딩, 레이아웃 간격을 정의하며 일관된 리듬과 구조를 유지하는 데 도움을 줍니다. 같은 숫자라도 카드 안쪽 여백과 두 섹션 사이 간격의 역할은 다를 수 있습니다.

(4) 그림자 및 효과 토큰: 그림자, 불투명도, 효과 값을 관리합니다. 겹쳐진 패널의 높이를 표현하는 규칙처럼 적용 목적을 함께 적으면 임의의 효과가 늘어나는 것을 줄일 수 있습니다.

공통 값을 사용하는 이유는 모든 화면을 똑같이 만드는 데 있지 않습니다. 어떤 기준을 공유하고 어디에서 다른 값을 허용할지 분명히 하는 데 있습니다. 플랫폼마다 다른 글꼴이나 입력 컨트롤이 필요하다면 같은 의미의 토큰에 환경별 값을 대응시키는 방식으로 논의할 수 있습니다.

3부. Pixso에서 토큰과 컴포넌트를 연결하는 방법

레이어 속성부터 연결 확인하기

먼저 대표 화면의 색상, 타이포그래피, 간격을 살펴보고 공통 값과 개별 값을 나눕니다. 같은 값을 복사해서 넣은 것과 공통 자원을 참조하는 것은 다릅니다. 작은 변경을 적용해 의도한 레이어에 반영되는지 확인하면 연결 상태를 파악할 수 있습니다.

하나의 속성을 여러 요소에 재사용하면 기본값을 조정할 때 반복 작업을 줄일 수 있습니다. 반영되지 않는 요소는 로컬 값으로 덮어썼는지, 다른 스타일을 쓰는지, 연결된 자원이 맞는지 순서대로 확인합니다.

컴포넌트의 상태별 사용처 구분하기

컴포넌트는 여러 레이어와 속성으로 구성됩니다. 기본 버튼 하나에서도 일반, 마우스 오버, 비활성 상태의 배경과 글자색을 구분해야 합니다. 같은 토큰을 무조건 재사용하기보다 같은 의미를 공유하는지 판단합니다.

메인 컴포넌트를 수정한 뒤 대표 인스턴스에서 상태와 개별 재정의가 어떻게 보이는지 확인합니다. 다른 파일에 배포할 때는 공유 라이브러리에 변경을 게시하고 사용하는 파일에서 업데이트를 검토합니다. 메인 컴포넌트 편집, 라이브러리 게시, 사용 파일 업데이트는 서로 다른 단계입니다.

공유 라이브러리와 코드 이름 맞추기

공유 라이브러리는 디자이너가 공통 자원을 찾고 적용하는 기준이 됩니다. 파일마다 비슷한 이름의 자원을 따로 만드는 대신, 담당자가 관리하는 기준 라이브러리와 변경 내용을 함께 안내합니다.

디자인과 코드의 이름이 다르다면 대응 관계도 기록합니다. Pixso의 영문 DSM 문서는 게시된 라이브러리를 열어 스타일, 컴포넌트, 변수의 별칭을 수동으로 설정하는 방법을 설명합니다. 별칭은 어떤 자원이 코드의 무엇에 대응하는지 명시하는 기능이며, 이름만 같다고 애플리케이션 전체가 자동으로 바뀌는 것은 아닙니다.

4부. 기본 버튼 색상을 바꾸는 실전 예제

브랜드 파란색을 바꾸되 오류 안내 색상은 유지해야 하는 상황을 생각해 보겠습니다. 다음은 팀에서 정한 토큰 이름의 예입니다.

1. 변경 목적을 정합니다. 기본 작업의 브랜드 색상을 바꾸는지, 팔레트 전체를 바꾸는지 구분합니다. 기본 값 자체를 바꾸면 다른 참조에도 영향을 줄 수 있습니다.
2. 사용처를 모읍니다. 로그인, 결제, 설정 저장 화면의 대표 버튼을 한곳에 배치합니다. 일반 상태뿐 아니라 포커스와 비활성 상태도 보여 줍니다.
3. 대상 참조를 수정합니다. 기본 작업 색상을 새 값에 연결하고 오류·경고 의미의 연결은 그대로 유지합니다. 글자색 대비와 포커스 표시를 함께 확인합니다.
4. 변경을 게시합니다. 라이브러리 변경 설명에 영향을 받는 자원과 화면을 적습니다. 사용하는 파일에서 업데이트 전후를 비교하고 개별 재정의가 필요한 곳을 찾습니다.
5. 구현 결과와 맞춥니다. 개발자가 사용하는 토큰 또는 코드 이름과 실제 값이 일치하는지 확인합니다. 디자인 변경과 코드 배포의 완료 시점을 별도로 기록합니다.

이 과정을 거치면 ‘파란색을 바꿨다’는 말 대신 어떤 의미의 값이 어디에 적용되었는지 설명할 수 있습니다. 모든 토큰을 한꺼번에 정리하기보다 실제로 자주 바뀌는 버튼이나 텍스트 스타일부터 시작하는 편이 관리 범위를 잡기 쉽습니다.

5부. 팀에서 유지할 명명과 변경 규칙

명명 규칙은 팀원이 토큰을 같은 뜻으로 이해하도록 도와야 합니다. 색상만 표현하는 이름과 역할을 표현하는 이름을 구분하고, 이름의 순서와 구분자를 일관되게 사용합니다. ‘new’, ‘final’ 같은 임시 이름은 시간이 지나면 의미를 잃습니다.

공통 스타일을 토큰으로 전환할 때는 중복값부터 찾되, 숫자가 같다는 이유만으로 합치지 않습니다. 같은 16이라도 본문 글자 크기와 카드 여백은 별개의 역할입니다. 변경 담당자, 영향 범위, 대체 자원을 정해 두면 오래된 토큰을 없앨 때도 사용하는 화면을 놓치지 않을 수 있습니다.

새 기준을 적용할 때는 기존 이름을 바로 지우기보다 사용처를 먼저 옮기고 남아 있는 참조를 확인합니다. 디자이너와 개발자가 같은 변경 설명을 볼 수 있게 하면 한쪽만 새 기준을 적용하는 기간을 줄일 수 있습니다.

6부. 변경이 반영되지 않을 때 확인할 곳

일부 요소만 그대로라면 해당 레이어가 토큰이나 스타일을 참조하는지 확인합니다. 값이 복사되어 있거나 인스턴스에서 재정의되었다면 공통 값의 변경과 별도로 남을 수 있습니다.

다른 파일만 이전 모습이라면 기준 라이브러리의 변경 게시 여부와 사용하는 파일의 업데이트 상태를 구분해서 봅니다. 같은 파일 안의 연결과 파일 간 배포를 한 단계로 생각하면 원인을 찾기 어렵습니다.

화면은 맞는데 구현이 다르다면 코드에서 사용하는 이름, 별칭, 실제 값을 비교합니다. 디자인 토큰을 정리하는 것과 제품 코드에 반영하는 것은 연결된 별도 작업입니다. 디자인 화면의 변경만으로 구현 완료를 판단하지 않습니다.

공통 값보다 공통 의미를 먼저 맞추세요

팀에 필요한 토큰은 가장 많은 토큰이 아니라, 변경할 때 영향을 설명할 수 있는 토큰입니다. 기본 버튼 하나를 골라 이름, 참조, 상태, 라이브러리 게시, 사용 파일 업데이트까지 연결해 보세요. 이 흐름이 명확해지면 다른 컴포넌트에도 같은 관리 원칙을 적용할 수 있습니다.

Pixso에서 공통 디자인 자원 정리하기 →