수학방

티스토리의 블로그 스킨을 수정하다 보면 굉장히 어렵죠. 고치고 나서 제대로 나오는지 미리보기를 눌러서 확인하고, 또 고치고 미리보기하고 이런 걸 몇 번씩 반복해야 해요. 카테고리 목록이라든지 댓글 목록처럼 미리보기로 볼 수 없는 곳은 일일이 저장해서 확인해야 하고요.

크롬의 개발자도구를 이용하면 이런 작업을 조금 간단히 할 수 있어요. 미리보기를 따로 할 필요없이 바로 적용해서 볼 수 있거든요. 개발자도구를 이용하면 현재 보고 있는 페이지의 html, css 코드를 수정할 수 있어요. 이런 기능을 이용해서 블로그의 스킨을 수정한다면 블로그 스킨 수정이 훨씬 쉬워집니다.

크롬 개발자도구로 블로그 스킨 수정하기

개발자도구는 다른 브라우저에도 있는 기능인데, 보통은 오류를 찾거나 소스 코드 분석을 할 때 사용해요. 크롬에는 현재 보이는 화면의 코드를 수정할 수 있는 기능이 있어서 더 편리하죠. (다른 브라우저는 사용해보지 않아서 이런 기능이 있는지는 모르겠어요.)

블로그 스킨을 수정하고 싶은 페이지에 접속합니다.

도구 - 개발자도구를 선택해도 되고, 아래 그림처럼 수정하고 싶은 곳에 마우스 오른쪽 클릭을 해서 요소 검사를 선택해도 됩니다. 요소 검사를 선택하면 html에서 원하는 위치로 바로 이동할 수 있어서 더 편리해요.

"Recent Posts"에서 "요소 검사"를 클릭했더니, 개발자도구 창에서 해당하는 html 소스가 선택되어 있어요.

html에서 고치고 싶은 곳에 마우스 커서를 놓고 F2를 누르면 편집할 수 있는 창이 나와요. Recent Posts를 최신글 목록이라고 바꿔보죠.

개발자도구의 왼쪽 창에는 html 소스가 나오고 오른쪽 창에는 css가 나와요. 왼쪽의 html 창에서 소스를 하나씩 선택하면 그 소스에 해당하는 css가 오른쪽 창에 나옵니다. css는 구조와 클래스에 따라 여러 css가 함께 적용되기도 하는데, 이때, 우선순위에서 밀려서 적용되지 않는 건 가로줄이 그어져 있어요. 아래 그림에서 font-size: 1.3em이 그렇죠.

체크박스가 있는데, 여기서 선택을 해제하면 해당 css 속성을 적용되지 않도록 바뀝니다.

다음은 css를 수정해보죠. text-aling:center를 추가해봤어요. 글자를 가운데 정렬하는 css에요.

두 부분을 수정했더니 화면에서 왼쪽 정렬이 되어있던 "Recent Posts"가 가운데 정렬의 "최신글 목록"으로 바뀌었어요.

실제로 블로그 스킨의 html과 css를 수정한 게 아니라 그냥 그 화면에 보여지는 것만 임시로 바꾼 거예요. 따라서 저장되지는 않아요. 이렇게 하나씩 바꾸고 수정하면서 내 블로그에 맞는 설정을 찾을 수 있어요.

이렇게 찾은 설정들을 모아서 html, css를 한 번에 수정하는 거죠.

아래 그림은 css 편집창의 제일 아래에 있는 화면인데, 레이아웃을 보여주는 그림이에요. 파란색 300 x 16이 실제 크기, 그 주변으로 padding, border-width, margin을 상하좌우의 네 부분으로 나눠서 보여줘요. margin-top:12px, margin-bottom:10px, border-bottom:1px, padding-bottom:10px이라는 걸 알 수 있어요.

생활코딩 - 크롬 개발자도구에 동영상으로 설명된 게 있으니까 한 번 둘러보세요. 버전이 조금 다르긴 하지만 글을 읽는 것보다 훨씬 더 이해가 잘 될 거예요.

함께 보면 좋은 글

티스토리 반응형 스킨 사용할 때 문제점 한 가지
애드센스 최적화 배치 도움되는 곳
검색엔진 최적화, SEO를 위한 meta, title, desciption, keywords 사용법
검색엔진 최적화 측정 사이트 - SEOCert.net
블로그 속도 측정 - Google PageSpeed Insights

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

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

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

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

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

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

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

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

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

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

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

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

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

함께 보면 좋은 글

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

함께 보면 좋은 글

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

광고 배치를 바꾸려고 시작했던 일이 점점 커지더니 이제 스킨을 완전히 바꾸게 되었어요. 사실 조금 더 바꿔야 하긴 하는데 끝이 없는 일이 될 것 같아서 그냥 여기서 멈추려고요. 애초에 스킨을 바꾸겠다는 생각도 없었거든요.

가장 큰 변화는 블로그 왼쪽 사이드바의 효과에서 얘기했던 것처럼 사이이드 바의 위치를 오른쪽에서 왼쪽으로 바꾼 것과 색을 화사한 딸기우유(?) 색으로 바꾼 거겠죠.

