광고를 사이드 레일에서 모달로 옮기고 preconnect로 로딩 개선
목차
광고 레이아웃을 사이드 레일에서 모달 내부로 이동하면서, 동시에 preconnect 힌트도 챙겼다.
왜 사이드 레일에서 빼야 했나
PC 화면에서 사이드 레일에 300x600 광고를 배치하는 건 꽤 오래된 패턴이다. 세로로 긴 "하프 페이지" 단위 광고는 스크롤을 따라 sticky하게 붙어 있으면 노출 시간이 길어진다는 논리로 많이 쓰인다. 근데 현실에서는 문제가 생긴다.
- 콘텐츠 영역 너비가 압박받으면 본문 가독성이 떨어짐
- 결과 페이지처럼 집중도가 필요한 화면에서 사이드 광고는 주의 분산
- 레이아웃이 충분히 넓지 않은 중간 해상도(1280px 근방)에서 광고가 깨지거나 겹침
결국 이번 작업에서 내린 결론은 "사이드 레일에서 걷어내고 모달 PC 지면으로 이동"이었다. 모달이 열리는 타이밍에 300x600을 붙이면 레이아웃 구조에 전혀 영향을 주지 않고, 오히려 사용자가 모달을 직접 열었다는 인터랙션 의도가 있으므로 광고 노출 맥락도 나쁘지 않다.
변경된 파일들과 각각의 역할
| 파일 | 역할 | 이번 변경 의미 |
|---|---|---|
Base.astro |
전체 레이아웃 기본 틀, <head> 포함 |
preconnect 힌트 추가 |
t/[slug]/index.astro |
개별 콘텐츠 페이지 (psy 카테고리) | 사이드 레일 광고 슬롯 제거 |
t/[slug]/r/[result].astro |
결과 페이지 | 모달 내 300x600 광고 슬롯 삽입 |
Base.astro에 preconnect를 추가한 게 작아 보여도 실제로 중요한 부분이다. 광고 스크립트는 보통 외부 도메인 리소스를 대량으로 끌어오는데, preconnect가 없으면 DNS 조회 → TCP 핸드셰이크 → TLS 협상을 광고 로드 시점에 처음부터 다 한다. 미리 힌트를 주면 이 레이턴시를 페이지 파싱 타임과 겹쳐서 처리할 수 있다.
<!-- Base.astro head 영역 -->
<link rel="preconnect" href="https://[ad-domain]" />
<link rel="dns-prefetch" href="https://[ad-domain]" />
preconnect는 브라우저가 실제로 커넥션을 열어두고, dns-prefetch는 DNS만 미리 해결한다. 광고 도메인처럼 확실히 쓸 걸 알고 있으면 preconnect를, 쓸 수도 있는 서드파티면 dns-prefetch만 거는 게 일반적인 패턴이다. 둘 다 쓰면 구형 브라우저 fallback까지 커버된다.
결과 페이지에 광고를 붙일 때 주의할 것들
[result].astro는 사용자가 심리 테스트 같은 걸 끝낸 후 도착하는 페이지다. 여기에 모달 광고를 붙이는 건 타이밍 설계가 꽤 중요하다.
- 결과가 렌더링되기 전에 광고가 블로킹하면 최악의 UX
- 결과를 다 읽고 나서 "공유" 또는 "다시 하기" 버튼을 누르는 시점에 모달이 뜨는 구조라면 광고 노출이 자연스러움
- 300x600은 세로 비율이 크기 때문에 모달 내부 스크롤이 생기지 않도록 모달 높이를 충분히 잡아야 함
팀 내에서 이런 광고 지면 변경은 단순 퍼블리싱처럼 보여도 수익 지표에 직접 붙어있는 작업이라 QA를 꼼꼼히 가져가야 한다. 특히 광고 도메인 preconnect 같은 <head> 수정은 전체 페이지에 영향을 주므로 Base 컴포넌트를 건드릴 때는 다른 카테고리 페이지까지 회귀 확인하는 습관을 들여야 한다.
이번엔 레이아웃 영향 범위가 명확했고 변경 범위도 파일 세 개로 잘 격리됐다. 사이드 레일 광고를 걷어낸 덕에 콘텐츠 페이지 레이아웃도 한결 깔끔해졌다.
다음
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.