레프트21 웹마스터 블로그

〈레프트21〉을 그대 손 안에! ― 〈레프트21〉 모바일 사이트가 개장했습니다

레프트21웹마스터 — Wed, 12 Oct 2011 17:58:39 +0900

이제는 바야흐로 스마트폰의 시대

드디어 국내 스마트폰 이용자가 천 6백만 명을 돌파했다고 합니다. (2011년 7월 기준 1,626만 명) 비록 아이폰의 창시자인 스티브 잡스는 갔지만, 누구도 지금이 스마트폰의 시대라는 것을 부정할 수는 없겠습니다. 실제로 많은 사람들이 지하철에서, 식당에서, 사무실에서, 학교에서 스마트폰으로 인터넷을 하고 웹 문서를 읽는 모습을 자주 볼 수 있죠.

저희 〈레프트21〉 웹사이트 통계에서도 모바일 기기 이용자들은 무시할 수 없을만큼 많은데요, 전체 방문수의 대략 20.07%가 스마트폰이나 태블릿PC 등을 통해 들어오고 있습니다.

모바일 사이트? 모바일 웹?

그런데 안타깝게도 많은 웹사이트들이 모바일 환경에 필요한 웹사이트를 지원하지 않고 있습니다. 여기에서, 모바일 환경에 필요한 웹사이트 지원이라는 것은 단지 모바일 페이지 한두 개를 만드는 것을 의미하지 않습니다.

웹표준, 웹접근성의 대가인 신현석 님이 ‘모바일 웹과 모바일 사이트’에서 말했듯이, “웹이라는 것이 모바일용, 데스크탑용이 나눠지지 않은 하나의 웹(One Web)이기 때문”에, 모바일 기기건 데스크탑 기기건 어떤 환경에서 접근하건간에 동일한 기능을 제공하는 것이 가장 올바른 형태라고 할 수 있겠죠.

그런데 적지 않은 ‘모바일 사이트’ 혹은 ‘모바일 페이지’를 방문해 보면, 데스크탑에서 접근했을 때에는 사용할 수 있었던 기능들을 모바일에서 접근했을 때는 사용할 수 없습니다. 검색 같은 게 대표적이죠. 이런 ‘빛 좋은 개살구’를 진정한 모바일 웹 서비스라고 부를 수는 없을 거라 생각합니다.

이런 측면에서 볼 때, 오히려 기존의 〈레프트21〉 웹사이트은 어줍잖은 모바일 사이트보다 나은 모바일 웹 서비스를 지원하고 있었다고 할 수 있습니다. 〈레프트21〉 웹사이트는 웹표준을 상당히 엄격하게 준수했고 크로스브라우징 테스트도 거쳤던 덕에, 대부분의 브라우저와 기기에서도 동일한 화면과 기능을 제공했기 때문이죠. 그래서 모바일에서도 역시 동일한 화면을 보여 줬습니다.

웹표준을 지키지 않은 웹사이트를 스마트폰으로 들어가 보신 분이라면 쉽게 공감하실텐데요, 이 경우 웹사이트 이용이 불가능할 정도로 레이아웃이 뒤틀려버리기도 합니다. 심한 경우, 아이폰과 같이 플래시를 지원하지 않는 스마트폰으로 접속하면 아무것도 없는 하얀 화면만을 멍하니 바라볼 수밖에 없죠.

그렇다면 왜 모바일 사이트인가?

스마트폰은 데스크탑 PC와 많은 차이점이 있습니다.

대표적으로 화면의 넓이가 그렇죠. 데스크탑의 경우, 천차만별이긴 해도 800픽셀 이상의 가로 너비를 지원합니다. (그것도 극소수만 그렇고 요즘은 대체로 1024픽셀 이상이죠.)

하지만 스마트폰은 이보다 화면이 작습니다. 예컨대 아이폰4의 경우 가로모드일 때 화면 크기가 480픽셀입니다. 그렇기 때문에 스마트폰으로 모바일 웹 환경을 지원하지 않는 웹사이트에 들어가면 작은 화면 안에 큰 웹사이트를 축소해 놓은 모양을 발견하게 되는 것입니다. 당연하게도, 웹사이트를 이용하려면 화면을 일일이 확대해야 합니다. 꽤 불편한 일이죠.

인터페이스도 다릅니다. 데스크탑 PC는 대부분 키보드와 마우스 특히 그 중에서도 주로 마우스로 조작합니다.

하지만 스마트폰의 경우, 대부분 터치 기반이기 때문에 손가락을 이용하죠. 조작에 있어서 마우스보다 정교함이 떨어지는 터치 기반 인터페이스에서는 실수로 다른 영역을 터치하거나 터치 자체가 실패하는 경우가 발생하지 않도록 화면상의 터치 영역이 더 분명해야 하고 충분히 커야합니다.

따라서 모바일 환경에 맞는 웹 서비스를 효과적으로 제공하려면 스마트폰의 특성에 맞는 디자인과 구성이 필요했습니다.

그래서 저희 〈레프트21〉 웹개발자들은, 스마트폰으로 사이트에 들어왔을 때 모양새가 크게 깨지지 않았음에도 불구하고 모바일에서 좀더 편하게 사용할 수 있는 사이트를 구축하자고 결정했습니다.

사실 저희 〈레프트21〉은 이렇게 날로 늘어가는 모바일 기기 이용자들을 위해, 지난 63호부터 지면에 QR코드를 함께 인쇄하기 시작했고 2010년 9월 말 부터 〈레프트21〉 모바일 테스트 페이지를 이미 개장해 놓고 있었습니다!

미디어 쿼리 그리고 반응형 웹

