개요
기간 2019. 07. ~ 2020. 08.
팀원 PM 2명, 디자이너 1명, 엔지니어 2명
플랫폼 Android, iOS
프로젝트 배경
리디북스 웹과 앱
이전의 리디북스 모바일 앱은 작품을 보는 '뷰어’의 역할만 수행했습니다. 작품의 탐색과 구매는 웹 서점에서만 가능해서 구매부터 뷰어까지의 흐름이 연결되지도 않았습니다. 게다가 연재 작품은 웹 뷰어로도 볼 수 있었기 때문에, 웹툰과 웹소설을 보는 고객들은 앱이 거의 필요 없는 상황이기도 했습니다. 실제로 연재만 소비하는 고객들은 리디북스 앱의 존재조차 모르는 고객도 있었습니다.
이렇듯 웹 이용율이 많은 리디와는 달리 요즘 모바일 사용 행태는 웹 브라우저보다 앱이 훨씬 많고, 리디가 사업 영역을 확장 시킬 웹툰 분야도 마찬가지였습니다. 따라서 웹에서만 가능했던 탐색과 구매 영역을 앱으로 가져오고 뷰어의 역할만 했었던 앱에서 웹툰과 웹소설을 웹만큼 편하게 볼 수 있는 환경을 제공하기로 했습니다. 다만, 결제 금액이 크고 사업상 협의가 많이 필요한 단행본의 앱 진출은 추후에 진행하기로 결정했습니다.
개념 정리
웹 뷰어와 앱 뷰어
여기서 잠깐
위에 나왔듯이, 웹툰/웹소설 작품을 구입하고 보는 방법이 두 가지 있습니다. 바로 웹 뷰어, 앱 뷰어인데요. 웹 뷰어는 서점이나 웹 내 서재에서 브라우저로 바로 열리는 뷰어를 일컫고, 앱 뷰어는 다운로드 후에 로컬 파일로 열리는 뷰어를 일컫습니다. 이 두 개의 뷰어는 아래와 같은 기능 차이가 있습니다.
Default view
Search
이러한 기능 차이 때문에 앱과 웹의 뷰어 경험도 다를 수 밖에 없습니다. 그렇다면 여기서 드는 생각 한 가지, 웹에 결제와 탐색 기능을 이미 지원하고 있으니 앱의 파워풀한 뷰어 기능을 웹에 옮기는 것도 방법 중 하나라고 생각할 수 있는데요. 웹 뷰어로는 연재형 콘텐츠만 볼 수 있어서 단행본을 포함한 전체 콘텐츠 측면에서 봤을 땐, 웹 뷰어의 기능을 앱 뷰어로 가져오는 게 훨씬 효율적입니다. 또한 오프라인 지원 등 웹 브라우저 자체의 기술적 한계도 있으니, 이 또한 앱 뷰어를 개선하는 것이 더 맞는 방향일 것입니다.
리서치
본격적인 작업에 앞서, 앱과 관련해 연재 고객의 불편함과 요구를 살펴보았습니다. 아래는 실제로 리디에 의견을 준 고객들의 소리를 인용하고 성격에 맞게 분류했습니다.
1. 결제 관련 CS
너무 좋은데 앱에서 결제할 수 있게 만들어 주시면 안될까요 ㅠㅠ
Plain Text
복사
앱이 있어도 어차피 소설 한 편 한 편 구매를 할 때 마다 매번 웹으로 들어가야 하니까 불편해요.
만료된 편도 다시 구입하려고 누르면 삭제만 뜨고 웹으로 따로 검색해서 들어가야 하니
나중에는 귀찮아서 그냥 안 보게 돼요
Plain Text
복사
포인트 적립은 홈페이지에서 하고 앱 내에서 읽던 책 끝에 다음 권 구매 다운로드 버튼이 바로 있어야 합니다.
Plain Text
복사
2. 댓글 관련 CS
리디북스 정말 너무 맘에 들지만 번거로운 점이 있네요.
댓글 달 때마다 앱이 아닌 인터넷 들어가서까지 달아야 한다는 점.
Plain Text
복사
3. 작품 홈 관련 CS
연재 작품 몇 화까지 봤는지 보여주는 기능 리디북스 앱에만 없어요...
연재물에서 몇 화까지 봤는지 전혀 안 떠서 정말 너무 불편합니다.
Plain Text
복사
한 작품 내에서 동일한 표지가 수백~수천번 반복되어 불필요하게 용량이 크게 증가한다.
Plain Text
복사
4. 웹툰/웹소설 홈 관련 CS
웹으로 하기 불편해서 깐건데ㅜㅜ 내 작품만 볼 수 있군요....
Plain Text
복사
새 작품 찾으려면 다른 앱으로 인터넷 접속해야 하니 너무 번거로워요.
Plain Text
복사
문제 정의
고객의 소리를 듣고 상황을 정리해 정확한 문제가 무엇인지 정의했습니다. 우리가 느낀 문제와 그에 따른 현상은 아래와 같습니다.
1.
웹 뷰어에서 가능한 기능을 앱 뷰어에서 지원하지 않는다.
2.
따라서 연재 작품을 볼 때 웹과 앱을 왔다갔다 하거나, 웹만 사용하게 된다.
3.
앱의 UX가 불편하다보니 연재 고객의 앱 사용률이 저조하다.
4.
따라서 웹툰과 앱을 중심으로 사업을 확장하기 어려움이 있다.
디자인 목표
고객이 느끼는 불편함과 문제, 리디의 사업 방향을 모아 디자인 목표를 수립했습니다. 큰 줄기는 연재 작품의 탐색과 구매 기능을 추가해 앱의 사용률을 높이는 방향입니다.
1.
연재 작품의 앱 내 결제를 지원한다.
2.
화별 댓글을 보거나 쓸 수 있도록 한다.
3.
연재 작품 정보를 앱 내에서도 볼 수 있게 한다.
4.
구매/대여한 작품뿐만 아니라 다른 작품도 탐색할 수 있게 한다.
5.
연재 작품의 신간 알림, 선호 작품을 등록할 수 있도록 한다.
6.
이를 통해 앱 내 탭 영역을 확장시켜 웹툰/웹소설 자연 유입 고객 확보를 목표한다.
스콥 타임라인
처음 스콥부터 웹에 있는 모든 기능을 넣을 순 없기 때문에 가장 중요하며 작은 단위로 넣을 수 있는 기능인 결제와 댓글을 먼저 붙인 후, 작품에 대한 정보를 제공하는 작품 홈, 마지막으로는 앱에서 탐/검색도 가능하도록 웹툰/웹소설 탭 홈을 제공하기로 했습니다.
작업 노트
1. 결제
1-1. 웹의 결제 플로우 재활용 시도하기
웹 뷰어 결제 플로우
웹의 결제 플로우는 굉장이 복잡했고, 이를 네이티브로 두 번 개발하는 것은 비효율적이라고 생각했습니다. 따라서 연재 컨텐츠의 기본 뷰어는 웹 뷰어로 하되, 다운로드한 후에 앱 뷰어로도 볼 수 있는 양방향의 시도를 해보았습니다.
앱에서 웹 뷰어와 eBook 뷰어를 나누는 시도
하지만 고객이 앱 뷰어를 찾아가는 여정이 어려워지고 두 개의 뷰어를 쓰다 보니 제품 자체의 복잡도가 높아질 가능성이 있었습니다. 그래서 개발 코스트가 조금 들더라도 제품의 간소화와 명확한 UX를 위해서, 결제는 네이티브로 개발하며 앱 뷰어만 사용하기로 결정했습니다. 다만 웹의 결제 플로우를 그대로 가져가기 보단 간소화할 수 있는 부분을 다듬어 앱에 적용했습니다.
1-2. 최소한의 스펙으로 가져가기
결제는 단일 에피소드 결제와 2개 이상의 에피소드 결제로 나뉘는데, 최초 개발에서는 스콥을 적게 가져가기 위해 단일 에피소드 결제만 추가하기로 결정했습니다. 또한 리디 내에서 사용할 수 있는 리디캐시, 리디포인트는 웹에서 충전하고 앱에서 바로 사용할 수 있지만, IAP를 앱에서 지원하기엔 고려해야할 사항이 많아 이 또한 우선 제외하기로 했습니다.
1-3. 결제 UI 구성하기
결제 UI는 여러 화면에서 보여져야 하고, 기존에 보던 작품의 연속성을 해치지 않기 위해 다이얼로그 형태로 구성했습니다. 결제 UI 필요한 정보는 다음과 같습니다.
1.
결제하려는 작품의 이름
2.
현재 사용자가 가지고 있는 포인트와 캐시의 잔액
3.
(대여일 경우) 대여 기간
4.
(무료일 경우) 무료 결제 방식을 선택할 수 있는 드롭 다운 메뉴
5.
(포인트나 캐시의 잔액이 없는 경우) 충전 버튼
6.
(재대여할 경우) 이전에 대여했던 작품이라는 정보
케이스에 따른 결제 다이얼로그
이 또한 여러 플로우에 따라 다이얼로그의 형태나 구성 요소가 나뉘기 때문에 케이스별로 정리해 다양한 상태에 따라 알맞는 결제 다이얼로그가 나타날 수 있도록 설계했습니다.
2. 댓글
2-1. 리디에서 댓글의 개념
리뷰와 댓글
리디에서 작품에 대한 감상평을 남길 수 있는 방식은 크게 두 가지입니다. 하나는 '리뷰'이고, 다른 하나는 '댓글'입니다. 리뷰는 모든 콘텐츠에 동일하게 적용되며, 별점과 함께 남길 수 있으며 작품 당 하나만 남길 수 있습니다. 댓글은 연재 콘텐츠에만 적용되며 회차마다 남길 수 있습니다. 50화짜리 연재 작품을 A라고 예로 들면, A에 대한 리뷰는 하나이며, 댓글은 회당 하나씩 총 50개까지 남길 수 있습니다. (참고로 댓글 아래에 남기는 답글은 개수 제한이 없습니다.)
리뷰는 이미 앱 내에 포함되어 있었고, 더 나은 연재 콘텐츠 감상 경험을 위해 앱에서 화별 댓글을 볼 수 있는 기능이 포함되어야 했습니다.
2-2. 댓글 등록 동작
댓글 등록 동작은 웹 뷰어가 가지고 있는 문제를 개선해 앱에 추가시키기 위한 고민을 했습니다. Maze란 툴로 간단하게 사용성 평가를 한 뒤 설계됐는데, 자세한 내용은 아래 글에 기재되어 있습니다.
2-3. 댓글 모아보기
댓글 모아보기 버튼 시안
화별 각각의 댓글 뿐만 아니라 작품 전 화의 댓글을 한 번에 모아보고 싶어하는 니즈도 있었습니다. 댓글 모아보기 기능은 각 화에 종속되는 뷰어 내에서 보는 것 보다는 리뷰와 같이 작품 홈에 위치하는 것이 더 자연스럽습니다. 따라서 작품 소개 버튼 옆에 위치하도록 설계되었는데, 여러가지 버튼이 만났을 때의 알맞은 형태를 찾다가 기능과 개념에 따라 버튼의 쉐입을 적용하기 보다는, 직관적으로 안정적인 형태를 가져가기로 했습니다.
(댓글 모아보기는 뷰어 내부가 아닌작품 홈에 위치하기 때문에 3번에 기재된 작품 홈이 배포된 뒤 추가되었습니다.)
3. 작품 홈
3-1. 단순 리스트에서 스토어의 공간으로
기존 연재 상세 페이지
기존의 연재 상세 페이지엔 구매한 작품의 단순 리스트만 노출되어 작품의 정보나 프로모션을 확인하려면 리디북스 웹사이트에서만 확인이 가능했습니다. 따라서 이 공간을 단순 리스트의 나열이 아닌 작품 정보와 구매하지 않은 회차까지 보여주어 웹 사이트에 가지 않아도 구매할 수 있도록 개선하는 것이 작품 홈 프로젝트의 목표였습니다.
3-2. 앱 작품 홈에 필요한 정보 선택하기
웹 작품 상세 페이지
개발 코스트와 보다 간결한 사용 경험을 위해 복잡한 웹 상세 페이지에 있는 정보를 그대로 옮겨올 순 없었습니다. 작품 이용 안내나 금액에 관여하는 공지, 이벤트, 혜택 등을 담고 있는 Notice List와, 작품을 보기 전 정보를 제공하는 작품 소개를 제외하고는 모두 생략했습니다.
앱 작품 홈
다만 Notice List는 이벤트의 중요도가 낮다고 판단해 웹과 다르게 이벤트의 순서를 아래쪽으로 내리고, 세부 디스크립션 등 모바일 환경에서 적절하지 않은 정보들은 제거했습니다.
또 이벤트 길이가 길어질 경우를 대비해 3개 이상의 이벤트가 걸릴 경우 더보기 버튼으로 나머지 이벤트를 접어, 아래 회차 리스트가 스크롤 영역 밑으로 밀리지 않도록 설정했습니다.
3-3. 회차 리스트 얹기
회차 리스트 케이스
리디북스 웹 사이트의 회차 리스트와는 달리, 다운로드가 가능한 앱에서의 회차 리스트는 훨씬 복잡한 구조를 가져야 합니다. 앱 내의 회차 리스트는 크게 구매 상태, 다운로드 상태, 열람 상태에 따라 나뉩니다. 이런 복잡한 상태를 적절하게 표시하기 위해 반복되는 저자 정보와 썸네일을 제거했습니다.
3-4. 다운로드 영역 나누기
앱 작품 홈
이전 버전에서는 리스트의 모든 영역이 다운로드 버튼으로 동작했습니다. 하지만 조금 더 매끄러운 연재 경험을 위해서 리스트 왼쪽 부분을 눌렀을 때는 다운로드 뿐만 아니라 뷰어까지 열리도록, 오른쪽 다운로드 버튼을 눌렀을 때는 다운로드만 되도록 변경했습니다. 이를 안내하기 위해 새로운 튜토리얼 툴 팁도 추가했습니다.
4. 웹툰/웹소설 홈
4-1. 전연령 콘텐츠로 구성하기
성인 작품과 전연령 작품
작품 홈과 마찬가지로 웹툰/웹소설 홈도 웹에 있던 모든 정보를 앱에 실을 순 없었습니다. 특히 구글 스토어나 앱 스토어 정책상 성인 콘텐츠를 실을 수 없어 관련된 모든 작품을 제외하고 전연령 콘텐츠로만 홈을 구성했습니다. 베스트, 실시간 랭킹도 앱에서는 성인 콘텐츠를 제외하고 집계됩니다.
4-2. 선호작품
선호작품
리디에는 연재 작품에만 적용되는 '선호작품'이라는 기능이 있습니다. 선호하는 작품을 지정해두면 한 데 모아볼 수 있고, 최신 업데이트 여부를 알려줍니다. 이 선호작품도 연재와 관련 있는 기능이므로 웹툰/웹소설 홈에 함께 구성되었습니다. 마찬가지로 성인 콘텐츠는 선호 작품으로 등록 되더라도 앱에서는 볼 수 없어 기능 제한 여부를 안내했습니다.
4-3. 스크롤 시 고정 영역 정하기
장르별 탭 구조
웹툰/웹소설 홈의 상단 영역은 장르 특성에 따라 조금 다르게 구성되어 있습니다. 웹툰과 로맨스, 판타지 장르는 1단으로, BL은 그 안에서 다시 웹툰과 웹소설로 나뉘어 2단으로 구성됩니다. 가장 상단의 앱 바까지 더하면 BL의 경우 3단의 탭이 있는 모양인데요. 꽤 많은 영역이 탭으로 구성되어 콘텐츠를 탐색할 때 노이즈가 되기 때문에 스크롤 시 어떤 탭까지만 고정시킬 수 있는지 선택지를 추려봤습니다.
상단 바 스크롤 선택지
1.
최상단 영역만 고정한다.
2.
최상단 영역, 장르 영역 1뎁스만 고정한다.
3.
장르 영역만 모두 고정한다.
4.
모두 고정하지 않는다.
우선 시안으로만 확인해봤는데, 검색 아이콘이 콘텐츠를 탐색하는 데 있어 중요한 영역이므로 최상단은 고정해 언제든 검색 아이콘을 볼 수 있어야 했습니다. 따라서 3, 4번을 제외하고 1, 2번을 프로토타입으로 만들어 직접 써보며 검증해보았습니다.
스크롤 시 상단 네비게이션의 차이
1번 시안은 확실히 컨텐츠가 많이 보이긴 하지만, 노출된 컨텐츠의 정보만으로는 초기 유저가 현재 위치를 파악할 수 있는 힌트가 없어, 장르 1뎁스 고정하는게 좋아보였습니다. 또한 BL을 소비하는 고객은 고정층이 있고 웹툰과 웹소설 둘 다 소비하는 고객의 비율이 적어, BL의 마지막 뎁스는 고정하지 않는다고 결정했습니다.
프로젝트를 마치며
처음 앱에 결제를 배포한 시기는 2020년 3월이고, 웹툰/웹소설 홈까지 모두 완료해 100% 배포한 시기는 2020년 8월 말이었습니다. 모든 배포가 끝나고, 전체 유료 고객 수 대비 인 앱 유료 고객 비중은 30% 이상까지 상승했습니다. 웹의 모든 기능과 콘텐츠를 제공하지 않는 것을 감안했을 때 유의미한 수치라고 볼 수 있습니다.
기존 웹에 있었던 불편한 UX를 많이 개선하지 못해서 아쉽지만, 앞으로도 앱 경험을 최적화하는 작업을 계속 해나갈 예정입니다. 또한 기존 뷰어 앱의 사용성도 해치지 않으면서 다양한 컨텐츠를 담는 작업도 큰 과제로 남아있습니다. 모쪼록 이 프로젝트가 단순 뷰어 앱에서 리디의 콘텐츠 모두를 담는 앱으로 바꿔나가는 초석이 되길 바랍니다.
