토큰 드리프트란?
토큰 드리프트는 디자인 시스템에 기록된 결정과 제품이 실제로 쓰는 값이 조금씩 벌어지는 현상입니다. Figma 파일, 스타일시트, AI가 생성한 코드 같은 표면이 공유된 원본을 참조하지 않고 각자의 값을 쌓아갈 때 생깁니다.
어떻게 시작되는가
드리프트는 스스로를 알리지 않습니다. 개별적으로는 합리적인 작은 결정으로 찾아옵니다.
디자이너가 밀도 높은 표를 위해 조금 밝은 테두리가 필요해 토큰을 제안하는 대신 파일에서 고릅니다. 개발자가 밤 열한 시에 margin-top: 18px을 올립니다. 스케일에 16과 20은 있는데 둘 다 맞지 않아서입니다. 누군가 다른 프로젝트의 컴포넌트를 박아 넣은 그림자째로 복사해 옵니다.
어느 것도 풀 리퀘스트를 막을 이유는 되지 않습니다. 그런 일이 여섯 달 쌓이면 "주요 파랑"이 네 개의 값을 갖는 코드베이스가 됩니다.
AI로 인한 가속
이것은 최근 들어 빨라졌고, 이유를 정확히 짚어 둘 가치가 있습니다.
설정 페이지를 만들라는 요청을 받은 AI 어시스턴트는 기본적으로 여러분의 디자인 시스템에 접근할 수 없습니다. 그래서 다른 곳에서 본 것으로부터 그럴듯한 값을 만듭니다. 주요 색에는 #3B82F6, 간격에는 16px, 여러분 것과 닮았지만 일치하지는 않는 그림자.
결과물은 리뷰에서 올바르게 보입니다. 합리적인 값을 씁니다. 다만 여러분 것과는 다른 합리적인 값이고, 팀이 코드를 만들어 내는 속도로 그렇게 합니다. 사람이 손으로 CSS를 쓰는 것보다 훨씬 빠른 속도입니다.
어떻게 발견하는가
- 코드베이스에서 16진수 색을 검색해 보세요. 건강한 체계라면 거의 전부가 토큰 정의 안에 있습니다.
- 실제로 쓰이는 여백 값의 종류를 세어 스케일의 단계와 비교해 보세요.
- Figma 파일의 색과 저장소의 토큰을 비교해 보세요.
- AI 어시스턴트가 만든 컴포넌트 하나를 골라 값을 하나씩 시스템과 대조해 보세요.
숫자는 대체로 팀의 예상보다 나쁘고, 그것을 일찍 아는 편이 유익합니다.
어떻게 막는가
그것을 소비하는 모든 표면에서 시스템에 닿을 수 있게 하세요. 드리프트는 대부분 유통의 실패입니다. 사람이든 모델이든 올바른 값을 찾으려고 하던 일을 멈춰야 한다면, 그러지 않는 경우가 생깁니다.
에이전트에게는 토큰을 직접 주세요. 최신 값을 제공하는 Model Context Protocol 서버가 있으면 모델은 여러분의 주요 색을 추측하지 않고 읽습니다.
생성된 코드를 시스템과 대조하세요. 토큰 대응이 있는 직접 박은 값을 잡아내면 드리프트가 리뷰에서 보이는 것이 됩니다. 일 년 뒤에 발견하는 것이 아니라요.
한쪽 방향을 권위로 정하세요. Figma와 코드가 어긋날 때 누가 옳은지 말할 수 있어야 합니다. 디자인 변경이 diff가 되고 사람이 승인한 뒤에야 저장소에 닿는 리뷰 단계를 두는 것이 보통의 답입니다.
Flash DS와의 관계
Flash DS는 MCP를 통해 최신 토큰을 AI 에이전트에 제공하고, 직접 박은 값과 이를 대체할 토큰을 돌려주는 check_violations 도구를 제공하며, Figma의 게시를 검토 가능한 diff로 바꿔 풀 리퀘스트로 열어 줍니다.