수학방

간만에 애드센스 광고 팁입니다.

스킨을 반응형으로 바꾸면서 광고도 반응형으로 바꿨는데 그동안 사용하던 반응형 광고가 여러 기기에서 보여지는 모습이 별로 효율적이지 않은 것 같아 고민 끝에 새로운 형식의 반응형 광고로 바꾸기로 했어요. 그러면서 몇 가지 방법을 구상하다가 정책 위반일지 몰라서 망설였는데, 애드센스에 문의하고 답변을 받은 결과를 공유합니다.

되게 특별할 것까지는 없지만, 며칠 사용해보니 효과가 있는 것 같네요.

애드센스 반응형 광고 단위 사용 팁

반응형 애드센스는 두 가지 방식이 있는데, 하나는 스마트 크기 조정, 다른 하나는 고급(코드 수정)이에요.

고급(코드 수정)은 블로거가 기기 화면의 크기별로 광고의 크기를 미리 정해놓고 특정한 크기의 화면에서는 정해진 크기의 광고를 보여주는 방식이고, 스마트 크기 조정은 광고가 들어있는 부모 요소의 크기를 알아내서 그에 맞는 크기의 광고를 애드센스가 결정해서 보여줍니다. 스마트 크기 조정이 사용하기에 편리하고 화면의 레이아웃에 잘 맞는 광고를 보여주죠.

