플러터 웹(Flutter Web)에서 구글 애드센스(AdSense) 광고 적용하는 실전 방법과 주의사항 - 숏폼플레이(유튜브쇼츠, 무료 동영상)

 플러터 웹(Flutter Web)에서 구글 애드센스(AdSense) 광고를 적용하는 방법과, 실제로 겪어본 실무적 이슈, 그리고 주의해야 할 점에 대해 정리해본다.

일단 주로 안드로이드와 iOS 등 클라이언트 앱 개발을 중심으로 해왔으나, 플러터를 이용한 웹 개발 및 광고 적용 테스트를 직접 진행해봤기에, 이 경험이 비슷한 고민을 하는 분들에게 도움이 되길 바란다.

플러터로 웹 서비스, 실제 실무 적용은 가능할까?

플러터(Flutter)로 웹 서비스를 개발할 수 있을지 고민하게 된 계기는, 구글의 크로스플랫폼 개발 도구로서의 장점 때문이었다. 하지만 실제로 적용해보니, 플러터 웹은 로딩 속도, 에러 트래킹의 불편함 등 여러 한계점이 분명 존재했다. 기존에  쓴 글 참고

현재 이슈 키워드를 활용해 유튜브 숏츠(Shorts) 영상을 노출하는 웹을 플러터로 제작하여 운영 중이다.

사실 처음부터 광고를 붙이려던 건 아니었으나, ‘플러터 웹에서는 광고 적용이 어렵다’는 이야기를 들었던 터라, 직접 시도해보고 경험을 공유하는 게 의미있겠다고 판단했다.

---

구글 애드센스 승인, 그리고 서브도메인 적용

애드센스(AdSense) 승인은 이미 메인 도메인으로 적용한 상태이다. 참고로, 에드센스는 메인 도메인으로 승인을 받은 경우 서브도메인에는 별도의 승인 없이 광고 적용이 가능하다.

여기서는 이미 승인을 받은 상황을 전제로, 실전 적용 과정을 소개한다.

에드센스 승인 하는 방법 및 노하우는 많은 자료들을 찾아보면 있어서 여기서는 논외로 한다.

---

플러터 웹에서 구글 애드센스 적용이 어려운 이유

플러터 웹은 SPA(Single Page Application) 구조로 동작하며, 모든 UI가 자바스크립트로 동적으로 랜더링된다.

이 때문에 구글 애드센스 광고 코드를 삽입해도 바로 광고가 노출되지 않거나, 아예 안 보이는 현상이 빈번하게 발생한다.게다가 정적 HTML이 아니기 때문에, 광고가 안 보일 때 이슈의 원인을 트래킹하기도 쉽지 않다.

관련 정보나 해결 사례도 많지 않아서, ChatGPT와 같은 AI 도구의 도움을 받아도 실제 광고가 노출되지 않는 문제가 많았다.

앱(AdMob),Google IMA 같은 것과 비교

모바일 앱의 경우 구글 AdMob을 SDK로 연동하는 게 표준이다. 에러가 발생하면 응답 메시지로 안내가 나오기 때문에 디버깅도 상대적으로 쉽다.

반면, 웹(특히 플러터 웹)은 SPA 구조의 한계로 인해 광고 적용과 디버깅 모두 까다롭다.

---

구글 애드센스 광고 태그 생성

광고 적용을 위해 애드센스에 접속해  ‘디스플레이 광고’ 단위를 생성한다.광고는 ’반응형(Responsive)’으로 만들었고, 생성 후 제공되는 HTML 태그를 복사한다.

광고 클릭 -> 광고 단위 기준 -> 디스플레이 광고-> 생성 

플러터 웹에서 애드센스 광고 위젯 만들기

플러터 웹에서  적용해 보기 위해 gpt 를 이용해서 코드를 생성해보자.

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class AdsenseBannerWidget extends StatefulWidget {
  final String adClient; // ex: "ca-pub-xxxx..."
  final String adSlot;   // ex: "1234567890"
  final double width;
  final double height;

  const AdsenseBannerWidget({
    Key? key,
    required this.adClient,
    required this.adSlot,
    this.width = 320,
    this.height = 100,
  }) : super(key: key);

  @override
  State createState() => _AdsenseBannerWidgetState();
}

class _AdsenseBannerWidgetState extends State {
  final String _viewType = 'adsense-html-banner';

