수학방

사이드바를 옮기는 방법과 왼쪽 사이드바의 사용법에서 사이드바를 왼쪽으로 옮길 때 어떻게 하면 좋은지 개인적인 경험을 공유했어요. 간단히 요약하면 사이드바를 왼쪽에 놓고 카테고리와 최신글 목록을 잘 보이게 하면 방문당 페이지뷰가 높아진다 였지요. 이렇게 높아진 페이지뷰를 바탕으로 애드센스 노출 수를 증가시켜서 수입을 올린다는 내용이었습니다.

이번에는 페이지뷰를 높이는 전략이 아니고 광고 클릭률(ctr)을 높여서 애드센스 수입을 증가시키는 방법을 소개합니다. 블로거 중에서 이런 방법을 쓰는 분들을 한 번도 보지 못했어요. 방문자 입장에서는 사이트나 블로그의 광고 위치가 비슷하기 때문에 광고를 광고로 인식하는 경우가 많아요. 따라서 남들이 하지 않는 광고 배치를 사용하면 광고에 대한 거부감이 조금은 덜 할 수 있으니까 이런 배치를 선점(?)하는 것도 좋을 것 같네요.

왼쪽 사이드바의 애드센스 클릭률 높이는 방법

티스토리 사용자들이 상단에 300x250 또는 336x280를 두 개씩 배치하는 경우가 많은데, 왼쪽광고는 텍스트, 오른쪽 광고는 이미지 광고가 나올 때 수익이 제일 높습니다. 이걸 여기서도 활용하는 거예요.

애드센스 최적화 배치 방법, 히트맵(heat map)에서 소개했던 사이트에서 추천한 애드센스 배치에요. 왼쪽 사이드바에 160x600 스카이스크래퍼 광고를 넣고 본문 상단 왼쪽에 336x280 광고를 넣는 배치입니다. 3단 스킨인데, 2단 스킨이라도 광고 배치는 같아요.

색이 짙은 본문 상단의 광고가 색이 옅은 왼쪽 사이드바의 광고보다 클릭률이 높다는 뜻입니다.

왼쪽의 스카이스크래퍼 광고에는 텍스트 광고만 나오게 하세요. 왼쪽 사이드바의 광고에 텍스트만 나오게 하면 보는 사람은 광고가 아닌 것처럼 느낄 뿐 아니라 마치 카테고리나 메뉴처럼 착각하게 되는 효과(?)가 있어요. 이는 위치 때문에 생기는 효과라서 애드센스 광고를 컨텐츠와 유사하게 꾸미면 안되는 애드센스 정책에 위반되는 건 아니에요.

오른쪽에 있는 본문 상단의 광고는 이미지만 나오게 배치하세요. 이미지만 나오게 함으로써 진짜 광고처럼 보이게 하는 겁니다. 이미지 광고는 광고 자체로도 눈길을 많이 끄는데, 본문 상단이라는 위치때문에 눈길을 더 많이 끌게 되죠. 눈길을 많이 끄는 광고일수록 클릭이 많아지는 건 당연하죠. 또 왼쪽 사이드바의 텍스트 광고를 광고가 아닌 것처럼 보이게 하는 효과도 있습니다.

다만 보통 이미지 광고가 텍스트 광고보다 단가가 높기 때문에 텍스트 및 이미지 광고를 노출해도 단가가 높은 이미지 광고가 노출되는 숫자가 월등히 많습니다. 따라서 이미지 광고의 노출이 많은 분이라면 굳이 이미지 광고만 노출되도록 설정을 바꿀 필요는 없어 보이네요.

왼쪽 사이드바에 광고 넣을 때 주의할 점

애드센스에는 첫 번째 광고 단위의 중요성이라는 게 있어요. html 소스 상에서 가장 먼저 나오는 광고단위에 가장 높은 단가의 광고가 나오는 거죠. 가장 높은 단가의 광고가 나오니까 당연히 이 광고 단위의 클릭율이 높을수록 수입이 늘어나겠죠?

그런데 왼쪽 사이드바를 사용하다 보면 왼쪽 사이드바에 첫 번째 광고 단위가 노출될 수도 있습니다. 왼쪽 사이드바의 광고는 본문 상단의 광고보다 클릭이 떨어지기 때문에 수입에서 손해가 나는 것이죠.

