'네이버 웹툰' 모바일 서비스 UX를 분석해보자 (1)
Laws of UX 살펴보기
Laws of UX
UX/UI의 법칙
Jon Yablonski의 저서 'Laws of UX'는 10가지 UX에 관한 법칙을 설명하고 있어요. UX를 설계(Design) 할 때 지켜져야 할 법칙들이죠. 이 법칙들을 살펴보면서 서비스를 한번 분석해 볼게요.
네이버 웹툰
네이버 웹툰은 네이버에서 제공하는 웹툰 서비스죠.
요일별로 연재 중인 웹툰들을 볼 수 있습니다.
네이버 만화에서 제공하는 서비스와 콘텐츠를 모바일 버전으로 제공하고 있습니다.
네이버 만화 - https://comic.naver.com/index
네이버 웹툰 모바일 서비스 화면Law of UX의 각 법칙들에 따라서 '네이버 웹툰' 모바일 어플리케이션 서비스를 분석해 볼게요.
1. Jakob's Law
제이콥의 법칙
사용자는 여러 사이트에서 대부분의 시간을 보낸다.
그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
웹툰 감상 화면을 보면 익숙한 UI를 확인할 수 있습니다. 위아래 감싸 져 있는 바 위에 인터페이스가 놓여있어요. 화살표를 통해 이전화, 다음 화로 이동할 수 있고, 하트 모양 버튼을 통해 작품을 '찜' 할 수도 있습니다. 쇼핑몰 상세페이지에서 자주 보던 UI 방식인데, 보통 이경우 내용을 보기 위해 스크롤을 시작하면 상하단의 UI가 사라지면서 오롯이 내용에 집중할 수 있는 환경을 제공하고 있죠. 스크롤을 끝까지 내리거나 역방향 스크롤을 통해 다시 UI를 노출시킬 수 있습니다. 이런 비슷 한 UI를 웹툰 감상 화면에도 적용해서 사용자는 이전에 경험했던 방식을 떠올리고 동작하게 될 거예요.
2. Fitts's Law
피츠의 법칙
대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다.
네이버 웹툰 앱은 전반적으로 피츠의 법칙이 잘 지켜지고 있는 편입니다. 팝업도 충분히 다음 행동으로 이어질 수 있도록 큰 버튼 크기를 가지고 있습니다. 메인화면을 보면 상단 배너, 각 웹툰 썸네일이 큼직하게 자리하고 있어 메인 콘텐츠인 웹툰에 대한 내용이 가장 먼저 눈에 확 들어옵니다. 시선이 가장 먼저 도달하게 되는 것이죠.
피츠의 법칙이 제대로 지켜지지 않은 극단적인 나쁜 예시 화면도 가져왔습니다. 광고로 도배되어 있는 페이지를 보신 적이 있을 거예요. 광고가 너무 많은 공간을 차지하고 있어 정작 중요한 콘텐츠는 제대로 볼 수 없습니다. 그렇게 중요한 광고라면 확실히 크게 보여주어야 하는데 그렇지도 못해 시선이 너무 분산되고 있어요. 사용자는 어느 광고를 보아야 하는지 혼란스러워 광고 내용까지 도달하지도 못한 채 광고 팝업을 끄려고 시도합니다. 설상가상으로 클로즈 버튼이 충분한 크기를 가지지도 못해 제대로 눌리지도 않아요. 결국 콘텐츠도 광고 내용도 제대로 사용자에게 전달되지 못할 겁니다.
3. Hick's Law
힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
선택지가 많으면 이른바 '결정장애'를 유발하게 될 거예요. 네이버 웹툰은 정말 많은 작품을 보유하고 있는 데다가 아마추어 작가들까지 '베스트 도전'을 통해 지속적으로 작품을 업로드하고 있으니 어떤 콘텐츠를 볼지 탐색하기 시작하면 끝도 없는 결정 장애의 늪에 빠질 수 있을 것 같아요. 네이버 웹툰을 달고 사는 저도 또 다른 작품을 탐색하다 보면 지치곤 했었거든요. 이런 문제를 완화하기 위해 메인에서는 신작 탭을 강조해 고민을 줄여주거나, 추천 완결에선 사용자화를 통한 추천 시스템을 도입했고, 베스트도 전 탭에서는 제일 상단에 오늘의 인기 베스트 작품을 선정해 두었어요. 이런 장치들이 사용자가 의사결정 자체에 지쳐버리는 경험을 줄여줄 겁니다.
4. Miller's Law
밀러의 법칙
보통 사람은 작업기억에 7(±2) 개의 항목 밖에 저장하지 못한다.
네이버 웹 메인화면에서 보이는 콘텐츠의 수는 배너를 포함해 7개입니다. 그 밑으로 추가적인 작품이 있는 모습을 잘리게 보여줌으로써 스크롤을 유도합니다. 기기에 따라서 7개가 아니라 10개로 보이기도 하긴 합니다. 밀러의 법칙을 적용했다고 보기엔 약간 아쉬운 부분이지만, 모바일 기기는 해당도가 모두 다르기 때문에 생긴 일인 것 같아요.
5. Postel's Law
포스텔의 법칙
자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
포스텔의 법칙은 UX를 설계할 때에, 사용자의 입장에서 생각하고 있는가에 대한 내용입니다. 제품에 대해서 모든 것을 알고 있는 제품팀이나 개발자 입장에서는 당연한 것이더라도 사용자에게는 당연하지 않은 부분일 수 있을 겁니다. 이럴 때 사용자가 어떤 행동을 하게 되고 어떤 경험을 가지게 될지 생각하고 너그럽게 받아들여야 합니다. 네이버 웹툰에서는 곳곳에 간결한 안내 문구를 통해 사용자 입장에서 의문이 생길 수 있는 부분들을 미연에 방지합니다. 그리고 의문이 생겼을 때에 어떻게 하면 물어볼 수 있는지도 안내하고 있죠. 예를 들어 네이버 웹툰이 가진 쿠키 오븐이라는 시스템은 이름만 들어선 어떤 내용인지 알 수가 없기 때문에 해당 부분에 대해서는 문의하기 버튼이 화면 상단에 위치하고 있습니다.
6. Peak-End Rule
피크 엔드 법칙
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
네이버 웹툰에서는 작품 감상이 끝난 후 추가적인 콘텐츠의 존재를 어필하고 있습니다. 작품 감상과 함께 사용자의 흐름(User flow)이 함께 끝나는 허무함을 방지할 수 있을 거예요.
무엇보다 중요한 건, 피크 엔드 법칙에 따라 자신이 보는 작품이 끝났다고 하더라도 사용자가 서비스에 대해 '볼거리가 더 있다', '콘텐츠가 많다'라고 기억하도록 유도할 수 있습니다.
작품 감상 페이지의 하단부
7. Aesthetic Usability Effect
심미적 사용성 효과
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
네이버 웹툰의 UI들은 콘텐츠를 내세우고 있다 보니 여러 가지 그림들이 계속해서 등장합니다. 콘텐츠의 썸네일들이 워낙 다양하다 보니 페이지들이 그다지 깔끔해 보이지는 않죠. 굉장하고 엄청난 UI/UX를 가지고 있는 것도 아닙니다.
이렇게 메인화면이 각 작품들의 썸네일로 화려하지만, 각 페이지의 UI는 굉장히 깔끔한 편입니다. 또 가장 처음 마주하는 스플래시 이미지에서 아주 심플하고 깔끔한 디자인의 네이버 웹툰의 로고를 보여줍니다. 그리고 모든 GUI의 색은 화이트&블랙을 제외하고 메인 컬러인 녹색으로 통일하였습니다.
네이버 웹툰은 전체적인 디자인 요소들을 같은 결로 깔끔하게 유지하도록 디자인하여 사용자로 하여금 복잡하다, 정신 사납다 같은 느낌을 최소화하였습니다.
8. Von Restorff Effect
본 레스토프 효과
비슷한 사물이 여러 개 있으면,
그중에서 가장 차이 나는 한 가지만 기억할 가능성이 크다.
네이버 웹툰의 메인화면을 볼까요. 콘텐츠 탭에 보면 위쪽에 요일별 탭이 있죠. 모두 요일의 이름인데 단 하나만 '신작'이라는 두 글자로 되어있고, N 표시가 존재합니다. 이 탭에서 사용자는 월, 화, 수... 를 각각 기억하는 게 아니라 '요일별'이라는 정보와 '신작'을 기억하게 될 가능성이 큽니다. 하단 내비게이션에도 '추천 완결'에만 N 표시가 있습니다. 그리고 같은 화면에 콘텐츠 목록을 보다가 스크롤을 내리면 갑자기 없단 하단 광고가 생성됩니다. 눈이 갈 수밖에 없겠죠? 이렇듯 본 레스토프 효과에 따라 기억을 유도하고 나아가 클릭을 유도하는 장치들을 몇 개 발견할 수 있었어요.
9. Tesler's Law
테슬러의 법칙
복잡성 보존의 법칙이라고 알려진 테슬러의 법칙에 따르면,
모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
테슬러의 법칙은 '복잡성 보존의 법칙'으로 알려져 있는데요, 심플하게 표현하고자 하는 의도 때문에 이미 그 요소가 가지고 있는 복잡성을 너무 간소화해버리면 그 의미가 오히려 제대로 전달되지 않을 수 있다는 것입니다. 어느 정도 수준 이하로 더 간단해질 수는 없다는 거죠.
네이버 웹툰의 '겟!짤' 아이콘이 그렇습니다. '겟!짤'은 작품 감상 중 내용 중 부분을 재밌는 재목과 함께 공유할 수 있는 기능인데요, 이 기능을 표현하는 아이콘이 말풍선에 'ㅋㅋ'이 쓰여있는 아이콘으로 표현되어 있습니다. 하지만 그 기능을 예상하기에는 지나치게 심플해 그 의미가 너무 축소되는 터라 웃긴 무언가가 있나 정도 외에는 전달이 되지 않는 것 같아요.
10. Doherty Threshold
도허티 임계
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로
인터랙션 하면 생산성은 급격히 높아진다.
네이버 웹툰은 콘텐츠의 로딩이 일정 시간이 넘어갈 경우에도 멈추지 않고 무언가를 보여줍니다. 사용자가 인터랙션을 멈출 필요가 없도록 하는 것이죠.
메인화면에서는 이미지가 뜨지 않더라도 일단 뷰와 텍스트를 먼저 로딩하고 탭을 이동할 수 있도록 해두었고, 작품 감상 중에 작품이 빨리 로드되지 않을 경우 새로 고침 버튼을 띄워주고 있어요. 아무런 반응이 없다면 사용자는 이제 어떻게 해야 할지 모를 것이고 그대로 이탈해 버릴 확률도 올라가겠죠.
