시각적 회귀 테스트 개념

시각적 회귀 검사(VRT)는 렌더링된 스크린샷을 픽셀 단위로 비교해 코드 버전 사이의 의도하지 않은 시각적 변경을 자동으로 감지합니다. 레이아웃 이동, 색상 변경, 간격 손상과 같은 CSS 회귀를 단위 검사가 완전히 놓치는 경우에도 찾아낼 수 있습니다.

VRT는 구성 요소나 페이지의 기준 스크린샷을 만든 다음, 코드 변경 후 새 스크린샷을 만들어 서로 비교합니다. 차이점은 비교 이미지에 강조 표시됩니다. 개발자는 차이점을 검토하고 의도한 변경은 승인하거나 의도하지 않은 회귀는 수정합니다.

픽셀 비교는 이미지를 픽셀 단위로 비교하므로 민감하지만 안티앨리어싱과 서브픽셀 렌더링 차이로 인해 오탐이 발생하기 쉽습니다. 구조 비교 도구(어플리툴스 AI)는 정확히 같은 픽셀보다는 시각적 의도를 비교하므로 글꼴 렌더링 차이로 인한 오탐을 줄입니다.

승인된 스크린샷이 새로운 기준선이 됩니다. 기준선은 버전 관리 시스템(대용량 이미지에는 깃 LFS 사용)이나 전용 클라우드 서비스에 저장하십시오. 각 PR에는 기준선과 비교한 차이점이 표시되며, 유지 관리자는 검토 과정의 일부로 시각적 변경을 승인하거나 거부합니다.

구성 요소 수준 VRT는 구성 요소를 격리된 상태로(스토리북을 통해) 개별 검사합니다. 페이지 수준 VRT는 실제 브라우저에서 전체 페이지를 검사합니다. 구성 요소 검사는 더 빠르고 대상이 명확하며, 페이지 검사는 구성 요소 사이의 통합 수준 레이아웃 문제를 찾아냅니다.

기본, 마우스 오버, 포커스, 활성, 비활성화, 로딩 중, 오류, 비어 있음, 가득 참 등 모든 시각적 상태를 검사하십시오. 마우스 오버 상태에는 JavaScript 시뮬레이션이 필요합니다(Playwright의 page.hover()). 상태 검사 범위가 부족하면 상호작용 상태에서 발생하는 회귀를 놓칠 수 있습니다.

여러 브라우저(크롬, 파이어폭스, 사파리)와 뷰포트(모바일, 태블릿, 데스크톱)에서 스크린샷을 렌더링하십시오. 브라우저의 렌더링 차이로 오탐이 발생할 수 있으므로 브라우저별 기준선을 사용하고, 알려진 렌더링 차이를 허용하도록 비교 임계값을 설정하십시오.

글꼴 렌더링은 OS, 브라우저와 GPU의 조합에 따라 미세하게 달라집니다. 환경으로 인해 발생하는 오탐을 없애려면 일관된 CI 환경(도커와 특정 크롬 버전)을 사용하십시오. 클라우드 VRT 서비스는 환경의 일관성을 자동으로 관리합니다.

타임스탬프, 사용자 아바타, 광고와 무작위 데이터 같은 동적 콘텐츠는 오탐을 일으킵니다. 스크린샷을 캡처하기 전에 단색 오버레이로 동적 영역을 가리십시오. 대부분의 VRT 도구는 마스킹할 영역을 선택자로 지정하는 기능을 지원합니다.

모든 PR에서 지속적 통합 환경으로 VRT를 실행하십시오. 승인되지 않은 시각적 차이가 감지되면 빌드를 실패하게 하십시오. 시각적 차이를 엔지니어링 검토자뿐 아니라 디자인 검토자에게도 전달하십시오. 시각적 변경은 엔지니어링만큼이나 디자인의 문제이기도 합니다.

시각적 일관성이 제품 기능인 구성 요소 라이브러리와 디자인 시스템에서 VRT의 투자 수익률이 가장 높습니다. 자주 변경되는 마케팅 페이지에서는 기준선 유지 관리 비용이 회귀를 찾아내는 가치보다 커질 수 있습니다.

글꼴 렌더링 차이로 인해 시각적 회귀 검사가 오탐을 생성하는 이유는 무엇입니까?

시각적 회귀 테스트는 여러 코드 버전의 스크린샷을 비교하여 CSS 및 레이아웃 회귀를 찾아냅니다. 효과적인 VRT를 위해서는 일관된 환경, 상태 범위, 동적 콘텐츠 마스킹, 그리고 차이점을 디자인 검토자에게 전달하는 검토 작업 흐름이 필요합니다. 따라서 VRT는 단순한 자동화 게이트가 아니라 협업형 품질 관리 도구입니다.