이런 문제를 해결하기 위해서는 왼쪽 사이드바의 광고가 html 소스 상에서 본문 상단의 광고보다 더 늦게 나오도록 해야 합니다. 다행히 티스토리 대부분의 스킨에서는 사이드바를 왼쪽으로 옮기는 방법을 통해서 해결할 수 있습니다.

함께 보면 좋은 글

사이드바를 옮기는 방법과 왼쪽 사이드바의 사용법
애드센스 수입 향상 팁 - 텍스트 광고 편
블로그 왼쪽 사이드바의 효과
애드센스 최적화 배치 방법, 히트맵(heat map)
애드센스 수익 향상 팁 - A/B 테스트
애드센스를 본문 상단 오른쪽에 넣기

블로그 왼쪽 사이드바의 효과라는 글에서 오른쪽에 있던 사이드바를 왼쪽으로 옮긴 후기를 짤막하게 소개했었습니다. 그 후로 왼쪽 사이드바를 사용하는 블로그들을 보면 조금 더 관심을 가지고 스킨을 보게 되더라고요.

혹시 저처럼 왼쪽 사이드바를 사용하고 싶으신 분이 계실까 하여 사이드바를 옮기는 방법을 아주 간단히 소개할까 합니다. 그리고 왼쪽 사이드바를 사용하는 게 좋은 건지 어떤 경우에 왼쪽 사이드바를 사용해야 하는지에 대한 얘기도 해보고요.

지극히 개인적인 경험인지라 다른 분들에게는 적용이 안 될 수도 있으니까 한 번 걸러서 읽어주세요.

사이드바를 왼쪽으로 옮기는 방법

사이드바를 왼쪽으로 옮기는 방법은 간단합니다. 티스토리 관리자 - html/css 편집에서 두 가지만 수정하면 되니까요.

style.css의 #content에 float:right를 #sidebar에 float:left를 넣어주면 돼요. 백전백승님의 글에 따르면 이 방법으로 안되는 스킨도 일부 있으나 대부분의 스킨에서 사용하는 방법입니다.

사이드바를 옮긴 다음에 여백에도 신경을 써 줘야 합니다. 사이드바가 오른쪽에 있을 때는 본문과의 공간이 알맞게 있었는데, 왼쪽으로 옮기면서 간격이 너무 붙어버리는 경우가 생길 수 있는데요. 이는 위 그림에서 margin과 padding으로 조절할 수 있습니다. 잘 모르겠으면 margin:10px 사용하시되 숫자를 바꿔가면서 여백을 조절하면 됩니다.

왼쪽 사이드바를 어떻게 사용해야 하나?

결론을 말씀드리면 왼쪽 사이드바는 좋은 선택은 아닙니다. 대부분의 스킨이 오른쪽 사이드바를 사용하는 이유가 있겠죠. 네이버나 다음의 검색 결과도 오른쪽 사이드바를 사용하고 있습니다. 분명 오른쪽 사이드바가 훨씬 더 좋습니다.

하지만 제가 사이드바를 왼쪽으로 옮긴 이유는 간단합니다. 제는 블로그 사이드바를 왼쪽으로 옮긴 후에 방문당 페이지뷰가 늘었거든요.

위 그림은 웹페이지에서 사람들의 시선이 어디에 많이 가는지를 나타내는 그림입니다. 붉은색일수록 시선이 더 많이 가는 곳이에요.

웹페이지에 접속했을 때 사람들의 시선은 왼쪽 위에 가장 많이 분포합니다. 오른쪽에 사이드바를 둔 경우라면 본문 상단이니까 글의 제목과 첫 단락에 해당하겠죠. 그리고 왼쪽에서 오른쪽으로 글을 읽으니까 오른쪽에 사이드바로 시선이 갑니다.

하지만 저처럼 왼쪽에 사이드바가 있다면 페이지에 접속했을 때 제일 먼저 보이는 게 검색과 카테고리 부분입니다. 저는 이 카테고리 부분에 가장 많은 시선을 두게 함으로써 페이지뷰를 늘릴 수 있었던 거지요.

