Copyright © 2025 the Contributors to the Design Tokens Resolver Module 2025.10 Specification, published by the Design Tokens Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available.
이 문서는 서로 다른 도구 간에 디자인 토큰을 교환하기 위한 파일 포맷의 기술 명세를 설명합니다.
이 명세서는 Design Tokens 커뮤니티 그룹에서 발행하였습니다. 이는 W3C 표준이 아니며 W3C 표준 트랙에 포함되지 않습니다. W3C 커뮤니티 최종 명세 합의(FSA) 에 따라 다른 조건이 적용될 수 있습니다. W3C 커뮤니티 및 비즈니스 그룹에 대해 자세히 알아보기.
본 섹션은 발행 시점에서 이 문서의 상태를 설명합니다. 이후 다른 문서가 이 문서를 대체할 수 있습니다. 현재 W3C 커뮤니티 그룹 보고서와 최신 개정본은 W3C 커뮤니티 그룹 보고서 인덱스 https://www.w3.org/community/reports/에서 확인할 수 있습니다.
본 문서는 DTCG에서 Candidate Recommendation 단계로서 W3C 프로세스의 정의에 따라 발행되었습니다. 이 초안에 대한 기여는 커뮤니티 기여자 라이선스 계약(CLA)에 따라, 그리고 W3C 커뮤니티 그룹 프로세스의 명시 내용에 따릅니다.
비록 W3C 권고는 아니지만, 이 구분은 폭넓은 합의를 거쳐 본 명세가 실제 구현을 위한 것임을 명확히 합니다.
이 명세서는 안정된 것으로 간주됩니다. 추후 추가 업데이트는 후속 명세에서 제공될 예정입니다.
본 명세에 대한 논의는 GitHub 이슈에서 해주시면 감사하겠습니다.
비규범적이라고 표시된 섹션뿐 아니라, 이 명세의 모든 저작 지침, 다이어그램, 예시, 그리고 주석(노트)은 모두 비규범적입니다. 명세 내 이외의 모든 항목은 규범적입니다.
이 문서에서 MAY, MUST, MUST NOT, SHOULD, SHOULD NOT 키워드는 BCP 14 [RFC2119] [RFC8174] 에서 설명된 바와 같이, 모두 대문자로 표기될 때만 본 의미로 해석되어야 합니다.
이 섹션은 비규범적입니다.
디자인 토큰은 설계 결정 사항을 플랫폼에 구애받지 않는 방식으로 표현하여, 다양한 분야, 도구, 기술 간에 공유할 수 있도록 하는 방법론입니다. 이를 통해 조직 전체에 걸쳐 공통된 용어를 마련할 수 있습니다.
디자인 토큰 기능을 통합했거나, 도입 시 이점이 있는 디자인 시스템 관리자와 사용자용 도구 생태계가 점차 커지고 있습니다:
디자인 시스템 팀들은 이러한 도구들을 통합하여 디자인 토큰 데이터가 디자인 도구와 개발 도구 사이를 흐를 수 있게 하는 것이 바람직합니다.
예를 들어:
많은 도구들이 디자인 토큰을 접근하는 API를 제공하거나, 파일로 내보낼 수 있게 해주지만, 이는 모두 도구별로 다릅니다. 따라서 디자인 시스템 팀이 맞춤형 "연결" 코드나 워크플로우를 생성 및 유지해야 하는 부담이 생깁니다. 또한, 다른 도구로 마이그레이션하려면 이러한 통합 작업을 다시 변경해야 합니다.
본 명세는 디자인 토큰 데이터를 표준 파일 포맷으로 정의함으로써 도구 간 상호운용성을 향상시키고, 디자인 시스템 팀의 통합 관련 작업 부담을 줄이는 것을 목표로 합니다.
이 정의들은 명세의 기술적 측면에 중점을 두며, 디자인 도구 벤더와 같은 구현자를 대상으로 합니다. 디자이너와 개발자를 위한 정의는 designtokens.org에서 볼 수 있습니다.
(디자인) 토큰은 사람이 읽을 수 있는 이름에 연관된 정보(최소한 이름/값 쌍)입니다.
예시:
color-text-primary: #000000;font-size-heading-level-1: 44px;이름에는 추가적인 토큰 속성이 연관될 수 있습니다.
토큰 이름에 연관된 정보입니다.
예시:
도구 및 디자인 시스템은 필요에 따라 포맷을 확장하기 위해 추가 메타데이터를 넣을 수 있습니다.
디자인 도구는 시각적 디자인을 생성하고 편집하는 도구입니다.
예시:
디자인 토큰 변환 도구는 토큰 데이터를 한 포맷에서 다른 포맷으로 변환합니다.
예시:
문서화 도구는 디자인 토큰의 사용법을 문서화하는 도구입니다.
예시:
토큰의 타입은 토큰 값에 미리 정의된 분류입니다.
예시:
토큰 도구는 타입 정보로 토큰의 목적을 유추할 수 있습니다.
예시:
그룹은 특정 범주에 속하는 토큰들의 집합입니다.
예시:
그룹은 임의적이며, 도구는 SHOULD NOT 이를 사용하여 토큰의 타입이나 목적을 유추해서는 안 됩니다.
디자인 토큰의 값은 다른 토큰을 참조할 수 있습니다. 동일한 값에 여러 이름(별칭)을 둘 수 있습니다.
아래는 Sass 예시입니다:
$color-palette-black: #000000;
$color-text-primary: $color-palette-black;
$color-text-primary의 값은 #000000입니다. 왜냐하면
$color-text-primary가 $color-palette-black를 참조하기 때문입니다. 즉,
$color-text-primary는 $color-palette-black의 별칭이라고 할 수도 있습니다.
복합 디자인 토큰은 여러 개의 명명된 자식 값으로 구성됩니다. 복합 토큰은 항상 함께 적용되는 밀접하게 연관된 스타일 속성에 유용합니다. 예를 들어, 타이포그래피 스타일은 폰트 이름, 폰트 크기, 줄 높이, 그리고 색상으로 구성될 수 있습니다.
아래는 복합 그림자(Shadow) 토큰 예시입니다:
{
"shadow-token": {
"$type": "shadow",
"$value": {
"color": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [0, 0, 0],
"alpha": 0.5,
"hex": "#000000"
}
},
"offsetX": { "value": 0.5, "unit": "rem" },
"offsetY": { "value": 0.5, "unit": "rem" },
"blur": { "value": 1.5, "unit": "rem" },
"spread": { "value": 0, "unit": "rem" }
}
}
}
디자인 토큰 파일은 이 명세서에서 설명하는 구조를 따르는 JSON (https://www.json.org/) 파일입니다.
JSON이 교환 포맷으로 선택된 이유는 다음과 같습니다:
디자인 토큰 파일을 HTTP/HTTPS로 제공하거나, 미디어 타입(이전 명칭: MIME 타입)을 지정해야 하는 모든 경우, 디자인 토큰 파일에는 다음 MIME 타입을 SHOULD 사용해야 합니다:
application/design-tokens+json하지만, 모든 디자인 토큰 파일은 유효한 JSON 파일이므로 JSON 미디어 타입: application/json으로 제공할 수도 있습니다(MAY). 위에 제시한 더 구체적인 미디어 타입 사용이 권장되며, 가능하면 SHOULD 사용해야
합니다.
디자인 토큰 파일을 열 수 있는 도구는 두 가지 미디어 타입 모두를 MUST 지원해야 합니다.
로컬 파일 시스템에 디자인 토큰 파일을 저장할 때, 파일 탐색기에서 쉽게 찾거나 파일 아이콘 및 기본 연결 응용 프로그램 설정에 도움이 되므로 별도의 파일 확장자를 사용하는 것이 유용합니다. 이 명세가 추천하는 파일 확장자는 다음과 같습니다:
.tokens.tokens.json앞의 것은 더 간결합니다. 하지만, 해당 포맷이 널리 채택 및 지원되기 전까지는 뒤의 방식을 통해 사용자가 선호하는 JSON 편집기로 쉽게 열 수 있도록 하는 것도 좋습니다.
디자인 토큰 파일을 열 수 있는 도구는 MAY 위 확장자를 사용한 파일만 필터(예: 파일 열기 대화상자에서)로 표시하도록 할 수 있습니다. 그러나, 모든 파일을 볼 수 있도록 ("모든 파일 표시" 옵션 등) 기능 또한 제공하는 것이 추천됩니다.
디자인 토큰 파일 저장 기능이 있는 도구는 파일 저장 시 위 추천 확장자 중 하나를 파일명에 SHOULD 붙여주어야 합니다.
현재 그룹에서는 명세 지원을 위한 JSON Schema 추가를 검토 중입니다.
한 벤더로부터 JSON 파일의 파일 크기 제한에 대한 우려가 제기된 바 있습니다. 워킹 그룹에서는 JSON 포맷의 제한에 대한 피드백을 계속 수집하고 있습니다.
$value 속성을 가진 객체가 토큰입니다. 따라서 $value는 본 명세에서 예약어이며, 토큰 이름으로
"$value"를 사용할 수 없습니다. 부모 객체의 키가 토큰 이름입니다.
토큰의 이름은 [RFC8259]에 정의된 유효한 JSON 문자열이어야 합니다 MUST.
위 예시는 다음 속성을 가진 1개의 디자인 토큰을 정의합니다:
이름과 값은 모두 필수입니다.
토큰 이름은 대소문자를 구분하므로, 같은 그룹에서 이름이 대소문자만 다른 두 토큰을 갖는 다음 예시는 유효합니다:
하지만 일부 도구는 다른 언어로 내보내거나 사용자에게 이름을 표시할 때 이름을 변환해야 할 MAY 수도 있으므로, 이름이 대소문자만 다른 토큰 이름을 가지면 결과물에서 동일하거나 원치 않는 중복이 발생할 수 있습니다. 예를 들어, 변환 도구가 이 토큰을 Sass 코드로 변환하면 아래와 같이 문제를 유발할 수 있습니다:
도구는 MAY 토큰 이름이 대소문자만 다를 때 경고를 표시할 수 있습니다.
이 포맷에서 정의된 모든 속성은 달러 기호($)로 시작합니다. 이 규칙은 향후 명세 버전에서 새 속성을 도입할 때도 적용됩니다. 따라서 토큰 및 그룹 이름은 $ 문자로 시작할 수 없습니다 MUST NOT.
또한 토큰 별칭에 사용되는 구문 때문에 다음 문자는 토큰 및 그룹 이름에 사용할 수 없습니다 MUST NOT:
{ (왼쪽 중괄호)} (오른쪽 중괄호). (마침표)$value만이 토큰의 유일한 필수 속성이긴 하지만, 아래의 추가 속성들을 MAY 추가할 수 있습니다:
토큰의 용도를 설명하는 일반 텍스트 설명을 선택 속성 $description으로 추가할 수 있습니다. 도구에 따라 설명을 다양한 방식으로 활용할 수 있습니다
MAY.
예시:
$description 값은 반드시 일반 JSON 문자열이어야 합니다 MUST. 예시:
디자인 토큰은 언제나 명확한 타입을 가지므로, 도구들이 해당 값을 신뢰성 있게 해석할 수 있습니다.
토큰의 타입은 선택 속성 $type으로 지정할 수 있습니다. 만약 토큰에 $type이 없다면, 다음 규칙에 따라 타입을 반드시 결정해야
합니다 MUST:
$type 속성이 있다면, 가장 가까운 부모 그룹의 $type을 상속합니다.
$type이 하나도 없다면 타입을 정할 수 없으므로, 해당 토큰은 무효로 간주해야 합니다 MUST.도구는 토큰의 값을 검사하여 타입을 추론해서는 안됩니다 MUST NOT.
$type 속성은 다음 수준에서 설정할 수 있습니다:
$type 값은 반드시 명세 내 타입 정의에 명시된 값 중 하나인 일반 JSON 문자열이어야 하며 MUST,
대소문자를 구분합니다.
예시:
선택 속성 $extensions는 도구가 특정 벤더, 사용자, 팀, 혹은 벤더별 데이터를 디자인 토큰에 추가할 수 있도록 해주는
객체입니다 MAY. 이때, 각 도구는 반드시 벤더 고유의 키를 사용하고 MUST 값으로는
유효한 JSON 데이터를 자유롭게 넣을 수 있습니다 MAY.
이 포맷을 지원하는 도구 간의 상호운용성을 위해, 팀·도구는 확장 데이터의 사용을 토큰 값 이해에 필수적이지 않은 선택적 메타데이터로만 제한해야 합니다 SHOULD.
도구 벤더는 자신의 확장 데이터 명세를 공개할 것을 권장합니다. 그래야 타 도구들도 이를 역공학하지 않고 지원할 수 있습니다. 인기 있는 확장은 향후 명세 표준 기능으로 통합될 수도 있습니다.
확장 섹션은 벤더에 한정되지 않으며, 모든 토큰 사용자도 목적에 맞게 추가 데이터를 이 섹션에 넣을 수 있습니다.
$deprecated 속성은 토큰을 사용 중단(deprecate) 대상으로 지정하고, 이유를 설명할 때 MAY 사용할 수 있습니다. 사용중단의 이유는 다음에 국한되지 않습니다:
| 값 | 설명 |
|---|---|
true |
이 토큰은 사용 중단되었습니다(설명 없음). |
String |
이 토큰은 사용 중단되었으며, 여기 설명이 제공됩니다. |
false |
이 토큰은 사용 중단되지 않았음(그룹 기본값을 덮어쓸 수 있음). |
도구 개발자는 예시와 같은 별칭이 들어갈 때 문자열을 보완하여 보여줄 수 있습니다 MAY. 도구는 토큰을 해석하고 문서, 코드, 시각적 표현 또는 다른 토큰으로 연결 등 다양한 방법으로 UI에서 안내할 수 있습니다. 예를 들어 “Please use {button.activeBorder} instead“는 JS에서 아래처럼 출력할 수 있습니다:
또는
그룹은 디자인 토큰을 논리적 컬렉션으로 정리하고 토큰 파일에 계층 구조를 제공합니다. 그룹은 임의적이며 도구는 SHOULD NOT 이를 사용하여 디자인 토큰의 타입이나 목적을 유추하면 안 됩니다.
그룹은 $value 속성을 포함하지 않는 JSON 객체로 식별됩니다. 그룹은 MAY 다음을 포함할 수 있습니다:
$value 속성을 가진 객체$value 속성이 없는 객체$로 접두된 속성들(예: $description, $type)
중요: $value 속성이 있으면 해당 객체는 토큰으로 확실히 식별됩니다. 객체가 $value와 자식
토큰/그룹을 모두 포함한다면, 그 객체는 동시에 토큰이자 그룹일 수 없으므로 무효한 구조를 만듭니다. 도구는 이를 오류로 보고해야 합니다 MUST.
그룹은 자식 토큰 및 중첩 그룹과 함께 루트 토큰을 포함할 수 있습니다 MAY. 루트 토큰은 그룹의 기본 값을 제공하면서 변형이나 확장을 허용합니다.
그룹은 예약된 이름 $root를 토큰 이름으로 사용하여 루트 토큰을 지원합니다:
근거: 예약된 토큰 이름으로 $root를 사용하면 그룹 참조와 토큰 참조 간의 모호성을 제거하고 명확한 문법을 유지합니다.
$ 접두사는 사용자 정의 토큰과의 이름 충돌을 방지하고 명세의 다른 예약 속성과 일관됩니다.
그룹은 다음 속성들을 포함할 수 있습니다 MAY:
| 속성 | 필수 | 설명 |
|---|---|---|
$description |
No | 그룹의 목적을 설명하는 일반 JSON 문자열 |
$type |
No | 명시적으로 타입을 선언하지 않은 그룹 내 토큰의 기본 타입 역할을 합니다. 타입 상속은 중첩 그룹과 그 토큰에도 적용됩니다. |
$extends |
No | 다른 그룹으로부터 토큰과 속성을 상속합니다. 자세한 내용은 Extending Groups 참조 |
$deprecated |
No | 그룹을 사용 중단으로 표시합니다. 값은 true, false 또는 설명 문자열일 수 있습니다 |
$extensions |
No | 도구가 독점 데이터를 추가할 수 있는 벤더별 확장 |
그룹은 전체 그룹을 사용 중단으로 표시하기 위해 선택 속성 $deprecated를 포함할 수 있습니다 MAY.
이는 그룹 내의 모든 자식 토큰에도 확장됩니다(명시적으로 덮어쓰는 경우 제외).
| 값 | 설명 |
|---|---|
true |
이 그룹은 사용 중단되었습니다(설명 없음) |
string |
이 그룹은 사용 중단되었으며 설명이 제공됩니다 |
false |
이 그룹은 사용 중단되지 않았습니다(부모 그룹 기본값을 덮어쓸 수 있음) |
그룹은 도구가 독점적이거나 사용자·팀·벤더별 데이터를 추가할 수 있는 선택 속성 $extensions를 포함할 수 있습니다 MAY. 각 도구는 벤더 고유의 키를 사용해야 하며 그 값은 유효한 JSON 데이터일 수 있습니다 MUST.
그룹은 $extends 속성을 사용하여 다른 그룹으로부터 토큰과 속성을 상속할 수 있습니다 MAY.
$extends는 토큰을 참조해서는 안 됩니다 MUST NOT. $extends는 JSON
Schema의 $ref 키워드에 대한 문법적 설탕이며 [json-schema-2020-12]에
정의된 동일한 의미적 동작을 따릅니다.
$extends 속성은 [json-schema-2020-12]에
명시된 JSON Schema의 $ref 키워드와 의미적으로 동등합니다. 다음 두 그룹 정의는 기능적으로 동일합니다:
$extends 사용(Design Token 문법):
{
"button-primary": {
"$extends": "{button}",
"background": {
"$value": {
"colorSpace": "srgb",
"components": [0.8, 0, 0.4],
"hex": "#cc0066"
}
},
"focus": {
"$value": {
"colorSpace": "srgb",
"components": [1, 0.2, 0.6],
"hex": "#ff3399"
}
}
}
}
$ref 사용(JSON Schema 문법):
{
"button-primary": {
"$ref": "#/button",
"background": {
"$value": {
"colorSpace": "srgb",
"components": [0.8, 0, 0.4],
"hex": "#cc0066"
}
},
"focus": {
"$value": {
"colorSpace": "srgb",
"components": [1, 0.2, 0.6],
"hex": "#ff3399"
}
}
}
}
확장 해석은 다음의 간단한 절차를 따릅니다:
$extends 참조를 해석하여 대상 그룹을 찾습니다이로써 상속된 내용과 로컬 내용을 위 규칙에 따라 결합한 새로 해석된 그룹이 생성됩니다.
그룹 확장은 로컬 속성이 동일 경로의 상속된 속성을 덮어쓰는 딥 머지 동작을 따릅니다:
오버라이드 규칙:
input-amount의 결과:
| 토큰 | 최종 값 |
|---|---|
field.width |
"100px" (로컬 오버라이드가 우선) |
field.background |
{"colorSpace": "srgb", "components": [1, 1, 1], "hex": "#ffffff"}
(상속됨, 로컬 오버라이드 없음)
|
다단계 오버라이드 예시:
extended의 결과:
| 토큰 | 최종 값 | 출처 |
|---|---|---|
color |
"#red" |
오버라이드됨 |
spacing |
"16px" |
상속됨 |
border |
"1px solid" |
추가됨 |
그룹은 순환 상속 체인을 생성해서는 안 됩니다 MUST NOT. 다음 패턴들은 무효입니다:
유효한 상속 패턴:
$extends는 디자인 토큰 별칭와 동일한 참조 포맷을
지원합니다.
$extends 오류 처리는 JSON Schema의 $ref 오류 패턴을 따릅니다:
도구는 JSON Schema 검증기에서 사용하는 것과 동일한 오류 감지 및 보고 패턴을 구현해야 합니다 MUST.
디자인 토큰 파싱을 구현하는 도구는 다음 중 하나를 선택할 수 있습니다 MAY:
$ref로 변환: $extends를 표준 JSON Schema $ref
문법으로 변환하고 기존 JSON Schema 라이브러리로 검증$ref 처리와 동일한 알고리즘을 사용하여
$extends를 직접 구현
구현 방식에 관계없이 의미적 동작은 JSON Schema 2020-12 이상에 명시된 $ref와 동등해야 합니다 MUST.
이 명세는 $extends를 JSON Schema의 $ref 키워드에 대한 문법적 설탕으로 정의하며, 디자인 토큰 전용 참조 문법을
제공하면서도 동등한 동작을 유지합니다. 위에서 설명한 딥 머지 의미론은 JSON Schema 2020-12가 동반 속성과 함께 $ref를 처리하는 방식과
일치합니다.
JSON Schema에 익숙한 구현자는 $extends 동작을 다음과 같이 이해할 수 있습니다:
"$extends": "{group}"를 "$ref": "#/group"로 변환$ref 해석 적용이 명세를 구현하는 도구는 다음을 선택할 수 있습니다 MAY:
$extends를 $ref로 변환하고 JSON Schema 라이브러리 사용구현 방식에 관계없이 사용자에게 보이는 동작은 본 명세에 설명된 딥 머지 의미론과 일치해야 합니다 MUST.
그룹은 비어있을 수 있습니다(토큰이나 중첩 그룹을 포함하지 않음) MAY. 비록 즉시 목적이 없어 보일 수 있지만, 다음과 같은 이점이 있습니다:
$description, $extensions)을 통해 메타데이터를 포함할 수 있습니다중괄호({group.token})를 사용하는 현재의 토큰 참조 문법은 하위 호환성과 개발자 편의성을 위해 유지됩니다. 그러나 도구는 고급 사용 사례를 위해 JSON
Pointer 표기법도 지원할 수 있습니다 MAY.
도구는 [rfc6901]에 정의된 대로 JSON Pointer
참조를 $ref 속성을 사용하여 지원해야 합니다 MUST:
그룹을 처리할 때 도구는 다음 해석 순서를 따라야 합니다 MUST:
$value 속성을 가진 직계 자식$root 이름을 가진 토큰$extends를 통해 상속된 토큰(오버라이드되지 않은 경우)토큰 경로는 그룹 이름과 토큰 이름을 마침표(.)로 연결하여 구성됩니다. 예약된 토큰 이름 $root는 명시적이고 모호하지 않은 참조를
유지하기 위해 경로에 포함됩니다.
예시:
| 위치 | 경로 | 비고 |
|---|---|---|
/color/accent/$root |
color.accent.$root |
토큰 경로 |
/color/accent/light |
color.accent.light |
토큰 경로 |
/color/accent |
— | 토큰 해석에는 무효, 그룹에는 유효 |
타입 해석은 다음 우선순위 규칙을 따릅니다:
$type 속성 (가장 높은 우선순위)$type 속성 ($extends 해석 후)$type 속성 (계층을 따라 올라감)확장과 함께하는 타입 해석: $extends가 JSON Schema $ref 의미론을 따르므로, 타입
상속 동작은 명시적 병합 규칙보다는 제약 검증에 의해 결정됩니다. 로컬 타입 제약은 JSON Schema 검증 패턴에 따라 상속된 제약과 함께 평가됩니다.
이 예시에서 그룹 extended는 로컬 $type: "dimension" 제약과 참조된 base 그룹의 적용
가능한 제약을 모두 만족해야 하며, 이는 JSON Schema 제약 해석 규칙을 따릅니다.
도구는 다음에서의 순환 참조를 감지하고 오류를 발생시켜야 합니다 MUST:
{token} 참조)
$extends 참조)$ref 속성, 지원되는 경우)$extends에 대한 순환 참조 감지는 JSON Schema $ref의 요구 사항과 동일합니다. 도구는 사이클 감지를 위한 JSON
Schema 검증기가 사용하는 알고리즘을 구현하는 것이 권장됩니다 SHOULD.
도구는 그룹 a, b, c에 영향을 미치는 오류로 이를 보고해야 합니다 MUST.
이 명세는 기존 디자인 토큰 파일과의 하위 호환성을 염두에 두고 설계되었습니다. 이 명세를 구현하는 도구는:
해석된 토큰:
{input-amount.field.width} → { "value": 100, "unit": "px" } (오버라이드됨)
{input-amount.field.background} → #ffffff (input에서 상속됨)이 예시는 구성요소가 기본 구성요소를 확장하면서 특정 토큰은 오버라이드하고 다른 토큰은 상속받는 주요 사용 사례를 보여줍니다.
이 구조는 다음과 같은 토큰 접근을 생성합니다:
| 토큰 참조 | 해석된 값 |
|---|---|
{color.brand.$root} |
{"colorSpace": "srgb", "components": [0, 0.4, 0.8], "hex": "#0066cc"}
|
{color.brand.light} |
{"colorSpace": "srgb", "components": [0.2, 0.533, 0.867], "hex": "#3388dd"}
|
{color.semantic.success.$root} |
{"colorSpace": "srgb", "components": [0, 0.8, 0.4], "hex": "#00cc66"}
|
{color.semantic.error.dark} |
{"colorSpace": "srgb", "components": [0.6, 0, 0], "hex": "#990000"}
|
GUI를 통해 토큰을 선택하거나 편집할 수 있는 도구는 그룹 구조를 사용하여 적절한 점진적 공개 방식(예: 접이식 트리 뷰)을 표시할 수 있습니다 MAY.
토큰 이름은 같은 파일 내에서 고유하다고 보장되지 않습니다. 동일한 이름이 서로 다른 그룹에서 사용될 수 있습니다. 또한, 변환 도구는 코드의 변수처럼 고유하게 식별 가능한 방식으로 디자인 토큰을 내보내야 할 MAY 있습니다. 따라서 변환 도구는 디자인 토큰의 경로를 사용해야 합니다. 경로는 파일 내에서 고유합니다 SHOULD.
예를 들어, 변환 도구인 Style Dictionary는 다음과 같은 디자인 토큰 파일을 사용할 수 있습니다:
...그리고 경로를 연결하여 변수 이름을 만들면 다음과 같이 Sass 변수로 출력할 수 있습니다:
토큰이 명시적 값을 가지는 대신 다른 토큰의 값을 참조할 수 있습니다. 다시 말해, 한 토큰은 다른 토큰의 별칭이 될 수 있습니다. 본 명세에서는 "별칭(alias)"과 "참조(reference)" 용어를 동의어로 간주하며 혼용합니다.
별칭은 다음과 같은 경우에 유용합니다:
디자인 토큰은 토큰 파일 내의 내용을 참조하기 위해 두 가지 구문을 지원합니다:
중괄호 구문은 완전한 토큰 값 전체을 참조하도록 설계되었으며, 항상 대상 토큰의 $value 속성으로 해석됩니다.
이 예에서 {colors.blue}는 전체 색상 객체
{"colorSpace": "srgb", "components": [0, 0.4, 0.8], "hex": "#0066cc"}로 해석됩니다.
중요: 중괄호 참조는 오직 $value 속성을 가진 완전한 토큰(객체)만 대상이 될 수 있으며, 토큰 값 내부의 개별 속성이나
문서의 임의 위치는 대상으로 할 수 없습니다.
토큰 값의 특정 속성이나 문서 구조의 다른 부분에 접근해야 하는 고급 사용 사례를 위해, 토큰은 [rfc6901]에 정의된 JSON Pointer 표기법을
$ref 속성으로 지원해야 합니다. 본 명세를 구현하는 도구는 JSON Pointer 구문을 반드시 지원해야 합니다 MUST.
이 예에서:
"$ref": "#/colors/blue/$value"는 "{colors.blue}"와 동등합니다"$ref": "#/colors/blue/$value/components/0"는 blue 색상의 첫 번째(빨강) 구성 요소(0)에만 접근합니다
주요 차이점:
| 측면 | 중괄호 {token} |
JSON Pointer $ref |
|---|---|---|
| 대상 | 완전한 토큰만 | 문서 내의 임의 위치 |
| 암시적 경로 | 항상 /$value를 덧붙임 |
명시적 전체 경로 필요 |
| 사용 사례 | 토큰 간 참조 | 속성 수준 참조 |
| 구문 | {group.token} |
#/group/token/$value |
도구가 실제 토큰 값을 필요로 할 때는 참조를 반드시 해석해야 합니다 MUST — 즉, 참조된 토큰을 찾아 그 값을 가져와야 합니다. 도구는 참조를 최대한 보존하고, 실제 값이 필요할 때만 참조를 해석하는 것이 권장됩니다 SHOULD. 예를 들어 디자인 도구에서는 별칭이 참조하는 토큰의 값 변경이 그 별칭을 사용하는 모든 곳에 반영되어야 합니다 SHOULD.
중괄호 참조의 경우:
{group.token}에서 토큰 경로를 추출["group", "token"] 같은 세그먼트로 변환$value 속성이 있는지 확인$value 내용을 추출하여 반환JSON Pointer 참조의 경우:
#/path/to/target에서 경로 세그먼트를 추출~0, ~1) 처리별칭은 다른 별칭을 참조할 수 있습니다 MAY. 이 경우 도구는 명시적 값이 있는 토큰을 찾을 때까지 모든 참조를 따라가야 합니다 MUST.
이 예에서 {semantic.link}은 체인을 따라 semantic.link → semantic.brand →
base.primary로 이동하여 {base.primary}과 동일한 색상 값으로 해석됩니다.
참조는 순환이 되어서는 안 됩니다 MUST NOT. 디자인 토큰 파일에 순환 참조가 포함되어 있으면 그 체인의 모든 토큰 값은 알 수 없게 되며 사용자에게 적절한 오류 또는 경고 메시지가 표시되어야 합니다 SHOULD.
도구는 이 순환을 감지하여 해당 순환 체인에 속한 모든 토큰에 영향을 주는 오류로 보고해야 합니다 MUST.
JSON Pointer 구문은 복합 토큰 내의 특정 속성에 대한 참조를 가능하게 하여 전체 토큰 값뿐 아니라 구성 요소 단위의 재사용을 허용하고 의미적 관계를 유지할 수 있게 합니다.
중요: 속성 수준 참조는 JSON Pointer 구문($ref)을 필요로 하며 중괄호 구문으로는 표현할 수 없습니다.
이 예에서:
layout.small은 base.spacing과 동일한 숫자 값(16)을 사용하지만 다른
단위(rem)를 사용합니다layout.large은 base.spacing과 동일한 단위(px)를 사용하지만 숫자 값은 다릅니다
(32)이 예에서:
base.text에서 fontFamily와 lineHeight를 상속합니다fontSize와 fontWeight를 정의합니다JSON Pointer 구문은 디자인 토큰 문서 구조 내의 어떤 위치에도 직접 접근할 수 있게 하며, 이는 [rfc6901]에 정의된 표준 JSON Pointer 규칙을 따릅니다.
#/ (문서 루트를 가리킴)/로 각 레벨을 구분 (예: #/group/token/$value)#/color/$value/components/0)~는 ~0으로/는 ~1으로디자인 토큰은 값을 $value 속성에 저장하므로, 토큰 값에 대한 JSON Pointer 경로는 예측 가능한 패턴을 따릅니다:
| JSON Pointer | 동등한 중괄호 참조 | 설명 |
|---|---|---|
#/colors/blue/$value |
{colors.blue} |
완전한 토큰 값 |
#/colors/blue/$value/hex |
N/A | 색상의 hex 속성 |
#/colors/blue/$value/components/0 |
N/A | 색상의 첫 번째 구성 요소 |
#/colors/blue/$type |
N/A | 토큰 타입 메타데이터 |
#/path/to/target에서 경로 세그먼트 추출~0, ~1) 처리{group.token}에서 토큰 경로 추출["group", "token"] 같은 세그먼트로 변환$value 속성이 있는지 확인$value 내용을 추출하여 반환도구는 다음에 대해 오류를 보고해야 합니다 MUST:
| 토큰 경로 | JSON Pointer | 중괄호 구문 |
|---|---|---|
| 루트 토큰 "primary" | #/primary |
{primary} |
| 중첩된 토큰 | #/colors/blue |
{colors.blue} |
| 배열 요소 | #/color/components/0 |
지원되지 않음 |
| 공백이 있는 속성 | #/brand colors/primary |
{brand colors.primary} |
| 슬래시가 포함된 속성 | #/my~1group/token |
{my/group.token} |
명확한 해석:
| 참조 | 결과 | 비고 |
|---|---|---|
#/ambiguous/data/0 |
10 |
JSON Pointer 배열 인덱스 |
{ambiguous.metadata.0} |
"Info about first item" |
중괄호 객체 속성 |
{ambiguous.data.0} |
오류 | 중괄호는 배열 인덱스에 접근할 수 없음 |
{ambiguous.metadata.2} |
오류 | 속성 "2"가 존재하지 않음 |
도구는 다음에 대해 오류를 보고해야 합니다 MUST:
본 명세에 정의된 참조 구문은 JSON Schema 패턴과의 호환성을 제공하면서 디자인 토큰 작성의 특정 요구를 충족합니다:
중요: 디자인 토큰의 JSON Pointer 참조($ref)는 JSON Schema의 $ref와 동일한 구문을
따르지만, 중괄호 참조({token})는 디자인 토큰 전용이며 자동으로 $value를 해석하고 토큰만을 대상로 한다는 점에서 표준 JSON
Schema 참조와 다른 의미를 가집니다.
이 명세는 단순한 토큰 별칭과 정교한 속성 수준 관계를 모두 가능하게 하면서 작성자 편의성과 기술적 정확성의 균형을 맞춘 유연하고 표준 기반의 참조 방식을 제공합니다.
많은 도구는 주어진 토큰이 어떤 종류의 값을 나타내는지 알아야 적절하게 처리할 수 있습니다. 변환 도구는 토큰의 타입에 따라 토큰을 다르게 변환하거나 포맷해야 할 MAY 수 있습니다. Design tools는 특정 타입의 토큰을 편집할 때 색상 선택기, 슬라이더, 텍스트 입력 등 서로 다른 종류의 입력을 사용자에게 제공할 MAY 있습니다. 스타일 가이드 생성기는 서로 다른 타입의 토큰에 대해 서로 다른 형태의 미리보기를 사용할 MAY 있습니다.
이 명세는 여러 디자인 중심의 타입을 정의하며 모든 디자인 토큰은 이들 중 하나를 반드시 사용해야 합니다 MUST. 또한, 해당 토큰의 값은 본 명세에 정의된 선택된 타입의 규칙과 구문을 따라야 합니다 MUST.
토큰의 타입은 $type 속성으로 직접 설정할 수 있습니다. 또는 부모 그룹 중 하나로부터 타입을 상속받거나, 원하는 타입을 가진 토큰의 별칭(alias)이 될 수도
있습니다.
토큰에 명시적 타입이 설정되지 않은 경우, 도구는 해당 토큰을 무효로 간주해야 하며 다른 타입을 값으로부터 추론하려 해서는 안 됩니다 MUST.
명시적 타입이 설정되어 있으나 값이 기대하는 구문과 일치하지 않으면, 해당 토큰은 무효이며 사용자에게 적절한 오류를 표시해야 합니다 SHOULD. 다시
말해 $type 속성은 해당 토큰에 허용되는 값의 종류를 선언하는 것입니다. (이는 Java나 TypeScript 같은 프로그래밍 언어에서의 타입 선언과 유사하며, 선언된
타입과 호환되지 않는 값은 컴파일 오류를 유발합니다.)
UI에서 색상을 나타냅니다. 색상을 표현하는 방법에 대한 자세한 내용은 Color 모듈을 참조하십시오.
위치, 너비, 높이, 반경 또는 두께 등 UI의 단일 차원에서 거리를 나타냅니다. $type 속성은 문자열 dimension으로 설정되어야
합니다 MUST. 값은 숫자 value(정수 또는 부동소수)와 측정 단위
unit("px" 또는 "rem")을 포함하는 객체여야 합니다 MUST.
| 키 | 타입 | 필수 | 설명 |
|---|---|---|---|
value |
number |
Y | 숫자 값을 나타내는 정수 또는 부동소수 |
unit |
string |
Y | 거리의 단위. 지원 값: "px", "rem". |
예시:
$value.unit은 오직 "px" 또는 "rem"만 허용됩니다.dp, iOS에서는
pt에 해당합니다. 변환 도구는 필요에 따라 이들 또는 다른 동등 단위로 변환해야 할 SHOULD 수 있습니다.
$value.value가 0인 경우에도 $value.unit은 여전히 요구됩니다.아래와 같은 단순한 접근 방식은 명세의 초기 단계에 적절할 수 있지만 플랫폼/OS/브라우저 제약으로 인해 더 복잡해질 수 있습니다.
단일 글꼴 이름 또는 선호도 순서로 정렬된 글꼴 이름의 배열을 나타냅니다. $type 속성은 문자열 fontFamily로 설정되어야 합니다
MUST. 값은 단일 글꼴 이름을 담은 문자열이거나 각 항목이 단일 글꼴 이름인 문자열 배열이어야 합니다 MUST.
예시:
글꼴의 두께를 나타냅니다. $type 속성은 문자열 fontWeight로 설정되어야 합니다 MUST. 값은 [1, 1000] 범위의 숫자이거나 아래 표에 정의된 미리 정의된 문자열 값 중 하나여야 합니다.
작은 숫자는 가벼운(weight) 두께를, 큰 숫자는 굵은 두께를 나타내며 이는 OpenType
wght 태그 명세와 일치합니다. 미리 정의된 문자열 값은 특정 숫자 값의 별칭입니다. 예를 들어 100,
"thin", "hairline"은 동일한 값입니다.
| 숫자 값 | 문자열 별칭 |
|---|---|
100 |
thin, hairline |
200 |
extra-light, ultra-light |
300 |
light |
400 |
normal, regular, book |
500 |
medium |
600 |
semi-bold, demi-bold |
700 |
bold |
800 |
extra-bold, ultra-bold |
900 |
black, heavy |
950 |
extra-black, ultra-black |
[1, 1000] 범위를 벗어나는 숫자 값과, 대소문자만 다른 값을 포함한 다른 모든 문자열 값은 무효이며 도구에서 거부되어야 합니다 MUST.
예시:
애니메이션 또는 애니메이션 사이클이 완료되는 데 걸리는 시간(밀리초 단위)을 나타냅니다(예: 200 밀리초). $type 속성은 문자열
duration으로 설정되어야 합니다 MUST. 값은 숫자 value(정수 또는 부동소수)와
시간 단위 unit("ms" 또는 "s")을 포함하는 객체여야 합니다. 밀리초는 초의 천분의 일입니다.
| 키 | 타입 | 필수 | 설명 |
|---|---|---|---|
value |
number |
Y | 숫자 값을 나타내는 정수 또는 부동소수 |
unit |
string |
Y | 시간 단위. 지원 값: "ms"(밀리초), "s"(초). |
예시:
$value.unit은 오직 "ms" 또는 "s"만 허용됩니다.애니메이션 기간 동안 애니메이션 속성 값이 완료로 향해 진행되는 방식을 나타내며, 가속, 감속, 바운스 같은 시각적 효과를 생성합니다. $type 속성은 문자열
cubicBezier로 설정되어야 합니다 MUST. 값은 네 개의 숫자를 포함하는 배열이어야 합니다. 이 숫자들은 두
점(P1, P2)을 나타내며 각각 x좌표와 y좌표 하나씩을 가집니다 [P1x, P1y, P2x, P2y]. P1과 P2의 y좌표는 실수 범위 전체를 가질 수 있지만, x좌표는 [0, 1]
범위로 제한됩니다.
예시:
숫자를 나타냅니다. 숫자는 양수, 음수 및 소수를 포함할 수 있습니다. 숫자 토큰의 예로는 그라디언트 정지 위치나
단위가 없는 행간(line heights) 등이 있습니다. $type 속성은 문자열 number로 설정되어야 합니다 MUST. 값은 JSON 숫자여야 합니다 MUST.
이 섹션은 비규범적(non-normative)입니다.
여기에 아직 문서화되지 않은 타입으로는 다음이 포함될 가능성이 있습니다:
이전 장에서 정의한 color나 dimension 같은 타입들은 모두 단일 값을 가집니다. 예를 들어 색상 토큰의 값은 하나의 색상입니다. 그러나 UI 디자인에는 여러 값을 조합한 형태의 항목들도 있습니다. 예를 들어 쉐도우 스타일은 색상, X & Y 오프셋, 블러 반경, 스프레드 반경의 조합입니다.
각 쉐도우 스타일은 동일한 구성 요소들(색상, X & Y 오프셋 등)을 가지지만, 각 구성 요소의 값은 달라집니다. 또한 각 구성 요소의 값(즉 "하위 값(sub-value)")은 항상 동일한 타입을 가집니다. 예를 들어 쉐도우의 색상은 항상 color 값이어야 하고, X 오프셋은 항상 dimension 값이어야 합니다. 따라서 쉐도우 스타일은 미리 정의된 구조를 따르는 여러 값의 조합이며, 다시 말해 쉐도우 스타일 자체가 하나의 타입입니다. 이러한 타입을 우리는 복합 타입(composite types)이라고 부릅니다.
구체적으로, 복합 타입은 다음과 같은 특성을 가집니다:
color 값)일 수도 있고, 해당 하위 값의 타입을 가진 다른 디자인 토큰에 대한 참조(예:
"{some.other.token}")일 수도 있습니다.
복합 타입이 배열 속성을 포함할 때, 배열의 각 요소는 명시적 값이거나 적절한 타입의 토큰에 대한 참조일 수 있습니다. 배열 내의 참조는 단일 값으로 해석되며 배열 확장이나 평탄화(flattening)를 일으키지 않습니다. 이를 통해 배열 요소들 중 일부는 참조이고 다른 일부는 명시적 값인 유연한 구성(composition)이 가능합니다.
배열 별칭은 다음 원칙을 따릅니다:
예를 들어, 배열 값을 가진 쉐도우 토큰은 다른 쉐도우 토큰에 대한 참조와 명시적 쉐도우 객체를 혼합할 수 있습니다:
{
"layered-shadow": {
"$type": "shadow",
"$value": [
"{base.shadow}",
{
"color": "{brand.accent}",
"offsetX": { "value": 4, "unit": "px" },
"offsetY": { "value": 4, "unit": "px" },
"blur": { "value": 8, "unit": "px" },
"spread": { "value": 0, "unit": "px" }
}
]
}
}
타입이 복합 타입인 디자인 토큰은 때때로 복합(composite) 토큰이라고도 불립니다. 타입 외에는 복합 토큰에 특별한 점은 없습니다. 이들은 $description이나 $extensions 같은 추가 속성을 가질 수 있고, 다른 디자인 토큰에 의해 참조될 수도
있습니다.
언뜻 보기엔 그룹과 복합 토큰이 매우 비슷해 보일 수 있습니다. 그러나 이들은 다른 문제를 해결하기 위해 설계되었으며 다음과 같은 중요한 차이점이 있습니다:
선이나 테두리에 적용되는 스타일을 나타냅니다. $type 속성은 문자열 strokeStyle로 설정되어야 합니다 MUST. 값은 다음 중 하나여야 합니다:
stroke-linejoin, stroke-miterlimit,
stroke-dashoffset 같은 추가 하위 값이 필요합니까?
문자열 형태의 스트로크 스타일 값은 다음 미리 정의된 값들 중 하나여야 합니다 MUST:
soliddasheddotteddoublegrooveridgeoutsetinset이 값들은 CSS의 동등한 "line style" 값들과 같은 의미를 가집니다. CSS 명세에 따라 정확한 렌더링은 구현에 따라 달라집니다. 예를 들어
dashed 스타일에서 대시와 간격의 길이는 도구마다 달라질 수 있습니다.
객체 형태의 스트로크 스타일 값은 다음 속성을 가져야 합니다 MUST:
dashArray: dimension 값 또는 dimension 토큰에 대한 참조들의
배열입니다. 교대로 나타나는 대시와 간격의 길이를 지정합니다. 배열의 각 요소는 명시적 dimension 값 또는 dimension 토큰에 대한 참조여야 합니다. 만약 홀수
개의 값이 제공되면, 값들의 리스트는 짝수 개를 만들기 위해 반복됩니다.lineCap: 다음 미리 정의된 문자열 값 중 하나여야 합니다: "round", "butt" 또는
"square". 이 값들은 SVG의 stroke-linecap
속성과 동일한 의미를 가집니다.
문자열 값과 객체 값은 서로 배타적인 방식으로 스트로크 스타일을 표현합니다. 예를 들어 inset이나 groove 같은 일부 문자열
값은 테두리의 일부 영역에 대해 색상을 밝거나 어둡게 처리하는 구현 특화 방식이 필요하므로 dashArray와 lineCap로 표현할
수 없습니다. 반대로, 정확히 정의된 dashArray와 lineCap 조합이 dashed나
dotted 키워드와 동일한 시각적 결과를 보장하지는 않습니다(구현별 차이).
또한 일부 도구나 플랫폼은 이 타입이 표현할 수 있는 전체 범위의 스트로크 스타일을 지원하지 않을 수 있습니다. 이런 경우, 해당 플랫폼에서 네이티브로 지원하지 않는
strokeStyle 토큰을 표시하거나 내보낼 때 지원되는 가장 근접한 근사값으로 대체해야 합니다.
"가장 근접한 근사값"을 선택하는 구체적 방법은 구현에 따라 다릅니다. 그러나 다음 예시는 도구가 몇몇 시나리오에서 사용할 수 있는 대체 방식을 보여줍니다.
테두리 스타일을 나타냅니다. $type 속성은 문자열 border로 설정되어야 합니다 MUST.
값은 다음 속성을 가지는 객체여야 합니다 MUST:
color: 테두리의 색상. 이 속성의 값은 유효한 color 값이거나 color 토큰에 대한 참조여야
합니다.width: 테두리의 너비 또는 두께. 이 속성의 값은 유효한 dimension 값이거나
dimension 토큰에 대한 참조여야 합니다.style: 테두리 스타일. 이 속성의 값은 유효한 stroke style 값이거나 stroke style
토큰에 대한 참조여야 합니다.두 상태 사이의 애니메이션 전환을 나타냅니다. $type 속성은 문자열 transition로 설정되어야 합니다 MUST. 값은 다음 속성을 가지는 객체여야 합니다 MUST:
duration: 전환의 지속 시간. 이 속성의 값은 유효한 duration 값이거나 duration
토큰에 대한 참조여야 합니다.delay: 전환이 시작되기 전 대기 시간. 이 속성의 값은 유효한 duration 값이거나
duration 토큰에 대한 참조여야 합니다.timingFunction: 전환의 타이밍 함수. 이 속성의 값은 유효한 cubic Bézier
curve 값이거나 cubic Bézier 토큰에 대한 참조여야 합니다.쉐도우 스타일을 나타냅니다. $type 속성은 문자열 shadow로 설정되어야 합니다 MUST.
값은 다음 중 하나여야 합니다:
값이 배열일 경우, 각 요소는 명시적 쉐도우 객체이거나 다른 쉐도우 토큰에 대한 참조여야 합니다. 배열 내의 참조는 단일 쉐도우 객체로 해석되며 배열 평탄화는 발생하지 않습니다.
각 쉐도우 객체(명시적이든 참조이든)에는 다음 속성이 반드시 있어야 합니다 MUST:
color: 쉐도우의 색상. 이 속성의 값은 유효한 color 값이거나 color 토큰에 대한 참조여야
합니다.offsetX: 쉐도우의 수평 오프셋. 이 속성의 값은 유효한 dimension 값이거나
dimension 토큰에 대한 참조여야 합니다.offsetY: 쉐도우의 수직 오프셋. 이 속성의 값은 유효한 dimension 값이거나
dimension 토큰에 대한 참조여야 합니다.blur: 쉐도우에 적용되는 블러 반경. 이 속성의 값은 유효한 dimension 값이거나
dimension 토큰에 대한 참조여야 합니다.spread: 쉐도우를 확장하거나 축소하는 양. 이 속성의 값은 유효한 dimension 값이거나
dimension 토큰에 대한 참조여야 합니다.inset: (선택적) 이 쉐도우가 내부 쉐도우(컨테이닝 도형 내부)인지 여부(기본값 또는 false는 외부에서 렌더링되는 드롭
쉐도우).색상 그라디언트를 나타냅니다. $type 속성은 문자열 gradient로 설정되어야 합니다 MUST. 값은 그라디언트 스톱 객체들과/또는 그라디언트 토큰에 대한 참조들의 배열이어야 합니다. 배열의 각 요소는 명시적 그라디언트 스톱
객체이거나 그라디언트 토큰에 대한 참조여야 합니다. 참조는 단일 그라디언트 객체로 해석되며 배열 평탄화는 발생하지 않습니다.
각 그라디언트 스톱 객체(명시적이거나 참조된)는 다음 구조를 반드시 가져야 합니다 MUST:
color: 해당 스톱의 위치에서의 색상 값. 이 속성의 값은 유효한 color 값이거나 color 토큰에
대한 참조여야 합니다.position: 그라디언트 축에서의 스톱 위치. 이 속성의 값은 유효한 숫자 값이거나 숫자 토큰에 대한 참조여야 합니다. 숫자 값은 [0, 1] 범위에
있어야 하며, 0은 축의 시작, 1은 축의 끝을 나타냅니다. 만약 범위를 벗어난 값이 주어지면 해당 값은 [0,1] 범위로 클램프된 것으로 간주되어야 합니다(예: 42는 1로
처리, -99는 0으로 처리).그라디언트 축의 시작(0)이나 끝(1)에 정확히 스톱이 없으면, 각 끝에 가장 가까운 스톱의 색상이 해당 끝까지 확장되어야 합니다.
타이포그래픽 스타일을 나타냅니다. $type 속성은 문자열 typography로 설정되어야 합니다 MUST. 값은 다음 속성들을 가지는 객체여야 합니다 MUST:
fontFamily: 타이포그래피의 글꼴. 이 속성의 값은 유효한 font family 값이거나
font family 토큰에 대한 참조여야 합니다.fontSize: 타이포그래피의 크기. 이 속성의 값은 유효한 dimension 값이거나
dimension 토큰에 대한 참조여야 합니다.fontWeight: 타이포그래피의 두께. 이 속성의 값은 유효한 font weight이거나
font weight 토큰에 대한 참조여야 합니다.letterSpacing: 문자 간의 수평 간격. 이 속성의 값은 유효한 dimension 값이거나
dimension 토큰에 대한 참조여야 합니다.lineHeight: 줄 간의 수직 간격. 이 속성의 값은 유효한 number 값이거나 number 토큰에
대한 참조여야 합니다. 이 숫자는 fontSize의 배수로 해석되는 것이 권장됩니다 SHOULD.타이포그래피 스타일 명세가 목적에 적합한가요? lineHeight 하위 값이 숫자, 치수(dimension) 또는 새로운 lineHeight 타입 중 어느 것을 사용해야 하는지에 대한 논의가 있습니다.
Referenced in: