Design System Glossary

이 문서가 답하는 질문: 디자인 시스템 문서·코드 리뷰·표준 회의에서 등장하는 용어가 정확히 무엇을 의미하는가? 한 줄 답 (Pyramid Top): 이 사전은 디자인 시스템 도메인의 130여 개 용어를 7개 카테고리 + 알파벳 인덱스로 정리한, 다른 챕터로 향하는 진입점이다.

Why — 왜 별도 용어 사전인가

디자인 시스템 용어는 세 출처가 섞여 있다.

같은 단어가 컨텍스트마다 다른 것을 가리키기도 한다 — token은 Figma에서의 raw 값일 수도, DTCG JSON의 alias 노드일 수도, Panda config의 nested 객체일 수도 있다. 본 사전은 그 차이를 한 자리에서 정렬한다.

사전 구조 (7 카테고리)

알파벳 인덱스 (A–Z)

용어가 어느 카테고리에 있는지 모를 때 여기서 점프하라.

카테고리 관계 그래프 (요약)

사용 규칙

1. 본문에서 처음 보는 용어: 카테고리 표에서 해당 파일로 점프.
2. 이름은 알지만 정의가 헷갈리는 용어: 알파벳 인덱스에서 카테고리 번호 확인.
3. 표제어는 영어, 정의는 한국어 1~3줄. 식별자(코드)는 영어 그대로 유지.
4. 관련 용어 링크가 핵심이다 — 한 용어를 이해하려면 인접 2~3개를 함께 봐야 한다.

What-if — 이 사전의 한계

• DTCG 명세 변경: $value, $type 등은 2024~2025 사이 변동이 잦다. 본 사전은 2026-05 기준.
• Panda CSS 버전 의존: recipe API는 0.x → 1.0으로 가며 일부 명명이 정리되는 중이다.
• Tailwind v3 vs v4 차이: theme.extend vs @theme directive — 두 형태를 병기한다.
• Figma 측 용어: Figma의 Variable은 DTCG의 Token과 1:1이 아니다. 본 사전은 코드 측을 우선 정의로 둔다.

요약

• 디자인 시스템 용어는 표준·도구·커뮤니티 세 출처가 섞인 채로 유통된다.
• 본 사전은 7 카테고리 130여 개 용어를 한 자리에 모아 본문 챕터의 진입점으로 작동한다.
• 빠른 참조는 여기, 깊이 학습은 카테고리 표의 본문 챕터 링크로.