vision

개요

vision 에이전트는 이미지와 스크린샷을 읽어 화면에 실제로 나온 결과를 분석합니다. 렌더링이 기대와 어긋나지는 않았는지, 레이아웃이 깨지지는 않았는지, 디자인 스펙과 구현이 맞아떨어지는지를 살핍니다. 텍스트로 코드만 훑어서는 절대 못 잡는 것이 있습니다. 바로 시각적 회귀입니다.

언제 쓰는가

• UI 변경 후 실제 렌더링 결과를 스크린샷으로 검증해야 할 때
• 디자인 목업과 구현 결과를 비교해야 할 때
• 레이아웃 깨짐, 색상 불일치, 텍스트 잘림 같은 시각적 버그를 찾아야 할 때
• $visual-verdict 스킬에서 시각 QA 판정이 필요할 때

사용 예시

"이 스크린샷에서 레이아웃 문제를 찾아줘"
"디자인 목업과 실제 구현 결과를 비교해줘"
"다크모드 전환 후 렌더링 결과가 올바른지 확인해줘"

분석 범위

작업 프로세스

1. 분석할 이미지나 스크린샷을 받습니다.
2. 기대값(디자인 목업, 이전 스크린샷, 스펙)과 비교합니다.
3. 차이점과 문제를 구체적으로 기록합니다.
4. 수정이 필요한 경우 designer나 executor에 전달합니다.

입력

• 분석할 스크린샷이나 이미지 파일
• 비교 기준이 되는 디자인 목업이나 이전 스크린샷
• 확인해야 할 구체적인 항목 (있는 경우)

출력

• 발견한 시각적 문제 목록과 위치
• 기대값과 실제 결과 비교 요약
• PASS / FAIL / PARTIAL 판정
• 수정이 필요한 항목의 구체적 설명

제한 사항

• 코드 변경은 executor가 담당합니다.
• UX 전략 판단은 ux-researcher와 designer에 맡깁니다.
• 성능 측정은 performance-reviewer가 처리합니다.

관련 에이전트

• designer — vision이 발견한 시각적 문제를 설계 관점에서 해결합니다.
• qa-tester — vision과 함께 UI의 런타임 동작을 검증합니다.
• executor — vision이 찾은 시각적 버그를 실제로 수정합니다.