프론트엔드
BackstopJS 적용 후기 (Visual Regression Test)
두줄요약
BackstopJS와 스토리북으로 Organism 단위 시각적 회귀 테스트를 구축했습니다. Jenkins·PR 봇 자동화로 결과 확인과 기준 이미지 갱신을 관리했습니다.
문제 상황
- 기획 변경·리팩토링 중 공통 코드 수정에 따른 UI 사이드이펙트 탐지 필요
- 수동 유지보수가 어려운 스토리북 문서와 시각적 테스트 결과 관리 부담
해결 방법
- Atomic 디자인 시스템의 Organism 단위 스토리북 빌드 결과를 BackstopJS 시나리오로 구성
- 공통 설정과 URL 목록을
createBackstopScenarios.js로 분리해 다수 시나리오 관리 - Storybook 7의 파일 URL 지원 중단에 맞춰 Docker 내부 HTTP 서버 기반 테스트로 전환
성능/운영 포인트
- PR 봇과 Jenkins로 테스트 성공·실패 수, 스토리북, Backstop 리포트 링크를 PR 코멘트에 자동 게시
- develop 머지 후
backstop_data의 테스트 이미지를 reference 이미지로 자동 갱신하고 커밋·푸시 - PC·모바일·폴더블 등 뷰포트와 디자인 조건별 스토리북 케이스의 테스트·문서화 병행
적용해볼 점
- 공통 날짜 포맷처럼 영향 범위가 넓은 변경의 의도치 않은 UI 깨짐 조기 발견
- 테스트 시나리오 추가를 통한 스토리북 문서 최신성 유지
