Share
Sign In
🏢
소속 : RIDI (연재 이어보기 경험 Squad)
🗓️
기간 : 2023.1 - 2023.8
🤝
인원 : 8명
PM 1명, 프로덕트 디자인팀 2명(본인), 앱팀 3명, 웹팀 1명, 백엔드 1명
배경
리디는 도서를 기반으로 성장한 서비스입니다. 그렇기에 뷰어나 서재처럼 ‘책 읽기’에 적합한 기능이 발전되어 있습니다. 그러나 이제 상황이 달라졌습니다. 리디에서 도서뿐 아니라 웹툰, 웹소설과 같은 연재 작품 또한 찾아볼 수 있게 되었기 때문입니다.

연재 이어보기 경험 Squad(이하 연이경 스쿼드)는
도서에 비해 현저히 뒤처진 연재 작품의 이어보기 경험을 개선하기 위해 조직되었으며, 연재뿐 아니라 기존 e북 유저에게도 매끄러운 경험을 제공하는 것을 목표로 삼았습니다.

본격적인 스쿼드 활동에 앞서 작년 7월부터 12월까지 선행 프로젝트가 진행되었는데요. 리디 현황 분석부터 마켓 리서치, UT, 데이터 분석까지 다양한 방법을 통해 구체적인 실행안이 도출되었습니다. 그 실행안 중 하나가 지금부터 소개할 ‘최근 본’입니다.

즉 연이경 스쿼드는 ‘최근 본’ 런칭 이후에도 지속되는 조직이며, 해당 조직의 활동은
장기적으로 리디 서비스의 전체적인 UX 수준을 끌어올리는 방향이 될 것입니다.
뜯어보기
1. ‘최근 본’을 1depth로
앞서 언급했듯 리디는 도서를 기준으로 설계되어 있습니다. 웹툰, 웹소설과 같은 연재 작품은 도서에 비해 늦게 서비스되기 시작했으므로, 자연스럽게 이미 설계된 구조에 발을 끼워 넣는 식이 되었습니다.

애당초 연재 작품을 고려하고 설계된 것이 아니기 때문에 당연히 이를 읽는 경험이 좋을 리 없었습니다. 일례로 리디는 지금까지도 다운로드 방식(파일을 유저의 기기에 전송하는 방식이며, 기기 하드디스크 용량을 차지)을 사용하고 있는데요. 그 이유는 간단합니다.

도서는 웹툰에 비해 훨씬 내용이 길고, 용량이 크기 때문에 필연적으로 로딩이 발생합니다. 그런데 작품을 읽는 중간중간 긴 로딩을 기다려야 한다면 몰입이 깨지고, 끝내 읽고 싶은 욕구가 사라지고 말 것입니다. 어느 쪽이든 장단점은 있겠지만, 리디는 다운로드가 완료될 때까지 기다렸다가 작품을 끊김 없이 볼 수 있게 하는 쪽을 택했습니다.

즉 타서비스에서 스트리밍 방식(실시간으로 파일을 전송하여 바로 재생이 가능하며, 기기에 저장되지 않는 방식)을 택한 것은 연재 작품 위주이기 때문이라고도 할 수 있겠습니다.
최근 본 작품 (AS-IS)
리디는 위의 아쉬움을 보완하기 위해 내서재에서 ‘최근 본 작품’ 기능을 제공하고 있었습니다. 유저가 가장 최근에 다운로드하여 읽은 작품이 이 영역에 노출되며, 유저는 해당 작품의 뷰어나 작품홈으로 이동해 감상과 탐색을 이어갈 수 있습니다.

또한 ‘최근 본 작품 목록’을 통해 지금까지 기기에 다운로드된 작품들을 리스트로 모아볼 수도 있습니다. 이는
‘최근 본 작품’이 기기 기반임을 의미하는데요. 같은 계정으로 작품을 감상했더라도, 사용 기기에 따라 작품 목록이 달라질 수 있다는 뜻입니다.

