사내 서비스 수익화 구글 애드센스 제대로 런칭하기 🚀

osohyun0224·2025년 4월 6일

Google Adsense 구글 애드센스

구글 애드센스

목록 보기

1/1

참고로 Nextjs, React 환경에서의 구글 애드센스를 런칭한 회고가 담겨있습니다

안녕하세요 :) 프론트엔드 개발자 Garden, 오소현입니다 !

최근 회사 서비스에 유저들이 가장 많이 이용하는 기능부터 차례로 구글 애드센스 광고를 게시하고 있는데요!

처음에는 회사 마케터와 함께 "이거 그냥 코드만 제대로 붙이면 빨리 될 것 같은데요?" 라는 말로 만만하게 시작했다가 ... 별별 이슈를 다 만나 안정적인 런칭을 향해 헤쳐나아갔던 그 과정을 공유합니다 !

구글 애드센스로 현재 웹 서비스에 광고를 부착하고 계시거나, 계획이 있으신 분들은 꼭꼭 읽어보시길 추천합니다 :) 구글 애드센스 초기 설정 부터 ~ 개발 이슈까지 모든 내용을 정리했습니다!

시작하기에 앞서 런칭하기 까지 희노애락을 함께해준 저희 회사 마케터 Ella에게 감사드려요 😎😎

이슈만을 읽고 싶은 개발자 분들은 4) 본격적인 개발 이슈들 💻 을 바로가기 해주세요!

Intro.

🤔 구글 애드센스 광고란?

흔하게 티스토리나, 다른 사이트에서 쉽게 볼 수 있는 구글 광고입니다 :)
아래의 사진 처럼 콘텐츠 사이사이 내 삽입되는 광고나, 화면을 아예 막고 노출하는 오버레이 광고 등등 다양한 형태로 광고 노출이 되고, 광고주(삽입자)들은 유저들의 화면 노출 시간 + 광고 클릭수에 따라서 돈으로 들어오는 형태로 이루어져 있어요!

개발자들은 흔히 자신의 웹사이트에 광고를 삽입하여 수익화를 진행하기도 하는데, 이 중에서 가장 많이 사용되는게 바로 오늘의 구글 애드센스 인데요,

Google 애드센스는 한마디로 개발자가 타겟팅된 Google 광고를 자신의 사이트에 게재하여 수익을 얻는 무료 프로그램입니다 😎

구글 애드센스를 사용하는 이유는 게시자가 Google 애드센스를 사용하는 이유 구글 공식 문서를 통해 확인해주세요!

1) 사이트 등록하기

제가 사이트에 광고를 노출시키기 위해서 가장 먼저 해야할일은 Adsense에 회사 서비스를 등록해야했습니다.

먼저 Google Adsense에 가입을 진행해주시면 됩니다 내 사이트가 없어도 계정 가입이 가능하니 아래와 같이 계정을 등록해주세요

다음은 광고를 노출할 사이트를 추가해줍니다 (실제로는 저희 회사 웹 사이트를 등록했습니다)

사이트를 정상적으로 등록하면 구글 애드센스에서 제가 등록한 사이트를 광고하기에 적합한지 검토하는 과정이 필요한데요, 이를 구글 애드센스 심사라고 하겠습니다.

심사 기간은 최대 2주 정도가 소요되고, 사이트의 콘텐츠가 제대로 적합하지 않으면 승인이 거절될 수 있어요, 여기서 가장 중요한 점은 설정된 페이지가 주기적으로 조회되지 않으면(사이트 화면이 노출되지 않으면) 최대 2달까지 걸릴 수 있습니다. 이에 대한 자세한 답변은 Q.사이트의 광고게재 승인신청을 한지 4주가 되었는데 아무런 답변이 없습니다. 에서 자세히 읽어볼 수 있어요!

2) 사이트 소유권 확인하기

사이트 심사 받기

