개발 slecs

Flutter 웹에 애드센스와 개인정보 동의 스크립트 통합하기

목차

Flutter 웹 애플리케이션에 광고 수익화 기능을 추가하면서 AdSense와 개인정보 정책 메시징 스크립트를 index.html의 head에 직접 추가했다. 이는 네이티브 웹 개발과 달리 Flutter 웹 프로젝트에서 글로벌 HTML 설정을 어떻게 관리할지에 대한 작은 하지만 중요한 결정이었다.

왜 이 작업이 필요했나

Flutter로 작성한 웹 애플리케이션도 결국 브라우저에서 실행되는 HTML/CSS/JavaScript다. 하지만 많은 개발자가 놓치는 부분이 바로 index.html의 존재다. Flutter 웹은 개발자가 직접 HTML을 작성할 일이 거의 없기 때문에, 서드파티 스크립트 통합이 필요할 때마다 "어디에 넣어야 하나?" 하는 의문이 생긴다.

AdSense 광고와 개인정보 정책 메시징(Privacy Messaging)은 Google이 제공하는 스크립트인데, 이들은 반드시 HTML의 <head> 섹션에 로드되어야 한다. 그 이유는:

  • AdSense는 페이지 로드 초기에 광고 슬롯을 등록해야 제대로 동작
  • Privacy Messaging은 사용자가 콘텐츠를 보기 전에 동의 여부를 확인해야 하므로 우선적으로 초기화

통합 전략: Flutter 웹의 제약과 기회

<!-- app/web/index.html의 <head> 섹션 -->
<head>
  ...
  <!-- AdSense 스크립트 -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-..." 
          crossorigin="anonymous"></script>

  <!-- Privacy Messaging 스크립트 -->
  <script src="https://cdn.cookielaw.org/consent/..."></script>
  ...
</head>

Flutter 프로젝트 구조상 index.html은 보통 web/ 디렉토리에 위치한다. 이 파일은 git으로 관리되는 정적 자산이므로, 서드파티 스크립트 추가 시 몇 가지 고려할 점이 있다:

선택지 장점 단점
index.html에 직접 기입 간단하고 명확, 페이지 로드 최적화 여러 환경(dev/prod)에서 client ID 관리 필요
JavaScript에서 동적으로 주입 유연한 환경 분기 스크립트 로드 타이밍 지연 가능
빌드 시 템플릿 변수 처리 환경별 자동화 빌드 복잡도 증가

우리는 첫 번째 접근법을 선택했다. AdSense나 Privacy Messaging처럼 초기화 타이밍이 중요한 스크립트는 정적으로 head에 포함하는 것이 일반적인 베스트 프랙티스다.

팀 리딩 관점: 수익화와 성능의 균형

광고 플랫폼 통합은 단순한 기술적 작업이 아니다. 팀 입장에서는 몇 가지 더 생각할 부분이 있었다:

  • 성능 영향: 외부 도메인의 비동기 스크립트가 페이지 로드 속도에 미치는 영향 최소화
  • 개인정보 정책: Privacy Messaging 추가로 GDPR/개인정보보호 규제 준수 필요
  • 모니터링: AdSense 통합 후 실제로 광고가 제대로 표시되는지 검증
  • 유지보수성: 향후 다른 팀 멤버가 이 코드를 이해하고 client ID를 업데이트할 수 있을 것인가

특히 Privacy Messaging과 함께 추가하는 것이 중요했다. 단순 광고만 표시하는 것보다, 사용자 동의를 먼저 얻는 구조를 초기부터 갖춤으로써 규제 리스크를 줄일 수 있었다.

유사한 통합 패턴과 교훈

실무에서 마주치는 다른 서드파티 스크립트들(분석, 에러 트래킹, A/B 테스트 도구)도 유사한 위치 결정 문제가 있다:

  • 초기화가 필수: Google Analytics, Sentry, 에러 추적 → head
  • 성능이 중요: 소셜 미디어 embed, 광고 → 가능하면 async 또는 지연 로드
  • 사용자 상호작용 필요: 채팅봇, 피드백 위젯 → body 끝이나 런타임 로드 OK

이 작업을 진행하면서 배운 점은 Flutter 웹의 정적 HTML 파일이 생각보다 중요한 진입점이라는 것이다. 많은 개발자가 Dart/Flutter 코드만 관심 있지만, 웹 플랫폼만의 고유한 요구사항들(메타 태그, 폰트 로드, 외부 스크립트)은 결국 이 한 파일에 집중된다.

다음번에 유사한 통합이 필요할 때는 마크다운으로 정리된 "서드파티 스크립트 통합 체크리스트"를 먼저 준비했으면 좋겠다는 생각이 든다. 현재는 각자 최선을 다해 추가하지만, 팀 전체가 따를 기준이 있으면 일관성 있게 관리할 수 있을 것 같다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.