의도적으로 기기를 바꿔가며 보던 작품을 분류하는 유저에게는 이러한 기기 기반의 방식이 편리하게 느껴질 수 있습니다. 그러나 선행 프로젝트를 통해 저희는 ‘최근 본 작품 목록’의 인지성과 사용 빈도가 극히 낮은 편이며, 유저들이 타서비스에서 어떤 작품을 이어볼 때 주로 계정 기반의 ‘최근 본’을 사용하고 있음을 확인한 바 있습니다.

또한 ‘최근 본’은 연재 서비스의 아주 기본적인 기능이라는 데 팀원들의 의견이 일치해, 이를 유저들이 인식할 수 있을 만한 위치로 끌어올리고 내서재의 주요 피처로 활용하기로 했습니다.
최근 본 (TO-BE)
그리하여 내서재 1depth 위치에 ‘최근 본’ 탭이 신설되었습니다. 이는 연이경 스쿼드의 목표에 맞게, 연재 작품을 더 쉽게 이어볼 수 있게 하는 데 중점을 뒀습니다.

또한 리디의 경우 많은 유저들이 다수의 기기, 다수의 계정으로 서비스를 사용하는 특성이 있는데요. 이번에 신설된 ‘최근 본’은 계정 기반으로 설계하여 ‘
이어보기’라는 큰 흐름을 깨지 않도록 했습니다. 유저 시나리오로 설명하자면 이런 식입니다.
📢
휴대폰으로 A와 B 작품을 보던 유저가 태블릿으로 이를 이어보고자 할 때

기기 기반 (AS-IS)
- 사용 기기가 달라졌으므로 ‘최근 본’에서 A, B 작품을 이어볼 수 없음
- ‘내서재 > 구매목록’에서 A, B 작품을 다시 찾아 다운로드 실행해야 이어보기 가능
- 작품을 새로 다운로드한 것이므로 읽던 위치를 기억할 수 없음

계정 기반 (TO-BE)
- 같은 계정으로 로그인 시 ‘최근 본’에서 A, B 작품을 그대로 이어볼 수 있음
- 읽던 위치까지 기억
단, 기존에 내서재 하단에 있던 ‘최근 본 작품 바’는 치열한 논의 끝에 그대로 유지하게 되었습니다. 기기 기반과 계정 기반의 목록이 충돌하게 되는 점은 매우 아쉽지만, 이미 기기에 다운로드한 작품은 오프라인 상태에서도 감상이 가능하고, 또 이 영역이 가장 최근에 읽은 작품으로 바로 연결시켜주는 숏컷 기능을 겸하고 있기 때문입니다.
2. 장르 필터
기존 내서재의 필터는 유저 입장에서 사용하기 매우 불편한 형태를 가지고 있었습니다. 바로 수십 여개의 카테고리 중 원하는 것을 일일이 스크롤하여 찾는 방식입니다.
내서재(책장), 구매목록의 카테고리 탐색 경험
리디에서 워낙 다양한 작품을 서비스하다 보니 생긴 문제인데요. 해당 카테고리에 속하는 작품을 1개만 가지고 있어도 필터에 노출되기 때문에, 작품을 많이 구매할수록 탐색이 힘들어지는 구조입니다. 이에 연이경 스쿼드에서는 이 지난한 과정을 클릭 몇 번으로 줄일 수 있는 새로운 카테고리 필터를 고안했습니다.
먼저 카테고리 필터를 클릭하면 모달이 노출됩니다. 이 모달을 통해 유저는 현재 자신이 가지고 있는 작품의 모든 카테고리를 쉽게 확인할 수 있습니다. 모달에서 장르 > 대분류 > 소분류 순으로 선택 후 하단의 CTA를 클릭하면 해당되는 작품이 리스트업 됩니다.