애드센스 반응형 광고 노출되지 않게 하기에서 소개했던 반응형 애드센스를 숨기는 방법은 고급(코드 수정)에 대한 예제였습니다. 이 방법은 애드센스 도움말(https://support.google.com/adsense/answer/3543893?hl=ko)에 나와 있는 걸로 정책 위반이 아니에요.

모바일 기기에서는 클릭이 별로 없어서 수익이 많지 않으니까 숨기고 있었는데, 기기별로 광고의 크기를 잡아주려니 여간 불편한 게 아니더라고요. 그래서 광고의 크기를 자동으로 잡아주는 스마트 크기 조정을 사용하고 싶은데, 모바일에서 광고를 숨겨도 되는지 궁금하더라고요. 스마트 크기 조정에서도 고급(코드 수정)과 같은 방법으로 <style>을 이용해서 애드센스를 숨겨도 되는지 애드센스에 문의했더니 답변을 보내주었습니다.

안녕하세요 수학방님,
이메일을 보내 주셔서 감사합니다.
정책에 대한 최종적인 결정은 정책 팀에 의해서만 이뤄지므로 이에 대해서 명확한 답변을 드리기는 어렵다는 점 양해해 주시기 바랍니다.
하지만 보내주신 예를 살펴본 결과, 이는 반응형 광고에 해당하므로 스타일 태그를 활용하여 필요에 따라 광고 단위를 숨기는 방식으로 구현하셔도 문제가 없을 것으로 보입니다.
아무쪼록 답변이 도움이 되셨길 바랍니다. 이와 관련하여 다른 궁금한 사항이 있으신 경우에는 언제든지 본 이메일에 회신하여 문의해 주시기 바랍니다.
감사합니다.

Google 애드센스 팀
Google Inc.|애드센스 팀 |support.google.com/adsense |adsense.com

최종 판단은 정책팀에서 한다고 했지만, 문제가 없을 것 같다는 비교적(?) 긍정적인 답변이에요. 확답은 아니니 이 방법을 사용하실 분은 각자 알아서 잘 판단하세요.

사용법은 간단합니다. 반응형 애드센스의 두 가지 방식을 섞어서 쓰는 거예요. 스마트 크기 조정의 코드에 고급(코드 수정)의 <style>부분 일부를 넣는 거죠.

<style>
.adslot_1 { display:inline-block }
@media (max-width: 400px) { .adslot_1 { display: none; } }
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 광고 -->
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이렇게 코드를 넣으면 화면의 폭이 400px 이하일 때는 광고가 나오지 않고, 그 보다 더 클 때는 애드센스에서 자동으로 광고 크기를 맞춰 가장 알맞은 광고를 보여 줍니다. 혹시 광고가 숨겨지지 않는다면 애드센스 반응형 광고가 숨겨지지 않을 때 해결 방법을 참고하시기 바랍니다.

이미지 광고는 보통 300x250, 336x280인데, 스마트 크기 조정을 이용하면 327x280, 360x280 같은 광고도 나오네요. 몇 px차이 안 나지만 화면에 꽉찬 광고가 나오니 클릭률은 더 높아질 겁니다.

그리고 이미지 광고보다는 텍스트 광고에서 효과가 훨씬 더 좋을 것 같은 게 만약 화면의 폭이 600px이라고 치면 고급(코드 수정)에서는 468x60을 넣어야 하거든요. 그런데 스마트 조정은 600x60 광고가 나오는데 이건 468x60보다 공간도 크고 글자도 커서 눈에 확 들어옵니다. 클릭률이 당연히 높아지죠.

전체적으로 스마트 크기 조정이 고급(코드 수정)보다 효율이 높은 건 확실하니까 스마트 크기 조정을 사용해보세요. 단, 위에서 얘기했던 것처럼 스마트 광고 조정에서 광고를 숨기는 건 정책팀의 최종 판단이 아직 내려지지 않은 상황이므로 이건 본인이 결정하시고요.

함께 보면 좋은 글

애드센스 반응형 광고 노출되지 않게 하기
애드센스 반응형 광고가 숨겨지지 않을 때 해결 방법
애드센스 최적화 배치 방법, 히트맵(headtmap)
애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치
애드센스를 본문 상단 오른쪽에 넣기

전에 애드센스 반응형 광고 노출되지 않게 하기라는 글을 쓴 적이 있는데요. 애드센스 반응형 광고를 화면의 크기에 따라서 보이지 않게 하는 방법에 대한 소개였어요. 보통 애드센스 광고를 숨기는 건 정책위반인데, 이 방법은 애드센스에서 공식적으로 허용하는 숨기기였죠.

그런데 댓글에 이 방법이 통하지 않는다는 글을 남겨주셨습니다. 반응형 애드센스 모바일 상단! 이거 왜이렇죠? 애드센스 코드상의 문제는 없어보여서 뭔가 다른 곳에서 잘못되었나 보다하고 그냥 넘어갔는데, 실제 광고를 적용해보니 코드 상의 문제였네요. 그 해결방법을 공유합니다.

애드센스가 숨겨지지 않는 문제 해결

애드센스 광고가 제대로 숨겨지지 않는 건 인라인 css와 내부 <style>에 적용된 css의 우선순위때문이었어요. 자세한 건 아래에서 설명하기로 하고 일단은 해결방법부터 알아보죠.

아래는 애드센스에서 제공하는 반응형 광고의 코드와 도움말에 나오는 광고 코드를 숨기는 광고 코드를 비교한 그림입니다.

두 번째 그림에서 광고를 숨기는 가장 중요한 요소는 형광펜으로 칠해진 @media (max-width:400px) {.my_adslot {display:none}}이에요. 바로 광고를 숨기는 코드죠. 이게 제대로 작동하지 않는 게 이 글을 쓰게 된 원인이에요.

그 외에 형관펜과 빨간색 줄로 표시된 차이가 보이죠? <style>의 .my_adslot {}에는 display:inlie-block이 생겼고, <ins> 태그의 두 번째 줄에 있던 style="display:inline-block"이 없어졌죠? 여기까지 해야 광고가 제대로 숨겨지는 겁니다.

방법은 간단해요. 두 번째 그림에 빨간색으로 표시된 것처럼 <ins>에 있는 style="display:inline-block"을 <style>로 옮겨주는 거죠.

문제가 생긴 이유

CSS를 적용하는 방법은 세 가지가 있어요. 외부의 CSS 파일을 사용하는 방법, 내부에서 Style을 지정하는 방법, 태그 안에 인라인으로 CSS를 적용하는 방법이요.

첫 번째 방법은 css를 별도의 파일에 만들어놓고 html 문서의 처음에 이 파일의 주소를 입력하는 방법이에요. 티스토리의 스킨 편집에 보면 아래같은 문장이 있을 거예요.

<link rel="stylesheet" href="./style.css" media="screen" type="text/css">

두 번째 방법은 외부 파일이 아니라 html 문서의 처음에 직접 css를 적용하는 겁니다.

<style>
  p {margin: 10px 0}
  a {color:#00f}
  .adsense {border:solid 1px #ccc}
</style>

세 번째는 태그에 직접 인라인 CSS를 사용하는 거죠.

<p style="margin:10px 0">안녕하세요.</p>

세 가지 방법을 공통으로 적용할 수 있는데, 만약에 하나의 요소에 서로 다른 설정이 되어 있다면 어떻게 될까요? 그때는 인라인 CSS이 가장 우선시되고 그다음이 내부 CSS, 외부 CSS 순서예요.

위 애드센스 코드에서 가장 우선되는 코드는 <ins>안에 있는 인라인 CSS인 style="display:inline-block"이죠. 내부 CSS인 <style>의 @media ……… 에서 아무리 설정을 바꿔봐야 소용이 없어요. 그래서 인라인 CSS를 지워서 문제를 해결한 겁니다.

처음에 문제가 있다는 댓글을 봤을 때는 <style>에 있는 css만 고치면 된다고 생각하고 아래 부분의 <ins>에 또 css가 있을 거라고는 생각조차 못했죠. 그래서 그 원인을 도통 알 수가 없었어요. 가장 기본에서 생각하면 간단히 해결될 일인데 말이죠.

아무튼 이번 기회에 광고를 새로 정리했습니다.

함께 보면 좋은 글

애드센스 반응형 광고 노출되지 않게 하기
애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)

단비스님의 블로그 티스토리 애드센스 모바일,PC용 배치와 반응형 광고 단위를 스킨에 넣는 방법이라는 글 마지막 부분에 애드센스 반응형 광고의 가로세로 크기를 0으로 해서 광고가 노출되지 않도록 하는 방식에 대한 소개가 나와요. 애드센스 행아웃 진행하셨던 켈리님께 질문한 캡처 화면도 있고요.

이제까지 애드센스 광고를 숨기는 건 정책위반이라고 알고 있어서 어떤 경우든 광고를 숨기면 안 되는 줄 알았거든요.

애드센스는 확답이 아니라 애매하게 답변해서 블로거들이 혼란을 느끼는 경우가 많아서 확답을 듣고 싶었어요. 크기를 0으로 하는 방법이 광고를 숨기는 게 아닌지 애드센스에 문의했고 답변을 받았습니다.

결론은 광고를 숨기는 행위가 아닌 정당한 광고 구현 방식이라는 거지요.

광고가 노출되는데 안 보이는 게 숨기는 거고, 노출 자체가 안되는 건 광고 구현 방식이라는 거지요.

참고로 반응형 애드센스의 고급(코드 수정 필요)에서 크기를 0으로 해야지 그냥 스킨의 style.css에서 크기를 0으로 하는 걸 말하는 게 아니니까 주의하세요. 외부스타일 시트에서 반응형 광고의 크기를 설정하는 건 지원되지 않아요. style.css를 이용해서 상위 컨테이너의 크기를 0으로 만드는 건 광고는 노출되는데 숨기는 행위라서 정책위반일 가능성이 매우 높고요.

사실 이 블로그 유입량의 70%는 모바일이에요. 모바일 페이지 상단에 320x100을 노출하고 있지만 수익이 거의 없거든요. 그래서 수입도 얼마 되지 않아서 떼버리고 싶었는데 상단 광고가 모바일에서는 안 보이고 데스크톱에만 보이게 하는 방법을 찾지 못해서 그냥 내버려두고 있었거든요.

이제는 반응형 광고의 크기 제한을 통해서 노출을 금지하는 것이 정책위반이 아니라는 걸 확실히 알았으니 이 방법을 이용해서 모바일 상단 광고를 떼기로 했습니다.

데스크톱에서만 336x280이 노출되고 모바일 화면에서는 제 책 광고가 나오도록 했어요. (수학방 책이 나왔습니다.)

조금 다른 방법으로 활용할 수 있을 거예요.

일반적으로 데스크톱에서는 상단 2개가 수익이 가장 많은데, 모바일에서는 상단 1개밖에 사용할 수 없어서 고민하는 분들을 많이 봤거든요. 모바일 화면에서는 광고의 위치를 다른 곳으로 옮기는 스크립트를 사용하는 분도 있고요.

이제 간단히 데스크톱 상단에 애드센스 2개를 나오게 한 다음에 모바일 화면에서는 둘 중 하나의 크기를 0으로 만들어서 노출하지 않도록 하는 것도 가능하죠.

반응형 광고 단위가 아니면 사용할 수 없는 방법이긴 하지만 대세가 반응형 광고이니만큼 적절한 방법으로 적절한 곳에 사용해보세요.

함께 보면 좋은 글

애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)

오늘 신문에 [이슈분석] 윈도XP 지원 종료, 한 달 앞으로…제 2의 `y<sub>2</sub>K` 사태 오나라는 기사가 올라왔어요. 이제 XP 지원기간이 한 달밖에 남지 않았는데 준비가 부실하다는 거죠.

그래서 블로그 방문자 중에 XP 사용자가 얼마나 되는지 구글 애널리틱스로 살펴봤어요. 이런 거 볼 때 확실히 좋은 도구예요. 물론 네이버 애널리틱스로 확인할 수도 있는데 이건 항목을 바꾸면 지정한 날짜가 계속 바뀌는 문제가 있어서 잘 사용하지 않게 되더라고요.

반응형 스킨으로 바꾸기 전에 한 번 확인해 본 적이 있는데 그때는 운영체제보다는 IE 버전이 중요했던지라 대충 보고 넘어갔거든요. 이번에는 운영체제와 IE 버전을 조금 더 자세히 들여다봤어요.

Windows XP 사용자 비율

방문자들의 운영체제를 본 건데 안드로이드가 66%, iOS가 7%나 되네요. 모바일 유입이 70%가 넘어요. 이에 비해 Windows의 비율은 26%를 겨우 넘었어요.

Windos 사용자 비율을 조금 더 자세히 살펴보죠. Windows 7이 가장 많고 그다음이 바로 문제의(?) XP가 24%로 2위예요. 대부분의 데스크탑에서 Windows를 사용한다는 걸 고려해보면 컴퓨터 사용자의 24%가 Windows XP를 사용한다고 해석할 수 있어요. 상당히 높은 비율이죠.

모바일을 포함한 전체 사용자 중 Windows XP 사용자 비율을 따지면 6% 정도 되는군요.

이번에는 브라우저 버전이에요. 그런데 안드로이드 브라우저가 뭘 의미하는지 모르겠네요. 안드로이드 운영체제에 기본 설치된 브라우저를 말하는 것 같기는 해요. 그리고 크롬은 데스크탑에서 사용하는 크롬인지 모바일 앱 크롬인지 아니면 둘을 섞어놓은 건지 모르겠고요. 어차피 이번 보고서의 목적은 IE 사용자를 알아보는 거니까 별 의미가 없긴 하지만요. IE가 21% 예요.

IE를 조금 더 자세히 살펴봤어요. 8.0 사용자가 가장 많아요. 33%나 되죠. 7.0 사용자도 20%가 넘어요. 심지어 4.0 사용자도 있네요. 8.0은 전체 비율로 따지면 7%가 조금 넘어요. Windows XP에서 지원하는 가장 높은 버전이라고 치면 위에서 본 XP 사용자 6%보다 조금 높은 수치죠. 아마도 더 Windows 7, Windows 8 사용자 중 일부가 IE를 업데이트하지 않고 그냥 사용하는 가 봅니다.

그런데 IE 7.0이 높은 건 의외네요. 아마 본인이 사용해야 하는 어떤 프로그램이 7.0을 이용해야만 하는 경우가 있다던데 그런 경우일 것 같아요.

아직 Windows XP - IE 7, 8을 사용하는 분들이 많이 있다는 걸 직접 확인할 수 있어요.

지금 반응형스킨을 사용하고 있는데 IE 8 이하 버전에서는 원래 의도했던 대로 화면이 나오지 않죠. 이 때문에 반응형 스킨을 사용하기를 꺼리는 분들이 꽤 있어요. 저야 모바일 사용자가 많아서 반응형 스킨으로 바꿨지만 데스크탑 사용자를 고려한다면 XP - IE 7, 8 사용자가 많다는 사실을 봤을 때 반응형 스킨으로 바꾸는 건 무리가 있을 것 같아요.

사실 블로그를 운영하는 입장에서는 브라우저별로 지원하는 HTML 태그나 CSS 버전이 달라서 애를 먹는 경우도 많아요. 여러 가지를 모두 만족하는 블로그를 만든다는 게 엄청 어렵거든요.

꼭 필요한 경우가 아니라면 사용할 수 있는 가장 최신 버전의 운영체제와 브라우저를 이용해줬으면 하는 게 블로거로서의 입장이죠. 그럴 수 없다면 IE가 아닌 다른 브라우저의 최신 버전을 사용해줬으면 하는 바람도 있고요.

XP 사용자가 얼마나 줄어드는지 다음 달에 한 번 더 확인을 해봐야겠어요.

애드센스에 새로운 광고 단위가 생겼어요. "맞춤 광고 크기"라는 광고 단위인데 아직 베타라 사용을 권하지는 않고요. 기존에 있던 반응형 광고 단위에 새로운 방식의 코드가 추가되었는데 그걸 소개하려고 합니다.

이전의 반응형 광고 단위는 미디어쿼리를 이용해서 원래 있던 애드센스 광고 단위의 크기에 정확하게 맞도록 수동으로 직접 입력해야했었잖아요. 광고의 크기가 맞지 않으면 광고가 제대로 보이지 않았습니다. 이번에 새로 나온 광고 코드는 크기를 수정할 필요없이 그냥 두면 알아서 스스로 화면에 알맞은 광고를 보여줍니다.

잠깐 시험삼아 스킨에 넣어봤는데 괜찮을 것 같기도 하면서 문제도 있는 것 같아요.

애드센스 반응형 광고 단위 새로운 코드

원래 있던 반응형 광고의 코드예요.

빨간색으로 된 것처럼 광고 크기를 정확히 입력해줘야해서 사용하기가 불편했어요. 물론 처음에 한 번만 하면 되는 거지만 여러 기기의 화면에 맞게 min-width를 조정하는게 쉬운 게 아니거든요.

새로 나온 광고 코드는 "스마트 크기 조정(권장)'이라고 이름이 붙여져 있네요. 도움말의 설명에 따르면 화면 크기에 맞춰 광고 크기를 자동으로 조정해서 보여준다는 건데요.

예를 들어 너비가 30%인 <div>가 있고 광고 코드를 이 <div> 안에 삽입한 경우, 사용자 화면의 너비에 따라 애드센스 광고 크기가 자동으로 조정되어 게재됩니다. 너비가 1,024픽셀인 태블릿에서 표시되는 페이지에는 크기가 307x₂50인 광고가 게재되며, 너비가 1,680픽셀인 21인치 데스크톱 PC의 경우 크기가 504x60인 광고가 게재됩니다.

시험삼아 잠깐 넣어봤는데 이제까지 봤던 애드센스 광고 단위가 크기가 조금 다르더군요. 300x250, 336x280 처럼 고정되어 있는 게 아니라 화면 크기에 따라 조금 더 크거나 작은 광고가 나오네요.

data-ad-format="auto"라고 되어 있어 있는 곳의 설정에서 광고 단위의 크기를 결정할 기준점을 정할 수 있습니다. rectangle, horizontal, vertical 중 하나를 선택해도 되고 둘 이상을 조합해서 사용해도 되고요. 예를 들어 사이드바에 광고를 넣을 때는 data-ad-format="vertical,rectangle"을 이용하면 사이드바의 가로 길이에 맞춰 160x600, 300x600과 비슷한 크기의 광고가 나오겠지요.

본문 상단에 data-ad-format="auto"로 테스틀 해봤는데, 브라우저와 버전에 따라 광고 크기가 다르게 나오네요. PC에서는 728x90, 468x60 처럼 가로로 긴 광고가 나왔습니다. 모바일에서는 300x250, 336x280 같은 광고가 나오고요. vertical로 바꿔봤지만 320x100보다 큰 광고가 나왔습니다. 모바일 상단에서 사용하기에는 정책위반의 가능성이 있어 보이네요.

이 광고는 본문 안에 넣는 광고에 적합할 것 같습니다. 본문 안에 728x90을 넣는 경우가 있던데 모바일에서 보면 광고가 짤리니까 정책위반의 가능성이 있어요. 따라서 본문 안에 새로 나온 반응형 광고 코드를 넣는 게 정책 위반 가능성도 줄이면서 수입을 올릴 수 있는 기회가 될 것 같아요.

또, 본문의 가로 길이가 600px인 경우에는 468x60을 넣는 것보다는 새로운 반응형 광고 코드를 넣으면 550x60 이런 광고가 나올수도 있고요.

다만, 원래 있던 반응형 광고 코드에 비해 적용이 간단하긴 하지만 브라우저와 버전, 기기에 따른 광고 크기를 예측할 수 없다는 단점이 있으니까 주의해서 꼭 맞는 곳에 사용하세요.

그리고 며칠 전부터 새로운 애드센스 텍스트 광고 형식도 보이네요. 아마 테스트 중인가봐요.

함께 보면 좋은 글

애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)
애드센스 CPE? 확장형 광고

