모바일 광고 슬롯 마커 누락으로 광고가 뜨지 않던 문제 해결

광고 슬롯 마커를 두 개 더 붙이는 작업을 했다. 레이아웃 레벨에서 건드리는 일이라 범위는 작아 보이지만, 실제로는 광고 운영 팀이 ID 기반으로 슬롯을 식별하고 ON/OFF 하는 흐름 전체에 걸리는 변경이었다.

배경 — 왜 마커가 필요한가

모바일 환경에서 콘텐츠 상단(content-top-mob)과 하단(content-bottom-mob) 위치에 광고를 삽입하는 슬롯을 운영하고 있는데, 이 슬롯들이 admin_db 상에서는 id 112/113으로 등록돼 있었다. 그런데 실제 레이아웃 파일에는 해당 마커가 빠져 있거나 id 매핑이 연결되지 않은 상태였다.

광고 시스템에서 "마커"란 단순히 HTML 주석이나 data 속성이 아니라, 광고 서버가 슬롯을 인식하고 입찰을 태우는 기준점이다. 마커가 없으면 admin에서 id를 아무리 설정해도 실제 렌더링에서는 광고가 나오지 않는다. 운영 팀 입장에서는 "분명히 등록했는데 왜 안 뜨냐"는 상황이 되고, 개발 팀은 그때서야 레이아웃을 열어보는 패턴이 반복된다.

이 구조의 문제는 광고 슬롯 등록(admin_db) 과 슬롯 마커 삽입(레이아웃 코드) 이 서로 다른 레이어에 존재한다는 점이다. 두 레이어가 따로 관리되다 보면 싱크가 깨지는 건 시간문제다.

작업 내용 — Post.astro 에서 한 것

변경 파일이 src/layouts/Post.astro 하나다. Astro 기반 정적/하이브리드 레이아웃에서 Post 레이아웃은 아티클 콘텐츠를 감싸는 루트 껍데기다. 모바일 뷰포트 기준으로 콘텐츠 블록의 위아래에 슬롯 마커를 심는 위치이기도 하다.

이번에 추가한 건 두 슬롯의 마커 + id 연동:

코드 패턴으로 보면 대략 이런 구조:

<!-- content-top-mob -->
<div
  class="mobonslot"
  data-slot="content-top-mob"
  data-slot-id="112"
></div>

<!-- ... 콘텐츠 본문 ... -->

<!-- content-bottom-mob -->
<div
  class="mobonslot"
  data-slot="content-bottom-mob"
  data-slot-id="113"
></div>

data-slot-id 가 admin_db id와 1:1로 매핑되어야 광고 서버 쪽에서 슬롯을 올바르게 식별한다. 이 값이 빠지거나 잘못 들어가면 입찰 자체가 일어나지 않거나, 엉뚱한 슬롯에 광고가 매핑된다.

회고 — 이런 작업의 진짜 리스크

마커 보강은 커밋 diff 기준으로는 몇 줄 안 된다. 그런데 내가 이걸 꽤 신중하게 다루는 이유가 있다.

• 레이아웃 파일은 모든 포스트 페이지에 적용된다. Post.astro 하나를 건드리면 사이트 전체 포스트 뷰에 영향이 간다. 광고 마커를 잘못 달면 특정 슬롯이 아니라 전체 페이지에서 광고 렌더링이 깨질 수 있다.
• id 매핑 오류는 운영 단에서 뒤늦게 발견된다. 개발 단계에서는 광고 자체가 안 뜨는 환경이라 눈으로 확인이 안 된다. admin에서 슬롯을 켰는데 수익 리포트에서 해당 슬롯 노출이 0으로 찍혀야 비로소 이상함을 인지하는 케이스가 많다.
• 마커 네이밍 컨벤션이 흔들리면 나중에 진단이 어렵다. content-top-mob / content-bottom-mob 처럼 위치와 디바이스 타입을 명시하는 네이밍이 중요하다. 이게 흐트러지면 슬롯이 20개쯤 됐을 때 admin_db id와 코드 마커를 매핑하는 게 사실상 불가능해진다.

팀 차원에서 앞으로 광고 슬롯을 추가할 때 admin 등록과 레이아웃 마커 삽입을 같은 PR에서 처리하도록 컨벤션을 만들어두는 게 맞겠다고 생각했다. 지금은 둘이 따로 노는 구조라, 이번처럼 "마커 보강"이라는 후처리 커밋이 생긴다. 이 자체가 프로세스 갭의 증거다.

작은 커밋이지만 그 안에 "레이아웃 전파 범위", "운영-개발 레이어 싱크", "네이밍 컨벤션" 세 가지 이슈가 다 들어있다. 다음에 슬롯을 추가할 때는 체크리스트 형태로 두 레이어 동시 적용을 강제하는 방향으로 정리해둘 생각이다.

끝.

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

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

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