Coordinate 기반 설계를 넘어 Vision 채널 도입으로 렌더링 버그 해결

What only the pixels knew: giving a canvas agent eyes

Truffle2026년 6월 13일4분intermediate

AI 요약

Context

JSON 문서 기반의 Coordinate 모델만으로는 CSS Overflow나 폰트 메트릭으로 인한 시각적 Clipping 현상을 감지할 수 없는 한계 존재. 데이터 상으로는 정상이나 실제 렌더링 결과가 사용자에게 다르게 보이는 Render-time Truth의 괴리 발생.

Technical Solution

Document Model(변이용)과 Pixel Model(판단용)의 이원화 체계 구축
실시간 캔버스를 미러링하는 Read-only HTML Render Route 설계
HMAC 기반의 Board-scoped 토큰 발행을 통한 안전한 읽기 권한 제어
Playwright 브라우저를 사이드카 컨테이너로 운영하여 실제 JPEG 스크린샷 획득
서버 사이드 래스터라이저 대신 실제 브라우저를 사용하여 Renderer Drift 방지
Look-Move-Look 사이클의 반복적 피드백 루프를 통한 시각적 검증 구현

실천 포인트

1. UI 자동화/에이전트 설계 시 데이터 모델과 렌더링 결과의 괴리를 검증하는 프로세스가 있는가?

2. 가상 렌더러 도입 시 실제 브라우저의 CSS/Font 렌더링과 일치하지 않는 Renderer Drift 가능성을 고려했는가?

3. 외부 브라우저 제어 시 최소 권한 원칙(Least Privilege)에 따른 Read-only 토큰 체계를 적용했는가?

태그

#Vision Language Model #HMAC #Coordinate Model #Renderer Drift #Playwright

원문 읽기