ux-audit

Nova UX Audit

5인 적대적 평가자(Adversarial Jury)로 UI/UX를 다관점 심층 평가한다. 각 평가자는 서로 다른 페르소나로 독립 분석하며, 결과를 종합하여 우선순위 개선 목록을 도출한다.

"사용자는 코드를 보지 않는다. 사용자가 보는 것만이 진실이다."

핵심 원칙

• 독립 평가: 5인 전원 독립 서브에이전트로 실행 (상호 영향 금지)
• 코드 기반: 실제 컴포넌트/i18n/스타일 코드를 읽고 분석 (추측 금지)
• 분석 전용: 평가자는 코드를 수정하지 않는다
• 최신 기준: WCAG 2.2, Core Web Vitals (INP), EU DSA 2024 기준 적용

옵션

플래그	동작
(없음)	5인 평가 + 종합 보고
--target <경로>	평가 범위 지정 (기본: 프론트엔드 전체 자동 탐색)
--screenshot	Puppeteer로 실제 화면 캡처 후 평가 (dev 서버 실행 필요)
--live <URL>	Computer Use로 실제 브라우저에서 앱을 조작하며 평가 (예: --live http://localhost:3000)
--sprint	결과를 스프린트로 자동 분할
--fix	Critical/High 자동 수정 제안 (사용자 승인 필요)
--a11y	접근성 평가자를 Full 모드로 강제 (WCAG 전 항목 검사)

실행 플로우

Phase 1: 환경 분석

1. 프론트엔드 기술 스택 감지 (React/Vue/Svelte/Angular/etc.)
2. --target 지정 시 해당 경로, 미지정 시 프론트엔드 루트 자동 탐색
3. i18n 파일, 테마/디자인 토큰, 라우트 구조, 컴포넌트 디렉토리 파악
4. --screenshot 시: dev 서버 기동 확인 → Puppeteer MCP로 주요 화면 캡처 (미설치 시 경고 후 코드 분석만 수행)
5. --live <URL> 시: Computer Use로 실제 브라우저에서 앱을 열고 인터랙션하며 평가 (아래 상세 참조)
6. 디자인 시스템 자동 감지 (평가자 3 Cognitive Load 디자인 항목 평가용):
   • 스캔 우선순위 5단계:
     1. tailwind.config.{ts,js,mjs,cjs} (Tailwind preset 추출)
     2. theme.{ts,tsx,js} 파일 (root, src/, app/) — export 객체 파싱
     3. *.css 파일의 :root { --token-name: ... } CSS 변수
     4. design-tokens/*.{json,ts,js} 직접 토큰 정의
     5. packages/*/tokens/, packages/design-system/ (monorepo 케이스)
   • 결과 구조 (tokenCatalog):

     {
       "detected": true,
       "sources": [{"type": "tailwind", "path": "..."}],
       "tokenCount": { "color": 7, "spacing": 6, "fontSize": 5 },
       "tokens": { "color": [...], "spacing": [...] },
       "components": ["Button", "Input", "Card"]
     }
     

   • 미감지 시: { "detected": false }
   • 평가자 3 (Cognitive Load) 컨텍스트 주입은 요약 형태: tokenCount + 카테고리별 첫 5개 토큰만 (전체 토큰 카탈로그 주입 금지 — 평가자 토큰 부담 최소화)

환경 분석 결과를 요약하여 표시한다:

[Nova UX Audit] 스택: {React 18 + TypeScript} | 대상: {src/components/} | 모드: {코드 분석 / 스크린샷 포함} | 디자인 시스템: {Tailwind + 토큰 18개 / 미정의}