경계를 긋는 디자인 시스템

디자인 시스템 레퍼런스는 대부분 결과물만 공개한다. 컴포넌트 목록과 사용 가이드는 읽을 수 있지만 그 컴포넌트가 어떤 원천에서 어떤 단계를 거쳐 나왔는지는 보이지 않는다.

SEED Design은 파이프라인 전체가 공개돼 있다. 토큰 DSL과 빌드 엔진, CSS 생성기, 배포 CDN, AI 에이전트용 문서까지 한 저장소에 들어 있다. 그리고 그만큼의 부피로 바꾸기 위한 장치가 있다. codemod 19개, deprecated 원장, 버린 기술의 묘지다.

이 시리즈는 그 저장소를 두 방향으로 읽는다. 앞의 두 편은 만드는 구조를, 3편은 그 구조를 만든 동기를 다룬다. SEED 팀이 직접 쓴 회고에 따르면 V3를 다시 지은 이유는 확산이 아니라 "고치기 두려웠다"는 것이었다. 마지막 편은 같은 질문을 토큰 69개짜리 시스템에 던지고 영향도 추적기를 직접 만들어 돌린 결과로 앞선 권고를 정정한다.

[Figma Variables]
   │  토큰 추출 스크립트
   ▼
[토큰 YAML]  ← 손으로 쓰는 단일 원천
   │  토큰 12파일 + 컴포넌트 스펙 104개
   │  토큰 빌드 엔진
   ▼
[생성물]  JSON · .mjs · .d.ts
   │
   │  스타일 레시피  ← 손으로 씀
   │  레시피 → CSS 엔진
   ▼
[생성 CSS]  vars/ + recipes/ (486파일)
   │
   │  + headless 패키지 43개  ← 손으로 씀
   ▼
[React 컴포넌트 89개] ──► 문서 · Registry · 예제

시리즈 구성

디자인 시스템을 만드는 공장 뜯어보기

토큰 YAML부터 생성 CSS와 컴포넌트까지 5개 층을 차례로 읽고 손으로 쓰는 것과 기계가 만드는 것의 경계가 어디에 그어져 있는지 확인한다.
설계 결정 일곱 가지와 정직한 비용

SEED가 의도적으로 내린 선택 일곱 가지를 이유와 함께 정리하고 컴포넌트 하나를 추가할 때 실제로 손대야 하는 지점을 센다.
디자인 시스템의 진짜 문제는 바꾸는 것이다

SEED 팀의 회고를 읽고 앞 글의 결론을 정정한다. codemod 19개의 구성, 되살아난 토큰 하나, 버려진 스타일링 기술 여섯 개가 무엇을 말하는지 본다.
작은 팀은 어디에 경계를 그어야 하는가

영향도 추적기와 대비 검증기를 직접 만들어 토큰 69개짜리 시스템에 돌린 결과로 앞선 권고를 정정하고 우선순위를 다시 매긴다.

분석 대상은 공개 저장소 daangn/seed-design의 dev 브랜치(HEAD 6247f189b)이고 확인 시점은 2026-09-22다. 본문의 파일 수, 토큰 수, 인용문은 저장소에서 직접 확인한 값이다. 3편과 4편에 나오는 자체 저장소 측정값은 조직과 발주처를 식별할 수 있는 이름과 경로를 제외하고 판단을 재현할 수 있는 구조와 수치만 남겼다.

[Figma Variables] │ 토큰 추출 스크립트 ▼ [토큰 YAML] ← 손으로 쓰는 단일 원천 │ 토큰 12파일 + 컴포넌트 스펙 104개 │ 토큰 빌드 엔진 ▼ [생성물] JSON · .mjs · .d.ts │ │ 스타일 레시피 ← 손으로 씀 │ 레시피 → CSS 엔진 ▼ [생성 CSS] vars/ + recipes/ (486파일) │ │ + headless 패키지 43개 ← 손으로 씀 ▼ [React 컴포넌트 89개] ──► 문서 · Registry · 예제