토큰 뷰어 v5.0
이 화면의 모든 값은 정본 파일 jt-tokens.css를 그대로 불러와 그린 것입니다. 문서에 값을 다시 적지 않으므로 화면과 정본이 어긋날 수 없습니다.
- 색을 클릭하면 토큰 이름이 복사됩니다
- 우측 상단에서 라이트 / 다크 / 컴팩트 / Expressive를 바로 전환할 수 있습니다
- WCAG 대비는 실시간 계산이며 투명도(알파) 합성까지 반영합니다
파일 가져다 쓰기
<head>에 아래 두 줄만 넣으면 웹폰트까지 함께 따라옵니다.
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-tokens.css">
<link rel="stylesheet" href="https://ds.janytree.app/v5/jt-utilities.css">| 경로 | 언제 쓰나 |
|---|---|
/v5/jt-tokens.css · /v5/jt-utilities.css | 버전 고정. 운영 중인 앱은 이쪽을 쓰세요 — 우리가 v6를 내도 화면이 갑자기 바뀌지 않습니다 |
/jt-tokens.css · /jt-utilities.css | 항상 최신. 개발 중이거나 늘 최신을 따라가고 싶을 때 |
/jt-tailwind-v4.css | Tailwind v4 앱만 (v3는 tailwind.config.js 사용) |
/brand/icons/*.svg | 핵심 아이콘 29종. 전부 currentColor라 다크모드에서 자동으로 색이 바뀝니다 |
잘 적용됐는지 3초 확인
브라우저 개발자도구 콘솔에 붙여넣으세요.
getComputedStyle(document.documentElement).getPropertyValue('--jt-ds-version')
// "5.0" 이 나오면 정상입니다v5.0에서 달라진 값
이름은 그대로인데 값이 바뀐 토큰이 많습니다. 그래서 마이그레이션은 찾아 바꾸기가 아니라 파일 교체 + 화면 확인입니다.
| 토큰 | v4.0 | v5.0 |
|---|---|---|
--fs-base | 14px | 16px (웹 표준 정렬) |
--fs-xs / sm / lg / xl / 2xl / 3xl / 4xl | 11/12/16/18/22/26/30 | 12/14/18/20/24/28/32 |
--control-height (sm/lg) | 36/28/44 | 40/32/48 |
--container-narrow · --container-wide | 없음 | 720px · 1440px |
--fs-display-sm/md/lg | 없음 | 40 / 48 / 56px (Expressive 세트) |
--z-* 9종 | 없음 | 신설 — z-index 숫자 직접 사용 금지 |
--color-dim-* 4단계 | 없음 | 신설 |
--color-pass/fail/hold/oos | 없음 | 신설 (품질 판정) |
--r-none | 없음 | 0 |
| 웹폰트 로드 | 각 HTML에 수동 <link> | 토큰 파일에 내장 |
전체 대조표는 디자인 시스템 본문 §17-6에 있습니다.