따라서 저처럼 주제를 가진 블로그의 경우에 왼쪽 사이드바를 사용하시라고 권하는 겁니다. 그렇지 않은 흔히 잡블로그라고 불리는 여러 주제를 다루는 블로그나 카테고리 숫자가 너무 많아서 주제를 파악하기 어려운 블로그는 카테고리를 봐도 클릭 욕구가 생기지 않으니까 왼쪽 사이드바는 별로 좋은 선택은 아니에요.

그리고 왼쪽 사이드바를 사용하여 페이지뷰를 늘리려면 사이드바의 폭을 넓게 사용하는 게 좋습니다. 사이드바의 폭이 좁으면 최신글 제목이 잘리거나 두 줄로 나누어지는데 폭이 넓으면 한 줄에 다 표시할 수 있거든요. 제목이 다 나와야 한  눈에 알아볼 수 있어서 클릭을 유도할 수 있습니다.

사이드바의 전략을 간단히 정리해보죠.

왼쪽 사이드바: 상단에 카테고리 -> 페이지뷰 증가 -> 애드센스 노출 수 증가
오른쪽 사이드바: 본문 상단의 광고에 시선 집중 -> 광고 클릭 증가, 자연스럽게 시선에 들어오는 사이드바의 콘텐츠

다음 글에서는 왼쪽 사이드바를 사용해서 페이지뷰를 높이는 전략이 아닌 애드센스 광고 수입을 직접 올리는 전략에 대해서 알아보죠.

함께 보면 좋은 글

블로그 왼쪽 사이드바의 효과
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)
애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치
애드센스 크기가 작은 광고가 나올 때
애드센스를 본문 상단 오른쪽에 넣기
애드센스 수익 향상 팁 - A/B 테스트

원래 오른쪽에 있던 사이드바를 왼쪽으로 옮겼습니다. 포털이나 대부분의 블로그의 사이드바가 오른쪽에 있어서 저도 그냥 그렇게 사용하고 있었어죠.

광고 배치를 애드센스 최적화 배치 도움되는 곳에서 소개했던 애드센스 도움말에 나오는 것처럼 해보려고 사이드바의 위치를 바꿨는데 효과가 괜찮아요.

사이드바를 왼쪽으로 옮기고 나서 가장 큰 변화는 방문당 페이지뷰가 늘었다는 겁니다. 약 1.8 정도에서 2.0으로 10% 정도 상승했어요. 왼쪽 사이드바가 오른쪽 사이드바보다 눈에 더 잘 들어오는 건 사실이고 사이드바에 카테고리나 최신글 목록이 있어서 이를 클릭하는 경우가 늘어나는 것으로 생각됩니다.

방문당 페이지뷰가 늘었으니 당연히 체류시간도 늘고 이탈률도 줄었어요.

가장 중요한 건 신규 방문자 비율이 줄었다는 겁니다. 신규 방문자의 비율이 줄었다는 건 재방문하는 사람의 비율이 늘었다는 뜻이죠. 즉, 제 블로그의 콘텐츠가 마음에 들어 다시 찾는 경우가 늘었다는 것으로 블로거로서는 굉장히 기분 좋은 내용이에요.

애드센스 수입 측면에서도 페이지뷰가 늘어나면서 광고 노출의 기회가 많아졌어요. 전체적으로 클릭 수가 조금 늘었습니다. 광고 노출이 많아진 만큼 클릭이 늘어난 건은 아니라서 하루 $1 정도의 수입이 늘었네요. 애드센스의 특성상 스킨을 수정한 직후에는 보통 수입이 떨어졌다가 시간이 지날수록 많아지는데 수입이 떨어지지 않고 늘었다는 것만 봐도 효과가 있다는 걸 알 수 있어요.

사이드바를 왼쪽에 둠으로써 페이지뷰를 늘릴 수 있었던 건 어쩌면 주제가 명확했기 때문이 아닌가 싶어요. 사이드바의 카테고리가 중고등수학이라는 하나의 주제를 가지고 있고, 최신글 목록에 나오는 내용도 본문과 비슷한 내용이라서 페이지뷰가 높아질 수 있었던 것 같습니다.