위에서 얘기한 주요한 이슈 즉,

기존 웹사이트의 기능과 컨텐츠를 그대로 제공할 것 그리고
스마프폰의 특성에 맞는 새로운 디자인을 제공할 것,

이 두가지를 충족시키기 위해 저희가 내린 최선의 처방은 반응형 웹디자인(responsive web design)을 적용하는 것이었습니다. 반응형 웹디자인이란 인터넷 창 크기에 따라 웹사이트의 모양을 바꿔 주는, 그래서 다양한 화면 크기를 가진 다양한 기기별로 최적의 사용자 경험을 줄 수 있도록 하자는 새로운 기술 개념인데요, 이 개념을 위해 미디어 쿼리라는 최신기술을 적용했습니다. 아래 영상을 참고해 보세요.

이렇게 했을 때 장점이 또 있습니다.

일반적으로 대부분의 모바일 페이지는 스마트폰을 위한 새로운 페이지와 웹페이지 주소를 가집니다. 가령, 웹사이트의 주소가 www.site.com일 때, 모바일 사이트의 주소는 m.site.com과 같은 식으로 제공됩니다.

그래서 데스크탑 PC인지 스마트폰인지를 검사해서 스마트폰인 경우에는 www.site.com으로 접근하더라도 m.site.com으로 보내버리는 방식을 채택합니다.

언뜻 보기에는 합리적으로 보이는 이 방식은 유지보수에 애를 먹을 수 있습니다. 예컨대 이전에는 없던 새로운 스마트폰이 만들어질 때마다 코드 수정을 해야 할 가능성이 크고, 데스크탑 화면에서 보이는 페이지에 새로운 컨텐츠를 추가할 때, 모바일 페이지에도 일일이 추가해 주어야 하겠죠.

그렇지만 반응형 웹은 다릅니다. 데스크탑 PC인지 스마트폰인지에 따라 웹사이트를 달리 하는 게 아니라, 브라우저의 창 너비에 따라 같은 웹사이트를 모양만 달리 해 보여 주는 것이기 때문에 웹페이지 주소를 한 가지만 사용할 수 있습니다. 이렇게 하면 데스크탑 사용자가 트위터에서 어떤 글을 클릭했을 때, m.site.com 으로 이동하게 되어 가로가 열라 긴 모바일 화면이 나오는 당황스런 상황을 방지할 수 있습니다.

또한 기존 사이트의 기본 기능에 디자인만 달리하는 접근법을 취하기 때문에 같은 기능을 두 번 구현하지 않아도 됩니다. m.site.com 형식으로 운영할 경우에는, (사실상 같은 내용을 보여 주는 두 개의 사이트를 운영하는 것입니다. 그래서) 같은 기능을 데스크탑 웹사이트와 모바일 웹사이트에 각각 구현해야 합니다. 꽤 성가신 일이죠.

게다가 새로운 모바일 기기가 만들어지더라도 일일이 대응할 필요가 없다는 장점도 생깁니다.

<레프트21>이 취한 방식을 사용한다면 비용을 상당히 줄일 수 있는 것입니다.

해당 웹사이트의 구조가 웹표준을 잘 지키지 않았거나, HTML 마크업을 올바른 쓰임새에 따라 사용하지 않았다면 물론 반응형 웹디자인을 사용하는 것이 만만한 작업이 아닐 수 있습니다.

그러나 아쉬움도..

저희 〈레프트21〉 웹개발자들은 모바일 웹 서비스를 더 일찍 완벽하게 제공하고 싶었습니다. 하지만 몇 명 되지 않는 개발 인력과 그나마도 초보인 저희의 주관적인 역량으로는 사실 무리한 바람이었죠. 사실, 지금의 〈레프트21〉 웹사이트 역시 모든 페이지들을 모바일 페이지로 제공하지 못하고 있습니다.

가장 주요한 페이지들이거나 통계상 방문수가 많은 인덱스(첫 화면), 기사보기, 전체기사 목록, 전체 온라인 기사/온라인 독자편지 목록, 정기구독, 후원하기 - 여섯 개 페이지의 모바일 뷰만을 우선 제공할 수 밖에 없었습니다.

이제 저희는 잠시 나머지 과제들을 할 일 목록에 넣어두고, 또 다른 개발 프로젝트에 들어갑니다. 그동안 〈레프트21〉 웹사이트를 모바일로도 많이 애용해 주시고요, 불편함이 있으시다면 언제든지 의견 주시면 감사하겠습니다~

참, 이어지는 ‘레프트21 모바일 ― 자세히 살펴보기’ 글에서는 이번 〈레프트21〉 모바일 사이트의 주요한 특징들인 반응형 웹, 미디어 쿼리, PC화면 보기 미지원 등에 대한 이야기를 다룹니다. 관심있는 분들은 한 번 읽어봐주세요.

레프트21 모바일 ― 자세히 살펴보기

빨간 장미 — Thu, 06 Oct 2011 17:04:13 +0900

레프트21 모바일 사이트가 얼마 전에 개장했습니다. 단지 화면을 좀 모바일에 맞게 개편한 것이라고 생각하실 수도 있습니다. 하지만, 곳곳에 배려들이 들어가 있다는 사실을 알아 주셨으면 좋겠습니다. ^^

어떤 기획의도를 가지고 모바일 사이트를 만들었는지 적은 글이 이 글 바로 위에 있는 "<레프트21을 그대 손 안에!"입니다. 저 글을 못 읽으신 분들이라면 저 글 먼저 읽고 이 글을 읽으러 돌아 오세요.

지금부터 이 글에서는 눈여겨 보지 않으면 잘 모를 수 있는, 그런 기능들을 간략히 설명드리도록 하겠습니다.

