구글 광고 코드를 활용한 사이드 배너 광고 제작 방법과 페이지 속도 최적화 방법을 공개합니다. 모바일 광고 로딩 차단을 통해 PageSpeed Insights 점수를 높이고, 티스토리 사이드바 고정 광고 스크립트를 사용하여 블로그 수익 개선을 달성하는 구체적인 방법을 확인하세요.
1. 사이드 배너 제작 시 성능 최적화가 필요한 이유
효율적인 수익형 블로그 운영을 위해서는 광고 노출만큼이나 웹사이트 로딩 속도가 중요합니다. 일반적으로 사용하는 반응형 광고 코드는 모바일 환경에서도 리소스를 소모하며, 보이지 않는 영역에서 에러를 발생시켜 Lighthouse 성능 점수를 하락시키는 원인이 됩니다.
이를 해결하기 위해 조건부 자바스크립트를 사용하여 데스크톱(1300px 이상)에서만 광고가 실행되도록 설정하면 메모리 낭비를 줄이고 검색 로봇에게 최적화된 사이트라는 인식을 심어줄 수 있습니다. 이는 결과적으로 검색 엔진 최적화(SEO) 순위 상승에 긍정적인 영향을 미칩니다.
- 성능 저하 방지: 불필요한 광고 스크립트 실행을 막아 Core Web Vitals 지표를 개선합니다.
- 에러 메시지 제거: 콘솔 창의 오류를 방지하여 검색 로봇의 수집 효율을 높입니다.
- 광고 시인성 확보: 페이지 해상도에 맞춘 위치 설정으로 광고 클릭률(CTR)을 극대화합니다.
2. 광고 플랫폼별 설정 및 위치 제어 방법
광고의 위치는 사용자의 콘텐츠 가독성을 방해하지 않는 선에서 좌우 고정 배너 형태로 배치하는 것이 좋습니다. 아래는 주요 광고 플랫폼별 설정 방식 비교입니다.
| 항목 | 카카오 애드핏 (Adfit) | 구글 애드센스 (AdSense) |
|---|---|---|
| 주요 설정값 | data-ad-unit (광고 단위 ID) | data-ad-client / data-ad-slot |
| 권장 규격 | 160×600 (스카이스크래퍼) | 반응형 또는 160×600 고정형 |
| 최적 위치 | 콘텐츠 왼쪽 외부 여백 | 콘텐츠 오른쪽 외부 여백 |
1 사이드바 고정 광고 위치 세부 조정 (CSS)
배너의 위치는 브라우저의 가로 폭과 콘텐츠 영역의 넓이를 계산하여 margin 값을 조정해야 합니다. 고정형 사이드 배너 제작 시 아래 수치를 참고하여 본인의 스킨에 맞춰 수정하세요.
- 오른쪽 고정:
right: 50%설정 후margin-right값을 조정하여 본문 우측에 밀착시킵니다. - 왼쪽 고정:
left: 50%설정 후margin-left값을 활용하여 본문 좌측 여백에 배치합니다.
3. 통합 광고 스크립트 및 적용 방법
티스토리 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
질문 1: 사이드 배너가 모바일에서 안 보이면 광고 수익이 줄어드나요?
답변: 사이드바 영역 자체가 모바일에서는 콘텐츠 하단으로 밀리거나 가독성을 해치기 때문에, 차라리 모바일 전용 상/하단 광고에 집중하고 사이드 배너는 제거하여 페이지 속도를 높이는 것이 전체적인 수익과 SEO에 유리합니다.
질문 2: 구글 애드센스 정책 위반 소지는 없나요?
답변: 콘텐츠를 가리거나 클릭을 유도하는 방식이 아니라면 사이드 고정 광고 자체는 허용됩니다. 다만, 본문 영역과 충분한 거리를 두어 부정 클릭이 발생하지 않도록 주의해야 합니다.
질문 3: 티스토리 레일 광고와 무엇이 다른가요?
답변: 레일 광고는 구글에서 자동으로 제공하는 고정형 광고인 반면, 위 코드는 사용자가 직접 위치와 실행 조건을 제어할 수 있어 사이트 성능 최적화에 더 효과적입니다.
구글 광고 코드를 활용한 사이드 배너는 수익 향상의 지름길이지만, 페이지 성능 검사 점수를 고려하지 않은 무분별한 사용은 독이 될 수 있습니다. 조건부 로딩 스크립트를 통해 모바일 리소스를 아끼고, 수동 광고 설정 방법을 익혀 데스크톱 사용자에게만 정밀하게 광고를 노출하세요.
장기적으로는 사용자 경험(UX)을 최우선으로 고려한 광고 배치가 검색 엔진의 신뢰를 얻고 트래픽 유입 증대로 이어지는 선순환 구조를 만들 것입니다.
단순히 광고를 넣는 것에 그치지 않고, 검색 로봇과 사용자 모두가 만족하는 기술적 최적화가 병행되어야 합니다.