모비온 PC 광고 슬롯을 4종에서 6종으로 확장

광고 슬롯 확장 작업을 마무리했다. 모비온 광고 종류를 기존 4종에서 6종으로 늘리면서, PC 환경에서 728×90 리더보드 배너와 300×250 미디엄 렉탱글을 추가했다.

왜 지금 이 작업이었나

광고 수익 구조를 개선하려면 결국 지면을 늘리는 게 가장 직접적인 방법이다. 모비온 4종 체제가 어느 정도 안정됐고, PC 사용자 비율을 보면 리더보드(728×90)와 미디엄 렉탱글(300×250)은 거의 표준 슬롯이라 해도 과언이 아니다. 업계에서 이 두 사이즈는 오랫동안 "광고 인벤토리의 기본 뼈대"로 취급돼 왔고, CPM 단가도 다른 사이즈 대비 비교적 안정적이다.

문제는 "언제 추가하느냐"였다. 기존 레이아웃을 건드리면 다른 페이지에 영향이 번질 수 있고, 슬롯 추가를 잘못하면 페이지 퍼포먼스 지표가 흔들린다. 그래서 타이밍을 잡고 있다가, 이번에 salary / severance / unemployment 세 페이지가 정적 콘텐츠 구조로 안정된 걸 확인하고 진행했다.

변경 범위 요약

SQL 파일이 같이 따라간다는 게 이 작업의 특이점이다. 광고 슬롯이 단순 HTML 삽입으로 끝나는 게 아니라, 어드민 DB에 슬롯 메타를 등록해야 관리 화면에서 on/off 제어가 가능한 구조라 파일이 두 레이어에 걸쳐 있다. 이 점은 코드리뷰 때 팀원들이 자주 놓치는 부분이기도 하다. "프론트만 올리면 되는 거 아니에요?"라는 질문이 꼭 나온다.

슬롯 추가 시 주의하는 것들

728×90과 300×250 슬롯을 단순히 붙여넣는다고 끝이 아니다. 내가 이 작업에서 실제로 신경 쓴 부분들:

• PC 전용 분기 처리: 모바일에서 728×90이 렌더되면 레이아웃이 깨진다. Layout.astro에서 미디어 쿼리 혹은 조건부 렌더링으로 PC에서만 노출되도록 분리했다.
• 슬롯 중복 ID 방지: 같은 페이지에 동일 슬롯 ID가 두 번 이상 찍히면 광고 로드가 꼬인다. SQL에서 슬롯 ID 채번 규칙을 일관되게 가져가는 게 중요하다.
• 레이아웃 공통화 vs 페이지별 삽입: Layout.astro에 공통으로 넣을지, 개별 페이지 파일에 넣을지를 결정해야 했다. 이번엔 세 페이지 모두 동일 위치에 슬롯이 들어가는 구조라 레이아웃 레벨에서 처리하는 편이 나았다. 페이지마다 따로 붙이면 나중에 슬롯 위치 바꿀 때 세 파일 다 열어야 하는 상황이 온다.

---
// Layout.astro - PC 광고 슬롯 분기 예시 패턴
const isDesktopSlotEnabled = true; // 어드민 제어 플래그
---

{isDesktopSlotEnabled && (
  <div class="ad-slot pc-only ad-728x90">
    <!-- 728x90 leaderboard slot -->
  </div>
)}

실제 코드는 어드민 DB에서 슬롯 활성 여부를 읽어와서 렌더 여부를 결정한다. 하드코딩하지 않고 DB 플래그로 켜고 끄는 구조를 처음부터 잡아둔 덕에, 이번 추가도 코드 변경 최소화로 마무리됐다.

회고

광고 슬롯 작업은 "작은 것 같지만 실수하면 수익에 직결된다"는 압박이 있다. 슬롯이 안 나오면 수익 공백이 생기고, 잘못 나오면 UX 민원이 온다. 이번에는 SQL → 레이아웃 → 페이지 순서로 레이어를 나눠서 검증하면서 올렸고, 배포 전에 PC 해상도로 세 페이지 전부 슬롯 로드 확인을 돌렸다.

4종 → 6종이라는 숫자는 단순해 보이지만, 그 뒤에 슬롯 ID 체계, 레이아웃 분기, DB 등록, 페이지별 적용이라는 최소 4개 레이어가 붙어있다. 이런 작업을 팀에서 처음 맡는 사람이 있다면 SQL 파일의 역할부터 설명하는 게 온보딩에서 첫 번째로 해야 할 일이다.

다음엔 모바일 슬롯 확장 쪽도 검토가 될 것 같다.

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

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

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