반응형 웹 ― 모든기능을 구현하라

기존 모바일 웹의 대부분은 m.domain.com과 같이 모바일 페이지를 별도로 만들어 접근하도록 합니다. 일종의 사이트 구축을 하나 더 하는 셈이 되는 거죠. 이렇게 하면 비용과 시간이 많이 듭니다.

이렇게 구축하는 경우 모바일 페이지에는 PC에서 접근할 수 있는 기능들을 지원하지 않는 경우가 많습니다. 모바일 사용자들은 특정 기능에 접근하지 못하게 된 거죠. 이런 것때문에 'PC화면보기'라는 링크를 하나 더 만들어 둡니다. PC화면 보기 버튼이 없으면 더 골때리는 상황이 벌어집니다. 특정 기능에는 아예 접근을 못하게 되니까요. 접근성 개선을 위해 모바일 페이지를 만들었지만 이 때문에 또 다른 접근성 문제가 생기는 아이러니한 상황이 벌어지는 것입니다.

레프트21은 이 문제를 해결하기 위해 ‘미디어쿼리’라고 부르는 기술을 사용하였습니다. 이 기술은 반응형 웹을 구현하기위해 사용하는 기술 중 하나입니다. 쉽게 말해서 기기의 화면 크기에 따라 레이아웃이나 스타일이 바뀌도록 한 것입니다. 긴 설명보다는 직접 보는것이 이해가 빠를 것입니다.

아래 동영상을 보시면 브라우저 창이 특정크기 이하가 되면 모양이 바뀌는 것을 볼 수 있습니다. PC에서 접할 수 있었던 모든 기능을 화면 크기에 따라 모양만 바꿔서 보여 준다고 보면 됩니다. 따라서 m.left21.com와 같은 식으로 모바일로 보기위해 다른 주소로 접근할 필요가 없습니다. left21.com으로 접근하면 화면 크기에 맞게 볼 수 있습니다.

가로크기가 499px이하인 경우에만 모바일에 맞는 화면으로 변경이 되도록 했기 때문에 499px보다 큰 테블릿과 같은 기기에서는 PC에서 보는 화면과 동일합니다.

다만 기사보기 화면에서는 일부 기능이 없습니다. 이 화면은 레프트21 모바일 최적화를 하기 전에 임시로 만들었는데요, 그 때는 반응형 웹 기술에 대해 잘 몰랐기 때문입니다;;

상세 설명!

첫화면 섹션 구분과 바로가기 기능

모바일 화면 디자인에서 가장 고민이되고 토론이 많이 되었던 것이 첫화면 디자인이었습니다. 첫화면은 매우 많은 내용이 있기 때문에 단순히 일렬로 나열하면 매우 긴 스크롤이 생깁니다. PC에서 보는 것보다는 웹페이지를 탐색하기 힘들어 지죠. 그래서 '기능을 축소해야하지 않을까?'라는 유혹을 많이 받게됩니다.

그러나 모바일로 접근했을때 PC로 사용했던 기능이(사소한 기능이라고 하더라도) 없을때, 사용자들은 당황할 것입니다. 작은 화면에 모든 기능이 들어갈 수 있도록 하면서도 사용이 편리하도록 할 필요가 있었습니다.

이를 해소하기 위한 조치가 레이아웃을 섹션으로 나누고, 바로가기 메뉴를 통해 각 섹션으로 쉽게 이동할 수 있도록 했습니다. 그림으로 보시죠!

섹션구분(왼쪽)과 바로가기메뉴를 펼쳤을 때(오른쪽)

위 그림에서 왼쪽은 레이아웃을 보여줍니다. 크게 섹션을 메인기사, 특집, 주요기사, 광고, 일반기사, 더보기로 나누었습니다. 오른쪽 그림은 바로가기 메뉴입니다. 모바일용 레이아웃에서 맨 위쪽에는 바로 가기 메뉴들이 펼쳐져 있습니다. 바로가기 메뉴를 이용하면 각 섹션뿐만 아니라 다른 기능으로도 바로 이동할 수 있습니다. 그리고 바로바기 메뉴는 각 섹션 상단에도 넣었습니다. 따라서 바로가기를 잘 활용하면 스크롤 압박을 덜고 좀 더 손쉽게 첫화면을 경험하실 수 있습니다. 아래 그림 참고하세요 ^^

검색

m.domain.com 사이트들에 가 보면 검색 기능이 없는 경우들이 종종 있습니다. 당장 오마이뉴스만 해도 모바일 사이트에선 검색 기능이 빠져있습니다.

그래서 기사를 검색하려면 구글로 하거나, PC화면 보기로 들어가야 합니다. 레프트21은 모바일에서 모든 기능에 접근할 수 있도록 하는 걸 목표했습니다. 그래서 모바일 화면에서도 검색을 할 수 있게 했습니다.

단, 직관성을 유지하기 위해 데스크탑에 있는 검색 종류 선택은 없앴습니다. 대신, 구글 검색을 하고 난 뒤에 '시간순 검색'을 선택할 수 있도록 만들었습니다. 같은 기능을 이용할 수 있도록 한 것이죠.

확대 가능

레프트21 모바일 뷰는 다른 m.domain.com 사이트들과 달리 화면 확대가 가능합니다. 사실 이건 큰 차이가 없다고 생각할 수도 있는 부분입니다만, 이미지를 자세히 보고 싶다거나, 작은 글씨를 보고 싶다거나 할 때 유용할 것입니다.

화면이든 기능이든 사용자가 제어할 수 있어야 한다고 생각하기 때문에 그렇게 했습니다.

후원과 정기구독