앞서 말한 것 처럼 사이트 소유권을 확인하기 위해 아래의 방법들을 선택해 적용해야합니다.

처음에 보고 3개 중에 원하는 방법으로 적용하면 되는 것인가 생각했는데, 1) 애드센스 코드 스피넷이나 2) 메타 태그로 사이트 심사를 받고, Ads.txt 스니펫으로 사이트의 소유주 확인을 진행해야합니다.

저희 회사 사이트는 이미 검증된(?) 사이트인지 사이트 심사가 사이트 url로 바로 확인이 되었는데, 노출이 덜 된 사이트에 대해서는 1), 2) 방법을 진행하면서 사이트 심사를 진행하면됩니다.

예시로, 애드센스 코드 스니펫을 프로젝트에 적용해본다면, 프로젝트 script 삽입되는 최상단에 등록해주시면 됩니다.

//_document.jsx
import { Html, Head, Main, NextScript } from "next/document"

export default function Document({ assetPrefix, ...etc }) {
..

  return (
    <Html>
      <Head>
        <script <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-{광고id}"
     crossOrigin="anonymous"></script>
      </Head>
      <body style={{ overflow: "hidden" }}>
        <div id={"root"}>
          <Main />
          <NextScript />
        </div>
      </body>
    </Html>
  )
}

애드센스는 참고로 서비스 내에서만 제공되어야만 하므로, 개발 단계를 분리하고 있다면 분기 처리를 진행하고, 운영기에서만 노출되도록 해주세요!

자세한 사항은 해당 사항과 관련된 Nextjs 공식 문서 를 참고해서 구현해주세요 :)

이렇게 모든 과정을 거쳐 사이트 심사를 완료 받고 나면, 우리가 해당 사이트에 소유권이 있는지 인증 단계를 진행하면 됩니다.

사이트 소유권 인증하기

소유권을 인증하려면 ads.txt를 설정하여 파일을 public 폴더 내부에 삽입해주시면 됩니다. public/ads.txt를 생성하고 파일을 다음과 같이 (사이트에서 지시하는 코드 대로 추가해주세요)

/public/ads.txt

google.com, pub-ID, DIRECT, HASHCODE

이렇게 등록하고 나면, 이후에 구글 봇이 돌면서 우리가 사이트에 추가한 내용을 확인하게 됩니다.

저희는 계정이슈로 이 과정을 2번 정도 반복하게 되었는데 첫번째 승인은 3일, 두번째 승인은 1주일 정도 걸렸던 것 같아요!

위와 같이 저희 회사 서비스가 잘 승인된 것을 확인하실 수 있습니다 🙂

3) 사이트 내 광고 게시하기

🤔 어떤 광고 유형이 있을까??

이제 본격적으로 구글 애드센스는 우리에게 광고를 다양한 방법으로 삽입할 수 있다고 알려줍니다.

광고 탭으로 들어가게 되면 사이트 기준, 광고 단위 기준을 분류하여 사이트에 맞게 광고 영역을 잡을 수 있습니다!

이 4개의 광고 중에서 구글이 권장하는 디스플레이 광고를 선택하게 되었는데요! (사실 구글에서 권장하는 데에는 이유가 있답니다! 구글 광고 노출이 더 잘 되기 때문이예요 ㅎㅎ)

디스플레이 광고 유형에는 3가지 사각형, 수평형, 수직형이 있습니다 ! 광고 크기로는 개발자가 직접 광고의 높이 너비를 지정할 수 있는 고정형, 구글 애드센스가 게시자(개발자)의 사이트의 페이지 레이아웃을 자동으로 감지하여 맞춰서 게재되는 반응형이 있습니다 :)

사각형	수평형	수직형

이렇게 어떤 광고가 있는지 살펴보았다면, 우리 사이트 기존 UIUX를 많이 해치지 않으면서 사용자들에게 노출은 최적화된 광고를 어떻게 삽입할 수 있을 지 저와 마케터 Ella와 함께 많은 고민을 진행했습니다 ㅎㅎ

