블로그 광고 슬롯 제거와 기술채무 정리 과정

블로그 광고 서비스 정책 변경으로 광고 슬롯을 제거했다. 간단한 정리 작업처럼 보이지만, 블로그 템플릿 전반에 걸쳐 제거해야 할 부분들이 생각보다 많았고, 그 과정에서 기술채무 정리와 정책 관리 방식에 대해 생각해볼 기회가 됐다.

왜 광고 슬롯을 제거해야 했나

광고 플랫폼의 정책이 변경되면서 블로그에 삽입되어있던 광고 슬롯을 제거해야 했다. 단순히 "광고 코드를 지운다"는 것이지만, 그 배경엔 몇 가지 고려사항이 있다:

• 정책 변경의 신속 대응: 광고 서비스가 일시 중단되면, 그에 맞춰 페이지 코드도 빠르게 정리해야 한다. 방치하면 콘솔 에러가 발생하고, 사용자 경험을 해칠 수 있다.
• 기술채무 최소화: 사용 중단된 광고 슬롯이 코드에 남아있으면 나중에 헷갈린다. "이 div는 왜 있지?", "이 CSS 클래스는 뭐지?"라는 질문이 반복된다.
• 페이지 성능: 광고 플랫폼 스크립트가 로드되지 않아도, 그 스크립트를 호출하려는 코드가 남아있으면 불필요한 네트워크 요청이나 에러가 발생할 수 있다.

변경 파일 분석: 광고 슬롯의 분포

세 개의 템플릿 파일에서 광고 슬롯을 제거했다. 각 파일의 역할과 광고 슬롯의 위치를 보면:

각 파일마다 광고 슬롯이 다른 위치에, 다른 규모로 삽입되어있었다. 예를 들어:

<!-- _sidebar.html의 광고 슬롯 (보조 광고) -->
<aside class="sidebar">
  <div class="sidebar__ad-slot" id="ad-hawkeyes-sidebar">
    <!-- 광고 플랫폼의 광고 콘텐츠 -->
  </div>
</aside>

<!-- base.html의 광고 슬롯 (전역 배너) -->
<header>
  <div class="header__ad-banner" id="ad-hawkeyes-header">
    <!-- 광고 -->
  </div>
</header>

<!-- post.html의 인라인 광고 -->
<article class="post">
  <div class="post__content">
    <!-- 포스트 본문 -->
    <div class="post__ad-inline" id="ad-hawkeyes-inline">
      <!-- 본문 중간의 광고 -->
    </div>
  </div>
</article>

삼 개 파일에 걸쳐 광고 슬롯이 산재되어 있었으므로, 모두 찾아서 정리하는 과정이 필요했다.

작업 과정에서 발견한 것들

광고 제거 후 UI 검증 필요

광고 슬롯을 제거하면 단순히 그 부분이 사라지는 게 아니다. 시각적인 재조정이 필요하다:

• 사이드바: 광고가 없으면 사이드바가 너무 좁거나 비어 보일 수 있다. CSS의 padding, min-height 같은 값들을 재검토해야 한다.
• 포스트 본문: 본문 중간의 광고가 없으면 여백이 어색해질 수 있다. 단락 간 여백 조정이 필요할 수 있다.
• 반응형 디자인: 모바일 뷰에서 광고가 있을 때와 없을 때의 레이아웃이 다를 수 있으므로, 각 breakpoint에서 테스트해야 한다.

광고 스크립트의 부산물 정리

HTML 슬롯을 제거한다고 끝나는 게 아니다. 보통 광고 플랫폼은 초기화 스크립트를 필요로 한다:

// 제거해야 할 부산물들
<script>
  window.HawkEyesAd = window.HawkEyesAd || {};
  HawkEyesAd.init({
    siteId: 'blog-example',
    slots: ['ad-hawkeyes-sidebar', 'ad-hawkeyes-header']
  });
  HawkEyesAd.loadAds();
</script>

이런 스크립트가 제거되지 않으면 콘솔에 "undefined function" 에러가 발생하고, 불필요한 라이브러리 로드로 인한 성능 저하가 생긴다.

향후 복구를 대비한 설정 고민

커밋 메시지에 "(일시 중단 정책)"이라고 명시된 만큼, 언젠가는 광고 서비스가 다시 활성화될 가능성이 있다. 이런 상황에서는 두 가지 접근이 가능하다:

방식 1: 완전 제거 (현재 방식)
- 장점: 코드가 깔끔함, 불필요한 부분 없음
- 단점: 복구할 때 git history를 찾아야 함

방식 2: 설정 기반 비활성화

{% if config.ENABLE_ADS %}
  <div class="sidebar__ad-slot"><!-- 광고 --></div>
{% endif %}

• 장점: 설정 플래그 하나로 빠르게 복구 가능
• 단점: 코드에 불필요한 부분이 살아있음

"일시 중단"이라는 표현을 고려하면 방식 2가 나을 수도 있었지만, git history가 있으니 현재의 완전 제거 방식도 충분히 타당하다.

팀 레벨 회고와 개선점

이 작업을 하면서 팀과 논의해볼 만한 부분들이 생겼다:

• 광고 슬롯 정책 문서화: 향후 광고를 추가할 때 "어디에 어떻게 넣을지"에 대한 가이드라인 필요
• 환경별 광고 표시 설정: 개발/스테이징/프로덕션 환경에서 광고 표시 여부를 쉽게 토글하는 방식 정의
• 코드 리뷰 체크리스트: 광고 관련 변경 시 놓치기 쉬운 부분들 (스크립트, CSS, 모바일 UI 등) 리스트화
• 기술채무 추적: "이 div는 뭐지?"라는 질문이 나오지 않도록 주석이나 문서 정비

간단한 정리 작업이지만, 이런 작은 변경들을 통해 코드 정리, 정책 정의, 팀 프로세스 개선까지 이어진다.

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

• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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