이제까지 초코테마를 사용했었는데, 주변의 어두운 배경색 때문에 본문에 대한 집중도가 높은 장점이 있었어요. 하지만 너무 어두운 색이라 우중충한 느낌도 있었죠. 여름에 잠깐 파란색으로 색을 바꿔보기도 했는데 그냥 배경색만 바꾼 거라서 다른 콘텐츠들과의 어울림이 좋지 않았고요.

그래서 이번에는 배경색도 바꾸면서 본문 안의 여러 가지 요소들도 함께 바꿔봤습니다.

아래는 그 동안 사용했던 스킨의 모습인데 모아놓고 보니 바꾸길 잘했다는 생각이 드네요.

튜닝의 끝은 순정

그 동안 스킨을 수정하면서 기능을 추가하는 경우가 많았는데, 이번에는 삭제를 많이 했어요.

SNS 보내기 플러그인, 다음뷰 추천버튼, "수학방"을 검색하세요 이미지 등을 삭제했고, 플러그인도 몇 가지 설정해지 했어요.

댓글 입력창 바로 위에 광고가 하나 있었는데, 한 달 걸어놔 봐야 2만 원 정도밖에 안돼서 떼어냈어요. 진작에 떼어내려고 했는데 지급 기준에 도달하면 돈 받고 떼어야지 하면서 미루고 미루다가 그냥 이참에 뗐어요.

다음뷰 추천 버튼도 전에는 다음에서 검색할 때 검색결과의 제목 옆에 뷰 추천 수가 함께 나와서 어쩌면 추천 수가 검색 결과에 영향을 줄 수도 있다는 생각이 들어서 계속 뒀었지요. 그런데 추천 수 표시가 없어진 지 한참 됐고 다음에서 들어오는 검색 유입이 거의 없는 상황이라 그냥 과감하게 떼 버렸어요.

rss 버튼도 없애버렸어요. 중고생들이 rss를 통해서 제 블로그를 보는 경우는 거의 없을 거라는 생각도 했고, 블로그 특성상 수식을 많이 넣는데 rss 화면에서는 수식이 주변의 글들과 바르게 정렬되지 않아서 글을 읽는데 매우 불편하거든요.

이번에 뗀 건 아니지만, 이웃 링크와 네이버 이웃커넥트, 댓글과 트랙백 목록, 트위터 보내기, 페이스북 좋아요 등도 모조리 다 제거했습니다.

이제 남은 거라고는 본문, 카테고리 글 더보기, 댓글, 카테고리, 최신글, 태그, 애드센스 뿐이네요.

블로그를 하다보면 이것저것 추가하는 게 많아지는데 그러다 보면 본문에 대한 집중도만 떨어질 뿐 실제 기대했던 효과를 보지 못하는 경우가 많았거든요. 앞으로는 필요한 기능만 딱 골라서 넣어두고 제 기능을 할 수 있게 해야 할 것 같아요.

함께 보면 좋은 글

블로그 왼쪽 사이드바의 효과
애드센스 최적화 배치 방법, 히트맵(headtmap)
여름맞이 블로그 단장..
본문 검색창 설치로 블로그 페이지뷰 늘리기

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

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

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

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

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

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

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

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

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

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

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

함께 보면 좋은 글

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

블로그 개설 1년만에 처음으로 블로그 스킨을 수정했습니다. 스킨을 완전히 바꾼 건 아니고, 원래 스킨에서 몇 가지만 고쳤어요. 하지만 이전 스킨과는 아주 다른 느낌이에요.

날짜로는 이른 감이 있지만 이미 30도가 넘는 무더위가 시작됐으니 여름 맞이 단장이라고 해도 틀린 말은 아니겠죠?

처음 스킨에서 몇 가지 빼고, 추가한 것도 있는데 서로 잘 어울리지 않는 것도 있어서 이번 기회에 바꿔봤습니다. 아직 조금 손봐야할 게 남았지만 그런데로 괜찮네요.

블로그 단장

전에 사용하던 스킨은 초코테마인데, 전체적으로 초콜렛 색의 다이어리 느낌이 나는 스킨이었어요. 예쁘긴 한데, 색이 어둡다보니 약간 우중충하고 답답한 느낌이 있더라고요.

여름도 되고 시원하게 바꾸려고 했는데 스킨을 완전히 바꾸면 일이 커질 것 같아 눈에 가장 잘 보이는 곳 인 헤더 부분과 사이드바만 고쳐봤어요. HTML은 하나도 손 안대고, css와 이미지만 고친 것에 비하면 상당한 효과가 있네요.

Blue Stripes 스킨을 참고해서 색깔은 파란색 계열로 하고 사이드바의 폭을 넗혔더니 훨씬 더 시원한 느낌이 나는군요. 진작에 바꿀 걸 그랬어요.

당분간은 이대로 계속 사용하고 겨울이 되면 다시 초코테마로 돌아가야겠어요.

스킨 바꾸는 김에 블로그 속도 측정 - Google PageSpeed Insights에서 지적받았던 사항들도 고쳐야겠어요.

그리고 트윗버튼과 페이스북 추천 버튼때문에 로딩시간이 길어지는 것 같은데, 이걸 떼내는 게 나을 지 고민을 좀 해봐야겠네요. 다른 추천버튼에 비해서 이 두 개는 유독 느리네요.

함께 보면 좋은 글

블로그 속도 측정 - Google PageSpeed Insights