사실 광고가 화면에 많이 노출 될 수록, 그리고 오랜 시간 사용자들이 보고 있을 수록 저희에게 많은 광고 수익으로 잡히고, 또한 구글 애드센스 측에서도 "어? 이 사이트 광고 노출 잘되네 더 잘 노출 시켜야지?!" 이런 식으로 최적화 가 되기 까지의 그 시간이 단축됩니다 ㅎㅎ 하지만 유저들이 이탈하는 이유도 너무 많은 광고 이기 때문에 우리는 그 경계를 잘 찾고 다양한 광고 노출 방법으로 진행하기로 했습니다.

👀 광고 런칭한 화면 살펴보기

처음 런칭하고자 하는 유튜브 수익 계산기 서비스 기능에 UI를 많이 해치지 않도록 화면 왼쪽과 하단에 노출되도록 레이아웃을 잡았습니다!

채널을 계속 검색하게 되면 채널 정보 컴포넌트가 추가되는 형태로 서비스가 개발되어있는데 이런식으로 크게 해치지 않는 선에서 노출이 되도록 광고 노출을 진행하였습니다!

회사 서비스가 모바일 유입도 많은 터라, 모바일에서는 사각형 - 반응형으로 진행하였습니다 !

광고를 어떻게 삽입했는지, 개발 내용은 아래 부터 자세히 설명하고 있습니다 ㅎㅎ

😽 광고 런칭 그 후?

광고를 삽입하고 런칭하고 난 후 수익이 $10달러 이상 노출되게 된다면 수익을 출금할 수 있는 계좌를 등록하게 됩니다!

그리고 어느정도 최적화 작업이 구글 애드센스 내에서 진행되게 되는데요! 바로 오버레이 광고를 자동으로 삽입하는 앵커 광고 자동 실험 테스트도 시작하게 되어 어느정도 테스트 기간을 거치는 과정도 시작되었어요 :) 하지만 저희는 멤버십제로, 유료 결제 고객에게는 구글 애드센스 광고를 노출하지 않고 있기 때문에 오버레이 광고 테스트기간이 시작되면 유료 고객에게도 뜨기 때문에 이 테스트를 중지하게 되었답니다 ,, 하지만 오버레이 광고가 가장 수익이 잘 나오는!! 효자 광고 친구입니다

슬프게도 유료 고객에도 갑자기 상관없이 떴던,,, 오버레이 광고,,,, 🥹🥹 멤버십제 오버레이 광고 런칭을 위해서 다양한 방법으로 리서치 및 시도를 진행했었는데,, 구글 애드센스가 vling.net 사이트 url을 기준으로 오버레이 광고를 삽입하는 것이기 때문에 아직까지 테스트 기간 런칭은 보류인 상태입니다 테스트 기간동안을 척척 해결하는 방법을 찾게 된다면 바로 새로운 글로 찾아올게요 !

우선 해당 문제에 대해서는 구글 애드센스 커뮤니티에 help를 친 상태입니다 :) 답변은 아래의 원글에서 확인하실 수 있습니다!

Q. 웹에서 오버레이 광고 개발자가 제어하는 방법이 없나요?

4) 본격적인 개발 이슈들 💻

본격적으로 개발이야기를 진행해보려고 합니다.

먼저, 구글 애드센스에서 # 🤔 어떤 광고 유형이 있을까?? 에서 어떤 광고를 등록할지 정하고, 등록했다면 본격적으로 코드 삽입을 진행해볼게요!

💵 광고 코드 삽입

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=아이디"
     crossorigin="anonymous"></script>
<!-- 채널상세_수익분석(모바일)_사각형_반응형 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-광고Id"
     data-ad-slot="Id"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이런식의 광고 html 코드가 생성되게 되고, 저는 본격적으로 레이아웃 컴포넌트 구조를 확인면서 광고를 삽입하게 되었습니다:)

