피드로 돌아가기
Dev.toFrontend
원문 읽기
Zero-dependency CLI를 통한 Design Token 누수 원천 차단 및 CI 게이트 구축
Your design-token migration isn't done — here's a zero-dep CLI that finds the colors that escaped
AI 요약
Context
Design Token 마이그레이션 이후에도 컴포넌트 내부에 하드코딩된 Raw Color가 잔존하여 브랜드 컬러 변경 시 일관성 결여 발생. Grep 기반 탐색은 과탐(False Positive)이 많고 Stylelint는 Token 정의 파일까지 탐지하는 한계로 인해 실질적인 CI 적용이 어려운 상황.
Technical Solution
- Token 정의(Custom Property, SCSS/Less 변수)와 실제 사용처를 구분하여 정의부는 허용하고 사용부만 탐지하는 필터링 로직 설계
- Parser 없이 정규식과 State Machine 기반의 Line Scanner를 구현하여 Zero-dependency 달성 및 실행 속도 최적화
- Comment Span을 공백으로 치환하는 전처리를 통해 주석 내 컬러 코드 탐지를 방지하되 CSS-in-JS 내 문자열은 보존하는 정밀 분석 수행
- Id-selector 및 url() 참조와 Color Value를 구분하기 위한 위치 기반 Disambiguation 게이트 적용
- Node.js와 Python 두 환경에서 Byte-for-byte 동일한 출력을 보장하기 위해 Unicode 정규식 및 UTF-8 바이트 기반 컬럼 계산 방식 통일
실천 포인트
- Design Token 마이그레이션 완료 후 하드코딩된 Hex/RGB 잔존 여부를 CI 단계에서 강제 검증하는 Gate 구축 검토 - Linter 도입 시 단순 패턴 매칭이 아닌 정의(Definition)와 사용(Usage)의 문맥적 구분이 가능한지 확인 - 다양한 런타임 환경에서 동일한 분석 결과를 보장해야 하는 도구 설계 시 언어별 Unicode 처리 방식 및 경로 처리 차이점 사전 검증