카카오엔터테인먼트, BackstopJS로 스토리북 기반 시각적 회귀 테스트 자동화 사례 공개

카카오엔터테인먼트 FE 팀이 BackstopJS를 활용해 스토리북 기반 시각적 회귀 테스트(VRT)를 구축하고 자동화한 6개월간의 경험을 공유했다. 실제 서비스 페이지 대신 스토리북 빌드 결과물을 테스트 대상으로 삼아 기획 변경에 따른 리스크를 줄이고, Atomic 디자인 시스템의 Organism 단위로 테스트 시나리오를 구성했다.

테스트 범위와 사이드이펙트 방지

작은 단위 컴포넌트보다 복합적인 UI와 기획 의도가 포함된 Organism 단위를 테스트 대상으로 선정했다. 날짜 포맷 변경 등 공통 로직 수정 시 의도치 않은 컴포넌트 깨짐 현상을 BackstopJS를 통해 사전에 발견할 수 있었으며, 이는 리팩토링 시 발생하는 사이드이펙트를 효과적으로 차단하는 데 기여했다.

Storybook 7 버전 마이그레이션 이슈

Storybook을 6버전에서 7버전으로 업데이트하면서 파일시스템(file://) 지원이 중단되어 기존 테스트가 모두 실패하는 문제가 발생했다. ESM 로드 방식 변경으로 인해 CORS 설정과 호환되지 않았기 때문이다. 이에 따라 Docker 컨테이너 내부에서 HTTP 서버를 직접 띄우고 http://127.0.0.1:8080으로 접근하도록 테스트 URL 구조를 수정하여 문제를 해결했다.

CI/CD 파이프라인 자동화

테스트 결과 확인과 기준 이미지 갱신 과정을 자동화했다. PR 생성 시 Jenkins와 봇을 통해 테스트 성공/실패 개수와 리포트를 코멘트로 남기며, PR 머지 후 develop 브랜치에 push가 발생하면 Jenkins 파이프라인이 자동으로 backstop approve 명령을 실행해 기준 이미지를 업데이트하고 Git에 커밋한다. 이를 통해 문서화 유지보수 부담을 줄이고 스토리북의 안정성을 확보했다.