DS Monitor

요약

디자인 시스템 적용률을 정량 측정하는 오픈소스 npm 패키지. “디자인 품질을 측정 가능하게 만든다”는 시도를 실제 프로젝트에 적용해 검증했다.

• 형태: 개인 프로젝트 · 오픈소스(MIT)
• 역할: 단독 기획·설계·배포 (구현은 Claude Code 페어 프로그래밍)
• 배포: npm publish (v0.2.3)

문제

브랜드·디자인의 핵심은 일관성이지만, 현장에서 일관성은 대개 ‘감’으로 판단된다. 가이드라인을 잘 만들어도 실제로 지켜지는지는 눈으로 훑어보는 데 그친다. 가이드 수립을 넘어 ‘준수 여부’를 수치로 확인하고 싶었다.

설계와 결정

• 측정 영역 직교 분리 — Code / Figma / Lighthouse 3레이어로 나누고, 검증 깊이를 Lite·Full 2단계로 설계했다.
• 시청자별 정보 설계 — 동일한 측정 데이터를 3가지 시청자(개발자 / PM·PL·디자이너 / 대시보드)에 맞춰 변환한다. 같은 데이터라도 보는 사람에 따라 다른 형태로 제공한다.
• 의사결정 문서화 — 30건 이상의 설계 결정을 Decision Log로 문서화한 뒤 npm publish.

성과

• 실프로젝트 적용: 936개 파일 · 23,416 Figma instance · 10페이지 통합 측정, 8개 지표 baseline 고정.
• 측정→개선 사이클을 주 단위로 운영해 Figma warnings 116건 → 38건(67% 감소) 등 정량 효과를 검증했다.

기술

npm 패키지 · Figma API · Lighthouse · 코드 정적 분석 · Decision Log 기반 설계 문서화