스크린샷 없으면 없던 일이다

우리가 내보낸 가장 비싼 버그들은 어떤 자동 검사에도 안 걸렸다. 빌드는 초록불이었다. 테스트는 통과했다. 그런데 페이지가 틀려 있었다. 모바일에서 헤드라인이 이상하게 줄바꿈돼 말이 안 됐고, 한 섹션이 다른 섹션 뒤에 깔려 렌더링됐고, 멀쩡해 보이던 폼이 아무것도 전송하지 않았다.

그래서 원시적으로 들리지만 먹히는 규칙을 세웠다. 배포된 페이지의 스크린샷을 누군가 눈으로 보기 전까지 그 변경은 완료가 아니다. 개발 서버 말고. 진짜 배포된 것을, 두 뷰포트로, 풀해상도로.

증거를 싸게 만들기

for (const vp of [{ w: 1440, h: 900 }, { w: 390, h: 844 }]) {
  const page = await browser.newPage({ viewport: vp });
  page.on('console', (m) => errors.push(m));    // console is part of the picture
  await page.goto(URL, { waitUntil: 'networkidle' });
  await page.screenshot({ path: shot(vp), fullPage: true });
}

캡처는 프로젝트당 명령어 하나면 되니까, 건너뛸 핑계가 없다. 타임스탬프가 찍힌 캡처들은 세상에서 가장 싼 회귀 아카이브로 쌓인다.

기계가 먼저 읽는다

올해는 사람 앞에 비전 모델을 세웠다. 모든 캡처 쌍은 일부러 좁게 지시받은 모델로 간다. 텍스트 넘침, 잘림, 요소 겹침, 어긋난 정렬과 대비 실패를 픽셀 영역과 함께 보고하고, 페이지가 깨끗하면 NONE이라고 답하라. 취향도 없고 칭찬도 없고 결함만. 이 모델은 사람이 보기 전에 기계적 결함의 대략 70%를 잡아내고, 마흔 번째 캡처에서도 지루해하지 않는다.

그래도 최종 판단은 사람 몫이고, 사람에게도 자기 규칙이 있다. 캡처는 1:1로 열어라. 화면 맞춤 배율에선 넘침이 숨으니까. 렌더링된 문구는 소리 내서 읽어라. 스크린샷은 에디터가 못 잡은 오타를 잡아 주니까. 그리고 콘솔 에러가 있는 페이지는 멀쩡해 보여도 불량으로 취급하라.

일반화

DB 기능은 그 행을 다시 조회해 봐야 완료다. 이메일은 실제 클라이언트에서 메시지를 열어 봐야 완료다. 모델 파이프라인은 API 응답이 아니라 목적지에서 출력을 읽어 봐야 완료다. 패턴은 한 문장이다. 네가 마침 코드를 짠 계층이 아니라, 손님이 실제로 사는 계층에서 검증하라.