웹 기반 디자인 도구에서 실행된 AI 기반 QA는 “모든 기능 작동 중, 통과(pass)”라고 보고했지만, 정작 캔버스에는 아무것도 표시되지 않았습니다. 이 허위 통과(false pass)는 모델의 추론 오류가 아니라, 브라우저가 숨겨진 탭을 처리하는 방식과 테스트 스크립트가 시각적 출력 대신 “건전성(health)”을 측정하는 방식에서 비롯된 부작용이었습니다.

AI QA 에이전트가 빈 캔버스를 놓칠 수 있는 이유

AI 에이전트는 JavaScript를 실행하고, 스크린샷을 캡처하며, 모델이 기능의 정상 작동 여부를 추론하게 합니다. 실제로 UI가 비어 있음에도 불구하고 두 가지 기술적 사각지대로 인해 반복적으로 통과 판정이 내려집니다.

숨겨진 탭 스로틀링(Throttling) 설명

Chrome MCP는 메인 창을 다른 작업에 사용할 수 있도록 백그라운드 탭에서 테스트를 실행하는 경우가 많습니다. 탭의 document.visibilityState가 hidden 상태가 되면, 브라우저는 렌더링 파이프라인을 제한(throttle)합니다.

  • JavaScript는 계속 실행되므로 런타임 오류가 나타나지 않습니다.
  • requestAnimationFrame 콜백이 실행되지 않아 애니메이션 프레임 수가 0으로 남습니다.
  • 타이머 실행 빈도가 훨씬 낮아집니다. 예를 들어 33ms 간격을 예상했던 테스트가 단 4번만 관찰될 수 있습니다.

AI 에이전트는 깨끗한 JS 결과와 스크린샷을 보고 애니메이션이 작동했다고 가정합니다. 렌더링 루프가 픽셀을 생성하지 않았기 때문에 시각적 결함은 숨겨진 채로 남게 됩니다.

숨겨진 탭 문제 해결 방법

  • 캔버스, 애니메이션 또는 그래픽 검증 시에는 테스트 탭을 항상 보이게 유지하십시오.
  • 탭이 포그라운드(foreground)에 있을 때만 상호작용을 트리거하십시오.
  • 스크린샷을 캡처하기 전에 짧은 대기 시간(몇 초)을 삽입하여 프레임 버퍼가 채워지도록 하십시오.
  • 숨겨진 탭을 반드시 사용해야 하는 경우, 보고서 서두에 “시각적 렌더링이 관찰되지 않음”과 같은 면책 조항을 추가하십시오.

코드 건전성 vs 기능 동작

대부분의 AI QA 스크립트는 “코드 건전성(code health)”을 평가합니다. 즉, 클릭 핸들러가 연결되었는지, JavaScript 예외가 발생하지 않았는지, 필요한 라이브러리가 로드되었는지를 확인합니다. 이러한 신호는 코드가 실행되었음을 증명할 뿐, UI가 의도한 대로 변경되었음을 증명하지는 않습니다. 캔버스 요소가 생성되고 드로잉 루틴이 호출되더라도, 드로잉 명령이 크기가 0인 버퍼나 빈 에셋을 대상으로 하면 아무것도 렌더링되지 않을 수 있습니다.

코드 경로가 건전하더라도 시각적 결과물이 누락된 것을 가릴 수 있기 때문에 이 차이는 매우 중요합니다.

동작 체크 추가하기

  1. 동적 요소 식별 – 소스 코드에서 canvas 태그, file-input 필드, 다운로드 버튼 및 애니메이션 루프를 스캔합니다.
  2. 관찰 가능한 결과 정의 – 캔버스의 경우 비트맵이 비어 있지 않은지 픽셀 단위로 확인합니다. 파일 입력의 경우 미리보기 이미지가 나타나는지 확인합니다. 다운로드의 경우 파일 시스템에 파일이 생성되었는지 확인합니다. 애니메이션의 경우 추적 중인 속성이 시간이 지남에 따라 변하는지 확인합니다.
  3. 커버리지 보고 – QA 출력물에 각 기능, 코드 건전성 상태 및 동작 검증 결과를 나열한 표를 첨부합니다. 동작 체크가 누락된 항목은 “pass”가 아닌 “unverified(미검증)”로 표시합니다.

이 규칙을 적용하면 작성자의 테스트 스위트에서 허위 양성(false positives)이 극적으로 감소했으며, 스타일시트에는 특정 색상이 선언되었지만 렌더링된 픽셀은 다른 CSS 불일치 문제도 찾아낼 수 있었습니다.

신뢰할 수 있는 시각적 테스트를 위한 실무 단계

  • 테스트를 보이는 탭에서 실행하십시오. 기능에 렌더링이 포함되는 경우라면 반드시 그래야 합니다.
  • UI가 안정될 때까지 기다리십시오. 몇 초간의 고정된 지연 시간으로도 충분한 경우가 많지만, 더 견고한 방법은 getImageData를 사용하여 캔버스가 비어 있지 않은지 폴링(polling)하는 것입니다.
  • 테스트 스크립트에서 코드 건전성 단언(assertion)과 시각적 단언을 분리하십시오. AI 모델이 각각을 독립적으로 평가하도록 합니다.
  • 진단 출력의 일부로 가시성 상태(visibility state)와 프레임 카운터(requestAnimationFrame 호출 횟수)를 기록하십시오.
  • 피할 수 없는 숨겨진 탭 실행은 문서화하여 명시적인 경고를 남김으로써 후속 검토자가 제한 사항을 이해할 수 있도록 하십시오.

향후 주의 깊게 살펴볼 점

AI 지원 QA 도구가 확산됨에 따라, 개발자는 이를 판정관이 아닌 보조 도구로 취급해야 합니다. 코드 건전성 지표는 사용자에게 보이는 동작을 나타내는 불완전한 대리 지표로 남을 것입니다. 핵심은 간단합니다. AI 모델은 자신이 보는 것만 보고할 수 있습니다. 탭이 숨겨져 있어 브라우저가 화면을 그리지 않거나, 테스트 스크립트가 “화면에 무언가 나타났는가?”라고 묻지 않는다면, 모델은 기쁘게 성공을 선언할 것입니다. 가시성 요구 사항과 동작 검증 단계를 추가하면, 겉만 번지르르한 통과 판정을 신뢰할 수 있는 결과로 바꿀 수 있습니다.