모바일 미투데이와 다음/네이버 사용성 비교

매번 감탄하지만 미투데이는, 특히 모바일 미투데이는 상당히 잘 만들어진 놈입니다.

특히 그 안정적인 레이아웃은 어찌나 편하던지..

오늘 말할것은 각 기능별 숫자키의 번호 할당에 대한 내용이 주가 됩니다.

일단 위는 모바일 미투데이의 첫화면입니다. 이것은 내 미투를 보여주면서 오로지 자기 미투 안에서만 돌아다닐 수 있습니다. 위쪽에 [①처음/②쓰기/③미친들은]의 글로벌 탭이 보이고, 아래쪽에는 [④댓글/⑥미투/핑백/댓글수신] [⑤이전글/⑧다음글] 등의 기능 버튼이 보입니다. 잘 쓰지 않는 메뉴 버튼과 핑백, 댓글수신 등의 버튼에는 굳이 숫자 키를 할당하지 않은게 보입니다.

이건 모바일 미투데이의 [미친들은] 화면입니다. 다른 미친들의 미투를 보는 화면이지요.

각 친구간 브라우징을 위한 [⑦이전친구/⑨다음친구] 버튼이 신설된게 보입니다. 이 버튼 두개는 [⑤이전글/⑧다음글] 버튼과 시각적으로 확 구분되어보이며, 더 바깥쪽에 더 크게 만들어져있어 계층 구조를 직관적으로 판별할 수 있습니다. 이전친구/다음친구는 좀 더 큰 범위에서 움직이고, 이전글/다음글은 그 친구들의 글들을 브라우징할때 사용되니까요.

아래쪽에는 '모든친구'그룹 보는 중 (ⓞ다른 그룹 선택) 버튼이 있습니다. 이것의 경우, 저는 자주 보는 미친들의 그룹을 하나로 묶어놓았는데(주로 예쁜 여자들), ③미친들은 탭을 클릭해서 바로 ⓞ다른 그룹 선택 버튼을 눌러 이동하면 되니 편리합니다.

위는 개별 글의 댓글을 확인하고 댓글을 다는 화면입니다. 아래에 보면 역시나 [⑦이전친구/⑤이전글/⑧다음글/⑨다음친구] 버튼이 보입니다. 이처럼 미투데이는 어떤 화면에 가든 같은 기능을 하는 버튼은 같은 숫자를 할당해놓았습니다. 이러니 모바일 미투데이에서는 눈감고도 브라우징이 가능할 정도입니다.

하지만 이런 미투데이에서도 아쉬운점은 한가지 있습니다. 버튼의 배치는 페이지별로 변동이 없이 안정적이지만, 휴대폰에서 숫자키의 위치가 문제지요. 문제 되는 점이 바로 댓글, 미투, 이전글, 다음글 부분입니다. [처/쓰기/미친들은] 세 버튼의 경우, 화면상에서도 맨 위고, 버튼상에서도 맨 위라 매우 직관적입니다. 맘에 들어요. 역시 잘 지정된 [이전친구/다음친구]의 경우, 7번과 9번으로 각각 휴대폰 숫자키의 오른쪽 끝과 왼쪽 끝의 7번과 9번에 배치되어있어 직관적으로 사용할 수 있습니다. 하지만 [이전글/다음글]은 가운데에 몰린 5번과 8번의 명당자리에 배치되어있습니다. 그리고 엉뚱하게 오른쪽 끝과 왼쪽 끝의 4번과 6번은 [댓글/미투]의 두가지 버튼이 할당되어있습니다. 그래서 다음 친구 버튼을 누르려 하다가 [미투]를 눌러버리는 경우가 종종 생깁니다.

만약 보고있던 사람이 맘에 안드는 사람이거나, 별 미투할 건덕지가 안되는 글에 미투를 눌러버리게 되면 이거 취소도 안되고 참 난감해지죠.

제가 생각하는 최선의 방법은 위와 같습니다. [이전글] 버튼을 5번에서 4번으로, [다음글] 버튼을 8번에서 6번으로 배치하여 위치상 직관성을 높이고, [댓글]과 [미투]를 남은 5번과 8번에 배당합니다. 사실, 취소도 안되고 자주 쓰지도 않는 [미투] 버튼에서 그냥 키 할당을 빼는게 좋을것 같긴 합니다. 실수로 누르는 경우가 많거든요. 그리고 [최근댓글] 버튼도 아쉬웠습니다. 다른 버튼들은 다 텍스트에 앞에 그림이 살짝 붙은 형태인데, 이건 전부 그림으로 만들어진 버튼이라 로딩이 느립니다. 저는 주로 모바일 미투데이에 접속하면 제일 먼저 하는게 최근 댓글 확인인데, 이게 기다리는게 정말 감질나거든요. 엄청 자주 쓰는 버튼임에도 불구하고 기능키 할당도 없고 그림으로 만들어져 느린게 불만입니다. 미투 모바일은 일단 저런것들만 해결하면 정말 멋질것 같습니다.

