광고 승인 전 빈 슬롯 라벨을 숨겨 페이지 완성도 개선
목차
블로그와 포트폴리오의 사이드레일에 AdSense 광고를 붙였는데, 광고가 승인되기 전까지 빈 슬롯에 'AD' 라벨이 노출되는 게 신경 쓰였다. 사실 기술적으로 문제는 아니지만, 방문자 입장에서는 뭔가 덜 완성된 페이지처럼 느껴진다. 이번에 그 라벨을 숨기는 작업을 했다.
작업: 라벨만 숨기고 컨테이너는 살리기
변경 범위는 세 개의 템플릿 파일 (base.html, portfolio/index.html, portfolio/en/index.html)에 걸쳐 있었다. 핵심은 "AD 텍스트만 숨기기"였다.
<!-- Before: 라벨이 노출됨 -->
<div class="ad-slot">
<p class="ad-label">AD</p>
<!-- AdSense ins 태그는 나중에 여기 삽입 -->
</div>
<!-- After: 라벨은 숨기되, 슬롯은 유지 -->
<div class="ad-slot">
<p class="ad-label" style="display: none;">AD</p>
<!-- 또는 visibility: hidden, 또는 CSS 클래스로 -->
</div>
스타일 변경이 작업명에 들어간 이유는 이 때문이다. 그런데 단순히 CSS를 display: none으로 처리하는 게 아니라, "슬롯 컨테이너는 유지"라는 주석이 있다는 게 핵심이다.
설계 의도: DOM 구조를 미래에 맞춰두기
광고 승인이 나면 HTML을 또 수정하지 않고, AdSense 스크립트가 동적으로 <ins> 요소를 삽입할 공간으로 슬롯을 활용한다. 즉, 현재 상태에서:
- 라벨은 숨겨서 시각적으로 덜 뜨렁함
- 컨테이너는 그대로 두어서 나중에 스크립트가 쉽게 주입할 수 있도록
이렇게 하면 광고 승인 후 백엔드 배포 없이 스크립트 활성화만으로도 그 슬롯에 광고가 나타난다.
회고: 작은 개선이 모이는 경험
이 작업은 크기로는 작지만, 중요한 관점을 담고 있다.
첫째, 사용자 경험의 세부. 빈 광고 슬롯은 기술적으로 "에러"가 아니다. 광고가 아직 안 나왔을 뿐. 하지만 페이지를 방문한 누군가는 "이거 뭐지?"라는 의문이 생긴다. 라벨을 숨기는 것만으로도 그 위화감이 사라진다.
둘째, 구조와 스타일의 분리. DOM 컨테이너를 유지하는 것은 나중의 유연성을 보장한다. 만약 컨테이너까지 조건부로 렌더링했다면, 광고 삽입 시점에 또 다른 배포가 필요할 수 있다. 지금처럼 하면 스크립트 활성화만으로도 충분하다.
셋째, 비슷한 패턴. 이런 류의 개선은 스켈레톤 로딩(skeleton loading)이나 placeholder UI에서도 자주 나온다. "콘텐츠가 없을 때를 어떻게 할 것인가"는 단순한 디자인 문제가 아니라 시스템 설계 문제다. 빈 상태 / 로딩 상태 / 에러 상태 / 최종 상태를 모두 고려해서 DOM을 구성하면, 나중에 상태 전환이 자연스럽고 버그도 줄어든다.
다음엔 광고 승인이 떨어지면 이 슬롯이 어떻게 변할지 보면 된다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.