SPA 웹사이트 카카오 애드핏(Kakao AdFit) 모바일 빈 화면 오류: 쿼터 제한과 MutationObserver 완벽 해결기

👤 인스피

조회 수 23

1. 범인은 'HTML 렌더링 순서'와 '4개 쿼터(Quota) 제한'

카카오 애드핏 스크립트는 아주 까탈스럽고 고집스러운 규칙을 하나 가지고 있습니다. 바로 "한 페이지 내에서 광고는 최대 4개까지만 허용한다"는 정책입니다.

문제는 제 웹사이트의 반응형 HTML 구조에 있었습니다. 저는 하나의 HTML 파일(view.html, base.html) 안에 PC용 광고 컨테이너 4개와 모바일용 광고 컨테이너 4개를 모두 넣어두고, 접속한 기기의 화면 크기에 따라 CSS의 display: none 속성을 이용해 안 쓰는 광고를 숨기는 방식을 사용했습니다.

하지만 카카오 스크립트는 CSS로 상자가 숨겨져 있는지 아닌지를 배려하지 않습니다. 문서를 위에서 아래로(Top-to-Bottom) 무식하게 읽어 내려가며 가장 먼저 마주치는 <ins class="kakao_ad_area"> 태그 4개에 광고 송출 권한(쿼터)을 선착순으로 던져버립니다.

모바일로 접속했을 때, HTML 구조상 상단에 위치해 있던 '숨겨진 PC용 상하단 배너'와 '숨겨진 좌우 날개 배너'가 카카오의 쿼터 4개를 전부 선점(도둑질)해 버린 것입니다. 그 결과, HTML 문서 저 아래쪽에 얌전하게 기다리고 있던 진짜 모바일용 하단 배너(Middle 2, Bottom)들은 쿼터가 0이 되어 하얗게 굶어 죽어버린 상태였습니다.

2. 해결책 1단계: 기기별 광고 영역의 완벽한 격리 (Target Isolation)

가장 먼저 해야 할 일은 스크립트가 숨겨진 광고 상자에 쿼터를 낭비하지 못하도록 막는 것이었습니다.

저는 HTML에 하드코딩 되어있던 <ins class="kakao_ad_area"> 태그를 전부 <ins class="kakao_ad_ready">라는 임의의 가짜 클래스(대기 상태)로 변경했습니다. 이렇게 하면 카카오 스크립트가 HTML을 읽어도 'area'가 없으므로 아무 일도 일어나지 않습니다.

그 후, 자바스크립트를 이용해 현재 화면의 너비(Viewport Width)가 768px 이하(모바일)인지 확인한 뒤, 오직 모바일 전용 컨테이너(.mobile-ad-banner) 안에 있는 태그만 kakao_ad_area로 이름을 바꿔주어 쿼터를 정당하게 획득하도록 격리(Isolation) 로직을 구현했습니다.

3. 해결책 2단계: SPA 라우팅과 MutationObserver의 덫

격리 로직을 짰음에도 광고가 여전히 뜨지 않아 콘솔 창을 열어보니, 이번에는 SPA(Single Page Application) 특유의 비동기 라우팅이 발목을 잡았습니다.

페이지를 새로고침 하지 않고 본문만 부드럽게 갈아 끼우는 SPA 구조에서는 새로운 광고 상자가 동적으로 삽입될 때 카카오 스크립트가 이를 눈치채지 못합니다. 이를 해결하기 위해 HTML DOM의 변화를 감지하는 MutationObserver를 달아두었지만, 이 감시자는 기존에 kakao_ad_area만 찾도록 눈이 멀어(Blind) 있었습니다. 우리가 쿼터 보호를 위해 태그 이름을 kakao_ad_ready로 바꿔두었기 때문에, 감시자는 "새로 들어온 광고가 없네?" 하고 스크립트 재호출(reloadKakaoAds)을 건너뛰어 버린 것입니다.

