반응형 웹디자인이 적용된 티스토리 블로그에 구글 반응형 애드센스 적용

카테고리 : 티스토리 2013. 10. 28. 08:40

어제 "티스토리와 애드센스, 모바일에서 최적화"라는 글로 포스팅 했는데, 저녁에 만난 친구가 이해하기 힘들었다고 해서 이미지를 포함해서 다시 포스팅해요.

기본적으로 반응형 웹 디자인이라는 것을 이해하셔야 해요. 기존의 티스토리 블로그에 글을 발행하면 웹이랑 모바일에서의 스킨 모양과 도메인 주소가 다르다는 것을 전제해놓고, 반응형 웹 디자인을 이용하면 동일한 인터넷 주소하에 스킨 모양이 거의 비슷해서 컨텐츠가 동일성을 가지면서 표현된다는 장점이 있어요. 티스토리에서 기술적으로 구현해주니까 웹에서만 글을 써도 모바일에서 알아서 표현되는 것이지, 만약 각각 독립 도메인을 사용해서 만든 것이라면 각각 글을 올려야 하는 불편함이 있어요.

그리고 티스토리 블로그에 반응형 웹 디자인을 적용시키지 않았다면, 본문 안에 애드센스 소스 코드를 삽입하지 않고는 모바일에서는 애드센스를 보여줄 방법이 없어요. 그래서 이번에 티스토리에서 애드센스 플러그인을 제공해서 모바일 상, 하단에 막대 배너(320px * 50px )를 삽입할 수 있도록 서비스를 개편하였어요.

그런데 늘 우리는 320px * 50px 보다는 수익성이 높은 300px * 250px 광고 단위를 가장 눈에 띄는 곳에 삽입하고 싶죠. 여기서 현 상황에서의 티스토리의 불편함이 나오게 되죠. 물론 그 불편함을 자신의 노력으로 본문 안에 삽입하는 것은 별론으로 하고요.

그런데, 반응형 웹 디자인으로 바꾸고 나면, 본문에 서식으로 소스 코드 삽입하는 것은 없어요. CSS로 외부 스킨에서 한번만 작업하면 되거든요.

그리고 반응형 웹 디자인이 적용된 티스토리 블로그로 만들면 구글 애드센스 광고 단위 자체도 반응형으로 변경할 수 있도록 구글에서 베타 서비스로 제공하고 있어요. 이 점이 오늘 설명하려는 가장 중요한 점이에요.

2013년 10월 29일 플로팅 광고 노출 방식이 구글 애드센스 정책 위반이 될 수 있다는 정보가 있어서, 모바일에서의 광고 단위를 조금씩 바꾸었어요. 아래 설명에 사용한 이미지가 사실과 조금 다를 수 있어요. 그러나 그 의미는 전달되리라고 봅니다.

**(1) 336px * 280px → 180px * 150px 광고 단위로 변경하기**

PC에서 본 티스토리 블로그 중 상단 일부분이에요. 본문 상단 오른쪽에 336px * 280px 광고 단위를 적용하였어요. 300px * 250px 이랑 최근에 가장 인기 있는 광고이죠. 336px * 280px이 더 수익이 좋다는 구글측의 의견대로 저도 336px * 280px 으로 적용하였어요. 이것을 반응형 웹 디자인을 적용하여 모바일에서 본다면...

모바일에서는 위와 같은 모습으로 나타나요. 본문 상단 오른쪽에 336px * 280px 에서 180px * 150px 으로 작은 크기의 광고 단위로 바뀐 것을 알 수 있어요. 반응형 웹 디자인 으로 변경한다고 해서 광고 자체가 줄어들지는 않아요. 제가 구글 광고 자체를 작은 크기로 바꾸었어요.

여기서 여러분의 의문점 하나가, 300px * 250px 처럼 인기있는 광고 단위를 왜 사용하지 않고 수익성이 낮은 180px * 150px 광고 단위를 게시했느냐 생각하실 수도 있어요. 저도 300px * 250px 광고 단위를 사용하고 싶지만, 앞으로는 구글 애드센스 정책에 위배될 가능성이 많아요.

제 스마트폰이 삼성 갤럭시 노트2이에요. 생각보다 화면이 큰 스마트폰이죠. 그런데, 300px * 250px 을 사용하면 로고, 제목, 그리고 광고만 보일 가능성이 있어요. 본문 내용이 보이지 않게 되죠.

그래서 저는 180px * 150px 광고 단위를 사용해서 왼쪽에 초록색으로 칠한 본문 부분이 스마트폰 전체에서 상당 부분 노출 되도록 하고 있어요. 이제까지 300px * 250px을 본문 제일 위에 배치하여도 제재를 당하지 않았다는 생각은 앞으로는 하지 않으시는 것이 좋아요. 벌써 여름 이후 발빠르게 많은 분들이 티스토리 제공 플러그인을 사용하거나 반응형 웹 디자인으로 바꾸고 계세요. 제재 당한 후에 억울해하지 마시고, 지금 조치를 취하세요.

