Twitter Facebook Google+ Flickr Tumblr
Comments Closed

독자를 위한 블로그 만들기

최근에는 트위터나 페이스북 덕분에 자기 의견을 짧게 표현하는 수단이 많아지면서 블로그를 쓰는 사람이 많지는 않지만 여전히 장문의 글을 전달하는 수단으로서 블로그는 매우 중요하다. 하지만 국내에서는 대부분의 영향력 있는 블로거들이 파워블로거라는 이름 아래 네이버나 다음, 티스토리, 이글루스 같은 서비스형 블로그를 쓰는 경우가 많다.

서비스형 블로그의 단점은 블로그 테마를 업체에서 제공하는 수준에서만 바꿀수 있다는 것이고, 이런 점은 자유도가 높은 티스토리나 이글루스 같은 경우에도 크게 다르지 않다. (테마를 사용자 입맛에 맞게 바꿀수는 있지만, 실제로는 몇몇 테마 제작자들이 만든 것을 조금씩 수정해서 쓰는 수준이다.)

블로그에 글을 올리는 것은 블로그 주인이 하는 일이지만 그걸 보는건 독자들의 몫이고, 아쉽지만 국내 대부분의 블로거들은 독자들이 보기 편한 가독성 높은 블로그를 만드는데는 거의 관심이 없다. 블로그에 글을 올리는 이유가 누군가에게 읽혀지기 위한 것이라는걸 생각하면 가독성은 가장 중요한 요소가 될수 있는데도 말이다.

블로그의 가독성과 관련해서 Matt GemmellDesigning blogs for readers라는 글을 올렸다. 원문을 전부 직접 읽어보는것이 좋지만 간단하게 Matt Gemmell이 제안한 것들만 번역해서 소개해볼까 한다. 이걸 읽고 한국에서도 가독성에 기반한 독자를 위한 블로그들이 많이 만들어졌으면 한다.


가독성 (Readability)

  • 텍스트를 충분히 크게 만들어라.
  • 텍스트나 컨텐츠를 확대하는걸 망가뜨리지 말아라. (Never break text-or content-zooming)
  • 2~3 알파벳 사이에서 줄길이를 정해라. “ABCDEFGHIJKLMNOPQRSTUVWXYZ”가 한줄에 적어도 두번은 들어가게 하고 세번은 넘지 않도록 해라.
  • 적절한 줄간격을 사용해라 ; 50~70% 정도로.
  • 단순한 밝은 배경에 어두운 텍스트를 사용해라. 할 수 있다면 사용자가 선택하는 텍스트 색상(블럭 지정 색)도 지정해라. (너무 과한 채도를 갖지 않고 분명한 대조도를 갖는 색상으로 선택해라)
  • 만약 텍스트의 색깔을 검은색에서 회색으로 조금 연하게 하고 싶다면, 아주 조금만 그렇게 해라.
  • 컨텐츠에 집중해라. Meta-elemnets들은 글의 상단에서 최소화 시켜라.
  • 만약 광고를 달게 된다면 컨텐츠 영역에서 떨어진 곳에 달아라.

하이퍼텍스트 에티켓 (Hypertext etiquette)

  • 링크는 분명해야 한다. 개인적으로 밑줄이 있는 구분이 확실한 색상을 가진 하이퍼링크가 좋다고 본다(본문에서만. 제목은 예외로 한다.) 파란색은 아주 좋은 선택이다. 밑줄은 Solid line을 사용해라. 밑줄은 링크에서만 사용하고 다른 곳에서는 사용하지 말아라. (강조의 용도로도 밑줄은 사용해선 안된다.)
  • 방문한 링크와 방문하지 않은 링크의 구분을 확실히 해라. 방문한 링크는 여전히 다른 텍스트와는 분명하게 구분될수 있어야 한다.
  • 링크가 새 창이나 새로운 탭에서 열리지 않도록 해라. 그렇게 하는건 독자들이 매우 좋아하지 않는 것 중 하나다. 예외가 있다면 소셜 공유와 같은 오프-사이트 인터랙션(off-site interaction) 같은것 뿐이다.
  • 뒤로 가기 버튼을 망가뜨리지 말아라. 기능성(Functionality)에는 손도 대지 말아라. 그건 당신이 손댈 부분이 아니다.

반응성 (Responsiveness)

