Pixel-diff와 SSIM 기반 피드백 루프로 AI UI 생성 정밀도 극대화

Stop trusting ‘looks about right’: I gave my AI agent a way to verify its UI against Figma

Arjun2026년 6월 17일5분intermediate

AI 요약

Context

AI Agent가 생성한 UI 코드의 미세한 디자인 불일치(Padding, Font weight 등)를 수동으로 검증해야 하는 비효율 발생. Agent가 자체적으로 결과물을 검증할 수 있는 Feedback Loop의 부재로 인해 '정확해 보이는' 오답을 생성하는 한계 존재.

Technical Solution

Headless Chromium 및 Playwright를 활용하여 생성된 코드를 실제 브라우저 환경에서 렌더링하는 검증 파이프라인 구축
단순 Pixel Diffing의 과민 반응을 보완하기 위해 Structural Similarity Index(SSIM)를 계층적으로 적용하여 인간의 시각적 인지와 유사한 정밀도 확보
axe-core 기반의 Text 및 Accessibility 패스를 추가하여 시각적 일치도와 실제 콘텐츠의 무결성을 동시 검증
Web Font 로드 완료 시점의 불일치 해결을 위해 document.fonts.ready 기반의 Capture Gating 전략 도입
Context Window 제한 해결을 위해 모든 속성을 전송하는 대신 핵심 속성만 추출하고 근사치 여부를 알리는 Fidelity Flag 시스템 설계
Figma Plugin, SQLite 기반 Local Bridge Daemon, MCP(Model Context Protocol)를 연동한 로컬 전용 인덱싱 아키텍처 구성

실천 포인트

- AI 생성물의 검증 시 수치 기반의 Similarity Score보다 시각적 Diff Image를 제공하여 모델의 합리화(Rationalization) 방지 - 렌더링 기반 검증 도구 설계 시 Network Idle 대기보다 명시적인 Readiness Signal을 통해 타임아웃 및 행(Hang) 현상 방지 - LLM 전송 데이터의 정밀도와 토큰 비용 간의 Trade-off를 해결하기 위해 데이터 요약 시 정밀도 플래그를 함께 제공

태그

#SSIM #Feedback Loop #MCP #Pixel-diffing #Playwright

원문 읽기