모바일에 최적화하면서 후원과 정기구독 페이지 자체에 많은 변화가 있었습니다. 스크린샷으로 보실까요?

레프트21 후원은 후원회원이 되어 정기적으로 CMS 후원을 하는 경우와 한 번 후원하는 경우로 나뉘어 있습니다. 예전에는 '한 번 후원하기'가 아니라 '후원하기'로 돼 있었습니다. 즉, 후원회원 신청하기와 후원하기 사이에 어떤 차이가 있는지 이름만 보고는 직관적으로 알기가 힘들었던 것입니다.

그리고 맨 위에 안내문이 너무 길어서 후원회원과 한 번 후원을 선택하러 내려오기까지 꽤 스크롤을 해야 했습니다. 둘 다 강조조 안 돼 있었고요. 이 모든 것을 한 방에 수정한 것입니다. 이전 후원 화면과 비교해 보세요.

후원 종류 선택을 찾기가 예전보다 훨씬 쉬워진 것을 확인할 수 있으시겠죠?

아래는 후원 정보를 입력하는 폼입니다. 입력하는 칸이 시원시원해졌습니다.

사실 이렇게 시원시원하게 만든 것은, 보기 좋다는 점도 있지만, 모바일에서 입력하기 편하게 하기 위한 배려가 작용했습니다.

모바일에서 입력칸의 사이즈가 작을 경우에는 입력시 화면이 확대돼 버립니다. 흔히 일어나는 경우는 데스크탑 화면에서 뭔가를 입력할 때 화면이 확대되는 것입니다. m.domain.com 같은 데서는 입력을 할 때 화면이 확대되지 않는데, 그건 화면확대 자체를 원천 봉쇄해 뒀기 때문입니다.

레프트21 모바일 뷰의 경우에는, 화면 확대를 가능하게 해 뒀습니다. 그랬더니 입력을 하려고 할 때 화면이 확대되는 현상이 발생했습니다. 그냥 넘어갈 수도 있는 문제였습니다만 해결했습니다. 글자 크기가 일정정도 이상이 되면 화면이 확대되지 않더라고요.

아래 이미지를 참고하세요.

△데스크탑 화면과 모바일 뷰를 비교한 것이므로 공정한 비교는 아니죠. 그냥 이렇게 된다 하는 걸 보여 드리기 위해서 만든 이미지입니다.

모바일 후원, 정기구독시 키패드

다음으로, 모바일에서 정기구독과 후원을 하실 때 편리하게 한 것을 소개하려고 합니다.

아래 그림을 보세요.

이메일인 경우 이메일에 관련한 키패드가, 숫자인 경우에는 숫자 키패드가 나오게 만들었습니다. 물론, 아이폰에서만 지원되는 기능이긴 합니다만, 향후에 안드로이드도 버전업을 하면서 같은 기능을 탑재하지 않을까 기대하고 있습니다.

끝!

여기까지입니다!

애플 제품들이 좋은 반응을 얻는 이유는 디테일에 미친듯한(!) 신경을 쓰기 때문입니다. 저희 경우엔 자원이 한정돼 있어서 그정도로 노력을 기울이는 것은 거의 불가능합니다만, 그래도 많이 사용하는 것에는 디테일을 신경쓰기 위해 노력했습니다.

이런 노력의 결과 조금이나마 모바일로 기사를 보는데에 도움이 되었다면 저희는 만족입니다. 사용하시면서 불편한 점이나 의견있다면 댓글 달아주시거나 레프트21로 의견을 주십시요.

마르크스21 광고를 개선했습니다

녹풍 — Tue, 12 Apr 2011 01:31:56 +0900

레프트21 첫 화면 중간에는 마르크스21 광고가 있습니다. 마르크스21은 마르크스주의 입장에서 사회 문제들을 분석하는 계간지입니다. 레프트21이 광고를 해 줄 만하죠. ^^ 추천하는 글도 많이 있습니다. 레프트21 기자들이 기고를 많이 하기도 합니다.

그런데, 이걸 광고하는 방식에 문제가 있었다고 봅니다. 일단 아래 이미지를 보실까요?

기사 중간에 "나는 광고요!" 하는 식으로 저렇게 마르크스21 광고가 있었습니다.

웹사이트 사용성 문제의 대가 제이콥 닐슨은 각종 광고 배너에 대해 이렇게 말합니다.

사용자들이 갖고 있는 가장 훌륭한 능력은 믿을 수 없을 정도로 강력한 "배너 무시" 능력이다. 시선 추적 연구에 따르면 백만 분의 1초 동안 배너를 쳐다보지만 그 이상은 절대로 쳐다보지 않거나 읽지 않는다는 기록을 보였다. 게다가 사용자들은 그들의 눈을 훈련시켜 상당히 불쾌하게 깜박이는 배너를 감각적으로 잽싸게 피하기까지 한다. … 페이지의 여백에 있는 다채로운 색상의 상자들 역시 무시한다. … 특히 애니메이션을 포함하고 있는 것은 사용자들로부터 무시될 수 있는 위험을 안고 있는 것이다. … 테스트를 끝낸 후 사용자들에게 물어볼 때마다 그들은 항상 "아 보긴 했지만 광고처럼 보여 무시했어요."라고 말한다.(《웹 사용성 중심의 웹 사이트 제작론》,76p)

그렇습니다. 예전 마르크스21 광고는 바로 너무나 광고처럼 보인다는 점이 문제였습니다.

아마도 레프트21 독자분들 중 많은 분들이 마르크스21 광고를 보지 못했을 가능성이 큽니다. 레프트21 독자분들도 "믿을 수 없을 정도로 강력한 '배너 무시' 능력"이 있을 테니까 말입니다.