듀륏체리님께서 댓글에 tistory-spidersweb이라는 반응형 스킨이 있다는 내용을 적어주신 걸 보고 탐이 나서 몇 번 시도한 끝에 스킨을 바꿨습니다.

반응형 스킨을 사용하는 게 정말 어려울 거라고 생각했는데, 의외로 쉬웠어요. 그냥 그대로 쓰면 돼요. 안되는 건 그냥 포기하면 되니까요. 따지고 보면 굳이 필요한 게 아니거든요.  다음뷰 손가락같은 추천 위젯 넣기 어려워서 배경 그림 넣기 어려워서 반응형 스킨을 망설이던 분들에게는 바꿔보라고 적극 추천해드려요. 모바일이 대세가 된 지금에 별로 필요하지도 않은 것에 미련때문에 더 이상 미루지마세요. 그냥 가져다가 그대로 얻기만 하면 됩니다.

정 맘에 안들면 스킨 저장해뒀다가 클릭 한 번이면 바로 복구되니까 시험삼아 해보세요.

반응형 스킨

이번에 사용한 반응형 스킨은 Tistory skeleton이라는 스킨이에요. 다운로드도 받을 수 있고 사용법과 몇 가지 팁들이 다 모여 있어요.

지금까지 사용했던 스킨은 xhtml, css2로 된 스킨이라 수정을 하거나 추가하고 싶을 게 있을 때 별 어려움없이 바꿀 수 있었는데, 반응형 스킨은 css가 다르더라고요. 게다가 css 파일이 style.css와 bootstrap.css 두 군데로 나뉘어 있어서 더 복잡하고요.

