위즈군의 라이프로그
Reboot... Search /

블로그 스킨과 광고 수익을 위한 최적화 작업

2008. 11. 17. 15:12
시작하기전에
블로그 최적화라는 말에 의미가 없을 정도로 최적화의 정답은 없는 것 같습니다. 하지만 방문자가 글을 더 보기 쉽게 구성하거나, 더 효과적으로 정보를 전달 할 수 있는 방법들은 있는 것 같습니다. 작성된 콘텐트와 방문자의 취향에 따라 많이 다르겠지만 혹시 다른 블로거에게 도움이 될지도 모른다는 생각과 중간 점검 차원에서 제 블로그를 수정하는 과정에서 고민했던 내용을 적어 보겠습니다. 좋은 정보를 가지고 계신다면 덧글과 트랙백으로 남겨주세요.

그 동안 사용했던 스킨은 1단 형태로 아래 그림과 같은 스킨이었습니다.

아래 그림에서 노랗게 표시된 부분에 본문을 중심으로 상단에는 붉게 표시된 광고가 위치하고, 하단에 전체적인 메뉴를 배치해서 방문자들이 글을 보고, 나서 다른 글로 접근하기 쉽도록 배치를 했었습니다. 이런 형태를 유지 하면서 1년 이상 사용을 해본 결과 방문자들이 한 페이지만 보고 가버리는 것을 알고, 문제점을 파악해서 수정을 하기로 했습니다.
개인적으로 방문자의 편의를 생각해서 하단에 배치를 했지만 혼자만의 생각이었던 것 같습니다.
글이 재미가 없어서 그렇다는 생각도 들지만 이 문제는 차근차근 해결하도록 노력하고, 우선 구조적인 부분에서 접근을 시작하기로 했습니다.

본문 가로폭의 부담
1단 스킨의 문제점은 본문의 영역이 너무 넓다는 것이었습니다. 본문 영역이 넓으면 사진을 볼 때 편하고, 콘텐트가 많이 들어가서 좋지만, 너무 넓은 경우 문제가 있습니다. 한 줄을 읽고 다음 줄로 넘어 갈 때 흐름이 끊긴다는 것입니다. 콘텐트를 보기 편한 사이트와 구독자가 많은 사이트들을 찾아 다니면서 글을 읽어 보고 읽기 편한 사이트의 가로 폭과 폰트 크기 등을 나름대로 정리를 해봤습니다.

본문 가로 폭 650 ~ 750 픽셀 - 콘텐트에 따라 다르지만 텍스트와 이미지가 조합된 블로그 콘텐트의 경우 650~750 정도가 가장 적당한 사이즈라고 결론을 내렸습니다. 650 보다 작을 경우 상당히 답답한 느낌이 들고, 750을 넘을 경우 다음 줄로 넘어갈 때 흐름이 끊겨버린다는 단점이 있었습니다.

텍스트 폰트 크기 13~16픽셀 - 개인적으로 아기자기 하고 촘촘한 것을 좋아해서 12픽셀을 좋아 했지만, 역시 콘텐트를 읽기 편한 폰트 사이즈는 13~16픽셀인 것 같습니다. 포털과 전문 뉴스 사이트에서 많이 사용하는 16픽셀이 액정이 작은 노트북에서는 읽기 좋지만 일반 LCD에서는 조금 부담스러울 수 있기 때문에 13~14픽셀 정도가 적당하다고 생각됩니다.
폰트의 종류에 따라 이 크기는 적당히 조절하는 것이 좋을 것 같습니다.

폰트 크기 12 - 폰트의 종류에 따라 이 크기는 적당히 조절하는 것이 좋을 것 같습니다.

폰트 크기 13 - 폰트의 종류에 따라 이 크기는 적당히 조절하는 것이 좋을 것 같습니다.

폰트 크기 14 - 폰트의 종류에 따라 이 크기는 적당히 조절하는 것이 좋을 것 같습니다.

폰트 크기 15 - 폰트의 종류에 따라 이 크기는 적당히 조절하는 것이 좋을 것 같습니다.

폰트 크기 16 - 폰트의 종류에 따라 이 크기는 적당히 조절하는 것이 좋을 것 같습니다.

사진 크기 가로사진 600 또는 1000 픽셀 / 세로사진 600 또는 800픽셀 - 사진을 편집할 때 이미지가 큰 경우 본문 크기에 강제로 리사이징 되면 이미지가 일그러지는 현상이 발생합니다. 그래서 사진이나 이미지를 본문 폭에 맞춰서 크롭 하는 것이 좋습니다. 또한 사진 편집할 때 일관적인 사이즈를 가지도록 하는 것이 사용자가 보기에 편하기 때문에 본문의 여백까지 생각해서 750보다 작고 가로 세로 비율이 4:3로 맞는 600픽셀이 가장 이상적인 것 같습니다. 1000 사이즈의 경우 논란의 여지가 있지만 브라우저 창을 최대 크기로 확장해서 이미지를 볼 때 모니터상에 스크롤 없이 확인이 가능한 것이 좋습니다. 1024X758 모니터에서 창의 프레임을 제외하고 스크롤 없이 볼 수 있도록 1000 픽셀 정도가 적합합니다.