역설

마르크스21 글을 많이 읽었으면 좋겠다는 생각으로 띄워 둔 배너가 역설적으로 아무도 마르크스21 광고를 보지 못하게 만드는 효과를 냈던 것입니다.

그래서, 아래처럼 고쳤습니다.

차이점이 확 보이나요? 일단 그냥 기사들 중 하나처럼 보입니다. 그게 가장 큰 변화입니다. 레프트21 독자분들이 마르크스21 기사를 보게 될 확률이 더 높아졌다고 생각합니다.

또하나 다른 점은, 바로 기사를 찬찬히 훑어볼 수 있게 됐다는 점입니다. 예전 광고는 마르크스21에 실린 글들이 무의미하게 깜빡거리면서 전환됐습니다. 광고 배너를 클릭하면 그냥 마르크스21 웹사이트로 이동시켰죠.

이제는 다릅니다. 좌우 화살표로 어떤 기사가 있는지 살펴 보고 원하는 기사를 클릭할 수 있게 됐습니다. 그리고, 기사를 클릭하면 바로 해당 기사로 이동합니다. 큰 변화라고 할 수 있고, 사용자들에게 제어권을 넘겨준 것이라고 할 수 있겠죠.

최악의 웹사이트 디자인

이 또한 사용성의 대가 제이콥 닐슨에게 배운 바를 실천한 것입니다. 제이콥 닐슨은 최악의 웹사이트 디자인 10가지 중 하나인 "광고처럼 보이는 디자인 요소"의 하위 항목으로 "움직이는 그림과 자동 스크롤되는 문자열"을 넣었습니다.

이 관점에서 본다면 마르크스21 예전 광고는 최악의 웹사이트 디자인에 딱 들어맞았던 것이죠. 말하면 자동 스크롤되는 문자열이었기 때문입니다.

이제는 달라졌습니다. 마르크스21의 기사 전체를 보고 싶은 사용자는 자신이 직접 화살표를 눌러서 기사들을 탐색해 볼 수 있습니다. 그렇지 않다면 그냥 지나가면 됩니다. 사용자의 의도와 무관하게 움직이는 불쾌한 짓따위 하지 않는 것입니다.

한가지 더 말하자면, 좌우 화살표는 클릭할 수 있다는 느낌을 확실히 주는 입체감 있는 버튼으로 처리했습니다. ^^

저희 웹마스터들은 레프트21 독자분들이 더 양질의 콘텐트를 만날 수 있게 되기를 바랍니다. 마르크스21 광고를 개선한 것은 바로 그런 바람이 있기 때문입니다.

오늘 이야기는 이것으로 끝입니다. ^^

〈레프트21〉웹사이트의 사용성 문제를 수학적으로 분석해보았습니다

빨간 장미 — Wed, 06 Apr 2011 21:13:13 +0900

저희는 제이콥 닐슨의 책 《웹 사용성 중심의 웹 사이트 제작론》으로 세미나를 진행하고 있습니다. 세미나는 웹사이트의 사용성에 대한 것입니다. 많은 경우 레프트21 웹사이트를 대상으로 직접 적용을 해보고 있습니다.

제이콥 닐슨은 이 책 4장에서 웹사이트 사용성 문제를 수학적으로 측정해보는 내용을 소개했습니다. 그는 사용성 문제의 심각성을 다음 세가지 기준으로 결정한다고 했습니다.

빈도수 : 얼마나 많은 사람들이 문제를 경험하는가?
충격정도 : 얼마나 큰 어려움을 제공하는가?
지속성 : 얼마나 많이 반복해서 발생하는가?

이것을 기준으로 사용성 지수를 수치화할 수 있습니다. 각 기준은 심각한 문제일 경우 3점, 정도가 미비한 경우 1점, 그 사이는 2점으로 계산했습니다. 계산 공식은 다음과 같습니다.

제이콥 닐슨은 또한 “사람들이 경험하게 되는 사용성 문제의 약 3/4이 검색, 읽기, 정보 이해 등 사용자의 기본 목표와 관계”가 많다고 했습니다. 이 핵심적인 항목을 중심으로 〈레프트21〉웹사이트를 예를 들어서 분석해볼까합니다.

분석 결과는 제 블로그의 "페이지 디자인 사용성 보고서 – 〈레프트21〉웹사이트를 통해"에서 보실 수 있습니다^^

독자의 능동성이 빠른 대응을 가능하게 한 사례 - 핵 발전

녹풍 — Mon, 28 Mar 2011 14:55:07 +0900

일본 대지진이 핵 발전소 폭발로 이어지던 시점입니다.

우선 일본의 민중들이 겪고 있는 고통에 분노를 느낍니다. 일본 지배자들은 늘 일본 민중과 주변국 민중들에게 고통을 안겨 줬습니다. (이명박이라고 조금이라도 나을 건 없습니다만.)

레프트21은 핵에 대해서 발빠르게 기사를 냈습니다만, 한나절쯤 비는 시간이 있었습니다.

이 때도 많은 사람들이 "레프트21 입장은 뭘까"를 궁금해 하면서 우리 웹사이트에 들렀을 것입니다.

그런데 웹마스터인 저는 거기에 대해 충분히 인식을 하지는 못하고 있었습니다. "기사는 언제 나오지?" 하는 생각만 하고 있었을 따름이죠.

그런데 레프트21 독자인 김지태 씨 [각주:1]가 저에게 "다함께의 소책자인 <기후 변화 - 왜 핵 에너지는 대안이 아닌가?>를 레프트21에서 광고하면 어떻겠냐" 하고 말을 해 줬습니다. (다함께와 레프트21은 제휴 관계입니다.)

