에이전시의 악몽: '200 OK'로는 안심할 수 없는 이유

새벽 3시의 공포

모든 에이전시 CTO가 가장 두려워하는 상황이 있습니다. 금요일 오후에 업데이트를 배포했습니다. CI/CD 파이프라인은 초록색 불이 들어왔고, 단위 테스트와 통합 테스트 모두 통과했습니다. Sentry에도 에러 로그 하나 없이 깨끗했습니다.

하지만 토요일 아침, 당신의 가장 큰 클라이언트로부터 다급한 전화가 걸려옵니다. 완전히 '멘붕' 상태로 말이죠.

"한 시간 전에 캠페인을 시작했는데, 고객들이 결제가 안 된다고 난리가 났어요. '지금 구매하기' 버튼이 안 눌린답니다."

당신은 급히 노트북을 엽니다. 서버는 200 OK를 반환하고, API 응답 속도도 50ms로 쾌적합니다. 하지만 페이지를 로드해 보니 그제야 보입니다. 글로벌 CSS 업데이트에서 변경된 z-index 하나 때문에 쿠키 동의 배너가 결제 버튼 위를 투명하게 덮어버린 것입니다.

버튼은 존재합니다. 로직도 정상입니다. 하지만 사용자 입장에서 사이트는 완전히 '먹통'입니다.

이것이 바로 "전통적인 모니터링"이 실패하고 "시각적 모니터링"이 필수적이 되는 지점입니다.

단위 테스트가 시각적 버그를 놓치는 진짜 이유

엔지니어로서 우리는 코드 레벨 테스팅에 크게 의존합니다. API를 모킹(Mocking)하고, 컴포넌트 로직을 테스트하고, 크래시 여부를 확인합니다.

// 전형적인 테스트: 로직이 작동하는지만 체크하고, 사용자가 실제 사용할 수 있는지는 모릅니다.
test('checkout flows', async () => {
  const result = calculateTotal(cart);
  expect(result).toBe(100); 
  // 통과함. 심지어 결과 텍스트가 흰색 배경에 흰색 글씨로 렌더링되더라도.
});

하지만 웹 애플리케이션은 시각적으로 매우 불안정합니다. 무심코 수정한 Tailwind 유틸리티 클래스 하나나 브라우저의 잠수함 패치로 인해, 자바스크립트 에러 하나 없이 레이아웃이 박살 날 수 있습니다.

"조용한" 실패들

1. CSS 충돌: 두 라이브러리 간의 스타일 우선순위(Specificity) 전쟁.
2. 엑박(Broken Image): 이미지가 깨진 아이콘으로 뜨면서 레이아웃을 50px 밀어버림.
3. 반응형 기기 특성: 특정 아이폰 모델에서 줄바꿈이 발생해 핵심 구매 버튼(CTA)이 화면 아래로 밀려남.

해결책: '눈'으로 확인하는 자동화 테스트

주말에 두 발 뻗고 자려면 코드 탐침뿐만 아니라 사이트를 실제로 바라보는 '눈'이 필요합니다. 이것이 **시각적 회귀 테스트(Visual Regression Testing)**가 필요한 이유입니다.

개념은 간단합니다:

1. "골든 마스터"(정상 상태) 화면을 찍어둡니다.
2. 배포 후 화면을 다시 찍습니다.
3. 두 사진을 겹쳐서 픽셀 단위로 비교합니다.

만약 차이가 발생하면 팀에게 즉시 알림을 보냅니다.

Playwright로 직접 만들기?

Playwright 같은 도구를 사용해 직접 솔루션을 구축할 수도 있습니다:

import { test, expect } from '@playwright/test';
 
test('homepage should look correct', async ({ page }) => {
  await page.goto('https://client-site.com');
  
  // 시각적 상태를 캡처합니다
  await expect(page).toHaveScreenshot('home-desktop.png', {
    maxDiffPixels: 100 // 미세한 렌더링 노이즈 허용
  });
});

하지만 이 방식을 50개의 클라이언트 사이트로 확장하면 '헬게이트'가 열립니다. 수천 장의 이미지 스토리지 비용, 동적 광고나 슬라이더 때문에 발생하는 오탐(False Positives), 그리고 안정적인 스케줄링 인프라 구축의 어려움 때문이죠.

결론: 신뢰의 문제

에이전시에서 당신의 평판은 곧 당신의 제품입니다. 클라이언트는 백엔드가 Rust로 작성되었는지, 테스트 커버리지가 100%인지 관심 없습니다. 그들은 오직 **"그래서 고객이 결제할 수 있습니까?"**에만 관심이 있습니다.

시각적 모니터링은 "코드의 정확성"과 "사용자 경험" 사이의 틈을 메워줍니다. 클라이언트의 항의 전화가 오기 전에, 남들 모르게 실수를 바로잡으세요.