광고 슬롯 구조를 DB 중앙 관리로 전환하고 970px 사이즈 추가

광고 슬롯 구조를 손봤다. 단순히 사이즈 하나 추가하는 작업처럼 보이지만, 실제로는 DB 연결 패턴 자체를 바꾸는 작업이 함께 묶여 있었다.

왜 admin_db 패턴으로 전환했나

기존에 MobonSlot 컴포넌트는 광고 설정값을 어떻게 가져오느냐에 대한 일관된 레이어가 없었다. 광고 슬롯마다 설정이 흩어져 있거나, 하드코딩된 값이 컴포넌트 안에 박혀 있는 구조였을 가능성이 높다. 이런 구조는 초기엔 빠르게 만들 수 있어서 좋은데, 슬롯 종류가 늘어날수록 유지보수 비용이 기하급수적으로 올라간다.

admin_db 패턴으로 전환한다는 건, 광고 설정 데이터를 DB 레이어를 통해 중앙에서 관리하겠다는 선언이다. src/lib/db.ts가 변경 파일에 포함된 것도 이 맥락이다. 컴포넌트가 직접 설정을 들고 있지 않고, DB에서 읽어온 값을 기반으로 렌더링하도록 책임을 분리하는 것.

// 기존 패턴 (하드코딩 or 컴포넌트 내부 분기)
const slotId = "xxxxxxx"; // 컴포넌트 내부에 박혀 있음

// admin_db 패턴 전환 후
const slot = await getAdSlot("mobon", { position: "top" }); // db.ts 통해 조회

이렇게 하면 새 슬롯 사이즈가 추가될 때 컴포넌트 코드를 건드릴 필요 없이, DB 레코드 하나만 추가하면 된다. 광고 운영 담당자 입장에서도 배포 없이 슬롯을 제어할 수 있는 여지가 생긴다.

970x250 / 970x90 신규 사이즈 적용

두 사이즈 모두 데스크탑 와이드 환경을 겨냥한 대형 포맷이다. 970px 계열은 기존 728x90 리더보드보다 임팩트가 크고, 광고 단가 측면에서도 유리한 포맷으로 분류된다. src/layouts/Post.astro와 src/pages/index.astro 양쪽에 모두 변경이 들어간 걸 보면, 포스트 상세 페이지와 메인 인덱스 페이지 두 곳에 각각 슬롯을 심었다는 뜻이다.

이런 대형 슬롯을 추가할 때 항상 같이 챙겨야 하는 게 있다.

• 반응형 처리: 970px는 모바일에서 깨진다. media query나 Mobon SDK의 반응형 옵션으로 모바일 fallback을 정의해야 함
• CLS(Cumulative Layout Shift): 광고가 로드되면서 레이아웃이 밀리는 현상. 슬롯 영역에 고정 높이를 미리 잡아두거나 min-height 처리가 필요
• 슬롯 위치 우선순위: 같은 페이지에 슬롯이 여러 개일 때, 어떤 위치가 먼저 채워지는지 광고 네트워크 정책과 맞춰야 함

MobonSlot 컴포넌트의 역할 변화

src/components/MobonSlot.astro가 이번 작업의 핵심 파일이다. Astro 컴포넌트 특성상 서버 사이드에서 props를 받아 렌더링하는 구조이기 때문에, admin_db 패턴과 궁합이 잘 맞는다. DB에서 슬롯 설정을 읽어서 컴포넌트에 넘겨주면, 컴포넌트는 그 값을 받아 Mobon 스크립트를 생성하기만 하면 된다.

---
// MobonSlot.astro
interface Props {
  slotId: string;
  width: number;
  height: number;
}
const { slotId, width, height } = Astro.props;
---
<div class="ad-slot" style={`width:${width}px; min-height:${height}px`}>
  <ins data-mobon-slot={slotId}></ins>
</div>

이런 구조로 가면 새 사이즈가 추가되어도 컴포넌트는 그대로다. 호출부에서 width={970} height={250}만 넘겨주면 된다. 이게 컴포넌트 설계에서 말하는 "변경에 닫혀 있고 확장에 열려 있는" 구조에 가깝다.

한 가지 짚고 싶은 건, 광고 관련 컴포넌트는 사이드 이펙트가 많은 영역이라는 점이다. 스크립트 로딩 타이밍, 슬롯 중복 초기화, 페이지 이탈 후 메모리 해제 같은 이슈들이 잠복하고 있다. MobonSlot 같은 컴포넌트를 바꿀 때는 단순 렌더링 확인 외에, 실제 광고 노출 여부와 콘솔 에러 여부를 꼭 브라우저에서 직접 찍어봐야 한다. 스테이징에서 멀쩡해도 프로덕션에서 SDK 버전 차이로 터지는 케이스를 한 번쯤은 다들 경험해봤을 거다.

이번 작업은 기능 추가와 구조 개선이 같은 PR에 묶인 케이스였는데, 리뷰 관점에서 보면 두 가지를 나눠서 보는 게 리뷰어 입장에서 훨씬 쉽다. 패턴 전환은 패턴 전환대로, 사이즈 추가는 추가대로. 그래도 이번엔 변경 범위가 크지 않아서 한 번에 묶는 게 맞는 판단이었다고 본다.

끝.

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

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

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