Adoption Metrics — 디자인 시스템 사용률을 측정하는 법

# 모든 raw hex 색 (3자리·6자리·8자리)
rg --json -t typescript -t css '#[0-9a-fA-F]{3,8}\b' src/ \
  | jq '.data.path.text' \
  | sort -u > raw-hex.txt
 
wc -l raw-hex.txt  # 위반 건수

# 토큰 사용 vs raw 사용 비율
TOKEN_REFS=$(rg -t typescript 'var\(--colors-[a-z-]+\)|colors\.[a-z]+\.[0-9]+' src/ | wc -l)
RAW_HEX=$(rg -t typescript '#[0-9a-fA-F]{6}\b' src/ | wc -l)
 
echo "Token coverage: $TOKEN_REFS / $((TOKEN_REFS + RAW_HEX))"

# style={{ color: '#...' }} 같은 inline 스타일
rg -t tsx -t jsx 'style=\{\{' src/ --count-matches

// scripts/analyze-imports.ts
import { Project } from 'ts-morph'
 
const project = new Project({ tsConfigFilePath: './tsconfig.json' })
const counts: Record<string, number> = {}
 
project.getSourceFiles('src/**/*.{ts,tsx}').forEach((file) => {
  file.getImportDeclarations().forEach((imp) => {
    const mod = imp.getModuleSpecifierValue()
    if (mod === '@org/design-system') {
      imp.getNamedImports().forEach((named) => {
        const name = named.getName()
        counts[name] = (counts[name] || 0) + 1
      })
    }
  })
})
 
console.table(counts)
// { Button: 234, Input: 187, Modal: 12, DataTable: 3 }

// JSX prop 분석
project.getSourceFiles().forEach((file) => {
  file.forEachDescendant((node) => {
    if (node.getKind() === SyntaxKind.JsxOpeningElement) {
      const tagName = node.getTagNameNode().getText()
      if (tagName === 'Button') {
        const variantAttr = node.getAttribute('variant')
        const variant = variantAttr?.getInitializer()?.getText() || 'default'
        // 카운트
      }
    }
  })
})

// scripts/chromatic-stats.ts
import { ChromaticAPI } from '@chromatic-com/sdk'
 
const recentBuilds = await ChromaticAPI.getBuilds({ limit: 30 })
const unintendedDiffs = recentBuilds.filter((b) =>
  b.specs.some((s) => s.status === 'changed' && !s.intentional)
).length
 
console.log(`Unintended visual diff rate: ${unintendedDiffs / 30}`)

// scripts/ds-metrics-dashboard.ts
import { collectMetrics } from './collectors'
 
const metrics = await collectMetrics()
 
console.log(`
=== Design System Adoption Report ===
📦 Component imports
   ${metrics.componentImports.total} total
   Top: ${metrics.componentImports.top3.join(', ')}
   Dead: ${metrics.componentImports.unused.join(', ')}
 
🎨 Token coverage
   ${metrics.tokenCoverage.percent}% (target: 95%)
   Raw hex: ${metrics.tokenCoverage.rawCount}
   Inline style: ${metrics.inlineStyleCount}
 
🎭 Variant usage (Button)
   ${Object.entries(metrics.variants.Button).map(([k, v]) => `${k}: ${v}`).join('\n   ')}
 
📈 Trend (vs last week)
   Token coverage: ${metrics.trend.coverage > 0 ? '↑' : '↓'} ${Math.abs(metrics.trend.coverage)}pp
`)

# 내부 verdaccio·jfrog 등 prviate registry
curl -s 'https://npm.internal/-/api/v1/package/@org/design-system' \
  | jq '.versions | to_entries | map({version: .key, downloads: .value.downloads}) | .[0:5]'