디자인 시스템 용어집

디자인 시스템 작업을 떠받치는 어휘를 쉬운 말로 정리했습니다. 제품이 아니라 분야 자체를 설명하므로 Flash DSM을 열지 않아도 도움이 됩니다.

다크 모드 토큰

다크 모드 토큰은 라이트 테마와 같은 시맨틱 이름에 연결된 두 번째 값 묶음입니다. 모드를 바꾸면 --color-surface 같은 이름이 다른 색을 가리키게 되며, 어떤 모드가 활성인지 컴포넌트가 알 필요는 없습니다.

디자인 시스템

디자인 시스템은 팀이 제품을 일관되게 만들기 위해 공유하는 디자인 결정, 컴포넌트, 규칙의 집합입니다. 보통 디자인 토큰, 컴포넌트 라이브러리, 사용 지침, 문서를 포함하며 디자인과 코드 모두를 위한 단일 진실 공급원으로 관리됩니다.

디자인 토큰

디자인 토큰은 색상, 여백 단계, 글자 크기처럼 하나의 디자인 결정을 담는 이름 붙은 값입니다. 결정에 이름을 부여하면 디자인 도구와 코드 양쪽에서 재사용할 수 있어, 같은 값을 곳곳에 손으로 옮겨 적을 필요가 없어집니다.

디자인 토큰을 위한 MCP

Model Context Protocol은 AI 어시스턴트를 외부 도구와 데이터에 연결하는 개방형 표준입니다. 디자인 토큰에 적용하면 MCP 서버가 프로젝트의 최신 토큰 값을 AI 코딩 에이전트에 제공하여, 생성된 컴포넌트가 모델이 지어낸 값 대신 실제 디자인 시스템을 참조하게 됩니다.

디자인에서 코드로

디자인에서 코드로는 Figma 같은 도구에서 내린 결정을 동작하는 프런트엔드 코드로 옮기는 과정을 말합니다. 오래가는 방식은 캔버스에서 마크업을 생성하는 것이 아니라 디자인 토큰을 전달하는 것입니다. 화면이 바뀌어도 토큰은 유효하지만 생성된 마크업은 그렇지 않기 때문입니다.

시맨틱 토큰

시맨틱 토큰은 담고 있는 값이 아니라 수행하는 역할에 따라 이름을 붙인 디자인 토큰입니다. --color-red-600 대신 --color-text-danger처럼 쓰며, 보통 프리미티브 토큰을 참조하기 때문에 사용하는 쪽 이름을 바꾸지 않고도 실제 값을 교체할 수 있습니다.

컬러 스케일

컬러 스케일은 한 색상의 명암을 순서대로 배열한 집합으로, 관례상 50부터 900까지 번호를 붙입니다. 단계가 시각적으로 고르게 보이고 특정 조합이 알려진 명도 대비를 충족하도록 설계되어, 임의의 16진수 대신 역할과 단계로 색을 고를 수 있습니다.

타입 스케일

타입 스케일은 디자인 시스템이 허용하는 글자 크기를 순서대로 배열한 집합으로, 보통 기준 크기에 일정한 비율을 곱해 만듭니다. 텍스트를 이 단계로 제한하는 것이 여러 사람이 만드는 화면의 타이포그래피를 일관되게 유지하는 방법입니다.

토큰 드리프트

토큰 드리프트는 디자인 시스템에 기록된 결정과 제품이 실제로 쓰는 값이 조금씩 벌어지는 현상입니다. Figma 파일, 스타일시트, AI가 생성한 코드 같은 표면이 공유된 원본을 참조하지 않고 각자의 값을 쌓아갈 때 생깁니다.

Figma 변수

Figma 변수는 색상, 숫자, 문자열, 불리언 값을 Figma 파일 안에 저장하는 이름 붙은 값이며 라이트와 다크 같은 모드를 지원합니다. Figma에서 디자인 토큰에 해당하는 기본 기능이지만, Figma REST API로 읽으려면 Enterprise 플랜이 필요합니다.