애드센스 height: auto !important; 강제 삽입 문제

아이돌 주접이나 쓰는 블로그인데 오, 해볼까? 하고 신청한 애드센스가 하루 만에 승인되었습니다. 글이 20개가 넘어야 한다던가 사진 많으면 안 된다던가 다양한 조언이 있던데 딱히 그런 것도 아닌가 봐요. 여러분도 두려워하지 말고 냅다 신청해보세요!

하여튼 떨리는 마음으로 광고를 넣어봤는데요. 문제는 광고를 넣을 때마다 블로그 스킨이 망가진다는 점입니다. 제 스킨은 height를 100%로 지정해두었는데 이게 광고를 넣으면 자꾸 깨지더라고요. 개발자모드로 살펴보니까 광고를 넣은 곳에 있는 모든 <div>에 'height: auto !important;'라는 스타일이 적용되어 있었습니다.

나를 고통스럽게 하는 height: auto !important;와 자매품 min-height: 0px !important;

짜증 나서 여기저기 검색을 해봤는데요.

이 문제는 애드센스 반응형 광고에서만 나타난다고 합니다. 구글에서 반응형 광고가 들어가는 자리의 스타일을 강제로 변경하는 거예요. 이 이유는 구글 애드센스 고객센터(링크)에 다음과 같이 설명되어 있습니다.

반응형 광고는 일부 기기나 브라우저에서 높이가 더 커질 수 있으므로 높이가 고정되거나 제한된 컨테이너 안에 게재해서는 안 됩니다.

html 코드에 !important로 다시 넣어보기도 하고 인터넷에 검색해서 나오는 방법도 해봤지만 없어지지 않더라고요. js는 이미 시도하신 분들이 안 된다고 하길래 어차피 이해도 안 되는 거 포기했습니다.

나름 싸이월드처럼 꾸미겠다고 스킨 바꾼건데 이제 와서 다른 걸로 바꾸기는 아깝잖아요... 포스타입에 쓰려다가 싸이월드처럼 만들려고 티스토리에 쓰는 건데ㅠ

결국 찾은 해결방법은 반응형을 포기하고 고정형 광고를 사용하거나 스킨을 아예 바꾸는 것입니다.
근본적인 원인을 해결할 수는 없고 그걸 피해가야 해요.

첫 번째, 고정형 광고 넣기

고정형 광고는 반응형과 다르게 정해진 크기로 광고가 나옵니다.

티스토리 블로그관리의 [수익] 탭에서 반응형이 아닌 고정형 광고가 나오게 할 수는 있지만 반응형처럼 어느 화면에서나 너비가 꽉 차게 나오면 좋겠더라고요. 그래서 나름의 꼼수를 부렸습니다.

우선 티스토리 블로그관리의 [수익]에서 제공하는 광고는 다 끄고요.

구글 애드센스의 [광고 - 광고 단위 기준]에서 [디스플레이 광고]를 클릭해  적당한 크기의 광고 단위를 만들고, 코드를 복사해서 티스토리 스킨 HTML에 직접 붙여 넣습니다.

그리고 코드에서 width를 100%로 바꾸면 됩니다. 아래 코드는 예시입니다.

<ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:240px"
     data-ad-client="애드센스아이디"
     data-ad-slot="광고단위아이디"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

그럼 반응형처럼 너비가 꽉 차게 나와요. 화면 크기에 따라 다르게 나옵니다.

이 고정형 광고의 단점은 광고 단위 만들 때 유의사항으로 나옵니다.

'고정된 크기의 광고 단위를 사용하면 게재 가능한 광고 수가 제한될 수 있으며, 따라서 반응형 광고 단위를 사용할 경우보다 수익이 줄어들 수 있습니다.'

두 번째 방법, 레이아웃에 height 값이 없는 스킨 사용하기

height: auto 가 적용되더라도 아무런 영향을 받지 않는 스킨을 사용하는 것입니다. 아마 티스토리에서 기본으로 제공하는 스킨은 대부분 영향을 안 받고요. 사용자 스킨만 주의하시면 됩니다.

제 블로그는 원래 height를 브라우저 창 크기에 맞춰서 100%가 되도록 만들었는데요. 결국 이것저것 만져서 적용했던 height 값을 모두 뺐어요. 좀 귀찮았지만 수정하고 나니 모바일에서 더 시원하게 볼 수 있어서 만족하고 있습니다.

하여튼 결론.

'height: auto !important'로 고통받고 있다면…

---

1. 고정형 광고 쓰기
2. 반응형 광고에 최적화된 스킨으로 바꾸기(높이 지정만 안 했다면 상관없음.)
3. 애드센스가 아닌 다른 광고 플랫폼 사용하기

---

첫 번째보다는 두 번째 방법을 추천드려요. 길게 보면 반응형 광고를 사용하는 게 편하니까요.

제가 다른 광고 플랫폼을 써본 적이 없어서 같은 문제가 있는지 잘 모르겠습니다. 애드센스 쓰는 분들이 가장 많았는데 요즘 들어 카카오애드핏을 쓰는 분들이 늘어난 것 같아요. 광고 플랫폼의 정책이나 다른 분 사용 후기 보면서 결정하시길 바랍니다.