시각 회귀 테스트는 같은 조건에서 찍은 화면을 기준 이미지와 비교합니다. 레이아웃 이동, 잘림, 누락처럼 기능 어서션만으로 놓치는 변화를 포착합니다.
데모는 기준과 현재 화면을 슬라이더로 겹쳐 작은 위치 차이를 드러냅니다. 폰트·뷰포트·시간과 데이터가 달라지면 거짓 차이가 생기므로 캡처 환경을 고정해야 합니다.
언제 쓰나
디자인 시스템 변경이나 반응형 화면 수정 뒤 눈에 보이는 회귀를 확인할 때 사용합니다.
시각 회귀 테스트
Visual regression testing
이전 화면과 새 화면의 픽셀 차이를 비교해 의도하지 않은 시각 변화를 찾습니다.
···
<div class="stage"><div class="title">VISUAL REGRESSION</div><div class="canvas"><div class="compare"><div class="screen base"><div class="nav"></div><div class="card"></div><div class="card"></div></div><div class="screen current"><div class="nav"></div><div class="card shifted"></div><div class="card"></div></div><div class="wipe"></div></div><div class="caption">baseline <span>← compare →</span> current</div></div></div>.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(7px,2vmin,12px)}.compare{position:relative;width:min(90%,400px);height:70%;min-height:95px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.screen{position:absolute;inset:0;padding:9px;background:var(--bg)}.screen.current{clip-path:inset(0 0 0 50%);animation:reveal 3s ease-in-out infinite alternate}.nav{height:18%;background:var(--line);border-radius:3px;margin-bottom:8px}.card{width:72%;height:18%;border:2px solid var(--accent);border-radius:4px;margin:6px 0}.shifted{transform:translateX(10px);border-color:var(--accent-3)}.wipe{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);animation:slide 3s ease-in-out infinite alternate}@keyframes reveal{to{clip-path:inset(0 0 0 16%)}}@keyframes slide{to{left:16%}}.caption{display:flex;gap:8px;justify-content:space-between;width:min(90%,400px)}.caption span{color:var(--accent)}