Thymeleaf 환경에서 모비온 광고 오배치와 중복 초기화 해결

Thymeleaf 템플릿 6군데에 모비온 광고 스크립트를 붙이면서, 정적 HTML 기준으로 잡아놓은 좌표가 Spring 렌더링 환경에서 완전히 어긋나 있던 걸 이번에 한 번에 정리했다.

배경 — "정적 HTML에서 됐는데 왜 Spring에선 이상하지?"

광고 코드를 붙이는 작업을 하다 보면 흔히 이런 패턴을 탄다. 디자이너 혹은 퍼블리셔가 순수 정적 HTML 파일 위에서 광고 배치를 잡아놓고 넘겨주면, 백엔드 템플릿 엔진(여기서는 Spring + Thymeleaf)으로 옮기는 순간 레이아웃이 틀어진다. 이유는 단순하다.

• 정적 HTML은 fragment 개념이 없으니 <header>, <footer>, <nav> 전부 각 파일에 인라인으로 들어있음
• Spring Thymeleaf는 th:replace / th:insert 로 fragment를 조립하는 구조라서 DOM 계층이 달라짐
• fragment가 조립된 최종 DOM 기준으로 다시 광고 위치를 잡아야 함

이번 작업이 딱 그 케이스였다. mobon-ads.html fragment를 만들어두고 각 페이지에 삽입했는데, 원본 정적 HTML 기준으로 박아놓은 좌표와 z-index 스타일이 실제 렌더링 결과와 달랐다.

작업 내용 — 6개 템플릿 + fragment 일괄 정정

핵심은 mobon-ads.html 하나에 모비온 광고 코드 6종과 HawkEyesMaker 설정을 몰아넣은 것. 각 페이지가 필요한 슬롯만 선택적으로 include할 수 있도록 fragment 단위로 분리한 구조다.

<!-- fragments/mobon-ads.html -->
<div th:fragment="mobon-banner-top">
  <!-- 모비온 슬롯 코드 -->
  <script type="text/javascript" src="...mobon..."></script>
</div>

<div th:fragment="mobon-banner-side">
  <!-- HawkEyesMaker 포함 슬롯 -->
  <script> MoboAds.init({ ... }) </script>
</div>

<!-- 각 페이지에서 필요한 슬롯만 가져다 씀 -->
<div th:replace="fragments/mobon-ads :: mobon-banner-top"></div>

이 구조의 장점은 광고 코드가 한 군데 모여 있어서 슬롯 ID 바꾸거나 스크립트 버전 올릴 때 mobon-ads.html 하나만 건드리면 된다는 점이다. 반대로 정적 HTML 방식처럼 각 페이지마다 광고 태그를 직접 박아두면 나중에 슬롯 키 하나 바꿀 때 6개 파일 다 열어야 한다. 이게 쌓이면 결국 오배치 같은 사고가 난다.

오배치가 왜 생겼는지 — 정적↔동적 컨텍스트 혼용의 함정

정적 HTML 작업물을 그대로 Thymeleaf로 포팅할 때 자주 놓치는 지점 몇 가지를 정리해두면:

• fragment 조립 후 DOM 깊이가 달라진다 — 정적 파일에서 body > div.wrap > .ads 였는데, footer fragment가 추가되면서 body > div.wrap > footer > .ads 가 되는 식
• CSS 선택자 오염 — 정적에서 짠 .ads { position: absolute; top: 200px } 가 fragment 컨텍스트에서 부모 기준이 바뀌어 전혀 다른 위치로 튀어나옴
• 스크립트 중복 로드 — 각 HTML에 인라인으로 복붙된 광고 스크립트가 fragment로 합쳐지면서 동일 슬롯 코드가 두 번 실행되는 경우

이번에는 세 번째 케이스도 일부 섞여있었다. footer.html fragment와 개별 페이지 양쪽에서 같은 광고 스크립트가 들어가 있어서 HawkEyesMaker가 중복 초기화되는 상황이었다. mobon-ads.html 로 완전히 일원화하면서 footer에서 광고 관련 코드를 걷어내는 게 이번 PR의 실질적인 핵심이었다.

회고

광고 스크립트 연동은 기능 개발처럼 "됩니다/안됩니다" 가 명확하지 않아서 리뷰 때 놓치기 쉽다. 렌더링은 되는데 실제 트래킹이 빠진다거나, 슬롯은 뜨는데 위치가 어긋나 있다거나 하는 식으로 절반만 동작하는 상태로 오래 방치되는 경우가 많다.

이번에 팀에 공유한 것도 이 부분이었다. 광고 fragment를 붙일 때는 정적 HTML 미리보기가 아니라 반드시 Spring 서버 띄운 상태에서 최종 DOM을 브라우저 DevTools로 확인하고 커밋하라는 것. 정적 파일로 눈으로 보고 OK 냈다가 이번처럼 오배치로 다시 돌아오는 사이클이 생긴다.

fragment 기반으로 광고 코드를 일원화한 건 잘한 결정이었다고 본다. 앞으로 슬롯이 늘어나도 mobon-ads.html 한 파일만 보면 된다.

끝.

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

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

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