블로그 광고 슬롯 4개를 admin DB와 매핑 연동

광고 슬롯 4개를 새로 뚫고, admin DB 쪽 ID와 매핑 연동까지 한 번에 마무리했다.

배경 — "슬롯 마커"가 왜 필요한가

광고 인프라를 운영하다 보면 "어디에 광고를 붙일 것인가"를 코드 레벨에서 명확히 선언해둬야 하는 시점이 온다. 마커(marker)를 박는 작업이 바로 그 선언이다. 템플릿 안에 단순히 스크립트를 때려넣는 방식은 초반엔 빠르지만, 슬롯이 늘어날수록 "이 광고가 어느 ID에 매핑되어 있는지" 추적이 안 된다. 어느 순간 admin DB 쪽에서 관리하는 슬롯 ID와 실제 렌더링 위치가 어긋나기 시작하고, 그 시점부터 매출 집계나 노출 통계가 신뢰를 잃는다.

이번 작업의 트리거는 간단했다. Mobonslot 계열 슬롯 4종이 admin DB에 ID 91~94로 등록되어 있었는데, 실제 BlogPost 템플릿에는 마커가 없었다. 즉 DB에는 슬롯이 살아 있는데 프런트에서 호출이 안 되는 상태. 광고 수익 누락의 전형적인 패턴이다.

작업 내용 — BlogPost.astro 한 파일, 4개 마커

변경 파일은 blog/src/layouts/BlogPost.astro 하나다. Astro 기반 블로그에서 레이아웃 파일은 사실상 모든 포스트 페이지의 뼈대다. 여기에 마커를 박는다는 건 전체 포스트 페이지에 일괄 적용된다는 의미이기도 하다 — 그래서 위치 선정이 중요하다.

마커 4종을 admin DB ID 91~94에 각각 대응시켰다. 매핑 구조는 대략 이런 식:

<!-- mobonslot: admin_db id=91 -->
<div id="mobonslot-91" class="ad-slot" data-slot="91"></div>

<!-- mobonslot: admin_db id=92 -->
<div id="mobonslot-92" class="ad-slot" data-slot="92"></div>

<!-- mobonslot: admin_db id=93 -->
<div id="mobonslot-93" class="ad-slot" data-slot="93"></div>

<!-- mobonslot: admin_db id=94 -->
<div id="mobonslot-94" class="ad-slot" data-slot="94"></div>

코드 자체는 단순하다. 하지만 이 단순함이 유지보수의 핵심이다. 나중에 누가 보더라도 "이 div가 admin DB 몇 번 슬롯이다"를 주석 하나로 즉시 파악할 수 있어야 한다.

슬롯 마커 작업 시 놓치기 쉬운 것들

이런 매핑 작업을 여러 번 해보면서 정리한 체크리스트가 있다:

이번에 4종을 한 번에 넣은 건 의도적인 결정이었다. 슬롯 하나씩 PR 올리면 리뷰 비용이 4배가 된다. 동일한 패턴의 반복이고, DB 매핑 범위도 91~94로 연속적이어서 묶는 게 맞다고 판단했다.

회고

BlogPost.astro는 사이트 전체 포스트에 영향을 주는 파일이라 건드릴 때마다 신중해진다. 작은 변경도 전체 배포 범위가 되니까. 광고 슬롯 마커 같은 작업은 기능적으로 "눈에 안 띄는" 변경처럼 보이지만, 실제로는 수익 파이프라인의 첫 번째 접점이다. 마커가 없으면 아무리 admin DB가 잘 세팅되어 있어도 광고가 뜨지 않는다.

4개 슬롯 ID를 묶어서 처리하면서 하나 더 확인한 건, 마커를 박는 위치 컨벤션을 팀 내에서 미리 정해두면 이후 추가 작업 속도가 확실히 붙는다는 점이다. "본문 상단", "본문 하단", "사이드바" 같은 위치 레이블을 주석에 함께 남겨두는 것도 좋은 습관이다.

다음

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

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

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