아이패드를 위한 네이버 모바일 블로그 리디자인 + 데모

누구의 문제인가?

요즘 집에서는 컴퓨터보다 아이패드로 웹서핑하는 경우가 많습니다. 검색을 통해 찾은 블로그를 보는 경우가 많은데 대부분 네이버 블로그 입니다. 사용자가 많아서겠지요. 침대에 누워 빈둥빈둥 블로그를 볼 수 있다는 건 의자에 앉아 pc를 보는 것에 비해 훨씬 편하지만(물론 그전에도 침대에서 노트북으로 봤지만) 네이버 블로그 디자인은 아이패드(아이폰)의 사용행태에 그닥 잘 적합하게 설계되어 있지 않습니다.

블로그 서비스를 제공하는 입장에서 누구를 위해 디자인할지 고민하면 우선 컨텐트를 만들고 트래픽을 가져다 주는 블로거를 고려할 수밖에 없는데요. 네이버 블로그를 운영하지 않고 댓글도 안달고 읽기만 하는 저 같은 사용 행태의 다수의 사용자 입장에서는 좀 불만이 있습니다. 그래서 제 나름의 해결을 공유하려고 합니다.

무엇이 문제인가?

1. readability.

 

네이버 블로그나 티스토리는 현재 아이패드(태블릿)용 페이지는 제공하지 않고 일반 웹페이지를 그대로 보여줍니다. (초기에 네이버 블로그는 모바일 페이지로 리다이렉팅했다가 원본을 보여주는 것으로 바뀐 것 같습니다.) 폭을 고정한 레이아웃이라 더블탭으로 폭 맞춤 확대를 한 상태에서도 글자가 작아 읽을 수가 없습니다. 침대에서 뒹굴거리며 여유있게 읽기에 적합한 크기가 아닙니다. 

모바일 블로그는 그나마 작게,크게 두가지 크기를 지원하며 각각 13px,16px 네요. 해상도 독립적인 pt 아닌 px 단위를 사용는데, 컴퓨터 모니터가 보통 96dpi(윈도우기준) 정도인데 비해 아이패드의 스크린은 130dpi, 아이폰은 160dpi(320x480기준) 라서 컴퓨터에서 보는 글씨보다 작게됩니다. pt로 환산하면 큰 폰트 마저도 대략 8pt (아이폰에서는 7pt) 정도로 보통 리포트가 10-12pt 인데 비해 많이 작습니다. 

게다가 큰 폰트를 선택했을때는 폰트 크기만 키우고 줄높이(line-height) 속성은 그대로여서 줄 간 여백이 거의 없이 글줄이 바짝 붙어 눈을 피곤하게 합니다. 이런 부분은 좀 화가 납니다. 거의 이천만명 정도가 네이버 모바일 블로그를 봤을텐데 디자인이나 개발, 검증의 문제를 따지기 전에 IT 관련 임원은 무조건 타이포그라피 수업을 받아야하는게 아닌가 생각해요. 정말로.

요즘의 블로그 편집기는 작성자의 자유롭고 개성적인 표현이 가능하도록 워드프로세서와 같은 강력한 문단,글자 편집 기능을 제공하고 있습니다. 읽는 사람의 입장에서는 제발 그런 권한을 좀 뺏았으면 좋겠습니다. 가운데 정렬, 심지어 오른쪽 정렬하는건 글을 읽지 말라는 것 같거든요.  

요즘 flipboard 같은 매거진형 aggregator를 많이 쓰는데 무엇보다 글자를 읽기 편해서 입니다. pc환경에서는 모르겠지만 모바일 버전에서는 작성자가 지정한 폰트 설정을 좀 제한하더라도 블로그를 읽는 사람이 좀 보기 편하게 보여주어야 한다고 생각합니다.

ios의 한글 폰트 applegothic은 못 생기기로 유명하여 웹폰트를 사용하여 나눔고딕으로 대치하면 좀 보기 좋습니다. 
 

2. bouncing rate.

네이버 이웃 처럼 즐겨찾기한 블로그를 주기적으로 방문하는 것 보다는 아이 데리고 놀러갈 데나 먹을 곳를 키워드로 검색해서 블로그를 주로 읽습니다. 여기 pxdstory 블로그도 검색을 통한 접근이 70% 정도고 나머지가 재방문입니다. 그러니까 실제 방문자 수는 아마 80% 이상이 검색을 통해 처음 이 블로그를 접할 것 같습니다. 검색된 글만 읽고 닫는 경우도 있지만 내용이 괜찮으면 다른 글도 읽어보게 됩니다. 관심사가 비슷하면 다른 글도 도움이 될 확율이 높으니까요. 