이로써 앞으로
카테고리가 더 늘어나더라도 충분히 대응할 수 있는 구조를 갖췄다고 생각합니다. 연이경 스쿼드의 첫 번째 임무는 ‘최근 본’이었으므로 내서재와 구매목록의 필터는 작업 범위 밖이었지만, 시간이 허락할 때 내서재의 전체적인 필터 개선이 이루어지기를 바랍니다.

아래에 동영상으로 AS-IS, TO-BE 버전을 마련해두었으니 실제 어떤 차이가 있는지 확인하시면 좋겠습니다.
3. 감상 경로
선행 프로젝트에서 확인한 바로, 유저는 작품을 감상할 때 크게 두 가지의 경로를 사용하고 있었습니다. 작품홈으로 이동한 뒤 회차리스트 외 정보를 확인하고 구매하는 경로, 그리고 뷰어로 바로 이동한 뒤 ‘다음화 보기’를 통해 구매하는 경로.

이에 ‘최근 본’에서 양쪽 경로를 모두 제공하기로 하고, 리스트의 좌측을 작품홈, 우측을 뷰어로 이동하는 영역으로 잡았습니다. 이는 기존 ‘최근 본 작품 바’에서 제공하던 경로와 동일하며, 따라서 기존 사용성을 어느 정도 유지했다고 볼 수 있습니다.
더불어 ‘최근 본’ 리스트에서는 마지막으로 감상한 회차 이후 새로운 회차가 업데이트 되었을 때 ‘안 본 이야기’를 통해 놓치고 있는 회차가 몇 개인지 쉽게 확인할 수 있습니다. 우측 막대 그래프로는 해당 회차를 몇 퍼센트나 봤는지(완독률) 확인이 가능합니다.
마치며
내서재는 유저는 물론이고 리디 구성원들도 민감하게 생각하는 영역입니다. 손을 대기가 쉽지 않아 오랫동안 업데이트가 없었고, 그 탓에 디자인과 코드가 노후되어 있었습니다. 그런 영역을 건드린 여파는 생각보다 커서, 프로젝트 기간이 크게 늘어났고 있는지도 몰랐던 케이스를 수도 없이 대응하기도, 같은 논의를 몇 주 이상 지속하기도 했습니다.

그러나 지금 물러서면 언제 기회가 올 지 모른다는 생각이 들었습니다. 아마 저뿐 아니라 모든 팀원이 그랬을 것입니다. 어떤 결과를 책임져야 할 지 모른다는 건 두려운 일이지만, 그럼에도 불구하고 이번 작업은 장기적으로 봤을 때 꼭 필요한 것이었기에 밀어붙이는 수밖에 없었습니다.

