[애드센스/티스토리] 반응형 스킨 너비에 따라 반응형 광고 위치와 크기 조절하기

 이번에 반응형 스킨(Fastboot v1.6.1)을 적용하여 풀 리뉴얼을 시도하였다. 처음엔 본인도 반응형 스킨 적용에 미온적이었다. 하지만 하나둘 따져보니 바꿔야하는 이유가 더 많아져 갔다. 반응형 스킨이 뭐길래 하나 둘씩 반응형스킨으로 갈아탈까? 

 작은 모바일, 즉 스마트폰 같은 경우는 웹페이지 접속 시 모바일 페이지로 리다이렉팅을 한다고 한다. 고로 한 티스토리 페이지가 두 개의 주소를 갖는다는 것. 검색 등에서 불리할 수 밖에 없다고 한다. 또한 태블릿 기기에서는 데스크톱 사이즈로 웹페이지가 그대로 펼쳐지게 되며, 작은 화면에 높은 해상도로 지원되다보니 사람이 보기 힘든 글자 크기로 이루어진 페이지가 등장한다. 보기 불편하면 웹페이지 이탈율이 높아질수밖에..

[새로운 흐름, 반응형 스킨]

 다양한 화면 크기를 가진 디바이스 들, 4인치 스마트폰부터 7~10인치 태블릿, 11~15인치 랩탑, 그 이상의 데스크탑 등 유입할 수 있는 장비는 갈수록 다양해지는데 하나의 모양 웹페이지와 모바일페이지로 대응하기엔 턱없이 부족하다. 이러한 다양한 화면 크기에 맞춰 자동으로 보기 편한 웹페이지 화면을 제공해주는 반응형 스킨의 등장은 필연적이다. 티스토리도 반응형 스킨을 장려하는 추세로 가고있다.

>>Fastboot 1.6.1 다운로드와 설치: Readiz님의 블로그

[반응형 광고와 애드센스 정책]

 반응형 스킨을 적용하여 웹페이지가 화면 크기에 따라 변하며 최적의 상태를 만들어 주게 되었다. 근데 애드센스 광고는?! 만약 고정형 광고 728*90를 설치해뒀다고 하자. 가로크기가 720px이하로 줄어들었다면? 광고는 잘려 표시된다. 애드센스 정책에 위반~

 그렇기에 구글 애드센스에서는 반응형 스킨에 따라 같이 크기가 조절되는 반응형 광고를 적극 권장한다. 자신이 알아서 최적의 사이즈로 줄어들게 되어있다. 예를 들면 728*90이 336*250으로, 더 작아지면 320*100으로 줄어든다.

[화면 너비에 따라 반응형 광고 크기 조절하기]

 본인은 본문우상단, 본문중간, 사이드바 이렇게 3개의 광고를 게재 중이다. 반응형 광고라도 이렇게 본인이 원하는 위치 원하는 사이즈로 조절하는 고급기능이 있다. 이 경우 html 소스를 조금 수정해야 한다. 애드센스에서 생성된 광고 코드 위아래에 다음과 같이 수정한다.

<div class = "adsense" style = "text-align:center; margin: 10px 10px 10px 10px;">    <style>      .upperadslot{ width: 320px; height: 100px;}      @media(min-width: 400px) {.upperadslot{ width:300px; height:250;}}      @media(min-width: 600px) {.upperadslot{ width:300px; height:250;}}      @media(min-width: 768px) {.upperadslot{ width:336px; height:280;}}      @media(min-width: 1200px) {.upperadslot{ width:728px; height:90;}}    </style>    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>    <!-- 반응형 상단 광고 -->    <ins class="adsbygoogle upperadslot"      style="display:inline-block"      data-ad-client="ca-pub-xxxxx"      data-ad-slot="xxxxxx"      data-ad-format="auto"></ins>    <script>      (adsbygoogle = window.adsbygoogle || []).push({});    </script>   </div>

[구글의 모바일 정책과 반응형 광고]

 구글은 모바일 페이지의 경우 첫 화면 상단에 320*50 혹은 320*100 크기의 광고 외에는 허가하지 않는다. 반응형 스킨을 사용한다고 해서 모바일 페이지 규정을 피해갈 수 있는 것은 아닌 것 같다. 애초에 정책 자체가 첫 화면에 게재된 과도한 크기의 광고가 콘텐츠를 밀어내기 때문에 규제를 하고있다. 지금은 직사각형 336*250 크기를 상단에 단다고 해도 애드센스의 경고가 날아오는 순간 복잡한 상황이 벌어지기에 애초에 조심하는게 낫다. 위의 코드처럼 작은 모바일 기기 사이즈에서는 320*100 크기를 추천한다.

반응형 스킨과 광고 적용. 위에서부터 시계방향으로 PC/태블릿/모바일

 

[화면 너비에 따라 광고 크기 및 위치까지 조절하기]

 

작은 모바일에서는 중간에, 태블릿 사이즈에서는 우측 상단에, PC에서는 다시 중간에 광고를 게재하고 싶을 때가 있다. 이 때는 위에서 작성한 코드에서 살짝만 수정을 가하면 된다. 

<div class = "adsense">    <style>      .upperadslot{ text-align:center; width: 320px; height: 100px;}      @media(min-width: 400px) {.upperadslot{ text-align:center; width:300px; height:250;}}      @media(min-width: 600px) {.upperadslot{ float:right; width:300px; height:250;}}      @media(min-width: 768px) {.upperadslot{ float:right; width:336px; height:280;}}      @media(min-width: 1200px) {.upperadslot{ text-align:center; width:728px; height:90;}}    </style>    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>    <!-- 반응형 상단 광고 -->    <ins class="adsbygoogle upperadslot"      style="display:inline-block"      data-ad-client="ca-pub-xxxxx"      data-ad-slot="xxxxxxx"      data-ad-format="auto"></ins>    <script>      (adsbygoogle = window.adsbygoogle || []).push({});    </script>   </div>

Posted by 사과머리남편, 샤그레이

이 포스트가 마음에 드신다면 더 많은 사람들과 공유하도록 

공감 부탁드립니다