저는 좋은 아이디어라고 생각했습니다. 아직 기사가 나오지 않은 시점에서 웹사이트 방문자들에게 적절한 콘텐츠를 제공하는 고민을 하는 것이 웹마스터의 임무 중 하나인데, 안일하지 않았나 하는 반성을 함께 했습니다.

그리고 저는 곧장 능동적 고민 모드로 들어갔습니다. 그래서 김지태 씨가 낸 아이디어에 추가로 "핵에너지가 기후변화의 대안인가" 라는 레프트21의 예전 기획연재를 소개하는 것까지 생각을 해냈습니다. (빠르게 반성을 하고 태도를 금방 바꿨다고요! ㅋ)

아래의 광고는 그래서 탄생한 것입니다.

이게 핵 관련 기사들이 나오기 전까지 반나절 정도 레프트21 왼쪽 상단에 걸려 있었습니다.

교훈

웹사이트는 정보의 보고입니다. 도서관 같죠. 레프트21이 가지고 있는 방대한 콘텐츠를 곳곳에 어떻게 배치할 것인가 하는 점은 웹마스터가 늘 고민해야 하는 문제입니다.

이번 일본의 핵발전 사고는 레프트21이 오랫동안 경고해 온 핵발전의 위험성을 드러낸 것이었습니다.

레프트21이 그동안 충분히 이 문제를 다뤄 왔기 때문에 이번 일본 문제를 바탕으로 글이 나오기 전에도 독자들에게 소개해 줄만한 것들이 많이 있었던 것이죠.

그리고 김지태 씨의 제안으로 비로소 그런 자원들이 훌륭하게 사용될 수 있었습니다. (물론 기사가 나오고 나서는 기사들이 중요한 역할을 했죠.)

저는 웹마스터로서 김지태 씨의 제안을 받자마자 적극적으로 수용해서 아이디어를 더 발전시켰습니다. 이런 것을 협력 플레이라고 하죠! ^^

여튼간에 좋은 교훈을 얻을 수 있는 사건이었습니다.

앞으로도 정치적으로 많은 고민을 하는 웹마스터가 되도록 노력하겠습니다!

김지태 씨는 레프트21 판매로 벌금형을 선고받은 6인 중 한 명입니다. [본문으로]

구글 맞춤 검색 에러로, 검색을 일시 변경했습니다

레프트21웹마스터 — Sat, 19 Mar 2011 14:41:15 +0900

지금은 원래대로 돌아왔습니다. 다만, 이 기능을 그대로 활용할 수 있도록, 검색어를 입력했을 경우 시간순 검색하기와 함께 '구글에서 검색하기'가 새로운 항목으로 추가됐습니다.

일단 검색을 하면 오른쪽에 '시간순 검색하기'와 함께 '구글에서 검색하기' 버튼이 뜹니다.

------------------

오늘 아침에 출근을 해서 보니 레프트21의 구글 맞춤 검색에 에러가 발생했습니다. 이것저것 살펴봤는데 레프트21쪽 문제가 아니라 구글쪽 문제였습니다.

그림을 보세요. 핵발전으로 검색을 했는데 아무 것도 뜨지 않았습니다. "모든 핵발전소를 폐쇄하라" 기사 바로 위에 얇은 박스가 보이시죠? 거기가 바로 검색 결과가 나와야 하는 공간입니다.

심지어 검색결과가 없는 경우에는 "검색 결과가 없습니다" 하는 메세지가 떠야 하는데 그것조차 나오지 않았습니다.

그래서 일단, 구글 페이지에서 검색을 시키도록 바꿨습니다. 그래서 이제 검색하면 아래 동영상처럼 새 창이 뜨면서 구글 검색이 나오고 거기서 검색이 됩니다. 임시조치죠.

자, 그런데 이렇게 되면서 몇 가지 구글 검색 기능을 추가로 사용할 수 있게 됐습니다.

레프트21 이미지 검색과 얼굴 검색
타임라인 검색 : 특정 연도가 검색어와 함께 언급된 글을 찾습니다.
기간 설정 검색 : 기간을 설정해서 찾을 수 있는데 약간 부정확한 게 있습니다.
이미지가 포함된 웹 검색 : 글과 함께 글에 포함된 이미지 조각이 함께 나옵니다.

모두 영상으로 찍었으니 참고하시면 도움이 될 거예요. 긴 설명은 안 하겠습니다. ^^

이미지 검색

타임라인 검색

기간 설정

이미지가 포함된 웹

한 번 본 기사는 제목이 회색(혹은 보라색) 표시됩니다.

녹풍 — Sun, 13 Mar 2011 14:33:25 +0900

<레프트21> 웹마스터들은 웹사이트를 개선하기 위해 세미나를 진행하고 있습니다. 요즘 보는 책은 바로 《웹 사용성 중심의 웹 사이트 제작론》이라는 책입니다.

그런데 이 책에서 제이콥 닐슨은 "사용자들이 이미 방문했던 페이지에 대해 일단 알게 되면 부주의하게 다시 방문하는 일이 줄어든다" 고 말합니다. 그리고 이미 방문한 링크를 표시해 주지 않는 것이 "심각한 사용성 문제"가 될 수 있다고 말합니다.

아래는 좀 긴 인용입니다.

"우리가 진행한 테스트에서 사용자들은 페이지에 무의식적으로 다시 방문했고 더 쉽게 길을 잃었다. 어느 페이지에 이미 방문했는지 확실치 않은 비슷한 링크들 간의 차이를 잘못 인식하거나 모르고 지나치는 일이 발생하여 해당 사이트의 이용을 쉽게 포기했다. 사용자들의 작업을 제대로 반영하지 못하고 그들의 여행을 제대로 돕지 못한 사이트에서는 성취도가 낮게 나타났다.

