디자인 토큰 관리기
토큰의 이름만 나열하는 대신 실제 값과 참조 관계를 검사합니다. DTCG 2025.10의 일부 기본 타입과 중괄호로 감싼 path.to.token 별칭·`$ref` JSON Pointer를 읽고 순환·누락·타입 불일치를 찾습니다. 테마별 덮어쓰기를 적용한 값을 표에서 비교한 뒤 CSS 사용자 정의 속성과 해석된 JSON을 각각 내려받을 수 있습니다. 간격 체계 생성기나 색 추천 도구와 달리, 이미 만든 여러 종류의 토큰을 한 패키지로 검증·배포하는 작업에 초점을 맞춥니다.
주요 기능
- 기본 JSON의 색(sRGB)·치수(px/rem)·숫자·폰트 계열·시간 토큰 검사
- 그룹 타입 상속과 여러 단계 별칭·JSON Pointer의 실제 값 해석
- 누락 참조·순환·타입 불일치·CSS 변수명 충돌 차단
- 테마별 덮어쓰기와 덮어쓰기 범위 차이 표시
- 기본 및 테마별 CSS 변수와 해석된 JSON 패키지 저장
사용 방법
- DTCG 형식의 기본 토큰 JSON을 붙여넣거나 파일로 엽니다.
- 필요하면 테마 이름과 토큰 경로별 덮어쓰기 값으로 된 별도 JSON을 입력합니다.
- 검사 버튼을 눌러 별칭·값·테마 경고와 각 테마의 결과를 확인합니다.
- 테마 선택을 바꾸어 실제 색·치수·CSS 값을 비교합니다.
- CSS를 복사하거나 CSS/JSON을 저장해 목표 앱에서 검토합니다.
활용 예시
- 디자인 시스템의 브랜드 색 별칭과 다크 테마 변경 검토
- 간격·폰트·투명도 토큰을 CSS 변수로 배포
- 토큰 파일 개편 후 끊어진 참조와 이름 충돌 파악
자주 묻는 질문
DTCG JSON 전체 규격을 지원하나요?
아니요. DTCG 2025.10 형식 중 sRGB 색, px/rem 치수, 숫자, 폰트 계열, 시간과 그룹 타입 상속, 전체 토큰 별칭, `$ref` JSON Pointer를 지원합니다. 확장 그룹·복합 토큰 등 지원하지 않는 구조는 오류로 표시합니다.
테마 JSON은 어떤 형식인가요?
테마 입력은 DTCG 표준 필드가 아니라 테마 이름 아래 기존 토큰 경로와 새 원시 값을 넣는 별도 JSON 맵입니다. 예제의 dark 테마를 참고하세요. 기존 토큰 경로만 바꿀 수 있으며 별칭도 사용할 수 있습니다.
테마에 없는 값은 오류인가요?
기본값으로 되돌아갑니다. 다만 다른 테마에는 덮어쓰기가 있는데 해당 테마에만 없는 경로는 범위 차이 경고를 표시합니다.
CSS 변수에 별칭을 유지하나요?
내보내는 CSS에는 선택된 각 테마에서 해석된 최종 값을 씁니다. 입력 JSON의 별칭 관계는 표의 참조 열에서 확인할 수 있습니다.
색 공간과 복합 토큰은요?
이 버전은 sRGB 세 성분과 선택 alpha만 CSS rgb로 내보냅니다. 다른 색 공간이나 shadow·typography 같은 복합 타입은 임의 변환하지 않고 중단합니다.
개인정보 안내
토큰 JSON은 브라우저 메모리에서만 처리하며 이 도구의 서버로 업로드하지 않습니다. 저장 파일에는 입력 토큰의 값과 이름이 들어갑니다.
댓글과 질문