analyses 페이지에 모본 광고 슬롯 연동 추가

analyses 페이지에 광고 유닛을 붙이는 작업을 했다. fetchAdUnits로 광고 데이터를 서버에서 가져오고, MobonSlot 컴포넌트를 실제 페이지에 박아 넣는 흐름이었다.

배경 — 왜 이 페이지에 광고를

사내 서비스 내 /analyses 경로는 분석 관련 콘텐츠가 모여 있는 페이지다. 트래픽이 어느 정도 붙기 시작하면 자연스럽게 광고 수익화 논의가 따라온다. 팀 내에서도 "이 페이지 광고 붙여도 UX 크게 안 깨지겠다"는 판단이 나왔고, 그걸 실제 코드로 옮기는 작업이 이번 커밋이었다.

옛 변경 커밋이라고 메모돼 있는 걸 보면, 당시엔 기록이 누락되거나 브랜치 정리 과정에서 묻혔던 작업으로 보인다. 나중에 따로 커밋으로 정리해서 올린 케이스. 이런 상황이 생각보다 자주 있다. 급하게 배포하고 나서 커밋 메시지 다듬거나, WIP 커밋 여럿을 나중에 정리하면서 squash/rebase 하는 과정에서 날짜가 밀린다. 팀으로서 이걸 어떻게 다룰지 기준을 잡는 게 생각보다 중요하다.

작업 내용 — fetchAdUnits + MobonSlot 조합

변경 파일은 src/app/analyses/page.tsx 하나. Next.js App Router 구조에서 page.tsx는 해당 라우트의 진입점이기 때문에, 여기서 광고 데이터를 fetch하고 렌더링까지 처리하는 게 자연스러운 위치다.

작업 흐름을 대략 정리하면:

• fetchAdUnits 호출로 광고 유닛 목록/설정 데이터를 서버 사이드에서 가져옴
• 가져온 데이터를 기반으로 MobonSlot 컴포넌트에 props로 넘김
• 페이지 특정 영역에 슬롯 배치

코드 패턴으로 보면 대략 이런 구조다.

// src/app/analyses/page.tsx

export default async function AnalysesPage() {
  const adUnits = await fetchAdUnits('analyses');

  return (
    <main>
      {/* 콘텐츠 */}
      <AnalysesContent />

      {/* 광고 슬롯 */}
      <MobonSlot unit={adUnits?.mainSlot} />
    </main>
  );
}

page.tsx가 async 서버 컴포넌트이기 때문에 fetchAdUnits를 바로 await할 수 있다는 게 App Router의 편한 점이다. Pages Router 때처럼 getServerSideProps로 빼서 props 드릴다운 할 필요가 없음.

광고 붙일 때 실제로 신경 써야 하는 것들

광고 슬롯을 페이지에 박는 작업은 코드 자체는 단순해 보이지만, 주변 고려사항이 은근히 많다.

특히 fetch 실패 처리는 코드리뷰에서 항상 짚고 넘어가는 부분이다. 광고가 안 뜨는 건 괜찮은데, 광고 때문에 페이지 전체가 500 뜨는 건 절대 안 된다. try-catch나 ?. 옵셔널 체이닝으로 null-safe하게 처리하는 게 기본.

회고

사실 이 작업 자체보다, "옛 변경 commit"이라는 태그가 더 마음에 걸렸다. 당시에 제대로 기록 안 되고 넘어간 작업이 나중에 정리되면서 올라온 건데, 이런 게 쌓이면 git 히스토리만 봐서는 실제 배포 순서를 추적하기 어려워진다.

팀 리딩 입장에서는 이런 상황을 줄이는 게 중요하다. WIP 커밋을 자주 날리더라도 배포 전에는 정리하고, 정리가 늦어지면 PR description에라도 맥락을 남겨두는 문화. 코드보다 기록이 팀 지식을 오래 살려둔다는 걸 계속 느낀다.

끝.

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

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

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