전에는 사이드바의 폭을 늘리거나 배경색, 링크색에만 신경을 썼는데, 위치 수정하는 것으로 더 큰 효과를 봤어요.

저처럼 주제가 뚜렷한 블로그라면 오른쪽 사이드바보다 왼쪽 사이드바가 효과가 좋을 듯싶네요.

블로그의 방문자 수를 늘리는 건 정말 어려운 일이에요. 그래서 일단 들어온 사람이라도 붙잡아두려고 페이지뷰를 높이려고 하는데, 이번 사이드바의 재배치는 확실한 효과를 봤어요.

앞으로는 카쿠님(http://kakku.tistory.com/397)처럼 상단 메뉴바를 고정되도록 위치를 바꿔볼까 생각 중이고 다른 부분들도 수정할 게 있는지 찾고 있어요. 또 재방문자의 비율을 높이는 방법도 한 번 찾아봐야겠네요.

함께 보면 좋은 글

이탈률, 반송률, 종료율이란? 이탈률 낮추는 방법
애드센스 수익 향상 팁 - A/B 테스트
블로그 재방문자 비율을 높여야하는 이유
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)

본문 왼쪽에 애드센스 광고를 넣는 방법이에요. 왼쪽에 사이드바가 있다면 사이드바에 넣으면 되겠지만 오른쪽 사이드바를 사용하는 경우에는 본문 왼쪽에 애드센스를 넣기가 어렵잖아요. 그래서 이 때 사용할 수 있는 html 소스를 만들어봤어요.

이 글의 스크롤을 내리다 보면 중간 왼쪽에 광고가 하나 보이죠? 바로 이 위치에 광고를 넣는 방법입니다.

사람들의 시선이 오른쪽보다는 왼쪽에 머무르는 시간도 많고, 제일 먼저 눈에 띄는 곳도 왼쪽이니까 오른쪽 사이드바에 비해서 조금 더 효과가 좋은 광고 배치죠. 수익차이가 많이 나지는 않지만 그래도 늘어나는 건 확실해요.

본문 왼쪽에 세로 광고 넣기

애드센스 광고를 3개 다 사용하고 있어서 대신 광고 대신 그냥 네모난 상자만 넣어봤어요. 왼쪽에 바로 보이는 네모 상자에요.

<div style="background:#fff;border: solid 1px #ccc; height:600px; margin-left:-157px; position:absolute; top:10px; width:120px"> 광고 코드 </div>

애드센스 120x600 광고를 사용한다고 했을 때, width:120px은 광고의 가로 길이, height:600px은 광고의 세로 길이에요.

이 소스에서 가장 중요한 건 positon:absolute와 margin-left에요. positon은 위치를 어떻게 할 건지 묻는 건데, 그냥 absolute로 하시면 돼요. fixed로 하면 고정된 광고가 나오는데, 이는 애드센스 정책 위반이에요.

margin-left는 왼쪽 여백을 말하는데, 숫자가 클수록 왼쪽 여백이 커져요. 그런데 숫자 앞에 -가 붙어있으면 원래 기준보다 왼쪽으로 더 들어가요. -157px이니까 기준 선보다 왼쪽으로 157px만큼 간 곳에 위치하게 돼죠.

margin-left = - (본문의 왼쪽 여백 + 본문의 테두리 선 두께 + 광고의 가로 길이 + 광고 테두리 선 두께)

저는 본문의 왼쪽 여백이 35px, 본문 테두리 선은 1px, 광고의 가로길이 120px, 광고 테두리 선은 1px이라 -157px이 나온 거예요.

세로 높이는 top:10px 처럼 넣으시면 돼요.

위 소스를 [샵샵_article_rep_desc_샵샵] 바로 위에 넣고, margin-left와 top을 바꿔가면서 광고의 위치를 조절하면 되겠습니다.

주의할 점

이 광고를 사용할 때는 왼쪽 광고 + 본문 + 오른쪽 사이드바의 길이가 일반적인 해상도 안에서 모두 보여야 합니다. 해상도에 따라 왼쪽의 광고가 보이지 않게 되면 애드센스 정책 위반이 될 수 있거든요. 따라서 저처럼 본문의 가로 길이가 긴 분들은 사용하지 마시고, 본문 가로 길이가 짧은 분들만 사용하세요.

