관리자 화면의 버튼 간격을 수정했는데 고객 문의 화면의 제출 버튼이 화면 밖으로 밀려났습니다. 기능 테스트는 API 응답과 클릭 성공만 확인했기 때문에 통과했습니다. 사용자에게는 분명한 장애지만 코드 테스트에는 보이지 않는 종류의 회귀입니다. 시각 회귀 테스트는 이전 화면과 새 화면의 스크린샷을 비교해 이런 변화를 조기에 찾습니다.
다만 이미지가 달라졌다는 사실과 화면이 잘못됐다는 판단은 다릅니다. 테스트가 성공하려면 기준선, 환경, 검토 절차를 함께 설계해야 합니다.
스크린샷은 어떤 상태에서 찍을까
홈 화면 한 장만으로 업무 앱 전체를 보호할 수는 없습니다. 많은 데이터가 든 표, 검색 결과 없음, 오류 안내, 권한 없음, 길어진 한글 제목, 모바일 좁은 화면처럼 깨지기 쉬운 상태를 고릅니다. 모든 픽셀을 모든 화면에서 비교하면 유지 비용이 커지므로 비즈니스 핵심 경로와 공통 컴포넌트부터 시작합니다. 기능 테스트가 ‘버튼이 작동한다’를, 시각 테스트가 ‘버튼이 보이고 배치가 유지된다’를 보완하게 합니다.
Playwright 시각 비교 문서는 처음 생성한 기준 스크린샷과 이후 실행 결과를 비교하는 방식을 설명합니다. 브라우저·운영체제·폰트·하드웨어 조건이 다르면 렌더링도 달라질 수 있으므로 기준선이 만들어진 환경과 테스트 환경을 맞추는 것이 중요합니다.
흔들리는 요소를 먼저 통제한다
현재 시각, 랜덤 아바타, 실시간 차트, 로딩 애니메이션, 외부 광고는 매번 화면을 바꿉니다. 테스트 데이터와 시계를 고정하고 애니메이션을 끄며 응답을 통제하면 불필요한 실패가 줄어듭니다. 동적인 부분을 가려야 한다면 좁은 영역만 선택합니다. 중요한 가격이나 승인 상태까지 넓게 가리면 화면이 망가져도 테스트가 통과합니다.
스크린샷을 찍기 전에 폰트 로딩과 필요한 데이터 표시가 완료됐는지 확인합니다. 무작정 몇 초 기다리는 방식은 빠른 환경에서는 시간을 낭비하고 느린 환경에서는 실패합니다. 안정적인 화면 상태를 나타내는 요소나 네트워크 응답을 기다린 뒤 캡처합니다. 브라우저의 화면 크기와 확대 비율도 기준선의 일부로 고정합니다.
차이를 승인하는 사람이 있어야 한다
디자인 변경으로 의도한 차이가 나왔다면 기준 스크린샷을 갱신해야 합니다. 하지만 실패할 때마다 자동으로 새 이미지를 기준선으로 저장하면 오류를 승인하는 셈입니다. 변경 전·후·차이 이미지를 함께 보고 담당자가 ‘어디가 왜 달라져야 하는지’를 리뷰합니다. 코드 리뷰에 기준선 변경을 포함하면 의도하지 않은 주변 화면 변화도 발견할 수 있습니다.
픽셀 허용 오차를 지나치게 높이면 실제 회귀가 숨고, 너무 낮으면 글꼴 미세 차이로 매번 실패합니다. 작은 허용 범위와 환경 고정을 먼저 적용한 뒤 프로젝트에 맞는 임계치를 정합니다. 단순 비율보다 중요한 컨트롤이 이동했는지를 우선 봐야 합니다.
시각 테스트만으로 충분하지 않다
보기에는 같은 버튼도 키보드 포커스가 안 가거나 스크린리더 이름이 사라질 수 있습니다. 화면 비교와 접근성 검사, 동작 테스트를 별도로 유지해야 합니다. 반응형 레이아웃은 대표적인 좁은 화면과 넓은 화면을 나눠 검증합니다. 다크 모드가 있다면 색 대비와 상태별 스크린샷도 대상이 됩니다. 시각 회귀 테스트는 사람의 디자인 리뷰를 대체하는 것이 아니라 놓치기 쉬운 변화를 알려주는 조기 신호입니다.
한글 글꼴이 대체되거나 표의 긴 항목이 잘리는 문제는 데이터가 짧은 테스트 계정만으로는 드러나지 않습니다. 실제 업무에서 흔한 긴 고객명과 빈 값, 큰 숫자를 섞은 고정 데이터를 준비하면 차이 이미지가 더 유용해집니다.
도입 체크리스트
- 핵심 업무 상태와 공통 컴포넌트를 선정한다.
- 브라우저·폰트·화면 크기·테스트 데이터를 고정한다.
- 변동 요소만 최소 범위로 통제한다.
- 기준선 변경을 코드 리뷰에서 확인한다.
- 기능·접근성 테스트와 함께 운영한다.
좋은 시각 회귀 테스트는 ‘모든 화면이 어제와 똑같다’고 주장하지 않습니다. 달라진 부분을 빠르게 보여주고, 그 변화가 의도한 것인지 판단할 근거를 제공합니다.
#시각회귀테스트 #VisualRegression #Playwright #웹앱테스트 #UI테스트 #테스트자동화 #디자인시스템 #레이아웃검증 #프런트엔드 #품질관리
