모바일 웹 리디자인 사례 — 네이버 블로그

2012년경 아이패드로 웹서핑하는 사용자가 늘면서, 검색을 통해 네이버 블로그를 읽기만 하는 다수 사용자와 블로그를 운영하는 소수 블로거 사이의 간극이 드러났다. 서비스 제공자는 콘텐츠와 트래픽을 만들어내는 블로거를 우선 고려할 수밖에 없기 때문에, 댓글도 달지 않고 읽기만 하는 사용자의 불편은 뒷전으로 밀리기 쉽다. 이 리디자인 사례는 "이 서비스는 누구를 위해 최적화되어 있는가"라는 질문에서 출발해, 특정 사용 행태의 사용자를 의도적으로 데이터 기반 퍼소나|퍼소나에서 배제하거나 포함시키는 방식으로 설계 범위를 좁힌 점이 특징이다.

가장 먼저 지적된 문제는 가독성(readability)이다. 당시 네이버·티스토리 모바일 블로그는 폭이 고정된 레이아웃에 px 단위 폰트를 사용했는데, 컴퓨터 모니터가 보통 96dpi인 데 비해 아이패드는 130dpi, 아이폰은 160dpi여서 같은 px 값이라도 실제 인쇄 크기(pt)로 환산하면 큰 폰트조차 8pt 안팎으로 보통 문서(10~12pt)보다 작게 보였다. 여기에 폰트 크기만 키우고 줄간격(line-height)은 그대로 두는 구현 오류까지 겹쳐 눈의 피로를 가중시켰다. 편집기가 작성자에게 워드프로세서 수준의 자유로운 서식(가운데·오른쪽 정렬 등)을 허용하는 것도 오히려 독자의 가독성을 해치는 요인으로 지적됐으며, 대안으로 iOS 기본 한글 폰트를 나눔고딕 한글 웹폰트로 대치하는 방법이 제시됐다.

두 번째 문제는 이탈률(bounce rate)과 탐색 구조다. 검색을 통한 첫 방문이 전체 트래픽의 70~80%를 차지하는 구조에서는 사실상 모든 글이 랜딩페이지 역할을 하므로, 본문만 읽고 이탈할지 다른 글도 읽을지를 그 페이지 안에서 바로 판단할 수 있어야 한다. 그러나 기존 UI는 이전글·다음글 링크만 보여주거나, 목록 버튼을 눌러도 항상 목록의 맨 처음으로 이동하는 식이어서 사용자가 이전 버튼을 반복해서 눌러 왔다갔다 하는 포고스티킹(pogo-sticking)을 유발했다. 리디자인에서는 본문 바로 뒤에 전체 글 목록을 이어 붙여, 훑어보며 관심 있는 글을 바로 골라볼 수 있도록 흐름을 재구성했다.

세 번째 문제는 큰 화면에서 손가락으로 반복 스크롤할 때 발생하는 피로, 즉 반복사용긴장손상(RSI)이다. 아이폰처럼 작은 화면에서는 가벼운 손가락 튕김만으로 충분하지만, 아이패드처럼 화면이 커지면 스크롤 동작 자체가 커지고 반복될수록 피로해진다. 이를 완화하기 위해 별도의 터치 스크롤바 기능을 자체 구현했는데, 이는 아이폰의 관성 스크롤이 만들어낸 터치 스크롤 UI와 촉각적 멘탈 모델과는 다른 방향으로, 스크롤바라는 전통적 GUI 요소를 터치 환경에 맞게 재도입한 시도라 할 수 있다.

실제 구현은 블로그 주소를 입력하면 변환해 보여주는 데모 사이트(lab.pxd.co.kr)와 북마클릿 형태로 검증되었으며, 이 케이스는 2010년 uxcampseoul '날로먹는 UI 디자인 방법론' 발표의 '네이버 블로그 리디자인' 사례를 아이패드 대응으로 확장한 것이다. 이후 iOS 5.1 배포로 한글 폰트 문제는 일부 해소됐다.

핵심 내용

  • 문제의식은 "블로거 중심 설계"와 "읽기만 하는 다수 독자" 사이의 간극에서 출발
  • 가독성: px vs pt 환산 오류, 기기별 DPI 차이(96/130/160dpi), line-height 미조정, 과도한 서식 자유가 원인
  • 이탈률: 검색 유입 70~80% 구조에서 모든 페이지가 랜딩페이지 → 본문 뒤 전체 글 목록 연결로 포고스티킹 완화
  • RSI: 큰 화면 터치 스크롤 반복 피로 → 자체 터치 스크롤바 구현으로 대응
  • 특정 사용자군을 퍼소나에서 의도적으로 배제/포함하는 것도 유효한 설계 범위 설정 방법
  • 북마클릿·데모 사이트로 프로토타입 검증

관련 개념

출처

최종 업데이트: 2026-07-18 | 출처 1개