덧붙여 이번 프로젝트를 통해 배운 점이 정말 많습니다. 기획이 자꾸 변경되고 수많은 테스트를 해야 하는 때에도 몰입을 잃지 않는 팀원들의 모습이 인상깊었습니다. 저는 그런 상황에서 어떻게 했는지 되돌아보게 되고, 그러고 나니 진심으로 그들을 존경하게 되었습니다. 저 또한 앞으로 그런 자세를 유지해야겠다는 다짐을 했습니다.
/grit-han-94
Subscribe
앱 카트 도입
소속 : RIDI (프로덕트 디자인팀) 기간 : 2022.8 - 2022.11 인원 : 6명 PM팀 1명, 프로덕트 디자인팀 2명(본인), 앱팀 1명, 웹팀 1명, 백엔드팀 1명 배경 리디가 ‘리디북스’였던 시절, 앱은 그저 웹에서 구매한 작품을 다운로드해 읽는 뷰어에 불과했습니다. 웹과 앱의 유저 경험이 매우 달랐고, 그에 따라 디자인 에셋은 매우 파편화된 상태였죠. 지난해 제가 속한 프로덕트 디자인팀은 리디 앱의 사용성을 높이고 유저에게 통일된 경험을 주는 개편 작업에 집중했습니다. 그 결과 앱의 유저수가 크게 늘게 되었는데요, 그럼에도 아직 웹에 비해 앱은 기능이 부족해서 여러 유저 불만이 쌓이고 있었습니다. 그 여러 의견 중 가장 시급한 것, 중요도가 높은 것을 골라낸 결과는 바로 앱에 카트를 도입하는 것이었습니다. 이는 리디가 타 서비스와 달리 웹툰/웹소설과 같은 연재 작품뿐 아니라 e북(단행본), 세트 도서 등 다양한 종류의 작품을 가지고 있기 때문에 그렇습니다. 연재 작품과 나머지의 차이를 설명하자면, 전자의 경우 적은 금액으로 한 화씩 구매하여 바로 읽는 방식인 반면, 후자는 전자에 비해 금액대가 높고 읽는 호흡도 훨씬 길다고 할 수 있습니다. Youtube의 15분 짜리 영상과 Netflix의 한 시간 짜리 드라마처럼요. 카트는 이때 바로 사거나 읽기 망설여지는 작품을 일단 담아두고, 나중에 한꺼번에 구매할 수 있게 하는 데 그 의의가 있습니다. 물론 연재 작품을 위주로 보는 유저에게는 매력도가 떨어질 수 있지만, 그 외의 유저들에게는 여전히 꼭 필요한 기능이죠. 뜯어보기 카트는 모든 종류, 모든 장르의 작품을 담거나 구매할 수 있는 기능입니다. 따라서 가장 위계가 높은 장르홈 상단에 위치시켜 어떤 곳에서든지 카트에 접근할 수 있도록 했습니다. 카트는 일정상 웹뷰를 감싼 모달 형태로 만들었는데요, 예정된 카트 2차 프로젝트에서 지금보다 훨씬 앱에 걸맞은 형태로 개선해보려고 합니다. (아마 대대적인 작업이 될 것 같습니다 🥹) 1. 단권 작품홈
Grit Han
썸네일 크롭 정책
소속 : RIDI (프로덕트 디자인팀) 인원 : 3명 프로덕트 디자인팀 1명(본인), 앱팀 1명, 웹팀 1명 배경 기존의 리디 장르홈에서는 작품 표지를 원본 사이즈 그대로 보여주고 있었습니다. 이 경우 작품 표지를 그대로 보여줄 수 있다는 장점이 있지만, 전체적으로 봤을 때 표지 크기가 전부 달라 깔끔하지 않다는 인상을 줄 수 있습니다. 이에 리디 앱 리뷰에 표지를 동일 규격으로 맞춰달라는 CS가 접수되기도 했습니다. 그러던 중 장르홈 리뉴얼(2022.2)에 따라 기존보다 썸네일이 커지고, 작품간 간격이 좁아지면서 한 화면에 들어오는 작품 개수가 많아지게 되었는데요. 자연스레 중구난방으로 지저분해 보이는 화면을 정리할 수 있는 썸네일 정책에 대한 필요성이 커졌습니다. 적용 범위 배경에서 밝혔듯, 아래에 소개할 썸네일 정책은 장르홈 리뉴얼에 따른 것입니다. 10년이 넘는 기간 동안 서비스해온 리디는 여러 개발 언어로 구성된 복잡한 구조를 가지고 있습니다. (마음은 굴뚝 같지만) 이 레거시를 한 번에 해결하기란 불가능에 가까우므로 시간을 들여 천천히 바꿔나가야 합니다. 개발팀에서 저희 서비스에 적합하다고 판단한 언어는 React Native 인데요. 이 언어가 사용된 일부 페이지에만 썸네일 정책을 적용하고, 개발팀과 호흡을 맞춰 다른 페이지에도 점차 확대해나갈 계획입니다. 현재 썸네일 정책이 적용된 페이지는 다음과 같습니다.
Grit Han
만다라트 : 장기 목표 챌린지
Grit Han