모비온 광고 마커 6종을 슬러그 단위로 표준화 정비
목차
광고 마커 6종을 표준화해서 박아 넣은 작업이다. 단순히 코드 몇 줄 추가한 게 아니라, admin_db ID 기반의 매핑 체계를 정립하고 특정 슬러그(blog-slecs)에 귀속시킨 구조적인 작업이었음.
배경: 왜 이게 지금 필요했나
광고 지면을 운영하다 보면 어느 순간 "이 페이지에 어떤 광고가 붙어 있는지" 트래킹이 안 되는 시점이 온다. 초반엔 빠르게 붙이고, 나중에 정리하려다 보면 어디에 뭘 붙였는지 히스토리가 사라져 있음. 이번에 모비온 6종 마커를 박으면서 그 기준을 잡은 게 핵심이다.
blog-slecs 슬러그 단위로 지면을 격리하고, admin_db에서 ID 95~98 + 20, 22를 매핑하는 방식으로 관리 단위를 명확히 했다. 슬러그 기반으로 지면을 구분하는 건 나중에 A/B 테스트하거나 특정 카테고리에만 광고를 켜고 끌 때도 유리하다.
작업 내용: 3개 템플릿에 걸친 마커 배치
변경이 들어간 파일은 _sidebar.html, base.html, post.html 3개다.
| 파일 | 역할 | 마커 배치 의도 |
|---|---|---|
base.html |
전체 레이아웃 기반 | 공통 헤더/푸터 지면, 전역 스크립트 삽입 포인트 |
_sidebar.html |
사이드바 컴포넌트 | 우측 고정 지면 — 노출 빈도 높은 프리미엄 위치 |
post.html |
포스트 본문 페이지 | 본문 상단/하단/중간 — 컨텍스트 광고 친화 지면 |
6종을 한 번에 넣으면서 각 지면이 어떤 ID에 대응하는지 명시적으로 매핑했다. 95~98은 연속된 ID로 묶인 지면군이고, 20과 22는 기존에 운영 중이던 지면을 이번 슬러그 체계에 편입시킨 것으로 보임.
<!-- post.html 예시 패턴 (개념 코드) -->
<!-- [blog-slecs] 모비온 마커 — admin_db id: 96 -->
<div id="ad-slot-96" data-slug="blog-slecs" data-ad-id="96"></div>
<!-- sidebar 예시 -->
<!-- [blog-slecs] 모비온 마커 — admin_db id: 20 -->
<div id="ad-slot-20" data-slug="blog-slecs" data-ad-id="20"></div>
이런 식으로 슬러그와 ID를 data-* 속성이나 주석으로 명시해두면 나중에 광고팀이나 다른 팀원이 봐도 "이 마커가 어디 것인지" 즉시 파악 가능하다. 주석만 있어도 코드리뷰에서 컨텍스트 손실이 확 줄어든다.
마커 표준화가 왜 중요한가
광고 연동 작업은 의외로 기술 부채가 쌓이기 쉬운 영역이다. 이유가 몇 가지 있음.
- 마커가 어느 페이지에 몇 개 붙어 있는지 문서화가 안 된 경우가 많다. 사람이 바뀌면 추적 불가.
- 같은 ID를 두 지면에 중복 삽입하면 CTR 집계가 깨진다. 광고 플랫폼 입장에서 동일 ID가 한 페이지에 두 번 노출되면 수치가 왜곡됨.
base.html처럼 전역 영향을 주는 파일에 마커를 박을 땐 렌더 블로킹 여부를 항상 확인해야 한다. 스크립트 로딩 순서가 틀리면 마커 자체가 안 뜨는 경우도 있음.
이번 작업에서 6종을 한꺼번에 정리한 건 잘한 선택이라고 본다. 하나씩 띄엄띄엄 붙이면 커밋 히스토리도 지저분해지고, 슬러그-ID 매핑 기준도 흐려진다.
회고
솔직히 광고 마커 작업은 팀 내에서 우선순위가 밀리기 쉽다. 기능 개발도 아니고, 눈에 보이는 UX 개선도 아니니까. 근데 수익 지면 정비는 서비스 유지에 직결된 작업이라 미루면 결국 더 큰 정리 비용이 생긴다.
blog-slecs 슬러그 단위로 격리한 구조는 앞으로 다른 슬러그에 광고를 붙일 때도 이 패턴을 그대로 쓰면 된다. 표준이 하나 생긴 셈. 이런 게 쌓여야 팀원이 "이 페이지에 광고 붙여줘" 요청이 들어왔을 때 빠르게 대응할 수 있음.
다음은 나머지 슬러그 지면 매핑을 이어가는 작업이 될 것 같다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.