광고 슬롯 마커와 관리자 DB 아이디 매핑을 여섯 페이지에 적용

광고 슬롯 마커 연동 작업을 정리했다. 레이아웃 기반 파일부터 카테고리·콘텐츠 페이지까지 꽤 넓게 퍼져 있는 작업이었음.

왜 이 작업이 필요했나

광고 시스템을 붙일 때 가장 먼저 해야 하는 게 슬롯 식별자 정의다. 어떤 지면에 어떤 광고가 들어가는지, 그게 내부 admin DB의 어떤 레코드와 매핑되는지를 코드 레벨에서 명확히 선언해줘야 한다. 이번에 작업한 mobonslot 마커 세 개 — m-cover, content-top-mob, content-bottom-mob — 는 각각 모바일 커버 영역, 콘텐츠 상단, 콘텐츠 하단에 해당하는 슬롯이고, admin_db 기준 id 83·84·85에 대응한다.

이런 매핑 정보가 코드에 명시되지 않으면 나중에 "이 슬롯이 실제 어떤 id로 집계되는 거야?"라는 질문이 반복된다. 팀 안에서 광고 운영자, 개발자, 데이터 팀이 각자 다른 기준으로 슬롯을 부르게 되고, 결국 혼선이 생긴다. 그래서 마커 보강 시점에 id 매핑까지 같이 묶어서 커밋에 명시해두는 걸 원칙으로 잡았음.

변경 범위가 넓었던 이유

파일이 6개인 이유는 슬롯 자체가 레이아웃 단일 컴포넌트로 추상화되지 않고 각 페이지에서 직접 마커를 심는 구조였기 때문이다. 이상적으로는 공통 컴포넌트로 빼서 한 곳만 고치면 되는 형태가 좋겠지만, 현재 구조에서는 페이지별로 슬롯 맥락이 달라서 개별 처리가 불가피했음. Base.astro가 공통 기반을 잡고, 나머지 페이지들이 각자 슬롯 위치를 지정하는 패턴.

슬롯 마커 코드 패턴

Astro 기반 프로젝트에서 광고 마커를 심는 방식은 대략 이런 식이다.

---
// 슬롯 id는 admin_db 매핑 기준으로 상수 선언
const AD_SLOTS = {
  mCover: 83,
  contentTopMob: 84,
  contentBottomMob: 85,
} as const;
---

<!-- m-cover 슬롯 -->
<div
  class="mobonslot"
  data-slot="m-cover"
  data-slot-id={AD_SLOTS.mCover}
></div>

<!-- content-top-mob 슬롯 -->
<div
  class="mobonslot"
  data-slot="content-top-mob"
  data-slot-id={AD_SLOTS.contentTopMob}
></div>

핵심은 슬롯 이름(마커)과 admin_db id를 같은 선언 안에 묶는 것. 이렇게 해두면 나중에 id가 바뀌거나 슬롯이 추가될 때 상수 하나만 고치면 전체가 따라간다.

회고

이 PR을 리뷰하면서 팀원들한테 강조한 게 두 가지였다.

• 마커 이름과 id는 반드시 커밋 메시지에 같이 써라. 코드만 보면 "83이 뭐야?"가 되고, admin 보면 "이게 어느 페이지야?"가 된다. 둘을 연결하는 컨텍스트는 커밋 메시지에 있어야 한다.
• 영문 페이지 누락 여부를 체크리스트로 관리해라. 이번에도 국문 카테고리 페이지에 먼저 슬롯을 심고 영문 쪽을 빠뜨릴 뻔했다. 광고 슬롯은 국문/영문 지면을 페어로 묶어서 같이 확인하는 습관이 필요함.

광고 슬롯 작업은 코드 난이도가 높진 않아도 지면 누락이나 id 오매핑이 조용히 들어오기 쉬운 영역이다. 그래서 오히려 꼼꼼한 명세가 더 중요하다고 생각함. 이번 작업에서 id까지 같이 명시한 건 잘한 결정이었다고 본다.

다음은 슬롯 렌더링 조건 분기 — 모바일/데스크탑 분기 로직 정리로 이어질 것 같다.

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

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

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