광고 스켈레톤 제거로 빈 슬롯 노출 없앰

광고 자리에 "로딩 중..." 스켈레톤이 덩그러니 떠 있던 걸 제거했다.

왜 생겼고 왜 없앴나

광고 컴포넌트를 붙일 때 흔히 하는 패턴이 있다. 스크립트가 비동기로 로드되니까 그 사이 레이아웃이 갑자기 "쿵" 하고 밀리는 CLS(Cumulative Layout Shift)를 막으려고 skeleton placeholder를 먼저 깔아두는 것. 의도는 좋다. 문제는 광고 스크립트가 실제로 아무것도 채우지 못하는 상황 — 인벤토리 없음, 사용자 차단, 지역 정책 등 — 이 올 때 skeleton이 그냥 그 자리에 눌러앉아버린다는 거다.

"광고 로딩 중..."이라는 텍스트가 독자 눈에 보이는 시간이 길어지면 UX 관점에서 꽤 노이즈다. 콘텐츠를 읽으러 들어온 사람한테 광고가 뜨고 있다는 사실을 굳이 알려줄 이유가 없다. 광고가 채워지면 그냥 자연스럽게 보이면 되고, 채워지지 않으면 그 공간 자체가 조용히 사라지는 게 맞다.

결론은 간단하다. skeleton placeholder가 실제로 UX를 개선하는 게 아니라 오히려 빈 자리를 더 눈에 띄게 만들고 있었던 것. 제거하는 쪽이 낫다고 판단했음.

변경이 일어난 파일들

두 파일 모두 건드렸다는 게 포인트다. Base.astro가 레이아웃 공통이라면 거기서 제거하는 게 전체를 커버할 것 같지만, [slug]/index.astro에도 따로 들어가 있었다는 건 광고 슬롯을 붙이던 시점에 레이아웃 레벨과 페이지 레벨 두 군데 모두 작업했다는 얘기다. 광고 자리 설계가 처음부터 두 레이어에 분산돼 있었던 거고, skeleton도 자연스럽게 두 곳에 남아있었던 것.

이런 상황에서 한 곳만 고치고 "됐겠지"하고 넘어가면 나중에 "어? 여기선 아직도 뜨는데요"가 나온다. 두 파일 동시에 잡은 건 당연한 수순.

Astro에서 이런 처리를 다룰 때

Astro 기반 정적 사이트에서 서드파티 광고 스크립트를 다룰 때 skeleton을 두는 패턴 자체가 틀린 건 아닌데, 제대로 쓰려면 몇 가지를 챙겨야 한다.

<!-- 이런 식으로 조건 없이 무조건 보이는 skeleton은 문제 -->
<div class="ad-placeholder">
  <span>광고 로딩 중...</span>
</div>

<!-- 광고 스크립트가 실제로 채웠을 때만 보이도록 처리하는 게 맞다 -->
<div class="ad-slot" data-ad-unit="..." style="min-height: 0;"></div>

광고 네트워크 스크립트가 슬롯을 채울 때 해당 컨테이너에 직접 내용을 주입하는 방식이라면, placeholder는 스크립트가 정상적으로 채운 시점에 JS로 지워주거나, 아예 처음부터 안 두는 게 낫다. 채워지든 안 채워지든 min-height만 잡아두고 비워두는 방식이 CLS도 덜 튀고 빈 슬롯 노출도 없다.

이번 케이스는 그 중 가장 직관적인 방법 — 그냥 없애는 것 — 을 선택한 셈이다.

작은 fix, 실제 체감은 크다

코드 줄 수 변화는 많지 않을 텐데, 독자 입장에서 체감은 다르다. "광고 로딩 중..."이 사라진 자리엔 아무것도 없거나 광고가 바로 뜬다. 훨씬 깔끔하다.

팀원한테 리뷰 요청이 왔을 때 이런 UI 노이즈성 이슈는 보통 빠르게 approve를 주게 된다. 근데 꼭 한 번 확인하는 게 "두 곳 모두 잡았나". 레이아웃 공통이랑 개별 페이지 양쪽에 중복 적용된 경우가 많으니까. 이번엔 두 파일 모두 커밋에 포함됐으니 그 부분은 확인 완료.

끝.

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

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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