Headless Chrome 기반 Visual Diffing을 통한 HTTP 200 사각지대 제거

How to build a visual uptime monitor with Go and headless Chrome

SamReid2026년 5월 22일11분intermediate

AI 요약

Context

HTTP 응답 코드 기반의 기존 Uptime Monitor는 JS Crash나 React Hydration Failure 같은 렌더링 단계의 오류를 감지하지 못하는 한계 존재. 서버 응답과 실제 사용자 화면 사이의 간극을 메우기 위해 시각적 검증 체계 도입 필요.

Go 및 chromedp 라이브러리를 활용한 Headless Chrome 제어로 브라우저 라이프사이클 및 Full Screenshot 캡처 자동화
JS 실행 완료를 위한 2초의 Sleep Time 부여 및 특정 요소 대기를 통한 렌더링 안정성 확보
이미지 디코딩 후 픽셀 단위로 RGBA 값을 비교하여 채널별 10% 이상의 차이를 보이는 픽셀을 추출하는 Pixel Diffing 로직 설계
Baseline 이미지 대비 변경된 픽셀을 Red 색상으로 하이라이트 처리하여 가시성 높은 Diff Image 생성
SSRF 공격 방지를 위해 RFC 1918 및 Link-local 범위의 IP 주소를 검증하는 Blocklist 필터링 적용
인증 페이지 대응을 위해 Login Flow 스크립팅 및 특정 요소의 WaitVisible 기반 내비게이션 구현

실천 포인트

1. 단순 HTTP Check 외에 Headless Browser 기반의 시각적 회귀 테스트 도입 검토

2. Pixel Diffing 적용 시 Antialiasing 노이즈를 고려한 임계값(Threshold) 설정

3. 외부 URL 요청 시 내부망 접근을 차단하는 SSRF 방어 로직 필수 적용

4. 브라우저 인스턴스 풀링 및 스케줄링을 통한 리소스 사용량 최적화

태그