이번에는 모바일 다음 카페를 보지요.

이건 다음카페의 개별 게시판 내부 화면입니다. 한 화면당 9개의 게시글을 보여줍니다.

하지만 미투데이와는 다르게 각 기능 버튼보다는 각 게시글에 버튼을 할당하였습니다. 저는 이런 인터페이스에 반대합니다. 왜냐하면 ①한 화면에 한장에 보이는 9개의 글 제목이 모두 보이며 ②이용자가 주로 사용하는 버튼은 숫자키보다는 방향키이고, ③열어볼 게시글을 선택할 때 숫자키보다는 방향키를 사용할것이라 여겨지기 때문입니다. 바로 ↓ 방향키 몇번만 누르면 해당 게시글로 이동할 수 있는데, 이걸 굳이 키패드를 바라보며 숫자로 고를 리가 없다는 제 추측이 전제되어있습니다.(이건 전적으로 제 경험에 따른거니 일반인의 손에 맞춘 사용성 설계는 UT를 진행해봐야 알 노릇이지만요.)

그리고 현재 화면에 보이는 글 중 내가 볼만한 글이 안보일 경우, 다음 장으로 넘어가야하는데, 현재 시스템에서는 이 과정이 매우 복잡합니다. ↓버튼을 10번 이상 눌러 [다음목록] 버튼을 선택하거나, ↑버튼을 6번 이상 눌러 [다음목록] 버튼을 선택해야하기 때문입니다. 저는 보통 모바일 다음 카페를 '몇시간 전에 데스크탑에서 작성한 글에 댓글이 달렸는지 모바일로 확인할 때'와 '게시판에 새로운 이슈가 올라오는 등 특이 사항이 있나 확인할 때' 사용합니다. 그래서 한 화면에 보이는 게시글 목록을 확인하고 다음 화면으로 신속하게 넘어가야 합니다. 저는 앞서 미투데이와 마찬가지로 이 화면에 '기능별 버튼할당'을 사용할 것을 권합니다. [다음목록]은 9번, [이전목록]은 7번 이런식으로요.

추천 기능할당 :

① 다음탑	② 카페탑	③ 게시판목록
④ 댓글보기/게시글로 돌아가기	⑤	⑥ 글쓰기
⑦ 이전목록	⑧ 첫목록	⑨ 다음목록

그  외에 좀 지저분한 부분으로는 다음목록[3/3663] 이게 있겠네요. 굳이 페이지 전체 장 수를 표시할 필요가 없습니다. 그리고 역시 1 2 3 4 5 6 7 8 9 10 ▶(3663)의 (3663)도 없애버렸으면 좋겠네요. 심리적으로 난잡해보이고 모바일로 3663페이지까지 거슬러올라갈 가능성은 0에 수렴합니다. 그리고 또, 카페 ◆GT.. ▶▷.. 이런식으로 트리구조를 표현해주는 네비게이션은 거의 무의미해져있네요. 저거 뭐 카페 이름이 제대로 보이길 하나 게시판 이름이 제대로 보이길 하나-_-;; 해답은 뒤에서 보여줄 모바일 네이버 카페에서 찾을 수 있겠습니다.

위는 개별 게시글 화면입니다. 아래쪽에 꼬릿말이 보이고, 아랫글 윗글 등의 버튼들이 있는데, 좀 난잡합니다. 기능키 할당이 일이삼사 순서대로 그냥 넣어서 직관성이 떨어집니다.

꼬릿말 보기 화면으로 들어가서 봤습니다. 난감하네요. 앞 화면에서는 [아랫글]버튼이 1번이었는데, 이 화면에서는 2번입니다. [윗글] 버튼 역시 한칸 밀렸습니다. 중구난방이죠. 미투데이 방식으로 싹 통일할것을 권장합니다.

아래에서 모바일 네이버 카페를 알아보지요.

모바일 네이버 카페의 게시글 목록 화면은 모바일 다음 카페랑 비슷해서 그냥 뺐습니다.

이건 네이버 카페의 개별 게시글 화면입니다. 덧글보기와 덧글쓰기가 이원화되어있는건 좀 맘에 안드네요. 미투데이처럼 덧글보기 화면에 덧글쓰기가 함께 들어있으면 좋을텐데 말이지요.(덧글이 여러개일 경우, 덧글 페이징 화면 아래에 덧글 쓰기 폼이 들어가면 좋겠죠.) 이용자들은 개별 글에 어떤 덧글이 달렸는지 확인하고 거기 더해 덧글을 달고 싶어할겁니다. 이렇게 하면 덧글/답글쓰기의 병렬 배치가 가능해지고, 답글쓰기/목록 버튼을 동일 선상에 놓는걸 피할 수 있습니다. 목록은 원래 스페셜하고 자주 쓰이는 기능이니까요.

