광고 슬롯 마커 4종 표준화로 페이지별 광고 삽입 기준 정립

광고 슬롯 마커를 표준화해서 심었다. 페이지마다 제각각이던 광고 삽입 방식을 정리하고, i-cover, m-cover, content-top-mob, bottom-mob 4종을 정의해서 admin_db id 127~130과 1:1 매핑하는 작업이었음.

왜 지금 이 작업인가

광고 시스템을 붙이다 보면 초반엔 "일단 되게만 하자" 식으로 페이지마다 임시로 스크립트를 꽂거나, 컴포넌트 이름을 팀원마다 다르게 만들어버리는 경우가 생긴다. 이번에도 비슷한 상황이었음. 드림 페이지, 궁합 페이지 등 여러 페이지에 광고가 붙기 시작하면서 슬롯 기준이 흔들릴 조짐이 보였다.

특히 문제가 되는 건 마커 이름과 admin_db 레코드 간의 연결 고리가 명시적으로 없을 때다. 코드에 "banner-top" 같은 문자열이 박혀 있어도, 그게 DB의 어떤 레코드를 가리키는지 파악하려면 admin 화면을 뒤져야 한다. 신규 입사자나 광고 담당자가 봤을 때 "이 슬롯이 어디에 해당하는 거죠?" 라는 질문이 바로 나오는 구조. 이런 게 쌓이면 나중에 광고 소재 교체나 A/B 테스트를 할 때 혼선이 생긴다.

그래서 이번에 4종 마커를 명확히 정의하고, id까지 주석 혹은 상수로 묶어서 코드에서도 바로 추적 가능하게 만들었음.

변경된 파일과 의미

동적 라우트([slug].astro)가 두 개 포함돼 있다는 게 포인트다. 목록 페이지는 단순히 마커 위치만 잡으면 되지만, slug 기반 상세 페이지는 콘텐츠 길이나 레이아웃이 케이스마다 달라지기 때문에 마커가 뜬금없는 위치에 렌더링되지 않도록 신경 써야 했음. 특히 i-cover(이미지 커버 영역)는 헤더 이미지 로딩 타이밍과 겹치지 않게 위치를 잡는 게 관건이었다.

마커 매핑 구조

// 광고 슬롯 마커 상수 — admin_db id 127-130 대응
export const AD_SLOTS = {
  I_COVER:          { key: 'i-cover',          id: 127 },
  M_COVER:          { key: 'm-cover',           id: 128 },
  CONTENT_TOP_MOB:  { key: 'content-top-mob',   id: 129 },
  BOTTOM_MOB:       { key: 'bottom-mob',         id: 130 },
} as const;

실제 코드 구조가 딱 이렇지는 않더라도, 이런 식으로 한 곳에 모아두는 게 팀 입장에서 훨씬 관리하기 편하다. 마커 키 문자열이 여러 파일에 흩어져 있으면, 나중에 이름 변경 한 번 할 때 grep 돌리면서 하나씩 확인해야 한다. 상수로 묶으면 타입 레벨에서도 잡아주고, IDE 리네임도 한 방에 끝남.

회고

사실 이런 마커 박는 작업은 "별것 아닌 것 같은데 왜 별도 커밋이에요?" 라고 물어볼 수 있는 류의 작업이다. 근데 팀장 입장에서 이걸 하나의 커밋으로 묶어서 명확하게 남기는 게 중요하다고 생각함. 이유가 몇 가지 있다.

• 광고 슬롯은 비개발 직군(광고 운영, 기획)이 admin에서 직접 건드리는 영역임. 코드 변경과 admin 레코드 변경이 동기화된 시점을 git log에서 추적할 수 있어야 한다.
• 나중에 "언제 이 슬롯 생겼어요?"라는 질문이 나왔을 때 커밋 메시지 한 줄로 답변이 끝나야 한다.
• 4개 페이지 이상에 걸쳐 동일한 마커 규칙을 적용하는 작업은 리뷰어 입장에서 diff를 볼 때 패턴이 일관된지 확인해야 하는데, 커밋이 섞여 있으면 맥락을 잡기 어렵다.

코드리뷰 때도 이 점을 팀원에게 이야기했다. "광고 슬롯은 인프라 변경이랑 비슷하게 생각해. 조용히 들어가서 조용히 깨지는 거야."

모비온 표준 4종이라는 기준이 생겼으니, 앞으로 새 페이지 추가할 때 이 슬롯 체계를 그대로 따르면 된다. 기준이 생긴 것 자체가 이번 작업의 핵심이었음.

끝.

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

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

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