  @override
  void initState() {
    super.initState();
    if (kIsWeb) {
      // 반드시 // ignore: undefined_prefixed_name 붙여 사용
      // ignore: undefined_prefixed_name
      ui.platformViewRegistry.registerViewFactory(
        '$_viewType-${widget.adSlot}',
            (int viewId) {
          // 광고 코드 HTML
          final htmlString = '''
            
            
          ''';
          final element = DivElement()
            ..setInnerHtml(
              htmlString,
              validator: NodeValidatorBuilder()..allowElement('script')..allowElement('ins'),
            );
          // 광고 스크립트가 없으면 추가 (중복로드 방지)
          if (document.querySelectorAll('script[src*="pagead2.googlesyndication.com"]').isEmpty) {
            final script = ScriptElement()
              ..async = true
              ..src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${widget.adClient}"
              ..setAttribute('crossorigin', 'anonymous');
            document.head!.append(script);
          }
          return element;
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return
      Container(color: Colors.red, child:SizedBox( width: widget.width,height: widget.height));
  }
}

이렇게 위젯을 만들어서 광고를 노출시키려 했으나, 실제로는 광고가 노출되지 않았다.

광고는 아래 그림 처럼 AppTopBar 하단에 하려고 한다.

---

애드센스 플러그인/패키지 탐색

혹시 기존에 누군가 만든 플러그인이나 패키지가 있는지 pub.dev에서 검색해봤으나, 유지 관리가 되지 않거나 제대로 동작하지 않는 경우가 많았다.

https://pub.dev/packages? q=platform%3 Aweb+adsense&sort=downloads

결국 직접 구현해서 해결하는 쪽으로 방향을 잡았다.

---

해결 방법: Iframe으로 광고 HTML 로딩

플러터 웹에서 광고를 확실하게 노출하려면, 별도의 HTML 파일(예: adsense_banner.html)을 생성해 에셋(assets) 폴더에 추가하고, 이를 iframe으로 로딩하는 방식으로 해결 하였다

실제 광고가 노출되는 것을 확인할 수 있었고, 특히 광고 위/아래 레이아웃이 깨지지 않게 하려면 높이를 70px 로 고정해 주었다. 70px 는  반응형이 아닌걸로 추가 하려할때 제일 큰 높이라 일단 70px 로 하였다.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html' as html;

class AdsenseBannerAssetWidget extends StatefulWidget {
  final double width;
  final double height;

  const AdsenseBannerAssetWidget({
    Key? key,
    this.width = 400,
    this.height = 100,
  }) : super(key: key);

  @override
  State createState() => _AdsenseBannerAssetWidgetState();
}

class _AdsenseBannerAssetWidgetState extends State {
  late final String _viewType;

  @override
  void initState() {
    super.initState();
    _viewType = 'adsense-banner-iframe-${widget.width}-${widget.height}-${UniqueKey()}';

    if (kIsWeb) {
      // ignore: undefined_prefixed_name (플러터 버전에 따른 무시)
      ui.platformViewRegistry.registerViewFactory(
        _viewType,
            (int viewId) {
            //iframe 으로 리턴
          final iframe = html.IFrameElement()
            ..width = widget.width.toInt().toString()
            ..height = widget.height.toInt().toString()
            ..src = '/assets/adsense_banner.html'
            ..style.border = 'none';
          return iframe;
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    if (!kIsWeb) return const SizedBox();
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: HtmlElementView(
        viewType: _viewType,
      ),
    );
  }
}

---

6. 테스트와 배포

테스트할 때는 광고가 정상적으로 노출되는지, 클릭 이벤트가 정상 동작하는지까지 꼭 체크해야 한다.

특히 에드센스는 ‘테스트 광고’를 공식적으로 제공하지 않으며, 실 서비스 도메인에서만 광고가 정상적으로 표시된다.

로컬환경에서는 광고가 빈 영역으로만 나오니, 실제 배포 전에는 반드시 배포용 도메인에서 최종 확인을 해야 한다.

아래 코드는 에드센스 샘플 아니지만 일단 클릭이벤트가 잘 먹히는지 테스트 해볼 수있는 html 이다.

아래 처럼 적절한 곳에 해당 위셋을 실행한다.

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
                Container(
                  margin: EdgeInsets.only(top:_topBarHeight),
                  width: double.infinity,
                  height: 70,
                  child: AdsenseBannerAssetWidget(
                   width: MediaQuery.of(context).size.width,
                   height: 70
                  ),
                ),
                videoview widget..
                ]
                
.....

---

경험 기반 결론 및 주의사항

• 플러터 웹은 광고 적용이 쉽지 않다. SPA 구조, 자바스크립트 랜더링 특성 때문에 애드센스가 바로 적용되지 않는다.

• Iframe 방식이 현실적인 대안이다. 별도의 HTML을 만들어 assets로 추가하고, 이를 iframe으로 로딩하는 방법이 가장 깔끔하다.

• 테스트 광고는 따로 제공되지 않는다. 부정 클릭 주의(직접 클릭 X)

• 로컬에서는 광고가 안 나옴. 실 서비스 도메인에서만 정상 동작

• 플러터 웹은 실무/상용 서비스에 적합하지 않을 수 있음. MVP, 프로토타입 정도로는 쓸만하나, 느린 속도, 한글 폰트 깨짐, 디버깅 어려움 등 한계가 명확하다.

• 애드센스 광고 단위/위치는 신중하게 결정. 앵커 광고(상/하단) 겹침 등 이슈 주의.

---

마치며

경험한 플러터 웹에서 구글 애드센스 광고 적용 방법과 문제 해결 사례를 공유했다.

혹시나 에드센스 광고를 적용하려 고민하는 개발자 분들에게 실제로 적용 가능한 해법이 되길 바란다.

결론적으로, 플러터 웹은 아직 웹 실무에서는 비추천이지만, 불가피하게 광고까지 붙여야 한다면 iframe 방식으로 해결 했고 정상 적으로 지표가 나오는지 지속적으로 모니터링을 해보려 한다.