이틀 전에 새로운 구글 애드센스 계정을 만들고, 어제 토요일 기념으로 티스토리 디자인을 또 한번 수정하였어요.
ㅋ. 여러분이 보시기엔 제 블로그가 별로 변한 것이 없어보이신다고요. 아니에요 모바일과 애드센스 포함까지 생각한다면 많이 바뀌었어요. 이번 디자인 변경은 티스토리 웹에서는 구글 애드센스 광고 때문에 본문 폭을 조금 넓히고, 메뉴바를 모바일(스마트폰)에서도 사용할 수 있도록 소스 코드를 수정하고, 사이드 바 정리하고, 로고를 삽입하는 등의 작업을 하였어요.
이번 작업을 하면서 가장 신경을 많이 쓴 부분은 구글 애드센스에요. 광고를 삽입하면서도 최대한 본문글을 읽는데 방해가 되지 않도록 하였어요. 이런 웹에서의 환경이 모바일에서도 똑같이 유지되도록 하였어요.
그래서 기존 티스토리 소스 코드에서 많이 손 본 부분이 반응형 웹 디자인과 관련된 CSS3 들 이었어요. 최근에 티스토리에서 모바일 웹 스킨 여부를 자신이 선택할 수 있도록 변경하였어요. 저는 며칠 전에 그 소식을 알았어요. 제가 좀 느렸나요? ㅋ 그래도 알고는 바로 모바일에 최적화되도록 작업 하였어요.
그래서 데스크탑(PC)에서의 이용 환경이 스마트폰에서도 그대로 적용되도록 하였어요. 일단 사진을 한 번 볼까요? 이 한장에 제가 하고픈 모든 말이 담겨 있어요. ^^
조금 전에 제 스마트폰에서 캡쳐한 이미지에요. 도메인 주소를 보시면 http://eonnow.kr/ 이죠. 네~. 웹이랑 스마트폰이랑 도메인 주소가 같아요. 모바일이라고 해서 여러분들처럼(http://m.naver.com/) 달라지지 않아요.
그리고, 기존 티스토리 모바일에서는 없던 제가 웹에서 사용하던 메뉴바를 달아놓았어요. 3단 메뉴바에요. 웹에서 사용하시던 그 방법 그대로 사용하시면 되요. 그 다음 본문은 같죠. 사진에는 없지만, 스크롤해서 내려가면 티스토리에서 내주는 모바일 웹 스킨과 달리, 전 제가 본문 사이드바에서 보여주고 싶은 부분만 선택하거나 더 추가해서 보여주고 있어요.
최근에 반응형 웹 디자인이 유행하면서 (제가 작년 초에 제 티스토리 블로그에 적용해서 보여 드렸지요), 티스토리 스킨 변경을 많이 하시고, 그 방법을 설명하는 블로그들도 많이 생긴 것 같아요. 트위터의 부트스트랩을 많이들 이용하시는 것 같은데.... 잘 배우셔서 한 번 적용해보세요. 장점이 많아요. 저는 그냥 제가 소스 코드 만들어서 고쳤어요.
반응형 웹 디자인 최대 장점이 웹과 모바일을 비슷한 환경을 만들거나 완전 다른 환경을 매우 쉽게 바꿀수 있다는 점이에요. 물론 CSS 소스 코드를 고칠 수 있다는 전제하에서요. 그 점이 애드센스 최적화에도 영향을 줄 수 있는 것 같아요.
위의 모바일 이미지를 보면 구글 애드센스 광고가 2개 보이시죠. 느낌이 오시나요? 애드센스 하시는 분들은 "느낌~ 아니까~" ㅋ
최근 구글 애드센스 정책상 320*250 광고 단위를 모바일 본문 최상단에서 사용하기 어렵게 되었어요. 만일 모바일에서 상단을 다 차지하는 기존 구글 광고 단위를 그대로 사용하면 본문 글이 보이지 않고 광고만 보이게 되므로 정책 위반으로 앞으로는 계정 폐지를 당할수 있어요. 저는 구글 정책 위반 아니죠. 본문 내용이 훨씬 많잖아요. 광고 단가는 조금 떨어지지만 모바일에서의 타협점이라고 볼 수 있죠. ㅋ 네~ 어떻게 했냐고요? 반응형 웹 디자인으로 구글 광고를 제 마음대로 바꾸었어요. 그리고 하단에 가시면 본문 끝에 또 광고가 나와요.
반응형 웹 디자인으로 변경하지 않고, 티스토리 자체에서 내주는 구글 애스센스 플러그인을 사용하면(물론 티스토리 모바일 웹 스킨을 사용한다는 전제에서) 상단과 하단에 막대 배너를 넣을 수 있어요. 가장 쉽게 적용할 수 있지만, 상단 막대 배너가 눈에 거슬리고, 하단은 본문 아래에서만 나오죠. 저처럼 하단 배너가 따라다니지 않아요.
모바일에서 3개, 웹에서 3개... 각각 서로 다른 광고 단위를 사용하였어요. 제 티스토리 블로그를 웹에서도 한번 보세요. 그리고 모바일과 동시에 비교해보세요. 구글 광고만요. 각각 그 크기 내지 위치가 다르다는 것을 알 수 있어요. 각 광고 단위를 각각 웹과 모바일에서 최적화되도록 하였어요. 각각의 광고 단위들은 모두 그 기기에서는 단가가 가장 높은 크기와 위치에요.
가장 선호하는 구글 애드센스 광고 단위를 사용하면서도, 로고, 메뉴바, 제목, 본문 글이 구글 광고에 방해받지 않고, 자연스럽게 밑으로 눈이 내려가는 것을 알 수 있어요. 보통 많이 사용하는 방법으로 본문 상단에 구글 애드센스 2개를 달면 제목과 본문이 갈라지면서 광고 자체를 점핑하는 경우가 많아요. 그래서 최근에는 상단 오른쪽에 1개만 다는 경우도 많은 것 같아요. 그렇다고 단가 낮은 광고 크기로 바꿀수도 없죠. 저는 기기에 따라 광고 크기를 바꾸어서 첫 본문글을 읽기 시작하면 오른쪽으로 자연스럽게 시선이 옮겨가면서 광고를 볼 수 있도록 만든거죠. 웹에서의 경험이 모바일에서도 똑같이 적용되는거죠.
블로그 글 읽는 분들을 위해서 최대한 본문 내용이 방해 받지 않고, 각각의 기기에 요즘 가장 인기 있는 최적화된 광고 단위와 선호하는 자리로 찾아 넣어놓았어요.
이번에 티스토리의 개편으로 구글 애드센스를 모바일에서도 좀 더 쉽게 적용할 수 있게 되었지만, 반응형 웹 디자인이라는 것을 조금 공부하면 티스토리 자체와 구글 애드센스를 자기 마음대로 조정할 수 있어요.
웹, 태블릿, 모바일 크게 3부분으로 나누면, 3개의 구글 애드센스를 가지고, 각각의 기기에 맞추어 9개의 최적화된 광고 단위로 바꿀수 있다는 점... 굉장한 매력 아닌가요? ^^