반응형 스킨을 사용하되 바꾼지 얼마 안되는 현재 사용하는 스킨과 외형적으로는 똑같이 만들려고 했는데 실패했어요. 지금 사용하는 스킨은 본문의 넓이와 사이드바의 넓이, 그 간격 등을 px값으로 정확하게 지정해서 사용했는데 반응형 스킨은 그게 안되거든요. 얼추 됐다고 생각하고 테스트해보니 브라우저가 다르거나 해상도가 달라지면 레이아웃이 깨지는 문제가 있었어요.

사실은 지난 주에 계속 작업을 해도 이 문제가 해결되지 않는 바람에 그냥 포기하기로 했어요. 이거 하나 포기하니까 나머지는 술술 풀리더라고요.

본문 영역과 댓글 영역을 꾸미는 등의 내용은 기존의 것들을 복사, 붙여넣기해서 해결했습니다. class만 바꿨어요. 애드센스 광고도 화면의 가로 길이에 따라 변화하도록 반응형 광고로 새로 작성했고요. 되는 건 되게 하고 안되는 건 하지 말자라는 생각으로 하나씩 바꿔가니 지금의 모습이 되었네요.

반응형 스킨은 기존의 스킨에 비해 예쁘지 않아요. 하지만 꾸미던 것들이 사라지니 훨씬 더 깔끔해졌네요.

물론 아직도 해결하지 못한 것들이 있지요.

사이드바 왼쪽으로 옮기기
사이드바의 글 목록 앞에 bullet
사이드바 태그 목록을 가로로
하단의 페이지 영역 가운데 배치
기존에 본문에 직접 삽입했던 광고들

반응형 스킨 적용하고 가장 좋은 건 구글 웹분석도구의 통계를 모바일에서도 이용할 수 있다는 점이에요.

바꾼지 하루밖에 안되서 통계로서의 의미는 없지만 며칠 지나다 보면 쓸만한 통계가 될 거예요.

최근에 스킨과 애드센스 배치에 열중하면서 블로그에 수학 컨텐츠도 거의 올리지 못하고 있어요. 이번에 반응형 스킨으로 바꾼 다음에는 스킨에 대한 관심은 좀 꺼두고 자중해야 겠네요.

함께 보면 좋은 글

애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
블로그 왼쪽 사이드바의 효과
애드센스 최적화 배치 방법, 히트맵(headtmap)