Figma조차 자신의 디자인 토큰(Design Tokens)에 대해 확신하지 못하고 있다
요약
디자인 토큰 표준화를 위한 W3C의 DTCG 활동과 업계의 움직임을 다룹니다. Figma를 포함한 주요 기업들이 참여하는 오픈 표준의 중요성을 강조하며, 특정 벤더의 형식에 종속되지 않고 오픈 표준을 따를 것을 권고합니다.
핵심 포인트
- 디자인 토큰의 중립적 형식을 결정하기 위한 DTCG의 W3C 표준화 진행
- Adobe, Google, Figma 등 글로벌 빅테크 기업들의 표준 지지
- 특정 디자인 도구의 독자적 형식에 종속될 경우 재작성 위험 존재
- 오픈 표준을 기반으로 한 디자인 시스템 구축의 중요성
업계 전체가 디자인 토큰 (Design Tokens) 표준에 합의한 것처럼 보입니다. 그로 인해 발생하는 변화는 아직 진행 중입니다.
디자인 토큰 (Design Tokens)은 새로운 것이 아닙니다. 이 용어는 2014년 Salesforce에서 Jina Anne과 Jon Levine에 의해 만들어졌습니다.1 2017년에는 Amazon이 Style Dictionary를 오픈 소스로 공개하며 이 개념은 Salesforce를 넘어 널리 퍼졌습니다. 우리는 10년 넘게 디자인 토큰을 배포해 왔습니다.
하지만 그 모든 시간 동안 우리가 결코 하지 못한 것은 형식을 합의하는 것이었습니다. 모든 도구와 모든 팀은 각자 자신만의 형태를 만들어냈습니다. 다른 도구가 읽을 수 있도록 토큰의 값과 의미를 기록하는 중립적인 방법은 결코 존재하지 않았습니다.
DTCG에 대해 들어보셨나요? 저도 최근까지 들어본 적이 없었습니다. 이는 Design Tokens Community Group으로, 마침내 그 형식을 결정하기 위한 W3C의 노력입니다.2 저장소(Repo)는 조용하지만, 이는 누군가 떠나갔기 때문이 아니라 사양(Spec)이 2025년 말에 첫 번째 안정 버전에 도달했기 때문입니다. 이 정적은 포기가 아니라 완성을 향해 가고 있는 상태를 의미합니다.
이를 지지하는 명단은 전혀 조용하지 않습니다.
Adobe. Google. Microsoft. Meta. Amazon. Shopify. Salesforce. Sony. Pinterest. The New York Times. Disney. Framer. Penpot. Figma. 그리고 십여 개 이상의 기업들.2
이것은 사이드 프로젝트가 아닙니다. 업계의 대부분이 무언가에 조용히 합의하고 있다는 뜻입니다. 이 이름들 중 하나인 Figma가 이 글의 제목이 된 이유입니다. 그 아이러니함이 바로 핵심이기에, 곧 그 이야기를 다루겠습니다.
여기 제 베팅이 있습니다. 미리 말씀드리지만 이것은 하나의 베팅입니다. 저는 디자인 툴링 (Design Tooling) 분야에 폭풍이 몰아칠 것이라고 생각합니다. 폭풍에 대해 제 말을 믿지 않으셔도 됩니다. 왜냐하면 이 베팅은 폭풍의 존재 여부에 달려 있지 않기 때문입니다. 만약 당신이 토큰을 특정 벤더의 형식에 직접 연결(Wiring)하고 있다면, 당신은 위험에 노출되어 있습니다. 대신 오픈 표준 (Open Standard)에 고정(Anchor)한다면 위험하지 않을 것입니다. 손실의 비대칭성은 명확합니다. 제가 틀렸다면 당신은 거의 아무것도 잃지 않습니다. 하지만 제가 절반이라도 맞다면, 단일 도구에 하드코딩(Hard-coded)된 모든 사람은 재작성(Rewrite)이라는 상황에 직면하게 될 것입니다.
형식은 아직 초기 단계이며 이미 파편화되고 있습니다. 그것이 핵심입니다.
명백한 반론은 이 표준이 베팅하기에는 너무 새롭고, 이미 파편화되고 있다는 것입니다. 실제로 파편화되고 있습니다. Google의 DESIGN.md는 DTCG를 영감의 원천으로 삼고, DTCG 스타일의 토큰(tokens)을 중심으로 산문 형태의 근거를 둘러싸서 스키마(schema)를 자체적인 형태로 포크(fork)합니다.3 다른 도구들도 자신들만의 방언(dialects)을 유지합니다. 이는 정상적인 현상입니다. 이는 다시 브라우저 전쟁(browser wars)이 시작된 것이며, 모두가 방향성에는 동의하지만 몇 년 동안 세부 사항을 두고 논쟁하는 과거 웹의 패턴입니다.
중요한 것은 그들이 어디에서 논쟁하느냐 하는 것입니다. 포크(fork)들은 기초 부분, 즉 프리미티브 토큰(primitive tokens), 색상(colours), 간격(spacing), 반경(radii), 그리고 참조 구문(reference syntax)에 대해서는 합의합니다. 이들은 타이포그래피(typography), 그림자(shadows), 그라데이션(gradients)과 같은 복합 토큰(composite tokens)과 같은 가장자리(edge) 부분에서 갈라지는데, 이 부분은 사양(spec)에서 가장 최신 부분이며 도구 지원이 여전히 뒤처져 있는 영역입니다.4 따라서 불일치는 한 가지 알려진 지점에 머물러 있으며, 이는 확산되기보다는 좁혀지고 있습니다. Style Dictionary, Tokens Studio, 그리고 Terrazzo는 모두 동일한 기초로 수렴하고 있으며, 이미 Style Dictionary와 Terrazzo의 공동 제안을 통해 공유 형식을 논의 중입니다.5
이것이 특정 스타일이 아닌 표준에 고정(anchoring)해야 하는 이유입니다. DTCG는 벤더 중립적(vendor-neutral)이며 W3C 산하에서 공개적으로 관리되지만, 기업의 포크(fork)는 해당 기업에 의해 관리됩니다. 포크들은 표준을 대체하는 것이 아니라, 표준 위에서 작동합니다. 더 심층적인 분석에서는 DESIGN.md를 DTCG 토큰의 경쟁자가 아닌, DTCG 토큰을 감싸는 래퍼(wrapper)라고 부릅니다.3 여러분은 안정된 기초 위에 구축하고, 가장자리에서 어떤 스타일이 승리하든 그에 맞춰 적응하면 됩니다.
한 가지 솔직한 주의 사항이 있습니다. 그 기초는 오늘날 프리미티브 토큰(primitive tokens)에 대해서는 매우 견고하지만, 복합 토큰(composites)에 대해서는 다분히 열망적인 단계입니다. 만약 여러분의 토큰이 색상과 간격이라면, 지금 바로 표준에 의지할 수 있습니다. 만약 타이포그래피 램프(type ramps)와 고도 그림자(elevation shadows)라면, 여러분은 도구 지원보다 약간 앞서서 베팅하는 셈입니다. 이를 연결(wire it up)하기 전에 알아둘 가치가 있습니다.
이것은 우리를 Figma로 이끕니다
Figma는 그 수용 목록(buy-in list)에 포함되어 있습니다. Figma 역시 자신의 변수(variables)가 무엇을 의미하는지 말해주지 못합니다.
Figma 변수를 열어보면 그저 가공되지 않은 숫자만 보입니다. 10이라는 FLOAT 값 말이죠. 이것이 10px인지, z-index가 10인지, 아니면 10ms인지 파일은 알려주지 않습니다. 문맥을 통해 추측할 뿐입니다. 그것을 읽는 모든 도구도 마찬가지입니다. 그것을 가리키는 모든 LLM(대규모 언어 모델)도 마찬가지입니다. 이러한 값들을 깨끗한 DTCG 형식으로 추출하려면 오늘날에도 여전히 커뮤니티 플러그인을 찾아야 합니다. Figma의 네이티브 내보내기(native export) 기능이 출시되고는 있지만, 아직 복합 토큰(composite tokens)을 지원하지는 않습니다.6 세계에서 가장 가치 있는 디자인 도구가 정작 자신의 토큰 형식을 확정 짓지 못했습니다. 이것이 제목에서 약속했던 아이러니입니다.
상황은 더 심각해집니다. Figma는 2025년 7월 올해 가장 뜨거운 IPO(기업 공개) 중 하나로 상장하며 약 142달러까지 치솟았습니다. 1년 후, 현재 주가는 그 정점보다 85% 이상 낮은 17달러 근처에서 거래되고 있습니다.7 그 원인에 대해서는 논란이 많습니다. 거품 낀 밸류에이션(valuation), 확대되는 손실, AI의 압박 등 무엇이든 선택하십시오. 저는 아는 척하지 않겠습니다. 핵심은 더 좁은 지점에 있습니다. 1년 전만 해도 Figma의 영속성에 당신의 토큰 파이프라인(token pipeline)을 거는 것은 안전해 보였습니다. 지금은 다르게 보입니다.
하지만 이 베팅이 쉬운 이유가 있습니다. Figma가 몰락할 필요는 없다는 점입니다. Figma는 DTCG 목록에 포함되어 있으며, 이미 네이티브 DTCG 내보내기를 출시하고 있습니다.6 출시 과정은 점진적이지만 방향은 정해져 있습니다. 표준(standard)에 닻을 내린다면, Figma가 번창하든 쇠퇴하든 당신은 승리합니다. 그것이 이 베팅의 전체적인 형상입니다.
Figma만의 문제가 아니다
만약 Figma가 특수한 사례처럼 느껴진다면, Adobe를 보십시오. Adobe는 200억 달러에 Figma를 인수하려다 유럽과 영국의 규제 당국에 의해 저지되었고, 손을 떼는 대가로 기록적인 10억 달러의 수수료를 지불한 거인입니다.8 Adobe 역시 DTCG 목록에 있습니다. 2026년, Adobe는 그 어느 때보다 많은 돈을 벌고 있음에도 불구하고 주가는 어쨌든 약 30% 하락하는 것을 지켜보고 있습니다.9
그것이 전체 논거를 더 깔끔하게 정리한 버전입니다. 매출은 상승 중이고 AI 제품들도 성장하고 있지만, 시장은 단 하나의 공포 때문에 회사의 가치를 3분의 1이나 깎아내리고 있습니다. 바로 AI가 크리에이티브 소프트웨어(creative software)에 어떤 영향을 미칠지 아무도 모른다는 것입니다. 펀더멘털(fundamentals)은 괜찮습니다. 가격에 반영되고 있는 것은 바로 불확실성입니다. 업계에서 가장 확고한 위치를 차지하고 있는 도구 기업이 "앞으로 무엇이 올지 알 수 없다"는 이유로 재평가받고 있다면, 그 불확실성은 Figma의 문제가 아닙니다. 그것은 날씨와 같습니다.
표준이 어려운 부분을 쉽게 만들어주지는 않는다
이 모든 상황이 DTCG(Design Tokens Community Group)에 고정(anchoring)하는 것을 자유롭게 만들어주지는 않습니다. 지저분한 도구에서 깔끔한 토큰을 추출하는 것은 다시 한번 FLOAT 10 문제와 같습니다. 즉, 그 10이 길이(length)인지 지속 시간(duration)인지를 무언가가 결정해야 하며, 표준이 당신을 대신해 결정해주지는 않습니다. 세상에 공짜 점심은 없습니다. 이는 제가 지난번에 언급했던 것과 같은 맥락입니다. 도구(tooling)는 당신을 실제 목표에 한 걸음 더 가깝게 데려다줄 뿐이며, 판단(judgment)은 여전히 인간의 영역으로 남습니다. 표준이 제공하는 것은 그 판단을 겨냥할 수 있는 안정적인 목표, 즉 도구마다 별도의 컨버터(converter)를 만드는 대신 하나의 포맷을 제공하는 것입니다.
당신은 그 연결 고리(glue)가 일회용이라고 반박할 수도 있습니다. Figma의 네이티브 내보내기(native export) 기능이 여전히 불완전하기 때문에, 지금은 Figma-to-DTCG 어댑터를 만들고 Figma가 완전한 지원을 출시하는 날 바로 버릴 것이라는 점 말입니다. 맞는 말입니다. 하지만 그 어댑터만이 유일하게 일회용인 부분입니다. 그 하류(downstream)의 모든 것은 표준을 향해 정렬되어 있으므로, 어댑터가 사라져도 다른 것은 움직이지 않습니다. 반면 도구에 직접 결합(couple)해 버리면, 동일한 변화가 전체 체인을 다시 작성해야 합니다. 오늘날 느슨하게 연결된 부분은 바로 그 Figma-to-token 단계이므로, 이를 의도적으로 일회용이 되도록 만드십시오. 네이티브 지원이 도입될 때, 당신의 앱 나머지 부분은 이미 표준 위에 구축되어 있을 것이며, 당신은 그저 Figma에서 직접 깔끔한 토큰을 가져오기만 하면 됩니다.
고정(anchoring)이 실제로 어떤 모습인지
DTCG를 중간에 두고, 변화를 예상할 수 있도록 해당 레이어를 구축하십시오. 형식 자체는 계속해서 변할 것이며, 당신이 속한 회사에 따라 사내 표준이 DTCG 그 자체라기보다는 DTCG의 포크(fork) 형태일 수도 있습니다. 이러한 변형들을 흡수하도록 구축된 중간 레이어는 오늘날 회복 탄력성(resilient)을 유지하며, 업계가 DTCG로 통합되는 순간 즉시 적응할 수 있는 위치를 확보해 줍니다. 그곳에 신뢰할 수 있는 단일 원천(source of truth)을 두고, 그로부터 Figma 변수(variables), CSS 사용자 정의 속성(custom properties), iOS 및 Android 토큰 등 모든 다운스트림(downstream) 요소를 생성하십시오. 디자인 도구는 더 이상 당신의 토큰을 소유하지 않고, 토큰을 소비하는 또 하나의 주체가 됩니다. 동일한 DTCG 소스는 제가 이전 글에서 주장했던 타입이 지정된 기반(typed foundation)의 입력값이 됩니다. 즉, 표준은 업스트림(upstream)에, 타입이 지정된 레이어는 다운스트림(downstream)에 위치하게 됩니다.
더 나은 토큰이 모든 해답은 아닙니다. 그것은 더 큰 문제의 한 조각일 뿐입니다. 즉, AI를 사용하여 디자인을 시스템으로 전환하는 문제와, 그 중간 단계의 의사결정을 누가 소유하느냐의 문제입니다. 공유된 형식은 당신의 토큰이 어디에 거주할지를 결정합니다. 하지만 그 토큰들이 공급하는 시스템을 설계하는 것은 여전히 당신의 몫입니다.
Design Tokens Community Group(DTCG)은 조용하고 화려하지는 않지만 진정으로 중요한 일을 수행하고 있으며, 대부분의 개발자는 이에 대해 들어본 적조차 없습니다. 만약 당신이 이 분야의 툴링(tooling)을 구축하고 있다면, 이곳에 주의를 기울일 가치가 있으며, 이곳을 향해 구축할 가치가 있습니다. 이미 이런 방식으로 베팅하고 있는 분들이나, 이 베팅이 틀렸다고 생각하는 분들의 의견을 듣고 싶습니다. 그것이 제가 시작하려는 대화입니다.
-
"디자인 토큰 (Design token)"이라는 용어는 2014년 Salesforce의 Lightning Design System에서 Jina Anne(Jon Levine과 함께)에 의해 만들어졌습니다. 이후 2017년경 Amazon의 Style Dictionary와 함께 광범위하게 채택되었습니다. 디자인 토큰의 역사(Design Systems Collective의 "The incomplete history of design tokens", Smashing Magazine의 Jina Anne 인터뷰)를 참조하십시오. ↩
-
Design Tokens Community Group은 W3C 커뮤니티 그룹입니다. 이 그룹의 Design Tokens Format Module은 2025년 10월에 첫 번째 안정 버전(v2025.10)에 도달했으며, 20개 이상의 편집 조직과 24개 이상의 참여 기업(Adobe, Google, Microsoft, Meta, Amazon, Shopify, Salesforce, Figma, Framer, Penpot 등)이 참여하고 있습니다. w3.org/community/design-tokens 및 designtokens.org를 참조하십시오. 발행 시점에 참여자 명단과 날짜를 확인하십시오. ↩
-
Google은 2026년 4월에 DESIGN.md를 오픈 소스로 공개했습니다. 이는 DTCG를 기반으로 하지만 차이점을 보입니다 ("엄격한 준수가 아닌, 영감을 받은 형태"). 독립적인 분석에 따르면 DESIGN.md는 DTCG 토큰에 서술적 근거(prose rationale)를 포함하는 래퍼(wrapper)로 정의되며, 표준을 대체하기보다는 보완하는 역할을 합니다. ↩
-
DTCG 2025.10은 복합 토큰 유형(composite token types: 타이포그래피, 그라데이션, 그림자)을 정의하지만, 복합 토큰에 대한 실제 도구 지원은 기본 토큰(primitives)에 비해 뒤처져 있으며, 복합 토큰 내보내기(composite-token export)는 현재 활발히 논의 중인 분야입니다. 현재로서는 기본 토큰(primitive tokens)에 대한 베팅이 가장 강력하며, 복합 토큰에 대해서는 보다 희망적인 단계입니다. 발행 시점에 어떤 복합 유형이 규범적으로 안정적인지 확인하십시오 (Design Tokens Format Module 2025.10; Figma 포럼 "DTCG Composite Token Export Support"). ↩
-
Style Dictionary v4는 일급(first-class) DTCG 지원을 제공합니다. Tokens Studio와 Terrazzo는 참조 구현체(reference implementations)이며, 공유된 토큰 목록 형식(shared token-listing format)에 대한 Style Dictionary와 Terrazzo의 공동 RFC가 존재합니다 (styledictionary.com/info/dtcg; GitHub style-dictionary discussion #1479). ↩
-
Figma는 Schema 2025에서 네이티브 DTCG 변수 내보내기(native DTCG variable export)를 발표했습니다. 2026년 6월 기준으로 순차적 배포가 확인되었습니다. 이제 변수 컬렉션(variable collection)을 우클릭하여 DTCG 정렬 형식으로 JSON 내보내기(Export to JSON)를 할 수 있으며, 이를 Style Dictionary를 통해 실행할 수 있습니다.
해당 롤아웃(Rollout)은 여전히 점진적으로 진행 중이며 사양 준수(Spec compliance)가 불완전합니다(description 필드가 누락되고, 복합 토큰(Composite tokens) 지원이 여전히 뒤처져 있음). 따라서 현재는 커뮤니티 플러그인(Token Press 및 기타)이 더 완전한 내보내기(Export) 기능을 제공합니다. 발행 시점에 정확한 상태를 다시 확인하십시오. ↩
-
Figma (NYSE: FIG)는 2025년 7월 33달러에 기업공개(IPO)를 했으며, 첫 거래일에는 115달러 근처에서 마감했고 약 142달러까지 정점을 찍었습니다 (2025년 8월 1일 종가 고점 약 122달러). 2026년 6월 말에는 해당 정점 대비 85% 이상 하락한 17달러 근처에서 거래되었습니다. 수치는 매일 변동되므로 발행 시점에 다시 확인하십시오 (stockanalysis.com/stocks/fig; macrotrends.net/stocks/charts/FIG). ↩
-
Adobe는 2022년 9월 Figma를 약 200억 달러에 인수하기로 합의했으나, 유럽 위원회(European Commission)와 영국 경쟁시장국(UK CMA)의 반독점 규제 압박 이후 2023년 12월에 거래가 종료되었습니다. 이에 따라 Adobe는 10억 달러의 역종료 수수료(Reverse termination fee)를 지불했습니다 (CNBC; Axios; Adobe SEC 8-K). ↩
-
Adobe (NASDAQ: ADBE)는 생성형 AI가 크리에이티브 소프트웨어를 범용화(Commoditizes)할 것이라는 우려로 인해, 기록적인 매출과 성장하는 Firefly 비즈니스에도 불구하고 2026년에 약 30% 하락하며(출처마다 다르며, 날짜 및 기준점에 따라 약 23%에서 37%, 역대 최고점 대비 약 46% 하락) 수년 만에 최저치를 기록했습니다. 한 분석에서는 이를
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기