폰트와 컬러를 바꾸는 10초의 마법
피그마 토큰 시스템 이해하기
한윤석 (두블링 DOBLING, UI/UX 디자이너)
안녕하세요, 오랜만에 글을 작성합니다.
이제는 4년차 디자이너 되는 한윤석입니다. 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 제가 경험한 디자인 인사이트를 업로드 합니다.
디자인 시스템을 도입할 때 많은 분이 "폰트 크기 하나 바꾸려면 파일 전체를 수정해야 한다"는 비효율성에 직면합니다. 피그마의 Variables(변수) 기능을 활용하면 이 문제를 해결하고, 폰트나 색상을 10초 만에 서비스 전체에 반영할 수 있습니다. 그 핵심 원리인 '원시 토큰(Primitives)'과 '의미론적 토큰(Semantic Tokens)'에 대해 쉽게 설명해 드립니다.
원시 토큰과 의미론적 토큰
1. Primitives (원시 토큰): 순수한 재료들
원시 토큰은 디자인의 가장 순수한 물리적 속성(값) 자체를 의미합니다. 아직 이 값들이 어디에 쓰일지는 정의되지 않았습니다.
예시: 컬러: Blue/500 (#007AFF), Gray/100 (#F5F5F5) 사이즈: Size/16 (16px), Size/24 (24px) 두께: Weight/Bold (700), Family/Sans (Pretendard)
이 단계는 마치 팔레트에 물감을 짜놓는 것과 같습니다.
2. Semantic Tokens (의미론적 토큰): 재료에 의미 부여하기
의미론적 토큰은 원시 토큰을 참조(Alias)하여 '용도'를 정의합니다. 디자이너가 실무에서 텍스트 레이어에 적용하는 최종 이름이 바로 Semantic 토큰입니다.
예시: Button/Primary/Bg → Blue/500 참조 Text/Body/Main → Size/16, Weight/Regular 참조 Surface/Background → Gray/100 참조
3. "Primitives만 교체하면 따라간다"는 마법
이 시스템의 강력함은 '참조 구조'에 있습니다.
만약 서비스의 메인 색상을 파란색에서 보라색으로 바꿔야 한다면,
Button/Primary/Bg
(Semantic)를 일일이 수정할 필요가 없습니다. 뿌리에 해당하는
Blue/500
(Primitive)의
실제 HEX 값만 한 번 수정
하면, 이 값을 참조하는 모든 Semantic 토큰과 실제 디자인 레이어가 자동으로 업데이트됩니다.
컬러와 폰트 크기를 100~900 단위로 촘촘히 나누는 이유도 여기에 있습니다. 세밀한 Primitives Scale이 탄탄할수록 Semantic 토큰을 유연하게 연결하고 관리할 수 있기 때문입니다.
토큰 시스템의 정의 했을때의 이점
1. 브랜드 교체가 매우 쉬워집니다
예를 들어, 서비스의 서체를 'Pretendard'에서 'Gmarket Sans'로 전체 변경해야 할 때:
과거: 수십 개의 텍스트 스타일(Heading 1, Body 2 등)을 일일이 들어가서 폰트 패밀리를 수정.
토큰화 후: Primitives에 정의된 Font-Family-Base 값 하나만 바꾸면, 이를 참조하는 모든 Semantic 토큰(Title, Button-Label 등)에 자동으로 반영됩니다.
2. '모드(Modes)' 기능을 통한 적응형 디자인
피그마 변수의 Mode 기능을 사용하면 더 강력해집니다.
데스크톱 모드: Body-Medium (Semantic) → Size-16 (Primitives)
모바일 모드:
Body-Medium
(Semantic) →
Size-14
(Primitives)
이렇게 설정해두면, 디자인 프레임을 '모바일'로 전환하는 것만으로 폰트 크기가 기기에 맞게 일괄적으로 줄어듭니다.
3. 개발자와의 소통 비용 감소
디자인 사양(Hand-off)을 넘길 때 개발자에게 "이건 16px에 Bold예요"라고 말하는 대신, "이건
Action-Text
토큰이에요"라고 전달합니다.
나중에 폰트 두께를 700에서 600으로 조정하더라도, 개발자는 코드를 하나하나 수정할 필요 없이 토큰 정의 값만 업데이트하면 서비스 전체에 반영되므로 작업 효율이 비약적으로 상승합니다.
팁: 이름 짓기 예시
보통 이런 식으로 위계를 잡습니다.
Primitives: Number/100, Number/200, Weight/Bold, Family/Sans (최대한 구체적인 수치/이름 기반)
Semantic: Display/Large, Label/Default, Paragraph/Small (사용처/의미 기반)
이 구조를 잘 잡아두면 디자인 시스템의 유지보수 단계에서 "노가다"라고 불리는 단순 반복 작업이 90% 이상 사라지게 됩니다.
더 자세한 토큰 명명 전략은 Figma의 공식 토큰 가이드나 디자인 시스템 커뮤니티의 Naming Convention 사례를 참고해 보시면 좋습니다.
실무에서 바로 써먹는 팁
피그마에서 이 시스템을 구축하려면 다음 단계를 따라보세요
[Variables 생성]: 좌측 하단의 'Local Variables' 클릭.
[Primitives 설정]: 숫자 변수로 폰트 사이즈(12, 14, 16...)를 등록.
[Semantic 설정]: 새 변수를 만들 때 'Create Alias'를 선택하여 미리 만든 Primitives와 연결.
[스타일 결합]: 최종적으로 Text Styles 메뉴에서 폰트 크기 옆의 '변수 아이콘'을 눌러 Semantic 변수를 지정.
