피드로 돌아가기
My landing page passed every CI check and was still broken on my customer's phone
Dev.toDev.to
Frontend

CI의 논리 검증 한계를 극복한 Deterministic Visual QA 체계 구축

My landing page passed every CI check and was still broken on my customer's phone

faridislas2026년 6월 30일6분intermediate

AI 요약

Context

DOM 존재 여부와 성능 지표 중심의 CI 테스트로 인한 시각적 렌더링 결함 간과. Lighthouse와 Playwright의 기본 검증만으로는 실제 디바이스의 Viewport 및 Contrast Ratio 등의 렌더링 결과물을 보장하지 못하는 한계 발생.

Technical Solution

  • Playwright 기반의 다양한 Device Profile(iPhone 15 Pro, Pixel 8 등) 에뮬레이션을 통한 다각도 렌더링 검증
  • scrollWidth > clientWidth 비교 로직을 활용한 텍스트 Clipping 현상의 결정론적(Deterministic) 탐지
  • getComputedStyle 기반의 WCAG Contrast Formula 적용을 통한 가독성 수치 정량 분석
  • Network Log 모니터링을 통한 Mobile-specific Asset 404 에러의 런타임 식별
  • 결정론적 검증 후 Vision Model을 활용한 레이아웃 겹침 및 정렬 상태의 추론적(Inferred) 분석 수행
  • 다수 디바이스에서 공통 발견된 이슈만 보고하는 Corroboration 단계를 통한 모델 노이즈 제거

실천 포인트

- DOM 존재 여부 확인을 넘어 실제 렌더링 크기를 비교하는 `scrollWidth` 검증 로직 도입 - 디자인 시스템 가이드라인의 Contrast Ratio를 자동화된 수치 검증 단계에 포함 - `srcset` 등 반응형 이미지 경로의 유효성을 Mobile User-Agent 환경에서 전수 조사 - 결정론적 수치 검증(Provable)과 AI 시각 분석(Inferred)을 분리하여 보고 체계 설계

태그

#Visual QA#WCAG#Deterministic Testing#Viewport Emulation#Playwright
원문 읽기