별도의 모바일 사이트를 만들지 말아라. 단 모바일 디바이스를 무시해서는 안된다. 적어도 당신의 사이트가 아래 세가지에서는 잘 보이도록 만들어라.

  • 데스크탑 모니터나 랩탑과 같은 커다란 스크린
  • 타블렛. 기기를 돌려도 제대로 보이도록 양쪽 오리엔테이션 모두에서.
  • 폰. 양쪽 오리엔테이션 모두에서.

CSS를 이용해서 스크린 해상도에 따라 자연스레 사이트가 리스타일 되도록 만들어라. 반응성을 나타내는 방법에 대해서도 고려해라 ; 예를 들면 hover(마우스 포인터를 올릴 경우 변하는것) 같은 경우에 터치 스크린에서는 작동하지 않는다.

블로그에 접속하는 브라우저에 대해서도 충분히 고려해서 브라우저 지원도 생각해라. 접속 통계를 낸다거나 해서 어떤 브라우저를 최우선적으로 고려할지 순위를 정해라.

독자를 위한 유틸리티 (Utility for the reader)

컨텐츠를 효과적으로 보여주는 것들을 제외하면 블로그에 필수적인 것들은 몇가지 없다. 아마 이것들 이상이 필요하진 않을것이다.

  • 검색 필드. 사람들은 당신이 쓴글을 인용하거나 읽었던것을 기억해서 재방문하기도 할것이다. 이때 그 사람들이 가장 먼저 찾는 것이 검색필드다.
  • RSS 피드로 자동 연결할수 있도록 해주는 link 태그.
  • 파비콘. RSS 피드를 이용해서 구독하는 사람들을 위한 것이다.

SEO를 고려 (SEO considerations)

검색엔진에 사이트를 최적화시키는 가장 좋은 방법은 “지속적으로 글을 쓰고, 시스템을 속이려고 하지 않는 것”이다. 하지만 몇가지 실용적인 방법들이 있긴 하다.

  • 포스팅 된 글의 permalink(고유주소)를 유지해라. Query-strings을 사용하지 말아라.
  • 포스팅 된 글의 permalink(고유주소)가 글의 제목을 담고 있도록 해라.
  • 포스팅 된 글마다 간단한 요약을 제공해라.
  • 어카이브 페이지를 가져라. 과거의 글들에 쉽게 접근할수 있도록 한번이나 두번의 링크로 어카이브 페이지에 접근할수 있도록 만들어라.
  • 구글 어카운트에서 Authorship information을 작성하는것도 좋다.

옵션으로 고려할 수 있는 기능적인 것들 (Optional functionality)

내가 생각한 옵션으로 고려할만 한 기능적인 요소라면 두가지 정도이다. 이것들은 모두가 사용하는것들이 아니기 때문에 만약 추가하고 싶다면 글의 하단에 넣는것이 좋다.

  • 소셜 공유. 사람들은 어느 순간 당신의 글을 공유하고 싶어할수도 있다. 당신도 사람들이 해준 소셜 공유 덕택에 공짜 마케팅을 하는 셈이다. 무엇보다도 당신은 읽혀지기 위해 글을 쓰는 것이다.
  • 카테고리를 사용할 경우에는 카테고리 표시를 달 수도 있다.

카테고리와 관련해서 조언을 하자면, 카테고리는 하나(이상적)나 두개(최대) 정도로 만들어라. 가장 관련있는 것 하나를 선택해라.

메타데이터를 가지고, 컨텐츠와 검색엔진의 인덱싱 기능을 믿어라. 만약 키워드를 사용하는걸 선택한다면 페이지에 그걸 리스트화 시키지 말아라. (메타데이터를 사용하는건 좋다.)

