포스트 레이아웃에 모바일 광고 슬롯 두 개 연동 완료

레이아웃 파일 한 곳에서 광고 마커 두 개를 추가로 연동했다. 작은 변경이지만, 광고 슬롯 매핑은 꼼꼼하게 챙기지 않으면 나중에 수습 비용이 꽤 올라가는 작업이라 따로 기록해두려 한다.

배경: 마커 보강이 왜 필요했나

Post.astro 는 포스트 콘텐츠를 감싸는 레이아웃 파일이다. 모바일 뷰에서 상단/하단에 각각 광고 슬롯을 띄워야 했는데, 기존 코드에는 그 위치에 마커가 없거나 부실하게 정의되어 있었다. 결과적으로 admin DB 쪽에서 슬롯 id 116, 117 을 등록해도 프론트가 그 id 를 인식하는 진입점이 없으니 광고가 뜰 리 없는 구조였다.

광고 슬롯 매핑 작업이 이런 패턴으로 흘러가는 경우가 많다. DB 에 슬롯을 먼저 만들고, 프론트 마커는 "나중에"로 미뤄두다가 실제 세팅이 안 된 채로 캠페인 오픈일이 다가오는 것. 이번엔 그 흐름을 미리 끊고 연동까지 완성시켜두는 게 목표였다.

작업 내용

변경 파일은 src/layouts/Post.astro 단 하나. 핀포인트 수정에 가까운 작업이다.

마커 보강이라는 표현을 쓴 건, 슬롯 자체가 완전히 새로 생긴 게 아니라 기존에 어설프게 잡혀 있던 진입점을 정식 id 와 제대로 연결시키는 작업이었기 때문이다. 대략적인 패턴은 아래처럼 생겼다.

<!-- content top — mobile -->
<div
  id="mobonslot-content-top-mob"
  data-slot-id="116"
  class="ad-slot ad-slot--content-top"
/>

<!-- ...post content... -->

<!-- content bottom — mobile -->
<div
  id="mobonslot-content-bottom-mob"
  data-slot-id="117"
  class="ad-slot ad-slot--content-bottom"
/>

슬롯 id 를 data-slot-id 속성으로 심어두면, 광고 스크립트가 DOM 을 스캔할 때 해당 값을 찾아서 admin DB 설정과 매칭시키는 구조다. 이 data-* 속성 컨벤션을 팀 전체가 일관되게 쓰는 게 중요한데, 누군가 data-ad-id, data-mobon-id 등으로 제각각 쓰기 시작하면 스크립트 쪽에서 읽는 로직이 분기를 타거나 조용히 무시해버리는 경우가 생긴다. 이번에 마커를 보강하면서 기존 다른 슬롯들의 attribute 명도 같이 훑어봤다.

회고: 레이아웃 파일에서 광고 슬롯 관리할 때 주의할 점

Post.astro 같은 레이아웃 파일은 모든 포스트 페이지에 공통 적용된다. 여기에 슬롯을 넣는 건 효율적이지만, 반대로 이 파일 하나에서 실수가 터지면 전체 포스트 페이지에 영향이 간다는 뜻이기도 하다. 그래서 이런 변경을 리뷰할 때 내가 팀원들한테 자주 짚는 포인트가 있다.

• id 중복 여부 확인: 같은 페이지에서 id="mobonslot-content-top-mob" 가 두 번 렌더링되면 광고 스크립트가 첫 번째 엘리먼트만 잡거나, 혹은 둘 다 발화시켜서 중복 노출 이슈가 생긴다. 특히 Astro 같은 프레임워크에서 레이아웃이 중첩되는 구조라면 더 조심해야 한다.
• 모바일 조건부 렌더링 여부: *-mob 슬롯이라면 데스크탑에서 해당 마커가 DOM 에 있어도 괜찮은지, 아니면 미디어 쿼리나 조건 렌더링으로 숨겨야 하는지 광고 스크립트 스펙을 먼저 확인해야 한다. 스크립트가 "DOM 에 있으면 무조건 발화" 방식이라면 CSS 로 display: none 해도 노출 카운트가 올라가는 경우도 있다.
• admin DB 와 프론트 마커의 동기화 시점: DB 에 슬롯을 등록하는 사람과 프론트 마커를 심는 사람이 다를 때 이 타이밍이 어긋나기 쉽다. 이번처럼 "마커 보강"이라는 작업이 별도로 생기는 게 바로 그 타이밍 어긋남의 흔적이다. 가능하면 슬롯 등록 → 프론트 마커 추가 → 검증을 하나의 티켓으로 묶는 게 낫다.

파일 하나, 마커 두 개짜리 커밋이지만 광고 수익과 직결되는 슬롯 연동은 항상 "제대로 됐는지" 검증 루틴까지 포함해서 생각해야 한다는 걸 다시 한번 확인한 작업이었다.

끝.

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

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

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