declare global {
  interface Window {
    adsbygoogle: any;
  }
}
 
export const 광고컴포넌트 = () => {
  
  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);
 
  return (
    <ins
      class="adsbygoogle"
      style={{ display: 'block' }}
      data-ad-client="ca-pub-광고Id"
       data-ad-slot="Id"
      data-ad-format="auto"
      data-full-width-responsive="true"
    />
  );
};

이렇게 무난하게 삽입하면 개발 끝!?! ㅎㅎㅎ 하지만 현실은 그렇지 못했습니다,,🥹

✅ 이슈 1) local에서 광고 확인 불가 🚫

우리가 흔하게 개발하는 단계인 localhost에서는 구글 애드센스가 등록된 url(vling.net) 으로 찾아오지 못하기 때문에 로컬환경에서는 구글 애드센스 광고를 확인하지 못합니다 🥹 그래서 빌드-배포 과정을 거쳐 번거롭지만 사이트에 배포를 하면서 광고를 확인하면서 확인하게 되었는데요!

🔍 dev 환경에서 광고 확인을 위한 우회 전략

저희는 dev url을 따로 사용하고 있어서 직접 개발하면서 dev Url에 배포를 하면서 제대로 확인하게 되었습니다!

개발 단계에서 광고 레이아웃을 잡을 때에는 다음과 같이

광고 영역에 배경색을 넣어가면서 임의로 레이아웃을 잡아가며 개발하였습니다.

* 참고로 위의 사진에 하단에는 수평형 반응형 광고, 오른쪽에는 수직형 고정형 광고를 삽입했습니다.

🧩 반응형 광고 vs 고정형 광고

여기서 주의할 점은, 앞선 방법에는 크기가 고정되어있는 고정형 광고에만 유용합니다. 크기를 예측할 수 있기 때문이예요!

하지만 반응형 광고는 광고 크기가 정해져 있지 않기 때문에 실제 광고 크기가 자유롭게 바뀝니다 따라서 반응형 광고를 삽입하실 예정이라면, 실제 배포하여 다양한 광고 크기에 대해 체크하면서 잡아가시면 좋을 것 같습니다. 저희도 반응형 광고를 삽입할때에는 그렇게 광고 크기가 크게 변경되어도 괜찮은 곳에만 삽입하게 되었습니다!

예시로 아래처럼 높이가 높은 광고가 들어오게 될 수도 있습니다!

사실 개발하면서 로컬에서도 띄우게 하는 방법이 없나 많은 리서치나,,, 해보았지만 배포하면서 그냥 빨리 개발하는게 더 빨라서 진행하게 되었습니다 ㅠㅠ 다들 좋은 방법이 있으시다면 알려주세요!

✅ 이슈 2) root에 자동 auto !important 적용 😰

다음 이슈는 구글 애드센스를 런칭했을 때 광고를 삽입한 페이지 전체에 height: auto !important 가 강제적으로 적용되는 이슈를 공유해보려고 합니다.

⚠️ height: auto !important의 영향

이 현상이 발생하는 이유는 반응형 광고를 설정하면, 광고 크기에 따라 사이트 구성 요소들이 변경되어야하기 때문에 스크립트가 강제적으로 스타일을 변경하기 때문입니다.

이 자동 설정은 광고 크기에 따라 유동적으로 높이를 조절할 수 있게 하지만, 특정 페이지 레이아웃에서는 이러한 스타일 적용이 페이지 디자인에 부정적인 영향을 미쳐서, 현재 전체 너비에 영향을 미쳐 강제 조정이 들어간 상황입니다.

저희 사이트에서 이 문제가 발생해서 영향을 끼쳤던 화면은 다음과 같은데요!

위와 같이 root에 height: auto !important이 적용되어 세로 스크롤이 2개가 생겨버리게 되었습니다 😱😱

