시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)

이 글은 프론트엔드 개발에서 UI 변경으로 인한 예상치 못한 사이드 이펙트를 검증하기 위한 시각적 회귀 테스트 도구인 BackstopJS 적용 경험을 공유합니다. 유료 서비스 대신 무료 오픈소스인 BackstopJS를 선택한 이유와 그 기능을 설명하며, 특히 공통 컴포넌트 수정 시 발생할 수 있는 UI 스타일 변화를 효과적으로 감지하는 방법을 제시합니다.

BackstopJS는 렌더링된 결과와 기존 이미지를 비교하여 달라진 영역을 시각적으로 표시해주며, 크롬 headless 브라우저와 puppeteer를 활용하여 테스트를 수행합니다. 이를 통해 개발자는 UI 일관성을 유지하고 잠재적인 버그를 사전에 발견할 수 있습니다.