저는 즉시 MutationObserver의 타겟 클래스를 kakao_ad_ready까지 감지하도록 수정하고, 동적 렌더링 도중 찰나의 순간에 모바일 광고 컨테이너가 display: none으로 잘못 계산되는 타이밍 에러를 막기 위해 Observer 내부의 재호출 대기 시간(Delay)을 300~400ms로 넉넉하게 늘려주었습니다.

이 두 가지 조치가 맞물리자, 마침내 스마트폰 화면 최하단까지 빈 공간 없이 4개의 광고가 영롱하게 꽉 들어차기 시작했습니다!

맺으며: 1인 개발자의 집요함이 완벽한 UX를 만든다

단순히 "코드를 복사해서 붙여넣으면 끝이겠지"라고 생각했던 광고 연동 작업이, DOM 렌더링 우선순위와 브라우저의 가시성(Visibility) 계산 타이밍까지 고려해야 하는 고난도의 프론트엔드 최적화 과제라는 것을 뼈저리게 느꼈습니다.

특히 2026년 이후의 구글 애드센스 심사와 SEO 알고리즘은 '모바일 친화성(Mobile-friendly design)'과 '빠르고 안정적인 렌더링(Fast loading)'을 웹사이트 신뢰도의 핵심 지표로 삼고 있습니다. 빈 엑스박스나 깨진 레이아웃을 방치하지 않고 SPA 환경의 한계를 자바스크립트로 집요하게 극복해 낸 이 트러블슈팅 경험은, 유저의 편의성뿐만 아니라 심사 봇에게도 완벽한 기술적 신뢰도(E-E-A-T)를 증명하는 강력한 무기가 될 것입니다.

❓ 자주 묻는 질문 (FAQ)

Q1. PC 환경과 모바일 환경의 광고 단위 ID(DAN-)를 똑같은 것으로 중복 사용해도 되나요?

A. 절대 안 됩니다. 카카오 애드핏 정책상 한 페이지 내에서 동일한 광고 ID가 두 번 중복 호출되는 것을 엄격하게 금지하고 있습니다. PC용 영역과 모바일용 영역에 같은 ID를 넣으면, 카카오 서버가 중복 호출로 간주하여 한쪽 광고의 송출을 완전히 차단(빈 화면)해 버리므로 반드시 기기별, 위치별로 고유한 단위 ID를 새로 발급받아 적용해야 합니다.

Q2. CSS에서 미디어 쿼리(@media)로 모바일 광고를 숨기면 쿼터(4개 제한)를 아낄 수 있지 않나요?

A. 불가능합니다. 카카오 애드핏이나 구글 애드센스의 파서 봇은 CSS의 display: none 상태를 확인하기 이전에, HTML 구조 안에 <ins class="kakao_ad_area"> 스크립트 태그가 존재하는지 여부를 최우선으로 카운팅합니다. 따라서 CSS만으로 숨기는 것은 쿼터 낭비를 막을 수 없으며, 자바스크립트를 이용해 태그 클래스 자체를 조작(Target Isolation)해야만 쿼터를 안전하게 보호할 수 있습니다.

Q3. SPA(Single Page Application)에서 페이지 이동 시 광고가 아예 뜨지 않거나 과거 광고가 남습니다.

A. SPA 프레임워크(React, Vue, 혹은 동적 바닐라 JS)는 브라우저 전체 새로고침이 발생하지 않으므로, 최초 1회만 로드되는 외부 광고 스크립트가 새로운 페이지 렌더링을 감지하지 못합니다. 반드시 컴포넌트 마운트 시점이나 비동기 통신이 완료된 직후, 광고 SDK가 제공하는 재렌더링 함수(예: 카카오의 경우 새로 정의한 reloadKakaoAds(), 구글의 경우 (adsbygoogle = window.adsbygoogle || []).push({}))를 명시적으로 재호출하도록 DOM 관찰자(MutationObserver) 로직을 구축해야 합니다.