본문 상단에 광고를 넣고 있다면 상단 광고와 왼쪽 광고가 한 화면에 나오는 것은 피하세요. 클릭율이 많이 떨어집니다. top을 이용해서 광고 위치를 아래로 내려야 합니다.

오른쪽 사이드바의 광고를 대체한다고 생각하세요. 오른쪽 사이드바에도 광고가 있거나 화려한 위젯이 있다면 왼쪽 광고의 효율이 떨어집니다.

함께 보면 좋은 글

모바일페이지에 애드센스 광고 넣을 때 주의할 점
애드센스 크롤러 오류 원인과 해결 방법 - 스코어카드
애드센스 타겟팅 - 문맥 vs 관심기반 vs 게재위치
애드센스 크기가 작은 광고가 나올 때
애드센스 광고 게재위치 정책 이해하기
애드센스 최적화 배치 도움되는 곳
애드센스 수익 향상 팁 - A/B 테스트

사실 네이버 이웃커넥트는 네이버 사용자끼리는 사용하기에는 정말 좋은 기능입니다. 그리고 티스토리 사용자와 네이버 사용자를 연결시키는 유일한 방법이기도 하지요. 다음뷰처럼 외부에서 이웃이 되는 것도 좋지만 블로그에서 직접 이웃을 맺을 수 있는 서비스입니다.

네이버 이웃커넥트가 네이버 블로그를 이용하는 사람들처럼 아주 효과적으로 소통할 수는 없겠지만 그래도 안하는 것보다는 낫잖아요. 네이버 블로그 사용자가 티스토리 사용자에 비해 월등히 많으므로 이들 사용자와 함께 소통할 수 있는 수단인 네이버 이웃커넥트를 꼭 설치해서 사용해보세요.

티스토리에 네이버 이웃커넥트 설치하기

네이버 이웃커넥트에 접속하세요. 아래 그림에서 "다른 블로그로 퍼가기"를 선택하고 블로그 주소를 입력합니다. 그 외 종류나 크기, 색깔 등을 정하고, "퍼가기" 버튼을 누르세요.

퍼가기 버튼을 누르면 소스가 나오는데, 잘 복사해두세요.

다음은 티스토리 관리자로 들어와서 꾸미기 - 사이드바를 선택합니다. 사이드바 편집화면에서 "태그 입력기"를 선택하여 오른쪽 옆으로 드래그 시켜줍니다. 

태그 입력기에 "편집" 버튼이 생기는데, 이 편집 버튼을 누릅니다. 이름칸에는 네이버 이웃커넥트라고 쓰고, 치횐자에는 위에서 복사했던 소스 코드를 집어넣으세요. 그 다음 확인 버튼을 누릅니다. 확인 버튼을 누른 후에는 오른쪽 상단의 "저장" 버튼을 꼭 누르세요.

저장을 누르면 사이드바에 네이버 이웃커넥트 설치가 끝납니다.

혹시 위젯 설정을 바꾸고 싶다면 위젯의 가장 아랫쪽에 있는 톱니모양의 아이콘을 누르세요. 편집페이지로 이동합니다.

네이버와 티스토리의 댓글 알리미가 작동되지는 않지만 그래도 새글이 올라오는 것 정도는 확인이 되니까 자주 방문해서 글도 읽어보고, 댓글도 남기고 해보세요.

함께 보면 좋은 글

티스토리 이웃 링크 추가 버튼 만들기
검색엔진 최적화(SEO) 1탄 - meta, title, desciption, keywords 사용법
검색엔진 최적화(SEO) 2탄 - 로딩 속도를 빠르게
검색엔진 최적화(SEO) 3탄 - 도메인, 텍스트 편
블로그 로딩속도를 빠르게 - 이미지 용량 줄이기
블로그 로딩속도를 빠르게 - CSSTidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
CSS로 인쇄 페이지 만들기
구글 페이지랭크 (Google PageRank) 알아보기
본문 검색창 설치로 블로그 페이지뷰 늘리기