그리고 [다음/이전]버튼 배치도 맘에 듭니다. 자주 쓰게 될 다음 버튼을 이전 버튼 위에 배치한게 눈에 띕니다. 다음 버튼을 이전 버튼보다 많이 쓸 것이기에 한칸이라도 올려주는게 버튼 클릭을 줄여주는 배려가 됩니다. 그리고 각 글들의 제목도 보이니 참 좋네요. 위아래 배치가 깔끔하기도 하고요. 개인적으로는 저 근처에 목록 버튼이 오는게 의미적으로 맞을것 같아보입니다. 아래쪽의 카페메인, 가입카페, 홈/메일/카페 등 네비게이션 버튼은 트리구조를 역으로 풀어내어 순서대로 잘 넣었네요.

그외에 작성자 블로그로 바로가기 버튼을 넣어서 블로그랑 연동시킨게 눈에 띕니다. 비 모바일 환경에서의 네이버 카페/블로그 관계와 비슷하군요. 또 제목 바로 옆에 댓글 숫자를 넣고, 그걸 클릭하면 바로 댓글 보기 화면으로 이동하는건 정말 걸출하네요. 모바일 쓰는 목적이 글 보는게 아니라 글에 달린 댓글을 확인하는것일 경우, 굳이 글 밑으로 스크롤하지 않고도 확인할 수 있으니 아주 유용하게 쓸 수 있을것 같습니다. 그리고 아래의 [NEXT] 버튼 맘에 듭니다. 저 위치는 ↓버튼을 한번만 클릭하면 이동할 수 있는 위치입니다. 츅츅츅츅 넘기면서 게시글 확인할때 좋겠네요.

네이버 카페의 덧글 쓰기 화면입니다.

내용창을 선택하여 글을 쓴 다음, OK버튼을 누르고 창 밖으로 나와 등록 버튼을 선택하고 OK버튼을 눌러서 덧글을 등록하는데, 만약 주황색으로 표시한 과정 중간에 숫자키 버튼을 잘못 눌렀는데, 재수없게 그 버튼이 어떤 기능키(다음 목록? 취소? 카페메인?)에 할당이 되어있을 경우, 이용자는 엄청난 스트레스를 받게 되지요. 네이버의 경우 덧글 쓰기 화면에 숫자키 할당이 하나도 없습니다. 맘에드네요.

네이버 카페의 글 쓰기 화면입니다. 여기서는 앞서 말해온 숫자키 할당과는 별개로 재미있는 편의기능이 하나 들어있네요. 모바일로 글을 쓸 경우, 글쓰기 창을 선택하여 글을 줄줄이 쓰게 되는데, 모바일의 특성상 엔터키를 눌러 줄바꿈을 할 수 없습니다. 이를 해결해주기 위해 특수문자 # 을 사용할 경우 자동으로 줄바꿈을 해주는 옵션이 있네요. 센스있어요. 다만 등록 버튼 밑에 가입카페 전체보기 버튼이 바짝 붙어있다는게 불안하네요. 물론 ↓키를 한번 더 누르고, OK버튼을 잘못 누르는 등 두가지 실수를 동시에 범해야 불상사가 일어나겠지만, 마우스로 클릭하는데 익숙한 저는 심리적으로 저 버튼 배치가 불안불안해보입니다. 등록 버튼 누르다가 재수없게 밑에 버튼을 누를것 같거든요. (덕후적인 딴지 시선인가요?;)

이건 네이버의 가입카페 목록입니다. 앞에 [운영]마크를 표시해서 운영중인 카페를 최상위에 보여주는게 참 맘에드네요.

끝으로 대미를 장식할 모바일 네이버의 메인 화면. 저 아래 베스트 웹툰의 하단에서 딱 끊어지는 스크롤, 하단 여백과 좌우 여백, 그리고 실시간 뉴스의 썸네일과 맞춘 웹툰 썸네일 사이즈, 실시간 뉴스 옆을 활용한 날씨 아이콘 등을 비교해보며 거의 덕후적인 두려움을 느꼈습니다-_-;

예전에는 네이버 카페가 모바일로 안나온것 같은데 이번에 한번 갈아엎었나보네요. 네이버 최신유행의 냄새가 나는걸 보니 ㅎㅎ.. 다음이 서비스 하나하나 팀별로 갈아엎는다 치면, 네이버는 우르르 몰려다니며 하나씩 갈아엎고 다니나봅니다.

아무튼 여기서 모바일 화면 비교 등등은 마치겠습니다. WAP화면 캡쳐하는 도구가 없을까요? 이거 카메라로 들이대니 촬영과 편집의 압박이 심하군요. 저는 악성 완성도 덕후라 각 스크린샷 수평 맞추고, 가로세로 240x320px로 줄인다음 검정색 헤어라인 넣었습니다.