"그러한 사용성 문제는 시각적 차이가 없는 경우 클릭한 것을 종종 기억하지 못하게 되는, 단기 기억력이 약한 사용자일 경우 상황은 더 악화된다. 물론 모든 인간은 정도의 차이는 있지만 어느 정도는 단기 기억력 문제를 갖고 있고 따라서 모든 사용자들은 링크 색상 변경으로 만족감을 얻는다. 확실히 이 부분은 대다수 사람들보다는 특정 소수 계층에 영향을 미치기 때문에, 예를 들어 나이 많은 사용자가 많은 사이트라면 링크 색상을 변경하는 것이 특히 중요하다."

ㅡ 웹 사용성 중심의 웹 사이트 제작론, 61p

어익후! <레프트21>은 이미 방문한 링크를 표시해 주는 기능이 없었습니다. <레프트21> 웹사이트가 생긴 지 2년이 됐지만 그런 걸 고려한 적이 없었죠.

하지만 생각해 보니 저도 이미 본 기사를 또 클릭해 들어가서 내용을 보고 나서야 내가 본 기사라는 걸 눈치챈 적이 있는 것 같습니다.

많은 링크들 중에 내가 안 읽은 기사가 뭐더라 하고 고민을 했던 적도 있는 것 같습니다. 그러다가 읽지 않은 기사가 껴 있는데도 다 읽었다고 결론내린 적이 있을지도 모르겠습니다.

링크 색깔만 변하게 해 주면 일단 많은 부분이 해결되는 것이죠!

그래서 변경을 가했습니다. 아래 동영상을 참고하세요! ㅋ

동영상을 보면 링크를 클릭하고 돌아올 때마다 방금 클릭한 링크가 회색으로 변하는 것을 알 수 있습니다. (본문 안에 있는 링크는 방문한 놈일 경우 보라색으로 변합니다.)

어때요? 앞으로는 어떤 기사가 읽은 기사인지 판단하기가 한결 쉽겠죠? ^^

앞으로도 노력하는 레프트21 웹마스터가 되도록 하겠습니다. 사실 개선한 게 몇 개 더 있는데 바빠서 쓸 시간이 없습니다;; ㅋㅋ 또 봐요~!

툴팁 반응속도개선 ― 반응속도를 예전으로 되돌린 이유

빨간 장미 — Thu, 17 Feb 2011 11:55:19 +0900

툴팁이 뭐냐굽쇼? 아래 그림을 보시죠.

예전에 적용했던 툴팁의 모습입니다

링크에 마우스를 올렸을 때 자막처럼 나오는 박스를 툴팁이라고 합니다. 이것의 반응속도에 대한 이야기를 하려고 합니다. 예전에 <레프트21>에서 툴팁 반응속도를 빠르게 개선한 적이 있었습니다.("링크설명(툴팁)을 제깍제깍뜨게 만들다")

그러나 항상 빠른게 좋은 것은 아닙니다. 웹 사용성의 대가 제이콥 닐슨은 ^[각주:1]드롭다운 메뉴의 반응속도에 관해 다음과 같이 말했습니다.

반응속도를 너무 빠르게하지 마시길. 마우스는 어떤 것을 보여주기 전까지 0.5초동안 고정되어있어야 합니다. 이 가이드라인을 위반하면 사용자가 마우스를 움직일 때 화면이 참을 수 없는 깜빡임을 유발합니다.(tooltip도 마찬가지)

관련글 보기

사용성을 향상시키는 0.5초

0.5초는 아주 짧은 속도이긴 하지만 바로 보여주는것과 확실히 차이는 납니다. 왜 바로 보여주지 않고 잠깐 기다려야 할까요? 여러분 자신을 한 번 생각해봅시다. 여러분의 움직임이 슬로우비디오처럼 천천히 재생된다고 생각하시고 말입니다. 링크에 마우스를 올릴 때 툴팁을 기대하면서 올리시나요? 대부분의 경우는 클릭하기위해 올리거나 그냥 지나치는 경우일 것입니다. 물론 툴팁을 기대하면서 마우스를 올리는 경우도 있습니다. 중요한 것은 항상 툴팁을 기대하면서 마우스를 링크에 올리지 않는다는 겁니다.

툴팁을 기대하면서 의도적으로 마우스를 링크에 갖다 대었을 경우에는 툴팁이 빨리나오는 것이 그 사용자에게 좋을 것입니다. 그런데 그냥 마우스를 특정 위치로 이동하고 있는 사용자의 경우 툴팁 반응속도가 0초라면 사용자의 의도와 무관한 툴팁이 깜빡거릴 것입니다. 클릭을 작정하고 마우스를 올렸을 경우에도 마찬가지죠.

(단, 툴팁이나 드롭된 메뉴가 제거될 때는 빨라야합니다.)

따라서 0.5초의 작은 간격으로 이런 문제를 완화시킬 수 있는 것입니다. 그래서 반응속도를 빠르게 했던 '툴팁 플러그인'을 제거했습니다. 그러나 링크 태그에 "title='링크에 대한 설명'" 이런식으로 쓰면 플러그인이 없어도 브라우져가 툴팁을 적당한 속도로 보여줍니다. Chrome브라우져에서는 아래와 같이 보입니다.

현재 레프트21 툴팁

접근성

