왜 Rootage 토큰인가

멀티 브랜드 디자인 시스템에서 가장 먼저 정해야 하는 것은 토큰을 어디에, 어떤 형식으로 둘지예요. 모든 브랜드가 같은 구조를 지켜야 공용 컴포넌트가 동작하기 때문이에요. 우리는 SEED Design 의 토큰 형식인 Rootage 를 골랐어요.

Rootage 는 이렇게 생겼어요Copy Anchor Link

Rootage 는 토큰을 YAML 로 정의해요. 토큰마다 이름과 설명, 모드별 값이 있고, 값은 다른 토큰을 참조할 수 있어요.

kind: Tokens
metadata:
  id: color
  name: Color
data:
  collection: color
  tokens:
    $color.bg.brand-solid:
      description: 화면에서 가장 중요한 액션을 강조하는 데 사용해요.
      values:
        theme-light: $color.palette.orange-600
        theme-dark: $color.palette.orange-700

고른 이유Copy Anchor Link

1. 사람이 읽고 고치기 쉬워요Copy Anchor Link

YAML 은 디자이너도 열어 보고 고칠 수 있어요. 새 브랜드를 만들 때 대부분의 작업은 color.yaml 의 팔레트 값을 바꾸는 것이에요. 코드 한 줄 몰라도 브랜드를 만들 수 있어요.

2. 원시 값과 의미가 분리돼 있어요Copy Anchor Link

$color.palette.orange-600 같은 원시 토큰과 $color.bg.brand-solid 같은 시맨틱 토큰이 나뉘어 있어요. 컴포넌트는 시맨틱 토큰만 쓰므로, 브랜드는 팔레트와 참조만 바꾸면 돼요.

3. 검증된 이름이 이미 있어요Copy Anchor Link

SEED Design 은 수많은 화면에서 쓰이며 다듬어진 토큰 이름과 컴포넌트 스펙을 갖고 있어요. 같은 형식을 쓰면 SEED 의 컴포넌트 스펙(packages/rootage/components/*.yaml)을 거의 그대로 옮겨 올 수 있어요.

4. 기계가 검사하기 좋아요Copy Anchor Link

구조가 명확해서 빌드할 때 많은 것을 자동으로 검사할 수 있어요.

• 모든 브랜드의 토큰 목록이 같은지
• 참조가 실제로 있는지, 순환하지 않는지
• 라이트·다크 값이 모두 있는지
• 전경·배경 조합의 명도 대비

하나의 원천, 여러 산출물Copy Anchor Link

YAML 한 벌에서 필요한 모든 형식을 만들어요.

원천이 하나라서 웹과 네이티브, 문서와 실제 앱의 값이 어긋나지 않아요. 토큰 구조가 궁금하다면 멀티 브랜드 문서를 참고해요.