나는 한국의 웹에 대해서 굉장히 비판적인 사람 중 한명이다. 한국의 웹은 액티브엑스 같이 심각한 문제도 있지만, 일반적인 웹 자체에 대한 문제도 상당하다. 액티브엑스나 네이버의 검색 문제를 예로 드는 분들은 많은데, 웹의 가독성에 대한 얘기는 진지하게 이뤄진 적이 별로 없는것 같다. (있으면 제보 부탁 드린다)
2012년 11월에 외국의 유명 블로그 중 하나인 Brooksreview에는 “The Design of a Site Meant to be Read”라는 제목으로 가독성을 중시하는 사이트 디자인에 대한 글이 올라온 적이 있었다. 몇개의 언론사 사이트와 블로그들을 비교해놨는데, 국내 사이트에 대해서도 이런 작업을 해본다면 의미가 있을듯 싶어서 내가 해보기로 했다.
방법은 Brooksreview에서 한것과 동일하다.
- 오렌지 색 : 컨텐츠를 읽는데 도움이 되지 않는 것들을 표시한다. 예를 들면 광고, 로고, 관련 글, 댓글, 네비게이션 같은 것들이다.
- 회색 : 컨텐츠다. 바이라인이나 날짜 등을 포함해서 글을 쓰고 읽는데, 실제로 중요한 것들이다.
- 밝은 회색 : 부차적인 컨텐츠다. 글을 읽는데 도움이 되는 사진이나 미디어 같은 것들 말이다.
- 아이보리 : 그냥 비어있는 공간이다.
모든 사이트들은 레티나 맥북 프로 15인치에서 1440×900 해상도로 Ember를 이용해 캡쳐했다. 컨텐츠의 길이(글자수)에 따라서 다르게 보이는면이 있을수 있어서 되도록이면 가급적 비슷한 길이의 글들을 이용했다.
이미지를 보기 좋게 직접 넣으려고 했으나, 국내 언론사들을 같은 방법으로 평가해보면, 쓸데없는 것들이 너무 많아서 이미지가 세로로 너무 길어진다. 오히려 그 때문에 내가 쓴 글 자체를 거의 못 읽게 만들어버린다. 그래서 별도로 링크한다. (언론사 이름을 클릭하면 작업된 이미지가 뜬다.)
조선일보
조선일보의 경우 작업하기 전의 스크린샷만 봐도 가독성이 썩 좋아보이진 않는다. 총 815자의 기사였는데, 전체 페이지에서 기사 내용이 차지하는 부분은 매우 적은 부분이었다. 기사를 보라는건지 메뉴를 보라는건지 알수 없었다.
조선일보의 메뉴는 마우스를 올리면 메뉴가 팝오버 되는 반응형인데, 이 경우 팝오버된 메뉴가 기사의 제목을 가려버리는 문제도 있었다. 마우스 오버라는게 독자가 의도하지 않아도 일어날수 있기 때문에 이런식의 메뉴 구성은 피해야한다.
중앙일보
중앙일보는 작업 전의 스크린샷을 봐도 엄청난 문제가 하나 있다. 기사의 중간에 떡하니 광고를 넣어놨다. 이런 경우야 워낙 많아서 그러려니 하는데, 그게 기사의 이미지와 묘하게 배치가 겹치면서 글을 읽기를 아주 힘들게 만들어놨다.
이 기사만 그런걸수도 있다는 생각이 들지만, 저런식으로 이미지와 광고의 배치가 가독성을 해칠수 있다는걸 미리 고민하지 않은건 잘못이다. 역시나 광고가 엄청나게 많고, 기사는 쥐꼬리만큼이다. (기사 글자수는 517자)
동아일보
동아일보도 상황은 비슷하다. 여긴 한술 더 뜨는게, 기사를 광고가 가려버린다. 이미지에서 붉은 색으로 표시되어 있는 부분이 있는데, 그 부분이 기사를 가리는 광고다. 이 기사를 제대로 읽으려면 Close 버튼을 누르고 광고를 없애줘야한다. 동아일보의 기사는 837자였다. (동아일보 원본 스크린샷 보기)
한겨레
한겨레는 어떨까? 가독성이 떨어지는건 진보와 보수를 가리지 않고 대동단결하는듯 하다. 특히 한겨레에서 웃겼던건 기사 말미에 붙어 있어서 기사 내용인지 알았는데, 실제로는 그냥 어떤 기사를 띄워도 나오는 컨텐츠가 있었다는거다. 내가 캡쳐 한 기사가 문제였을수도 있지만, 이건 가독성을 해치는것 뿐만 아니라 기사의 내용까지도 해친다. (한겨레 원본 스크린샷 보기) 실제 기사의 내용은 1186자이다.
경향신문
경향도 문제는 똑같다. 686자짜리 기사였는데, 기사내용보다는 다른곳에 눈이 더 많이 간다. 사방에서 기사를 광고가 감싸고 있다. (경향신문 원본 스크린샷 보기)
ZDnet Korea
인터넷 신문은 뭐가 좀 다를까 했지만, 딱히 다른점은 없었다. 전통적인 종이신문들과 똑같이 독자보다는 광고주가 더 중요했다. (ZDnet Korea 원본 스크린샷 보기)
네이버 뉴스
네이버 뉴스는 상대적으로 언론사 사이트에 비해서는 깔끔한 편이다. 그렇다고 저걸 가독성이 좋다고 하긴 힘들지만 말이다. 합격점을 주기엔 한참 모자라지만 낚시 기사나 성인광고가 눈에 덜 띄고, 적어도 기사 내부에는 광고를 삽입하지 않아 상대적으로 나아 보인다. 왜 사람들이 언론사 사이트가 아닌 네이버 뉴스에서 기사를 소비하는지 알만하다. (네이버 뉴스 원본 스크린샷)
블로그는 어떨까?
개인 블로그까지 살펴보려고 했는데, 블로그를 살펴보는 것도 좀 무리가 있었다. 블로그 10개 중 9개 정도는 가독성이라고는 찾아보기 힘들었다. 블로그는 광고 말고, 페이지 레이아웃이나 글의 배치 등의 문제가 크다. 특히나 가운데 정렬로 글 쓰는 것. 너나 할것 없이 가운데 정렬로 통일이다.
그나마 가독성이 좋은 한글 블로그는 국내 서비스가 아니라 해외 서비스(주로 텀블러나 워드프레스)를 사용하는 경우가 많았다. 미안한 얘기지만 국내에서 파워블로그라고 뱃지 붙이고 있는 곳중에 가독성이 좋은 곳은 정말 찾기 어렵다. 내용이 좋은 블로그인데도 가독성이 나빠서 글을 읽기 힘든 곳은 정말 아쉬웠다.
광고주만 신경 쓰고 독자와 가독성을 버린 닷컴 언론
언론사들의 경우엔 살펴본 바대로다. 예외가 없다. 대안언론이라고 불리는곳조차 가독성을 고려하고 만들어진 곳은 거의 없다. 기사와 기사를 읽기 힘들게 만드는 것(광고, 쓸데없는 사이드바)들의 비율이 비정상적으로 배치되어있다.
이런 웹사이트 디자인이 국내 언론사들의 전매특허 중 하나인 낚시기사들과 조합이 되면 가독성은 심리적으로도 나빠진다. 옆에 더 자극적인 글이 날 클릭하라고 유혹하는데, 안그래도 보기 힘든 기사에 집중할수 있는 사람은 많지 않을 것이다.
포스팅 초반에 글 뒤쪽에서는 가독성을 고려한 디자인을 한 웹사이트들을 소개하고, 이런 방향으로 나아가면 좋겠다는걸 제시할까 했는데 그런 예를 국내에선 찾을 수가 없었다. 여기까지 읽었는데 도대체 뭐가 가독성이 별로라는건지 이해가 잘 안되는 사람이 있다면 다시 한번 Brooksreview의 글을 살펴봐라. Wall Street Journal의 경우 같은 언론사이지만 사이드 한면을 광고로 도배해놓지는 않았다.
Brooksreview에서는 더 나아가서 외국 블로그 중 극단적으로 훌륭한 가독성을 제공하는 곳들을 가르쳐준다. 예로 든 곳은 Curious Rat이나 Daring Fireball 같은 곳이다. 저 글이 쓰여진 Brooksreview나 최근에 디자인을 바꾼 Matt Gemmell의 블로그도 훌륭하다.
wandtatoosMix and Match with the Season