그래서 본문에 이어 바로 글 목록을 보여주면 나갈지 좀 더 머물지 판단에 도움이 됩니다. 현재는 본문에 이어 이전,다음글의 제목 링크가 보이긴 하는데 블로그 글을 순차적으로 읽는 경우가 없어서 별로 도움이 되지 않습니다. 즐겨찾기한 블로그라서 대부분의 글을 모두 읽는 경우라도 목록에서 가장 관심이 가는 글부터 골라 읽지 그냥 순서대로 읽는 경우는 드물거든요. 대부분의 사용자가 prolog처럼 블로그의 성격을 한 눈에 볼 수 있는 블로그의 첫페이지를 거치지 않고 검색을 통해 블로그 본문으로 바로 이동합니다. 모든 페이지가 랜딩페이지가 되므로 전체 블로그의 성격을 보여줄 수 있는 요소가 노출되도록 하는게 좋습니다.

목록 버튼이 있긴하지만 현재 보고 있는 페이지와 상관없이 목록의 가장 처음으로 매번 이동하기 때문에 근본적으로 목록을 훑어보면서 원하는 글만 골라 보기에는 자연스럽지 않고 번거로운 구조입니다. 목록 페이지로 직접 이동을 할 수 없으니 처음부터(오래된) 글 부터 보기는 불가능합니다.
보통 이전 버튼을 눌러 왔다 갔다 pogo-sticking 을 하게되는데 본문에 글 목록이 연이어 나오는게 일반적인 글읽기의 흐름에 더 자연스럽습니다. 
 pagination 안티패턴

모바일 티스토리는 본문을 다 읽고 나면 이어서 다음 검색 실시간 이슈 목록을 노출하고 있는데요. 간절한 마음은 전해지지만 좀.. 안스럽습니다. 

3. repetitive strain injury.

터치를 이용한 스크롤은 아이들도 바로 따라할 수 있을 만큼 직관적입니다. 배우기도 쉽고 원하는 위치로 정확히 이동하기도 편리하고 다 좋긴한데 귀찮고 힘듭니다. 폰에서는 손가락만 좀 튕기면 되지만 아이패드는 화면이 크다보니 동작이 커지거든요.

이게 ios 문제지 블로그 문제냐고요? 네. 게으른 제 문제입니다. 

큰 화면 스크롤하는게 귀찮아서 리디자인 된 블로그에는 자체적으로 스크롤바 기능을 만들어 넣었습니다. 이 부분은 별도로 포스팅하려고 합니다.

아이폰,아이패드를 위한 터치스크롤바

리디자인

네이버 모바일 블로그에 없는 기능은 없습니다. 다 할 수 있습니다. 하지만 그 기능들이 내가 사용하는 행태나 작업 흐름에 적합하게 구조화되어 있지 않습니다. 기능을 뽑아 나열하기 전에 누가, 왜 ,어떻게 사용하는지 사용 흐름을 이해하는 것이 필요합니다. 물론 사람마다 제각기 사용 하는 방식이 다르니까 누구에 맞춰서 디자인을 해야하는가가 진짜 문제이긴 하지만요. 저와 같이 사용하는 사용자는 무시하는 것도 퍼소나를 활용하는 좋은 방법이거든요.

암튼 그래서 전 제가 사용하는 행태에 맞추어 리디자인된 블로그를 이용합니다. 아이폰에서도 아이패드에서도 사실 pc에서도 이렇게 블로그를 봅니다. 사실 제가 보고 싶은 건 블로거가 만든 블로그가 아니라 내용만 쏙 뽑아낸 RSS 리더인지도 모르겠습니다.

데모 사이트

* 사이트 개편으로 현재는 동작하지 않습니다.
http://lab.pxd.co.kr/lazyblog/naver_blog.php?blogId=majosady

아이폰 아이패드로 접속하면 됩니다. 블로그 주소를 넣어주면 변환하여 보여줍니다. 
 

주.

- 실제 이용시에는

1. 블로그 페이지에서 북마클릿을 이용하여 변환하고 있습니다.

2. 자주 가는 블로그는 변환된 주소를 북마크 해두고 있습니다.

3. 바로 변환된 주소를 링크한 검색 엔진을 사용합니다. 검색엔진 리디자인

- uxcampseoul 2010 날로먹는UI디자인방법론 33p 이후 케이스스터디 '네이버 블로그 리디자인' 으로 발표한 내용인데 너무 오래되어서 아이패드용이라고 이름 붙였습니다. :) 처음부터 아이폰,아이패드에 대응하도록 만들어졌거든요.

- ios 5.1이 배포되어서 한글 폰트에 대한 불만은 조금 해소되었습니다.

[참고##리디자인##]