네이버웹툰 VS 카카오웹툰 : 첫 화 보기 UX
* 운영 중인 UX 스터디 활동을 위해 작성한 글입니다.
#네이버 웹툰의 첫 화 보기 UX
1. 네이버 웹툰 - 웹툰 상세페이지 최초 진입 시
- 메뉴명 : '살짝 보기'
- 새로운 웹툰 상세페이지로 진입 시 '살짝 보기' 탭이 자동으로 선택되어 있음.
- 하단에 첫 화가 보이고 + floating UI 형태로 '뷰어에서 이어보기' 버튼이 보임.
네이버 웹툰에서 만화 상세페이지에 처음 진입했을 때 화면
2. 네이버 웹툰 - 스크롤해서 콘텐츠 탐색 시
- '뷰어에서 이어보기' 버튼을 누르면 네이버 웹툰 자체 뷰어로 이동.
- 뷰어로 이동하지 않고 스크롤해서 만화를 보면 floating UI가 사라짐. 사용자가 콘텐츠를 방해받지 않고 볼 수 있게 도와주기 위한 목적으로 보임.
3. 네이버 웹툰 - 첫 화의 맨 끝에 도달했을 때
- 첫 화의 맨 끝으로 이동하면 맨 밑에 배너로 '뷰어에서 이어보기' 버튼이 보임.
- 해당 버튼을 누르면 '뷰어 내 1화' 로 이동.
네이버웹툰에서 스크롤해서 만화를 볼 때 UX
4. 네이버 웹툰 - 첫 화를 보고난 후
- 웹툰 상세페이지 내 '살짝 보기' 탭이 사라짐.
첫화를 보고난 후 UX#카카오 웹툰의 첫 화 보기 UX
1. 카카오 웹툰 - 웹툰 상세페이지 최초 진입 시
- 메뉴명 : "첫 화 보기"
- '첫 화 보기' 탭이 활성화 되어있고, 화면 하단에 첫 화가 보임.
2. 카카오 웹툰 - 스크롤해서 콘텐츠 탐색 시
- 스크롤하면 콘텐츠 뷰어의 가로 폭이 인터렉션과 함꼐 부드럽게 넓어짐.
- 하단에 "뷰어로 보기" 버튼이 보임.
- "뷰어로 보기" 버튼은 사라지지 않고 항상 떠있음. 네이버 웹툰보다 뷰어로의 진입을 강하게 유도하고 있음.
카카오웹툰 상세 페이지 최초 진입 시 & 스크롤해서 탐색 시 UX
3. 카카오 웹툰 - 첫 화의 맨 끝에 도달했을 때
- "다음 회차 2화" 텍스트가 표시된 UI가 하단에 보임.
- 누르면 "뷰어 내 2화" 로 이동함.
카카오 웹툰에서 스크롤했을 때, 첫 화 마지막 부분의 UX4. 카카오 웹툰 - 첫 화 보고난 후
- 네이버 웹툰과 마찬가지로 상세 페이지에서 '첫 화 보기' 탭이 사라지네요!
카카오 웹툰에서 첫 화 열람 이후 탭 구성 변화비교 설명 & 코멘트
웹툰 서비스 특성 상 사용자가 첫 화를 보고 해당 만화에 매력을 느끼게끔 만드는 것이 중요하기 떄문에 이를 유도하기 위한 기능으로 보입니다.
두 서비스에서 '첫 화 보기 UX' 의 전반적인 인상이나 흐름은 유사했습니다.
우선, 두 서비스 모두에서 스크롤하지 않아도 첫 화의 콘텐츠가 보인다는 공통점이 있습니다.
사용자를 생각하게 하지마!' 라는 책의 제목처럼 사용자가 고민하거나 클릭이라는 액션을 하지 않아도 자연스럽게, 별 다른 생각 없이 화면 밑에 걸려있는(?) 내용을 보고 스크롤하면서 첫 화를 보도록 유도하는 장치인거죠!
그 외에도 뷰어로의 이동을 유도하고 + 첫 화의 끝부분에서 사용자가 이어서 만화를 볼 수 있게 유도하는 등.. 상당히 유사한 경험을 제공하고 있습니다.
디테일한 부분에선 미묘하게 다릅니다.
이름부터 살펴보면,
(1) 카카오 웹툰은 '첫 화 보기'로 직관적인 반면
(2) 네이버 웹툰은 '살짝 보기' 로 재치있는 메뉴명을 사용하고 있습니다.
화면을 아래로 스크롤했을 때 인터렉션이나 UX을 살펴보면,
(1) 카카오 웹툰의 경우 매끄러운 애니메이션과 함께 콘텐츠 뷰어 영역의 가로 폭이 넓어지고, 하단에는 항상 보이는 floating UI가 떠올라 뷰어로의 이동을 강하게 유도하고 있었습니다.
(2) 네이버 웹툰은 '뷰어로 보기' 버튼이 바로 보이는 반면, 스크롤함에 따라 floating UI는 사라지고 웹툰의 내용만 보이게 됩니다. "콘텐츠 뷰어로의 이동 없이 계속 만화를 보려는" 사용자의 의도를 파악하고 배려한 것으로 보여요!
그리고 첫 화의 마지막 부분에 도착했을 때의 경험을 살펴보면,
(1) 카카오 웹툰의 경우 '다음 회차 2화' 텍스트가 포함된 버튼이 보이고, 해당 버튼을 누르면 뷰어로 진입해 2화를 이어서 보게 됩니다.
(2) 네이버 웹툰은 "뷰어에서 이어보기" 라는 버튼이 배너 형태로 보였습니다. 해당 버튼을 누르면 뷰어 내 1화 마지막 부분에 도착하게 됩니다.
개인적으로는 카카오 웹툰의 경험이 아래처럼 절차가 더 간단하고 직관적이라 좋게 느껴졌습니다 :)
(1) 카카오 웹툰 : 버튼 한 번만 누르면 '2화 조회 + 뷰어 진입' 액션을 동시에 수행.
(2) 네이버 웹툰 : 버튼을 눌러 뷰어로 이동하고 -> 다시 다음 화로 이동하는 버튼을 눌러서 2화로 이동.
네이버 웹툰은 2화를 보려면 한 번 더 버튼을 눌러야해서 좀 번거로웠고, 카카오웹툰에서는 "음 2화를 이어서 보자!" 하면서 별다른 고민이나 생각 없이 자연스럽게 콘텐츠를 계속 탐색할 수 있었습니다 :)
비슷하면서도 다른 첫 화 보기 UX에서 특징적인 부분을 뽑아보자면,
- 네이버 웹툰의 경우 '살짝 보기' 에서 스크롤해서 첫 화를 탐색할 때 뷰어로 이동하는 floating UI가 센스있게 사라지는 점이 인상깊었습니다.
- 카카오웹툰에서는 '첫 화 보기' 에서 스크롤할 때 뷰어 가로 폭이 자연스럽게 넓어지는 인터렉션, 첫 화의 끝 부분에서 사용자가 2화로 자연스럽게 이동하도록 유도하는 UI가 기억에 남네요!
네이버와 카카오 웹툰의 '첫 화 보기 UX'를 [달성하려는 목적] 관점에서 보면 다른 도메인의 서비스에서도 비슷한 패턴의 경험들을 발견할 수 있습니다.
(역시 UX는 목적이 아니라, 문제를 해결하기 위한 수단!)
예를 들어, 회차 목록에서 1화를 누르지 않고도 첫 화의 내용을 스크롤해서 볼 수 있게 유도하는 것을 '사용자가 더 깊은 Depth의 화면으로 이동하지 않고도 콘텐츠 등을 조회할 수 있게 유도' 한다는 점에서 살펴보면, 커머스의 첫 화면에서 카테고리 메뉴 뿐 아니라 스크롤해서 콘텐츠를 계속 탐색할 수 있는 경험을 제공하는 것 // 인스타그램에서 앱을 키자마자 홈화면을 스크롤해서 다양한 포스팅을 조회할 수 있는 것 등도 목적을 공유한다고 볼 수 있습니다.
혹은 상세페이지 첫 진입 시 하단부에 첫 화의 내용이 일부분 걸쳐져서 보이게 UI를 구성하는 것을 '콘텐츠가 화면의 우측/하단에 더 있다는 것을 자연스럽게 알려주기 위한 장치'로 바라보면 인스타그램의 스토리 UI, 서비스들의 상단 메뉴, 큐레이션 UI 등도 목적을 공유한다고 볼 수 있습니다.
(tmi : 아래처럼 횡스크롤 가능한 UI에서 메뉴들이 한 화면에 모두 채워넣을 수 없을 때 화면의 끝에 의도적으로 UI가 걸쳐서 보이게끔 가로폭을 계산해 값을 할당하는 방법으로 아래처럼 UI를 구성할 수 있습니다.)
(ex : 디스플레이 사이즈가 x이고 메뉴가 3개일 때 한 ui의 폭 사이즈를 0.4x 정도로 할당)
우측에 콘텐츠가 더 있다는 것을 보여주기 위해 의도적으로 걸치게끔 UI 사이즈를 구성한 예시위클리 UX / UI 분석 챌린지에 초대합니다
Q. UX / UI 스터디에 관심이 있으신가요?
Q. 다양한 UX 레퍼런스와 아티클 등 자료들을 접하며 분석/기획 역량을 키우고 싶으신가요?
* 이 글은 스터디 운영자인 제가 직접 챌린지 참여를 위해 정리한 내용을 바탕으로 작성되었습니다.
* 스터디에는 현재 150명 이상의 멤버분들이 참여하고 계시며, 매주 UX/UI리뷰, 북리뷰, 아티클공유 중 원하는 방식으로 챌린지에 참여하며 함께 성장하고 있습니다.
*기획자,디자이너,취준생 등 직군 연차 관계없이 UX UI에 관심있다면 누구나 스터디에 참여할 수 있습니다. 관심 있으시다면 스터디에 합류해보세요!