또한, 툴팁의 반응 속도를 낮춘 또 한가지의 중요한 이유는 웹 접근성 때문입니다. 특히 광과민성 발작 증세를 지닌 장애인의 경우 깜빡거리는 것에 반응해 발작을 일으킬 수 있는데요, 특히 깜빡거리는 주파수의 범위가 3㎐에서 49㎐ 사이인 경우에 발작을 일으키는 원인이 되고, 20㎐ 부근이 발작을 가장 잘 일으킵니다. (자료 출처 : 인터넷 웹 컨텐츠 접근성 지침. 이하 접근성 지침 ) 3Hz 인 경우에 1초에 3번 깜빡이는 정도를 말합니다. 이정도의 깜빡임은 일반인들에게도 불편함을 줄 수 있습니다.

한 국에서는 웹 접근성에 대한 고려가 상당히 불충분한 현실인데요, 이런 ‘인위적 실수’는 진보진영 웹 사이트에서도 심심치 않게 발견되곤 합니다. 사회 변혁과 진보를 바라는 더 많은 사람들과 만나기 위해, 저희 레프트21 웹마스터들은 기능 개선과 사용성 못지 않게 접근성에 대해서도 항상 고민하고 있답니다.^^

빠른 툴팁에 익숙해졌다가 약간 당황하셨던 분들이 있을것입니다. 그래서 이렇게 자세한 설명을 하게 된 것이기도 합니다. 0.5초만 기다려주세요^^

드롭다운 메뉴는 메뉴바에 마우스를 올렸을 때 쭉 밑으로 하위메뉴가 흘러나오도록 구성된 메뉴를 말합니다. [본문으로]

특별이슈 페이지 ― 기존 디자인의 일관성을 해치지 않는 디자인재설계

빨간 장미 — Mon, 14 Feb 2011 19:30:40 +0900

특별이슈 페이지. 그러니까 집중이슈 중에서 정말 특별히 강조하기 위해 만든 거예요. 현재 특별이슈 페이지는 중동의 민중반란입니다. 현재 이집트에서 벌어지고 있는 혁명은 전 세계 노동자들에게 큰 영감을 주고 있습니다. <레프트21>에서도 이집트 소식들을 혁명적 관점에서 보는 기사들을 비중을 두고 다루고 있습니다. 그래서 특별이슈 페이지를 만들게 되었죠.

어떻게 바뀌었나구요? 예전페이지와 특별집중이슈를 적용한 페이지의 구조를 비교해보겠습니다.

기존 레프트21 첫화면입니다

위는 기존 <레프트21> 첫화면 구조입니다. 특별이슈 페이지를 넣은 경우 아래와 같이 됩니다.

특별이슈페이지가 삽입된 경우

기존 디자인의 일관성을 해치지 않는 디자인재설계

우리는 특별이슈 페이지를 디자인을 시작 할 때 외부로부터 다음과 같은 제안을 받았습니다. 새로운 첫화면을 만들어서 완전히 새롭게 "이집트 혁명"을 강조하고 원치 않는 사람들은 기존 첫화면으로 갈 수 있도록 링크를 제공하자는 것이었습니다. 이런 방법은 기존의 주류 홈페이지에서 자주 사용하던 방법이긴 합니다.

그러나 이 방법은 사용성 측면에서 좋지 않습니다.

제이콥 닐슨은 디자인 재설계를 위해 다음과 같은 조언을 했습니다.

일반적으로, 새로운 디자인은 나쁜 디자인이 될 것이다. 단순히 말해서 그것은 사용자의 기대를 무너뜨리기 때문이다. 더 좋은 전략은 친숙도로부터 출발하고 시스템이 어떻게 동작하는지에 대해서 사용자가 기대하고 있는 인식에 맞추어 설계하는 것이다.

새로운것 vs. 친숙한 것: 디자인 재설계를 위해서 얼마나 투자해야 할까

즉, 전략의 출발점은 친숙도를 해치지 않는 것으로부터 시작되야 한다는 것입니다. 왜 그럴까요? 강조를 더 화끈하게 할 수록 사람들이 더 집중해서 볼 수 있지 않을까요? 그렇지 않습니다.

사람들은 익숙한 홈페이지의 레이아웃을 무의식중에 머리속으로 인식하고 있습니다. 그 인식정보를 바탕으로 홈페이지를 순식간에 훑어봅니다(읽는게 아니라). 이것은 불과 몇초도 걸리지 않는 과정입니다. 사용자들의 이런 습관을 잘 활용한다면 디자인의 일관성을 해치지 않으면서도 작은 변화로도 충분히 강조를 줄 수 있습니다. 그래서 제이콥 닐슨은 디자인을 혁신적으로 바꿨을 경우 사용자들이 혼란^[각주:1]에 빠질 것이라고 경고합니다.

이런 사용성에 관한 분석을 바탕으로 특별이슈 페이지를 만들었습니다. 상단에 강조할 집중이슈의 제목과 기사의 제목, 그리고 사진을 시원시원하게 배치했습니다. 기존의 디자인 훼손을 최소화하기 위해 나머지 부분은 기존과 같은 구조를 유지했습니다. 아래 그림과 같이 말이죠.

위의 디자인이 최선의 디자인이라고 생각하지는 않습니다. 하지만 사용자를 배려하는 디자인을 위해 더욱 발전하는 홈페이지를 위해 노력할 겁니다. 더욱 발전하는 <레프트21>이 될 수 있도록 독자여러분! 응원과 의견을 허심탄회하게 보내주세요~^^

물론 모든 경우에 혁신적 재설계를 거부하는 것은 옳지 않습니다. 너무 오래되고 낡아 사용성에 문제가 많은 홈페이지는 사람들이 좀더 익숙하게 느끼는 디자인으로 새롭게 빠꿔야 할 수 도 있겠죠. [본문으로]