모달 광고 슬롯 코드가 본문 것으로 잘못 박혀 있던 버그 수정

모달 광고에 잘못된 frameCode가 박혀 있던 버그를 잡았다.

배경: 같아 보이는데 달라야 하는 것들

[slug] 페이지는 콘텐츠 본문 영역과 모달 광고 영역이 공존하는 구조다. 둘 다 화면에 붙어 있어서 얼핏 보면 같은 컨텍스트에 있는 것처럼 느껴지지만, 광고 플랫폼 입장에서 이 둘은 완전히 다른 노출 단위다.

문제는 모달 광고가 본문에 쓰이는 frameCode를 그대로 물려받아 사용하고 있었다는 것. 광고 식별자가 동일하니 광고 플랫폼(psy gate) 쪽에서는 두 노출을 구분하지 못하고, 통계나 단가 계산이 뒤섞이는 상황이 생길 수 있다.

이런 류의 버그는 코드만 보면 절대 티가 안 난다. 빌드가 깨지는 것도 아니고, 화면 렌더링도 멀쩡히 된다. 그냥 숫자가 이상해지거나 광고 운영 쪽에서 "왜 이 슬롯 수익이 합산되냐"는 피드백이 들어올 때까지 모르고 지나가는 게 전형적인 패턴이다.

변경 내용

파일 하나, src/pages/t/[slug]/index.astro. 변경 자체는 핀포인트 수정이지만 의미는 꽤 크다.

<!-- 수정 전: 모달이 본문과 동일한 frameCode를 참조하고 있었음 -->
<ModalAd frameCode={bodyFrameCode} />

<!-- 수정 후: 모달 전용 frameCode 분리 -->
<ModalAd frameCode={modalFrameCode} />

코드 자체는 단순하다. 한 줄 바꿔치기에 가깝다. 그런데 이게 "왜 분리되어야 하는가"를 모르면 리뷰에서도 그냥 넘어가기 쉽다.

왜 이런 실수가 반복되나

광고 슬롯 코드를 다루다 보면 이런 패턴의 실수가 꽤 자주 나온다. 원인을 추리면 대략 이렇다.

• 초기 개발 때 "일단 본문 코드 넣어두고 나중에 모달용 받자" 하고 그 '나중'이 안 온 경우
• 컴포넌트 재사용하면서 props를 그냥 내려보내다 어느 순간 값이 굳어버린 경우
• 광고 슬롯 코드가 상수로 관리되지 않고 여기저기 인라인으로 박혀 있어서 어느 게 맞는지 추적이 안 되는 경우

특히 Astro 같은 파일 기반 라우팅 환경에서 [slug] 페이지는 하나의 파일이 많은 걸 담당하다 보니, 위에서 선언된 값이 아래 완전히 다른 용도의 컴포넌트로 흘러들어가는 사고가 생기기 쉽다.

이걸 방지하려면 광고 슬롯 코드를 한 군데서 명시적으로 관리하는 게 낫다. 예를 들면 이런 식.

// adSlots.ts 같은 곳에서 단일 진실 공급원으로
export const AD_FRAME_CODES = {
  body: 'BODY_FRAME_CODE',
  modal: 'MODAL_FRAME_CODE',
} as const;

이렇게 해두면 코드리뷰에서도 "왜 modal인데 body 쪽 코드를 쓰냐"는 의문이 자연스럽게 나온다. 값이 분리되어 있으니 잘못 쓰면 이름만 봐도 티가 난다.

회고

솔직히 이 버그는 내가 직접 짠 코드는 아닌데, 리뷰 단계에서 잡았어야 했다. 광고 슬롯 코드는 "화면에 보이냐"로만 검증하면 안 되고, "올바른 식별자가 붙어 있냐"까지 확인해야 하는데, 그 기준이 PR 체크리스트에 명시돼 있지 않았다.

앞으로 광고 컴포넌트 관련 PR에는 슬롯 코드 대조 항목을 체크리스트에 넣는 걸 팀에 제안할 생각이다. 버그 자체보다 "이게 왜 리뷰를 통과했는가"가 더 중요한 질문이다.

끝.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.