없애야 하는 것들 (Elements to remove)

  • 댓글. 댓글은 거의 필요가 없다. 나는 일상적으로 수십개에서 어떤 때에는 수백개의 솔직한 댓글들을 받기도 했다. 하지만 그 댓글들이 내가 쓴 글과는 동떨어져 내가 컨트롤 하지 못할때가 있다는걸 느꼈다. 사람들이 자신의 블로그나 소셜 미디어를 통해서 피드백하도록 해라. 그렇게 해도 당신은 사람들의 반응을 확인할수 있다. (Topsy를 통해 소셜 반응들을 확인할 수 있다.)
  • 날짜에 기반한 인덱스 페이지. 사람들은 그걸 사용하지 않는다. 아무도 당신이 어떤 날짜에 글을 썼는지를 궁금해하며 블로그에 방문하지 않는다. 오히려 이런 것들은 복수의 인덱스 페이지에서 추출된 복제된 데이터 때문에 사이트의 검색 결과에 노이즈만 줄 뿐이다.
  • RSS 피드 버튼. 반드시 RSS 피드를 가져라. 하지만 피드를 구독하는 사람이 그리 많지 않다는것도 인정해라. Auto-discovery면 충분하다. (페이지 URL을 복사하기 힘든) 모바일 디바이스를 위해서 명확한 링크를 갖는건 괜찮다. (하지만 반드시 글의 하단에 위치하도록 해라)
  • 소셜 미디어 링크와 같은 헤더와 들어가는 쓸모없는 것들. 가차 없이 헤더를 다듬어라.
  • 백그라운드 텍스쳐나 색. 디자인은 반드시 텍스트를 위해야만 한다.
  • 사이드바. 사이드바들은 메타데이터를 이용한 쓸모없는 것들일뿐이다. 당신이 필요하다고 생각되는 사이드바에 있는 모든것들은 다른곳으로 옮기거나 없애도 상관없는 것들이다. 사이드바는 블로그의 쓰레기 서랍장일뿐이다. 만약 이것들을 도저히 없앨수가 없다면 페이지의 하단에 놓도록 해라.
  • 소셜 미디어 타임라인. 만약 사람들이 당신의 글을 좋아한다면 이미 팔로우하고 있을 것이다. (아님 소셜 미디어를 통해서 당신의 블로그에 방문했던지) 트윗을 굳이 블로그에 넣을 필요는 없다. 게다가 한 사람이 하는 트윗을 모아놓은건 맥락을 알 수 없어 이상할뿐이다.
  • Github Repositories, 인스타그램 같은 것들. 당신이 만든 작품들을 블로그에서 광고하는걸 종종 본다. 하지만 프로젝트나 사진, 프로필이나 About 같은 것들은 페이지의 하단에 위치하도록 해라.
  • 최근 포스팅 된 글. 당신의 메인 페이지는 이미 최근 포스트들을 보여주고 있다. 그거면 충분하다.
  • 인기있는 글. 독자가 좋아하는 글을 선택하게 놔둬라. 만약 당신이 좋아하는 글들을 읽어보라고 독자에게 제안하고 싶다면, About 페이지 같은곳에 넣어둬라. 포스트 제목을 리스트 해둔건 조밀하고 독자의 주의를 다른곳으로 돌린다.

Matt Gemmell의 글은 여기서 번역(오역)한것보다 좀 더 길고 설명을 더 달아놓았다. 개인적으로 이해가 안되는 부분 – Github나 Query-string 같은 것들 – 은 그대로 번역하지 않고 써놨다. 말이 매끄럽지 않은 부분은 의역을 했으니 뭔가 이해가 안되거나 이상하다 싶은건 원문을 보길 바란다.

Matt Gemmell 본인도 원글에서 인정하고 있지만, 가독성을 충분히 고려하고 있는 블로그에서도 이 모든 기준을 정확히 다 지키고 있는 것은 아니다. 무조건 제시된 리스트대로 할 필요는 없지만 어느정도는 이 기준에 맞출때 독자를 위한 가독성이 극대화 되는것은 확실하다. 소위 파워블로그라는 사이트를 들어가보면 포스팅의 최상단에 위치한 큼직한 광고부터, 쓸모없는 사이드바들까지 얼마나 본문에 집중하기 어렵게 만들어졌는지 알 수 있다. Matt Gemmell이 제시한 것들을 전부 어기고 있다고 봐도 무리가 아니다.

나 같은 경우엔 지금 이 블로그를 오픈한지 얼마 되지 않았지만 내가 원하는 블로그도 Matt Gemmell이 원하는 블로그와 비슷하다. 그래서 초기 테마 선택에서 가장 중요시 생각한것도 가독성이 좋은 테마였다. 사파리의 읽기도구보다 더 가독성이 좋은 블로그가 내가 만들고자 하는 블로그다. HTML이나 CSS에 대한 기본지식이 필요하지만 차차 공부해나가며 조금씩 블로그를 “독자를 위한 디자인”으로 바꿔나갈 생각이다.