26장 screenshot diff를 취향 회의의 기억장치로 만든다
Design QA에서 “전에는 괜찮았던 것 같다”는 가장 비싼 문장이다. 승인한 화면을 baseline으로 저장하고 변경 뒤 같은 viewport·data·font·browser에서 다시 찍는다. Onda는 실제 HTML을 1440×1000, 390×844에서 capture한다. 예약 dialog도 열린 상태를 별도 baseline으로 둔다.
Pixel 차이가 모두 결함은 아니다. Anti-aliasing, 날짜, random content, animation frame은 noise가 된다. Capture 전에 다음을 고정한다.
- viewport와 device scale
- locale·timezone·clock
- fixture와 API response
- motion off와 transition 종료
- font load 완료
- consent banner와 user state
Diff triage는 severity로 나눈다.
| 등급 | 예 | 처리 |
|---|---|---|
| Blocker | CTA가 가려짐, text 잘림, dialog 밖으로 나감 | merge 중단 |
| Major | hierarchy 역전, 2줄 label로 높이 붕괴 | 수정 또는 명시 승인 |
| Minor | 1px divider, 허용 범위 내 antialias | 기록 후 승인 가능 |
| Intended | 승인한 token·copy 변경 | 새 baseline과 이유 commit |
Screenshot은 접근성 tree나 interaction을 보지 못한다. DOM assertion, keyboard task, console error, performance 측정과 함께 쓴다. Baseline을 자동 갱신하는 script는 검사의 의미를 없애므로 사람의 승인과 change note가 필요하다.