개발 slecs

전체 레이아웃에 mobon 광고 슬롯 전역 적용

목차

광고 슬롯 2개를 레이아웃 파일에 추가했다. 단순해 보이지만 Base.astro를 건드리는 작업은 전체 페이지에 영향을 주기 때문에 조심스럽게 접근했다.

왜 이 시점에 추가했나

mobon 광고 네트워크 연동을 진행하면서 i-cover(인터스티셜 형태)와 m-cover(모바일 커버) 슬롯을 사이트에 붙여야 하는 요건이 생겼다. 기존에는 mobon 슬롯이 아예 없었거나 별도 페이지에만 국한돼 있었는데, 이번에 사이드/sticky 영역까지 확장하는 거였다. 광고 수익 다각화 차원이기도 하고, 특정 지면에만 붙어 있던 걸 Base 레이아웃 레벨로 올려서 전역 적용하는 구조 변경이기도 했다.

변경된 파일 세 개가 하는 역할

파일 역할 이번 변경의 의미
astro.config.mjs Astro 빌드/통합 설정 광고 스크립트 도메인 허용 또는 통합 설정 추가
deploy/admin-db-add-mobon-icover-mcover.sql 배포용 DB 마이그레이션 관리자 DB에 슬롯 메타 정보 추가
src/layouts/Base.astro 전체 페이지의 공통 레이아웃 실제 슬롯 마크업/스크립트 삽입 위치

Base.astro가 핵심이다. 여기에 뭔가를 추가하면 이 레이아웃을 상속하는 모든 페이지에 자동 반영된다. 좋게 말하면 한 번에 전체 적용, 나쁘게 말하면 실수 하나가 전체 페이지를 날릴 수 있다.

SQL 파일도 같이 커밋에 포함한 건 의도적이었다. 광고 슬롯 on/off 제어나 슬롯 ID 관리를 관리자 화면에서 할 수 있게 하려면 DB 스키마가 먼저 잡혀 있어야 하기 때문이다. 프론트 코드와 DB 마이그레이션을 같은 커밋에 묶은 건 배포 순서를 명확히 하기 위해서이기도 하다.

sticky 사이드 슬롯의 주의점

i-cover와 m-cover 모두 페이지 전체를 덮거나 고정 위치에 붙는 형태다. 이런 슬롯의 공통 주의점을 정리하면:

  • 레이아웃 시프트: sticky 요소가 본문을 밀면 CLS(Cumulative Layout Shift) 점수가 떨어진다. 광고 영역에 최소 높이를 잡아두거나 absolute/fixed 포지셔닝으로 분리해야 한다.
  • 모바일 뷰포트 충돌: m-cover는 모바일 전체를 덮는 구조이기 때문에 iOS Safari의 safe area나 하단 네비게이션 바와 겹치는 케이스를 반드시 확인해야 한다.
  • 스크립트 로딩 순서: 광고 서드파티 스크립트가 <head>에서 블로킹으로 들어가면 FCP에 직격탄이다. defer 또는 async 처리, 혹은 Astro의 client:idle 전략을 쓰는 게 맞다.
  • CSP(Content Security Policy): astro.config.mjs를 같이 건드린 게 아마 이 이유일 가능성이 높다. 외부 광고 도메인을 허용하지 않으면 스크립트 자체가 차단된다.
<!-- Base.astro 내 sticky 사이드 슬롯 패턴 예시 -->
<aside class="ad-side-sticky" aria-hidden="true">
  <div id="mobon-icover" data-slot="icover" />
  <div id="mobon-mcover" data-slot="mcover" />
</aside>

<script defer src="https://ad.mobon.net/..."></script>

aria-hidden="true"로 광고 컨테이너를 스크린리더에서 숨기는 것도 접근성 측면에서 챙겨야 할 부분이다.

회고

Base 레이아웃 변경은 항상 팀 내에서 리뷰를 두 번 받는 게 우리 관행이다. 영향 범위가 넓기 때문이다. 이번에도 마찬가지로 스테이징에서 충분히 확인하고 나서 머지했다. SQL 마이그레이션을 코드와 함께 커밋으로 묶어두면 나중에 히스토리를 볼 때 "이 슬롯이 왜 생겼는지"를 바로 추적할 수 있어서 좋다. 광고 슬롯은 비즈니스 요건이 바뀌면 언제든 끄거나 교체해야 하는데, DB로 관리하는 구조를 잡아두면 코드 배포 없이도 대응이 가능하다. 그 유연성을 처음 설계에서 확보해두는 게 핵심이었다.

끝.

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

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

이어보기

댓글 0

첫 댓글 달아줘.