구글 애드센스로부터 auto !important로 들어오는 것을 막을 수 없기에 열심히 대응하기 시작했습니다.

🛠️ MutationObserver 최적화로 이슈 대응

우선 공식문서에서 안내한 첫 번째 방법은 ,
바로 구글 애드센스 설정에 가서 모바일 광고 크기가 자동으로 최적화 되는 토글을 off해주면 된다고 합니다!

하지만 저희는 해당 설정을 꺼도 여전히 auto !important 문제가 적용되었는데요.

따라서 저는 두 번째 방법으로,
MutationObserver를 사용해 스타일이 자동적으로 바뀔 때마다 바로 원상복구 시킬 수 있도록 구현하였습니다.

const layoutAdsenseObserver = () => {
  // 1 ) 문제가 생기는 DOM 요소들을 찾습니다.
  const rootLayout = document.getElementById("root")
  const layoutSection = document.getElementsByClassName("Layout")[0]
  const headerWrapper = document.getElementsByClassName("Header")[0]

  // 2 ) MutationObserver로 아예 스타일을 비워주도록 합니다.
  const observer = new MutationObserver(() => {
    if (rootLayout) rootLayout.style.height = ""
    if (layoutSection) layoutSection.style.height = ""
    if (headerWrapper) headerWrapper.style.height = ""
    if (headerContainer) headerContainer.style.height = ""
  })

  // 3) 실제 존재하는 요소만 설정하도록 했습니다.
  const elements = [rootLayout, layoutSection, headerWrapper, headerContainer].filter(Boolean)

  elements.forEach((element) => {
    observer.observe(element, {
      attributes: true,
      attributeFilter: ["style"],
    })
  })

  return () => observer.disconnect()
}

이런 식으로 요소의 style 속성이 바뀌는지 감시하는 옵저버를 만들고, 변경이 감지되면 바로바로 height 값을 비워서 원래 CSS가 적용되게 했습니다. 또한 이를 사용할 때 useEffect로 감싸 컴포넌트 언마운트될 때 옵저버를 정리하도록 했습니다.

이걸 구현할 때, MutationObserver가 DOM 변경을 계속 감시하면 느려질 수 있으니까 style 속성만 참조하도록했습니다. 또한 filter(Boolean)으로 실제 있는 요소인지 검사하고, 컴포넌트가 없어질 때 옵저버도 정리하도록 해서 리소스를 관리했습니다!

🧠 해결을 위해 더 고민해본 내용

사실 위와 같이 구현하고 해당 이슈는 해결되었지만 직접 dom 요소를 건드리는 방식이 올바르게 해결한 방법인지는 아직 고민입니다.

아무래도 React 생태계에서는 직접 DOM을 조작하는 것이 권장되지 않는 방식이라 이런 해결책이 적절한지 고민이 많았어요. React의 선언적 패러다임과는 어긋나는 명령형 코드가 되니까욥,,, 😅

더 좋은 해결책을 찾아보려고 시도해봤는데, CSS로만 해결하는 방법도 찾지 못했습니다. 구글 애드센스가 inline style로 !important를 붙여서 적용하는데, CSS 우선순위에서 이를 덮어쓸 방법이 없거든요.

또 다른 방법으로 생각해본 것은 광고 컨테이너를 iframe으로 완전히 격리시키는 방법이었는데요. 하지만 이 방법은 애드센스의 정책상 제한이 있고, 구현도 복잡해질 수 있어서 결국 MutationObserver 방식이 가장 실용적인 해결책이었습니다.

그리고 특히 외부 라이브러리나 API(이 경우 구글 애드센스)와 통합할 때는 어쩔 수 없이 직접 DOM을 다뤄야 하는 상황이 생길 수도 있을 것 같았습니다.

결론적으로는, 더 좋은 방법이 있다면 좋겠지만 현재로서는 MutationObserver를 사용하는 이 방식이 구글 애드센스와 React를 함께 사용할 때 발생하는 이슈를 해결하는 최선의 방법이라고 생각이 되어 이슈 해결을 종료했습니다. 실제로 애플리케이션에서도 잘 작동하고 있으니까요!

