diff — 버전 비교

디자인 시스템을 수정했을 때 뭐가 바뀌었는지, 그리고 더 나빠진 건 아닌지를 기계적으로 확인해 주는 명령이에요.

기본 사용법

npx @google/design.md diff DESIGN.md DESIGN-v2.md

이전 파일과 수정 후 파일을 순서대로 넘기면 돼요.

결과 예시

{
  "tokens": {
    "colors": { "added": ["accent"], "removed": [], "modified": ["tertiary"] },
    "typography": { "added": [], "removed": [], "modified": [] }
  },
  "regression": false
}

토큰 묶음별로 변화를 추가됨 · 삭제됨 · 수정됨 3가지로 분류해 줘요.

3단계 분류 — 위험도가 달라요

• added (추가됨): v2에 새로 생긴 토큰. 새 기능 추가 상황이라 보통 안전.
• removed (삭제됨): v1에 있었는데 v2에서 없어진 토큰. 가장 위험해요. 이 토큰을 참조하던 컴포넌트가 깨져요.
• modified (수정됨): 둘 다 존재하지만 값이 바뀜. "주조색 톤을 살짝 어둡게"처럼 의도적이면 OK, 실수면 위험.

"회귀(regression)" 판정

L221Exit code 1 if regressions are detected (more errors or warnings in the "after" file).

"회귀"는 소프트웨어 업계 용어로 "고치려다 더 나빠짐"이에요. diff는 이걸 기계적으로 재요 — 토큰 값이 바뀌었나가 아니라 검사 결과가 악화됐나를 기준으로요.

어디에 쓸까

본문(글) 변경은?

README는 "토큰 + 본문 회귀 탐지"라고 말하지만, 실제로는 토큰은 구조적으로 비교, 본문은 존재 여부 확인 수준이에요. "설명 문장의 의미가 바뀌었는지" 같은 깊은 비교는 아직 없고, 스펙 성숙에 따라 확장될 영역이에요.