13억짜리 드롭다운: CSS 한 줄 때문에 연말 보너스를 날린 썰

연말 대목의 비극

11월 24일, 블랙 프라이데이 주간이었습니다. 1년 농사를 결정짓는 가장 중요한 시기죠. [익명의 패션 쇼핑몰] 팀은 만반의 준비를 마쳤습니다. 서버 용량은 3배로 늘렸고, DB는 튜닝을 마쳤으며, CDN은 빵빵하게 예열해 뒀습니다.

목표: 주말 매출 13억 원 ($1 Million).

오전 10시, 야심 차게 준비한 "홀리데이 스페셜" UI가 배포되었습니다. 상품 목록에서 페이지 이동 없이 바로 쇼핑할 수 있는 "퀵 뷰(Quick View)" 모달이 핵심 무기였습니다.

보이지 않는 벽

트래픽이 미친 듯이 쏟아져 들어왔습니다. 실시간 접속자가 5만 명을 찍었습니다. 하지만 점심시간 12시, 영업 부사장이 개발실 문을 박차고 들어왔습니다.

"전환율이 왜 0.5%밖에 안 됩니까? 이벤트 기간에는 못해도 4%는 나와야 정상이라고요!"

엔지니어들은 난리가 났습니다.

• 결제 페이지? 정상.
• PG사 연동? 정상.
• 장바구니 API? 200 OK.

"기술적으로는 문제없습니다," 팀장이 말했습니다. "그냥 이번 신상품이 별로인 거 아닐까요?"

고객의 눈으로 본 세상

드디어, 결정적인 고객문의 하나가 접수되었습니다. 스크린샷과 함께요. 아이패드 프로를 쓰는 고객이었습니다.

"아니, 장바구니 담기를 백날 눌러도 화면만 번쩍하고 아무 반응이 없잖아요. 짜증 나서 걍 딴 데 갑니다."

개발팀은 부랴부랴 아이패드를 가져왔습니다. "퀵 뷰"를 띄우고 "장바구니 담기"를 눌렀습니다. 원래대로라면 우측 상단에 *"상품이 장바구니에 담겼습니다!"*라는 알림 창(Toast)이 떠야 했습니다.

뜨고 있었습니다. 다만, 막판에 투명 헤더 디자인을 수정하면서 backdrop-filter 속성이 꼬였고, 흰색 알림 창이 흰색 헤더 뒤에 숨어서 **"흰색 바탕에 흰색 글씨"**로 렌더링되고 있었던 겁니다.

수천 명의 고객이 버튼을 눌렀지만, 아무 반응이 없자 "사이트 고장 났네" 하고 떠나버린 것입니다. 매분 매초마다요.

"보이지 않는" 버그의 청구서

• 지속 시간: 4시간.
• 날아간 손님: 잠재 구매자 15,000명 이탈.
• 증발한 매출: 약 2억 6천만 원 ($200,000) 추정.
• 브랜드 이미지: 박살 남.

서버 로그(Sentry, Datadog)는 **"성공"**이라고 기록했습니다. 기술적으로는 장바구니에 담겼으니까요. 코드는 완벽했습니다. 망가진 건 '고객 경험'이었습니다.

시각적 검증은 매출 보험입니다

만약 SiteSnapshot이 있었다면 어땠을까요?

1. 배포: "퀵 뷰" 코드가 스테이징에 올라갑니다.
2. 스캔: SiteSnapshot이 "장바구니 담기" 동작을 시뮬레이션하고 화면을 캡처합니다.
3. 발견: 이전 버전과 비교했을 때 알림 창의 명암비(Contrast)가 0, 즉 "완전 안 보임" 상태임을 감지합니다.
4. 방어: 배포가 자동 중단됩니다. CSS를 수정합니다. 2억 6천만 원을 지켜냅니다.

결론

이커머스에서 UI는 영업사원입니다. 영업사원이 입을 꾹 다물고 있거나 투명 인간이라면 물건을 팔 수 없습니다. CSS 한 줄 때문에 1년 농사를 망치지 마세요.

서버가 말하는 "정상"을 믿지 마세요. 고객의 눈에 보이는 "현실"을 검증하세요.