다만 한 가지 더 개선할 점이 있다면, 현재는 특정 클래스 이름에 의존하고 있는데 리팩토링이나 클래스명 변경 시 이 코드도 함께 수정해야 한다는 단점이 있어요. 이런 부분을 좀 더 유연하게 관리할 수 있는 방법도 고민 중입니다!

해당 문제를 개선하게 된다면, 추가로 기술 블로그로 작성해서 본문에 추가하도록 하겠습니다.

✅ 이슈 3) 광고 노출 최적화

광고를 런칭하고 실제 배포하면서 확인해보니 광고가 너무 늦게 뜨거나, 아예 안 뜨는 상황을 종종 만났습니다.

⚠️ 광고가 노출되지 않을 때 발생하는 문제

위 화면에서 컴포넌트 하단 공백은 원래 광고가 들어와야 하는 자리였지만, 광고 송출이 제대로 되지 않아 공백으로 남아 있었습니다.

처음엔 단순히 광고 응답 지연이라고 생각했지만, 일반적인 딜레이라면 광고 컴포넌트가 렌더링된 후 최대 5초 안에는 광고가 뜨는 것이 정상입니다. 그러나 실제로는 1~2분이 지나도 광고가 아예 뜨지 않거나, 특정 상황에서는 계속해서 뜨지 않는 현상이 반복되었습니다.

이 문제가 중요한 이유는 광고가 뜨지 않으면 광고 영역 자체가 의미 없는 공백 공간으로 남아버려 전체 UI/UX에 부정적인 영향을 미치기 때문입니다.

🔧 광고 초기화 최적화로 이슈 대응

광고를 더 안정적으로 노출시키기 위해 고민한 끝에, 광고 초기화 타이밍과 방식에 대한 최적화 작업을 진행하게 되었습니다.

광고가 정상적으로 송출되지 않는 이유는, 구글 애드센스 스크립트가 특정 조건(예: 사용자가 비교 채널을 선택한 뒤에 페이지가 업데이트되는 상황 등)에서는 광고를 새로 불러오지 않거나, 이미 초기화된 상태에서 반응하지 않는 경우가 종종 발생했기 때문입니다.

그래서 저는 광고를 더 잘 띄우기 위해, 초기화 타이밍을 명확하게 제어하고, 반복 실행되지 않도록 최적화된 로직을 구성했습니다.

또한 광고 초기화가 지속적으로 반복되지 않도록 하기 위해 useRef를 사용하여 초기화 여부를 추적했습니다.

export function CompareDetailWrapper() {
  const { query } = useRouter()
  
  // * 여기서 광고를 초기화하고, 이슈2를 해결한 내용은 따로 커스텀 훅으로 분리했습니다.
  //  initAds : 초기화 하는 역할, fixAdStyle : 스타일 이슈 해결하는 역할
  const { initAds, fixAdStyle } = useGoogleAdsense()
  
  // 2)  중복 초기화를 막기 위한 useRef
  const adInitializationStatusRef = useRef(false)

  const queryLength = useMemo(() => {
    if (typeof query?.ids === "string") {
      return query.ids.split(",").filter(Boolean).length
    }
    return 0
  }, [query?.ids])

  const isNotHigherThanStandard = true // 예시를 단순화하기 위한 조건 처리

  // 페이지 최초 진입 시 광고 초기화
  useEffect(() => {
    initAds()
    adInitializationStatusRef.current = true
  }, [])


  useEffect(() => {
    const cleanup = fixAdStyle()
    return cleanup
  }, [])

  // 1) 비교 채널이 생겼을 때 조건을 만족하면 광고 다시 초기화
  useEffect(() => {
    if (queryLength >= 1 && isNotHigherThanStandard && !adInitializationStatusRef.current) {
      initAds()
      adInitializationStatusRef.current = true
    }
  }, [queryLength, isNotHigherThanStandard, initAds])

  // 3) 광고 초기화 상태 재설정
  useEffect(() => {
    adInitializationStatusRef.current = false
  }, [queryLength, isNotHigherThanStandard])

  return (
    <div>
      <ins
        className="adsbygoogle"
        style={{ display: "block", width: "100%", minHeight: "100px", height: "auto", overflow: "hidden" }}
        data-ad-client="ca-pub-xxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxx"
        data-ad-format="horizontal"
        data-full-width-responsive="true"
      />
    </div>
  )
}