세로 사진의 경우 크기를 크게 하는 경우가 많지만 방금 이야기 한 것처럼 모니터 상에서 확인이 가능해야 합니다. 세로 화면에서 스크롤 없이 사진을 볼 수 있도록 세로 600 또는 800 정도가 적합 합니다.

좌측 메뉴로 좌우측 여백 활용 - 본문의 크기를 750 이하로 설정 한 경우 와이드 모니터에서 볼 경우 좌우측의 공간이 낭비가 되는 경우가 많습니다. 심지어 일반 모니터에서도 공간 낭비가 많고, 콘텐트가 부실하게 느껴질 우려가 있습니다. 블로그의 상당히 많은 종류의 메뉴를 사용해 좌우측 공간을 활용해서 콘텐트를 효과적으로 노출해서 사용자의 콘텐트 접근성을 높여 주는 것이 좋습니다.
좌우측 공간 활용에 있어서 메뉴가 좌측에 있어야 하는 이유는 간단 합니다. 첫 번째는 좌측에서 우측방향으로 본문을 읽기 때문에 항상 우측 끝 메뉴에 눈이 가게 되어 있습니다. 그렇기 때문에 우측 메뉴에서 눈에 띄는 콘텐트를 발견 할 경우 현재 페이지를 모두 읽고 다시 다른 콘텐트로 접근을 할 수 있도록 하기 위한 구조 입니다.
또 다른 이유는 포털 서비스에 익숙한 사용자의 습관 때문입니다. 포털에서 뉴스를 읽고 우측 메뉴를 통해 인기 글 등을 보는 습관을 이용해 사용자에게 한번 더 블로그에서 콘텐트에 관심을 가질 수 있도록 하는 것입니다.

광고 효과에 대한 고민
광고의 위치
처음 광고를 넣었을 때는 본문의 하단과 메뉴를 이용해 광고를 노출 했지만 광고 클릭이 거의 없었습니다.
그래서 다음으로 본문 상단에 노출 시켜 사용자가 광고에 눈이 먼저 가는 구조로 구성을 했습니다. 광고 클릭이 처음 보다는 늘었지만 만족 할 정도는 아니었습니다.
그래서 몇 가지 자료를 조사한 결과 위에서 이야기한 시선의 흐름을 이용해서 본문 우측 부분에 위치를 시켜 내용을 읽는 중간에 광고에 눈이 가도록 했습니다. 그리고 조금 효과를 본 본문 상단 배치 역시 함께 테스트를 진행 해볼 계획 입니다. 광고에 대한 글은 좀더 많은 테스트와 자료를 모아서 다음 기회에 정리를 해보겠습니다.
그래도 지금 확실히 이야기 할 수 있는 것은 광고 최적화의 기반은 본문 콘텐트라는 것입니다.

광고뿐 아니라 스킨 최적화 역시 그 기반은 블로그 글과 주제에 따라 바뀌는 것이기 때문에 우선 좋은 글 쓰기를 위해 최선을 다해야 할 것 같습니다.

결론.
 * 블로그를 운영에 최우선 우선과제는 더 좋은 글을 작성하는 것
 * 그리고 나서 사용자가 정보에 쉽게 접근할 수 있는 구조로 만드는 것
 - 본문 가로 폭 650 ~ 750 픽셀
 - 텍스트 폰트 크기 13~16픽셀 - 개인적으로 14픽셀이 좋다.
 - 사진 크기 - 가로사진 600 또는 1000 픽셀 / 세로사진 600 또는 800픽셀
 - 좌측 메뉴로 좌우측 여백 활용 - 특히 우측에 메뉴를 구성하는 것이 좋다.
 - 광고는 고민과 테스트 중

참고자료
- 세계 TOP 10 블로그를 분석했더니...
- 구글이 추천하는 애드센스 최적화 팁
- Hoogle의 애드센스 최적화 결론 - 구글 최적화 적용후기

분석하고 참고한 사이트
itviewpoint.com / bloggertip.com / www.choboweb.com / www.smartplace.kr / leegy.egloos.com / channy.creation.net / www.tmz.com / postsecret.blogspot.com / www.dailykos.com / lifehacker.com / www.huffingtonpost.com / www.techcrunch.com / jeremyboles.com
포털뉴스 : media.daum.net / news.naver.com / news.empas.com

마지막으로 한번 더
이 글의 내용과 관련된 사항은 개인성향에 따라 상당히 다른 분석이 가능한 부분이라 절대적인 결과도 아니고 그런 의도도 없습니다. 관련된 내용의 업데이트와 조사는 앞으로도 계속 하겠지만, 개인적인 중간 점검과 함께 다른 분의 도움도 받을 수 있을 것 같다는 생각으로 작성하는 글입니다. 많은 조언 부탁 드립니다.
위즈군의 라이프로그

Category

전체 (564)
개발 (0)
일반정보 (0)
IT 일반 (1)
일상&사진 (0)
정리중 (563)

Recent Entry

    Recent Comments

      Recent Trackbacks

        Tags

        Links

          Total:
          Today: / Yesterday:
          Powered by Tistory / Skin by 위즈 라이센스정책 rss 2.0