5분 만에 치명적인 UI 버그 고치고 '칼퇴'한 썰

금요일 오후 5시 55분

개발자라면 누구나 아는 공포의 시간입니다. 일주일 내내 대시보드 기능을 개발했습니다. 로직은 완벽하고, API 연동은 깔끔하며, 제 27인치 4K 모니터에서는 아주 아름답게 보입니다.

커밋을 푸시하고, CI/CD 파이프라인이 성공(Green)하는 걸 보고 주말 약속을 떠올렸습니다. 시계는 6시를 향해 가고 있었죠. 가방을 챙기며 "이번 주는 평화롭네"라고 생각했습니다.

그 순간, 슬랙 알림이 울렸습니다.

SiteSnapshot 경고: staging.sitesnapshot.io/dashboard 에서 시각적 변경 감지됨 (변화율: 15%)

내 서비스 내가 써보기 (Dogfooding)

SiteSnapshot 팀은 지독하게 "내 서비스 내가 써보기(Dogfooding)"를 실천합니다. 우리 서비스를 모니터링하기 위해 우리 서비스를 씁니다. 저는 배포될 때마다 스테이징 서버를 스캔하도록 자동화 작업을 걸어뒀었죠.

알림을 클릭할 때까지만 해도 별거 아닐 거라 생각했습니다. 폰트가 살짝 바뀌었거나 그림자가 좀 진해졌겠지 싶었죠.

하지만 스크린샷을 본 순간 등골이 서늘해졌습니다.

사이드바 메뉴 전체가 메인 콘텐츠 위로 무너져 내려와 있었습니다. 3일 동안 공들여 만든 데이터 테이블이 사이드바에 가려져 반도 안 보였고, "설정" 버튼은 화면 한가운데를 유령처럼 떠다니고 있었습니다.

문제: "내 컴퓨터에선 잘 되는데요"

제 광활한 개발용 모니터에서는 CSS Grid 레이아웃이 넉넉했습니다.

/* 제가 짠 코드 (단순화) */
.dashboard-grid {
  display: grid;
  grid-template-columns: 250px 1fr; /* 고정 사이드바, 나머지 꽉 채우기 */
}

하지만 우리 스캐너가 시뮬레이션한 13인치 노트북 화면에서는 달랐습니다. 글로벌 스타일에 있는 overflow-x: hidden 속성과 충돌이 나면서, 화면이 좁아지자 그리드가 와르르 무너져 내린 겁니다.

만약 이걸 못 잡고 퇴근했다면? 주말에 심심해서 접속해 본 대표님이나 유저들이 "사이트 망가졌는데요"라고 연락했을 테고, 저는 월요일 아침부터 핫픽스 배포하느라 식은땀을 흘렸을 겁니다.

5분 컷 수정

SiteSnapshot이 정확히 어디가 깨졌는지 빨간색 오버레이(Diff)로 보여줬기 때문에, 맹탕으로 버그 재현하느라 시간을 쓸 필요가 없었습니다.

VS Code를 열고, 문제가 된 CSS 클래스를 찾아 더 튼튼하게 고쳤습니다.

// 수정 코드: 최소 너비 강제 설정
<div className="grid grid-cols-[250px_minmax(0,1fr)] h-screen">
  <Sidebar className="shrink-0" />
  <main className="overflow-auto">
    {/* ... 콘텐츠 ... */}
  </main>
</div>

수정해서 푸시했습니다. 3분 뒤, 다시 알림이 왔습니다.

SiteSnapshot 알림: 시각적 변경 감지됨 (변화율: 15% -> 0%)

정상으로 돌아왔습니다.

코드 품질? 아니, '퇴근'의 문제입니다

우리는 클린 코드나 테스트 커버리지 이야기를 많이 합니다. 하지만 사용자에게는 **화면에 보이는 게 곧 현실(Interface is Reality)**입니다.

• 백엔드가 0.01초 만에 답해도 "결제" 버튼이 팝업에 가려지면 망한 겁니다.
• DB 설계가 예술적이라도 모바일에서 글씨가 안 읽히면 망한 겁니다.

단위 테스트는 "당신의 CSS가 13인치 노트북에서 깨졌다"는 걸 절대 알려주지 못합니다. 오직 '눈'으로 보는 시각적 모니터링만이 할 수 있습니다.

금요일 저녁을 지키세요

저는 주말을 망칠 뻔한 대형 사고를 단 5분 만에 막았습니다. 그리고 노트북을 덮고 사무실을 나왔습니다. 제시간에요.

이게 자동화된 시각적 모니터링의 핵심입니다. 단순히 QA를 잘하자는 게 아니라, 개발자의 **마음의 평화(Peace of Mind)**를 위한 것입니다. "배포하고 뒤도 안 돌아보고 퇴근할 수 있는 자신감". 모든 개발자가 이 기분을 느꼈으면 좋겠습니다.