코드를 살펴보며, 제가 해결한 방식을 차근차근 설명드리겠습니다.

(1) 광고를 초기화 하는 로직을 조건에 맞춰 실행하도록

광고를 무조건 한 번만 초기화하는 것이 아니라,

페이지 최초 진입 시 사용자가 비교 채널을 선택해 queryLength가 1 이상일 때(추가 노출 조건)

이 두 경우에만 광고를 초기화할 수 있도록 조건을 설정했습니다.

if (queryLength >= 1 && isNotHigherThanStandard && !adInitializationStatusRef.current) {
  initAds()
  adInitializationStatusRef.current = true
}

광고 송출이 필요한 시점에만 초기화되고, 불필요한 재초기화는 방지할 수 있습니다.

(2) 중복 초기화를 막기 위한 useRef

useRef를 사용하여 광고가 이미 초기화되었는 경우에는 다시 초기화하지 않도록 안전장치를 만들었습니다.

const adInitializationStatusRef = useRef(false)

이건 useState와 달리 컴포넌트 리렌더링 없이 값을 유지할 수 있고, 광고 로딩 로직이 계속해서 불필요하게 반복되지 않도록 막아줍니다.

(3) 광고 초기화 상태 재설정

또한 페이지가 변경되거나 사용자의 액션으로 상태가 바뀌는 경우, adInitializationStatusRef.current 값을 다시 false로 초기화하여 광고를 다시 띄울 수 있도록 준비해두었습니다.

useEffect(() => {
  adInitializationStatusRef.current = false
}, [queryLength, isNotHigherThanStandard])

이렇게 해서 상황에 따라 광고를 유연하게 다시 초기화할 수 있는 구조로 구현하였습니다.

전체적으로 위와 같은 방법을 통해 광고 초기화 문제를 해결했고, 결과적으로 광고가 송출되지 않아 생기던 공백 문제와 UX 저하 현상을 어느정도 개선할 수 있었습니다!

칭찬해주셔서 사실 넘 행복했습니다 🥰🥰🥰

💬 해결 방식에 대한 회고

이번 광고 노출 최적화 작업은 실제 서비스 운영 과정에서 겪은 "광고가 안 뜨는 문제" 를 단순히 눈으로 확인하고 넘어가는 것이 아니라, 광고 초기화 로직 자체의 구조적 문제로 인식하고 해결한 과정이었습니다.

구글 애드센스는 외부 스크립트를 기반으로 동작하다 보니, React와 같은 SPA 환경에서는 초기 로딩 이후 상태 변화에 제대로 반응하지 않는 경우가 자주 발생하더라고요,

특히 사용자가 페이지 내에서 채널을 비교하거나, 동적으로 UI가 바뀌는 경우엔 애드센스가 이를 인식하지 못해 광고가 아예 뜨지 않는 일이 생깁니다.

저는 이런 문제를 해결하기 위해

1) 광고 초기화가 필요한 시점을 명확히 정의하고,
2) 중복 초기화를 막는 안전장치를 두고,
3) 상태가 변경되었을 때 다시 초기화가 가능하도록 유연하게 구성하는 방식!

이렇게 광고 라이프사이클을 앱 내에서 직접 제어하게 된 점이 가장 핵심이었습니다.

