포스트 레이아웃 모바일 광고 슬롯 마커 누락 보강

광고 슬롯 마커 작업 중에서도 꽤 섬세한 연동 작업이었다.

작업 배경

레이아웃 단에서 광고 슬롯을 삽입할 때 가장 중요한 건 두 가지다. 어느 위치에 노출할 것인가, 그리고 어떤 ID와 매핑할 것인가. 이번 작업은 Post.astro 레이아웃에서 모바일 전용 슬롯 두 개 — mobonslot-content-top-mob, mobonslot-content-top-mob 바닥 영역인 bottom-mob — 에 대해 admin_db 상의 id 124, 125를 정확히 연동하는 마커 보강 작업이었다.

단순히 div 하나 추가한 것처럼 보일 수 있지만, 광고 슬롯 마커 작업은 운영 DB 매핑과 직결되기 때문에 실수가 곧 광고 누락 혹은 오삽입으로 이어진다. 그래서 팀 차원에서도 이 작업은 항상 신중하게 다룬다.

슬롯 마커 구조와 매핑 방식

광고 네트워크 연동에서 "마커"라는 개념은 단순히 HTML 자리표시자 그 이상이다. 특정 슬롯 ID와 DOM 요소가 1:1로 바인딩되어야 광고 스크립트가 정확히 해당 위치를 찾아 렌더링한다. 이번 케이스처럼 admin_db에서 관리하는 슬롯 id(124, 125)가 레이아웃 마커와 매핑되는 구조라면, DB 설정 → 마커 → 스크립트 초기화 이 세 단계가 모두 일치해야 광고가 정상 노출된다.

<!-- content-top-mob 슬롯 마커 (admin_db id: 124) -->
<div id="mobonslot-content-top-mob" data-slot-id="124"></div>

<!-- content-bottom-mob 슬롯 마커 (admin_db id: 125) -->
<div id="mobonslot-content-bottom-mob" data-slot-id="125"></div>

이런 구조에서 마커가 누락되거나 id가 틀리면 광고 스크립트 입장에서는 타겟 엘리먼트를 찾지 못해 조용히 실패한다. 에러 로그도 잘 안 남기 때문에 QA 단계에서 놓치기 쉬운 부분이기도 하다.

Post.astro 한 파일에 집중하는 이유

레이아웃 파일 하나를 건드리는 것이지만, 사이트 내 포스트 페이지 전체에 영향을 미친다. Astro 기반 구조에서 Post.astro는 포스트 타입 라우트의 공통 래퍼 역할을 하기 때문에, 여기에 마커를 올바르게 심으면 모든 포스트 페이지에 일괄 적용된다. 반대로 말하면 한 번 잘못 심으면 전체 포스트에서 광고 슬롯이 오작동한다는 얘기다.

이런 맥락에서 코드리뷰 시 체크포인트를 몇 가지 잡아뒀다.

• 마커 엘리먼트의 id 값이 admin_db 슬롯 설정과 일치하는지
• top/bottom 순서가 DOM 내 실제 위치와 맞는지 (순서 역전 시 레이아웃 깨짐)
• 모바일 전용이면 CSS 혹은 조건부 렌더링으로 데스크탑에서 숨겨지고 있는지
• 동일 id가 페이지 내 중복 삽입되지 않는지

회고

이 작업을 직접 챙긴 건 팀 내에서 광고 연동 히스토리를 가장 잘 아는 포지션이기도 했고, 마커 보강이라는 표현처럼 기존에 빠져 있던 부분을 채우는 작업이었기 때문이다. 처음 슬롯 설계 시점에 top만 잡고 bottom을 누락했거나, admin_db에 id가 추가됐는데 레이아웃 반영이 늦었거나 — 이런 상황은 운영 중에 꽤 자주 발생한다.

광고 슬롯처럼 외부 시스템(admin_db, 광고 스크립트)과 프론트 레이아웃이 느슨하게 결합된 구조에서는 변경 이력을 commit 메시지에 id까지 명시하는 습관이 중요하다. 나중에 "124번 슬롯이 왜 이 위치에 있어요?"라는 질문이 들어왔을 때 git log 한 줄로 답이 나와야 한다.

다음 슬롯 추가 작업이 생기면 이 패턴을 그대로 가져가면 된다.

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

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

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