AI UI 디자인 오류 교정 MCP 서버 GridProof

Claude와 같은 AI 에이전트가 프론트엔드를 생성할 때, 표준 스케일을 벗어난 간격(예: py-[13px])이나 요소 간 불일치가 발생하는 그리드 드리프트(Grid Drift) 현상이 발생할 수 있습니다.

GridProof는 이러한 문제를 해결하기 위해 개발된 MCP(Model Context Protocol) 서버로, 에이전트의 작업 루프 내에서 디자인 품질을 자동으로 검사하고 수정합니다.

주요 특징 및 기능:

• 자동 감사 루프: '생성 $\rightarrow$ 감사 $\rightarrow$ 수정 $\rightarrow$ 재감사' 과정을 통해 UI의 일관성을 유지합니다.
• 기하학적 측정: Playwright를 사용하여 실제 렌더링된 페이지의 계산된 기하학적 구조를 측정하고 구조화된 수정 힌트를 제공합니다.
• 검사 규칙:
  • 기본 그리드 및 Tailwind 스케일 이탈 여부
  • 형제 요소 간의 간격 불일치
  • 아이콘 및 탭 타겟 크기 (44px 미만은 접근성 위반으로 간주하여 에러 처리)
• 유연한 대응: Tailwind 기반 프로젝트를 우선 지원하며, 비 Tailwind 환경에서는 접근성 검사로 자동 전환됩니다.

사용자는 npx -y gridproof 명령어를 통해 Claude Code에 즉시 연결하거나, 실행 중인 사이트에 대해 리포트를 생성할 수 있습니다.