🤔 아쉬웠던 점 & 개선해보고 싶은 내용

하지만 이번 해결 방식에도 아쉬움은 있었습니다.

초기화 상태를 직접 관리하고 조건을 걸어주는 방식은 기능적으로는 동작하지만, 코드가 점점 조건에 의존하게 되면서 복잡도가 생기기 시작했습니다.

useRef 플래그 방식은 비교적 간단하고 빠르지만, 광고 상태가 언제 초기화됐는지를 명확하게 추적하거나 디버깅하는 데에는 한계가 있었습니다. 또한 비즈니스 로직과 광고 로직이 섞이게 되면서 관심사의 분리가 어려워지는 구조가 되기도 했습니다.

앞으로 더 개선해보고 싶은 방향을 생각해봤는데요!

광고를 관리하는 전용 커스텀 훅(useAdManager) 혹은 Context로 분리하여 광고 초기화 상태와 트리거를 전역에서 일관되게 제어할 수 있도록 개선하거나,

광고의 "노출 조건"을 모듈화해서, 페이지마다 조건을 다르게 적용해도 코드 중복 없이 구성할 수 있는 구조 를 설계하던지 해보고 싶습니다.

이번 문제는 "광고가 안 뜬다"는 단순한 UX 이슈처럼 보였지만,
내부적으로는 외부 스크립트와 SPA 구조의 충돌이라는 더 근본적인 문제였고, 이를 광고 초기화의 타이밍과 조건을 명확히 설정하는 방식으로 대응했다는 점에서 큰 의미가 있었다고 생각이 듭니다!

🎉 마무리하며,,

다양한 개발 이슈를 헤쳐나가며 구글 애드센스를 사내 서비스 환경에 적용했던 과정을 쭉 돌아보니 정말 많은 일들이 있었네요 😅

처음엔 단순히 “코드만 넣으면 바로 되지 않을까?”라는 가벼운 생각으로 시작했지만, 막상 실무 환경에서 애드센스를 런칭해 보니 예상치 못한 다양한 기술적 문제들이 계속해서 등장했습니다.

특히 로컬 환경에서 광고 확인이 불가능한 점이나, 애드센스의 자동 스타일링으로 인한 UX 이슈, 광고가 제대로 로드되지 않는 상황 등 실제 운영을 위한 최적화 과정에서 많은 고민과 삽질이 있었는데요.

돌이켜 보면, 단순한 기능 구현을 넘어 서비스의 전반적인 품질과 사용자 경험을 세심하게 고려하며 문제를 해결했던 시간들이었습니다. 특히 MutationObserver를 통해 DOM 요소의 스타일을 실시간으로 복구했던 방식이나, 광고 초기화 타이밍을 세밀하게 제어하여 광고 노출의 안정성을 높인 것은 실질적인 운영 환경에서 좋은 성과를 낸 솔루션이었다고 생각해요.

한편으로는 이렇게 DOM을 직접 조작하거나 외부 스크립트와의 충돌을 처리하는 과정에서 React의 기본적인 원칙과 조금 충돌하는 면이 있긴 했습니다. 앞으로는 이러한 문제를 더욱 React스럽게 해결할 수 있도록 고민을 이어가고, 커스텀 훅이나 상태 관리를 좀 더 명확히 하는 방법으로 리팩토링도 해보려고 합니다!

구글 애드센스는 특히 웹!!!은 딱히 공식 문서를 찾기 어려웠습니다 대부분 커뮤니티로 문의 - 해결 , 몇 없는 기술 블로그들만 있는데요, 구글 애드센스 개발 커뮤니티 를 주로참고하면서 개발하시기를 추천드립니다!

이 모든 여정을 함께 해준 마케터 Ella! 이 글을 빌어 감사의 말씀을 드립니다 ❤️

여러분들의 사이드 프로젝트에도 구글 광고를 삽입해 많은 수익을 올리시길 바라며 글을 마칩니다 💵💵