구글 광고 코드를 활용해서 사이드 배너를 달고 싶은데, 혹시 페이지 속도가 느려질까 봐 걱정해 본 적 있으신가요? 오늘은 모바일에서 불필요한 광고 로딩을 막아 페이지 속도 점수(PageSpeed Insights)를 지키면서도, 티스토리 사이드바에 딱 맞는 고정 광고를 넣는 방법을 알려드릴게요. 블로그 수익을 늘리는 데 꽤 쏠쏠한 팁이 될 거예요.
사이드 배너 만들 때 속도 최적화가 중요한 이유
블로그로 수익을 내려면 광고를 잘 보여주는 것도 중요하지만, 사이트가 얼마나 빨리 뜨는지도 정말 중요해요. 우리가 흔히 쓰는 반응형 광고 코드는 모바일 환경에서도 보이지 않는 리소스를 계속 잡아먹거든요. 이게 쌓이면 에러가 생기고 사이트 성능 점수가 뚝 떨어지는 원인이 돼요.
이걸 해결하려면 ‘조건부 자바스크립트’를 써서 화면이 넓은 PC(1300px 이상)에서만 광고가 뜨도록 설정해 주는 게 좋아요. 이렇게 하면 메모리 낭비도 줄이고, 검색 로봇에게 “이 사이트는 최적화가 참 잘 되어 있네”라는 인상을 줄 수 있거든요. 결과적으로 검색 엔진 상위 노출(SEO)에도 훨씬 유리해지는 거죠.
이렇게 설정하면 불필요한 스크립트가 실행되지 않아서 Core Web Vitals 지표가 좋아지고, 콘솔 창에 뜨는 빨간 에러 메시지도 줄어들어서 검색 로봇이 내 글을 더 잘 수집해 가요. 게다가 PC 화면에 딱 맞춰서 보여주니 클릭률도 자연스럽게 올라가고요.
광고 플랫폼별 설정과 위치 잡는 꿀팁
광고 위치는 독자가 글을 읽는 걸 방해하지 않으면서 눈에 잘 띄는 ‘좌우 고정 배너’ 형태가 가장 좋아요. 플랫폼별로 조금씩 설정이 다른데, 간단히 정리해 드릴게요.
우선 카카오 애드핏은 160×600 사이즈(스카이스크래퍼)를 추천하고, 구글 애드센스는 반응형이나 160×600 고정형 모두 괜찮아요. 중요한 건 위치를 잡는 방법인데요. 브라우저 가로 폭과 본문 영역 넓이를 계산해서 `margin` 값을 잘 조절해야 해요. 본인 블로그 스킨에 맞춰서 아래 수치를 참고해 수정해 보세요.
오른쪽 고정 배너는 `right: 50%`를 설정한 뒤 `margin-right` 값을 조절해서 본문 우측에 딱 붙이세요. 반대로 왼쪽 고정 배너는 `left: 50%`를 주고 `margin-left` 값을 활용해서 왼쪽 여백에 배치하면 깔끔하게 들어갑니다.
광고 스크립트 적용하고 모바일 로딩 막기
티스토리 플러그인 중에 ‘HTML 배너 출력’을 사용하면 관리가 편해요. 아래 코드를 복사해서 넣으면 되는데, 이 코드는 화면 너비가 1300px보다 작을 때는 광고를 아예 불러오지 않아서 리소스를 아껴줍니다.
<style>
#floatLeft { position: absolute; width: 160px; right: 50%; top: 60px; margin-right: 470px; z-index: 9999; transform: translateX(-50%); }
#floatRight { position: absolute; width: 160px; left: 50%; margin-left: 650px; top: 60px; z-index: 9999; transform: translateX(-50%); }
@media (max-width: 1300px) { #floatLeft, #floatRight { display: none !important; } }
</style>
<div id="floatLeft">
<script>
if (window.innerWidth > 1300) {
// 여기에 카카오 애드핏이나 왼쪽 광고 코드를 넣으세요
}
</script>
</div>
<div id="floatRight">
<script>
if (window.innerWidth > 1300) {
var floatRightElement = document.querySelector('#floatRight');
var adArea = document.createElement('ins');
adArea.className = 'adsbygoogle';
adArea.style.display = 'block';
adArea.setAttribute('data-ad-client', 'ca-pub-본인코드');
adArea.setAttribute('data-ad-slot', '본인광고슬롯코드');
adArea.setAttribute('data-ad-format', 'auto');
adArea.setAttribute('data-full-width-responsive', 'true');
floatRightElement.appendChild(adArea);
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
</div>자주 묻는 질문 정리해드려요
Q1. 모바일에서 사이드 배너가 안 보이면 수익이 줄어들지 않을까요?
오히려 그 반대일 수 있어요. 모바일 화면에서 사이드바는 보통 맨 아래로 밀리거나 본문을 가려서 가독성을 해치거든요. 차라리 모바일에서는 상단이나 하단 전용 광고에 집중하고, 사이드 배너는 과감히 빼서 페이지 속도를 높이는 게 전체적인 수익과 SEO에 훨씬 유리해요.
Q2. 구글 애드센스 정책 위반은 아닌가요?
콘텐츠를 가리거나 억지로 클릭을 유도하는 게 아니라면 사이드 고정 광고 자체는 문제없어요. 다만, 본문 글자와 광고 사이에 충분한 간격을 둬서 실수로 클릭(부정 클릭)하는 일이 없도록 신경 써주셔야 해요.
Q3. 티스토리 레일 광고랑은 뭐가 다른가요?
레일 광고는 구글이 자동으로 띄워주는 고정 광고지만, 위에서 알려드린 코드는 내가 직접 위치나 실행 조건을 조절할 수 있다는 장점이 있어요. 사이트 속도 최적화 측면에서 훨씬 유연하죠.
구글 광고 코드를 활용한 사이드 배너는 수익을 높이는 좋은 방법이지만, 사이트 속도를 고려하지 않고 무작정 달면 오히려 독이 될 수 있어요. 오늘 알려드린 스크립트를 활용해서 모바일 리소스는 아끼고, PC 사용자에게만 깔끔하게 광고를 보여줘 보세요.
길게 보면 사용자 경험(UX)을 먼저 생각하는 광고 배치가 검색 엔진의 신뢰를 얻고, 트래픽이 늘어나는 선순환을 만들어 줄 거예요. 단순히 광고 하나 더 다는 것보다, 검색 로봇과 방문자 모두가 만족할 수 있는 세팅을 하는 게 진짜 중요하답니다.