여담으로 320px * 50px 막대 배너를 깔끔한 모바일 환경을 위해 포기하냐 아니면 적절한 대안을 찾을 것인가에 대한 판단에서는 모바일 하단에 320px * 50px 있고, 로고, 메뉴바, 제목, 본문으로 내려오는 과정에 중간에 320px * 50px 막대 배너가 시선과 글 읽는 사람에게 불편하게 느껴질 수 있기 때문에, 자연스러운 글 읽기가 가능하도록 단가가 낮아도 180px * 150px 광고 단위를 사용하였어요. 그리고 광고 효과도 괜찮을 것 같고요. 180px * 150px 광고 단위는 텍스트 위주가 많아서 본문과 일치하는 광고도 많고, 이미지 보다는 눈에 덜 거슬리는 것 같아요.

**(2) 728px * 90px → 300px * 250px 광고 단위로 변경하기**

그 다음으로 고민한 것이 본문 하단의 광고였어요. 300px * 250px 광고를 사용하고 싶었지만, 전체 디자인 통일에 방해가 되는 것 같았어요. 그래서 728px * 90px 이라는 막대 배너들 사이에서는 인기 높은 광고 단위를 사용하였어요. 단가도 높고 보기에도 좋고... 그래서 원래 660px의 본문을 이번에 728px로 바꾸었어요. 그런데 잘 보세요. 이 광고 단위가 또...

모바일로 오게 되면... 여행 카테고리의 다른글과 태그 사이에 300px * 250px 광고로 바뀌어서 보기 좋게 들어가 있어요. 우리가 모바일 상단에 그렇게 사용하고 싶던 광고를 이 곳에서 사용하게 되네요.

** 설명은 위와 같이 하였지만, 실제 속 마음은 모바일에서는 제일 상단에 300px * 250px 을 사용하지 못하므로, 모바일 부분에서 본문과 사이드바에서 가장 먼저 나올 수 있는 본문 끝에 300px * 250px 을 사용하기로 마음먹고, PC 데스크 탑에서 사용할 수 있는 광고 단위를 찾게 되었어요. 똑같은 300px * 250px을 사용할 수도 있었지만, 위에서 설명한 디자인 이유로 728px * 90px 광고 단위에서 적절하게 타협하게 된 것이에요. **

구글 애드센스 도움말에서도 300px * 250px 광고는 모바일에서는 본문 중간이나 끝에 넣도록 추천하고 있네요. 만일 반응형 웹 디자인이 아니라면 모바일에서는 외부 스킨 부분이라서 광고가 나타나지 않겠죠. 그리고 구글 애드센스도 반응형으로 하지 않으면 728px * 90px 광고가 그대로 사용되면서 이 광고의 오른쪽 반 정도가 안 보이게 되는데, 이것 또한 구글 애드센스 정책 위반이에요.

제가 최근 부트스트랩으로 반응형 웹 디자인으로 옮긴 티스토리 블로그를 몇개 봤는데, 구글 애드센스 자체는 반응형으로 안 만들었더군요. 광고의 일정 부분이 짤려서 안 보이면 정책 위반이에요.

**(3) 300px * 600px → 320px * 50px 광고 단위로 변경하기**

마지막 세번째 광고 단위는 300px * 600px 이에요. 300px * 250px은 데스크탑이랑 모바일에서 모두 입찰 경쟁으로 고수익 단가의 이익도 있지만, 저는 300px * 600px의 디자인들이 광고 이미지로서도 완성도가 높아서 덜 거슬리면서도 뭔가 본문 내용과 어울리는 이미지 같은 느낌도 주더군요. 그래서 수익이 어느 정도 비슷하다면 300px * 600px을 사용하려고 해요.

300px * 600px이 사용된 곳이 페이스북 페이지와 rss 피드 사이에요. 그런데 모바일에서는....

아무리 찾아봐도 300px * 600px 광고 단위는 없고, 320px * 50px 막대 배너만 있어요. 위 이미지에서는 위의 광고 단위를 rss 피드 밑으로만 옮긴 것 같지만, 실제 모바일에서 보시면 첫 화면 제일 하단에서부터 계속 고정해서 따라 내려오고 있어요. 그러니까 페이스북 페이지 밑에 고정 시킨 것이 아니라, 모바일 화면 전체의 제일 밑 부분으로 옮겨서 고정시킨 것이에요.

이렇게 하면 320px * 50px 단위는 모바일 본문을 읽고, 사이드바를 보는 동안에도 계속 노출되게 되는 거죠.