Share
Sign In
🏢
소속 : RIDI (서비스 리뉴얼팀)
🗓️
기간 : 2021.10 - 2022.2
🤝
인원 : 10명
PM팀 2명, 프로덕트 디자인팀 2명(본인), 앱팀 2명, 백엔드팀 3명, 데이터분석팀 1명
배경
장르홈은 모든 장르와 작품, 그리고 기능을 하나로 잇는 연결부입니다. 리디에 들어온 유저가 처음으로 마주하게 되는 화면이기도 합니다.

사람과 마찬가지로, 서비스도 첫인상이 매우 중요합니다. 그 첫 느낌을 바탕으로 유저는 이 서비스가 쓸만한지 아닌지를 빠르게 판단하고 잔류하거나 이탈하게 될 것입니다.

그런 의미에서 장르홈 리뉴얼은 조심스럽지만 반드시 개선해야 하는 숙원사업과 같았습니다.
전자책 위주였던 ‘리디북스’에서 모든 컨텐츠를 아우를 수 있는 ‘리디’로 변화하면서 그 필요성은 더욱 커졌습니다.

이에 서비스 리뉴얼팀은 아래의 핵심 목표를 세우고, 쉬운 카테고리 구조부터 CMS, 유저 친화적인 UX까지 모든 것을 다시 쌓아 올린다는 마음으로 프로젝트에 임하게 되었습니다.

탐색 경험 개선 장르와 상관없이 리디의 모든 작품을 쉽게 발견할 수 있게 한다.
카테고리 개선 장르별 구분 및 위계를 정돈하여 유저의 혼란을 줄인다.
디자인 개선 히스토리를 알 수 없는 오래된 UI를 개선하고 디자인 시스템을 정립한다.
들어가며
지난해 4월, 앱에서 웹툰과 웹소설이 각각의 탭으로 분리되었습니다. 컨텐츠 확장의 초석이 마련된 셈이었습니다. 이로써 유저들은 리디가 단순한 전자책 서비스를 넘어서고 있다는 것을 직접적으로 인지하게 되었습니다.

그러나 뷰어에 불과했던 앱을 단숨에 웹과 같은 형태로 끌어올리기에는 무리가 있었습니다. 설령 가능했더라도 하루아침에 모든 것이 바뀐다면 유저는 극심한 혼란에 빠지고 말 것입니다. 그리하여 리디의 지향점을 멀리 두고 차근차근 바꿔나가기로 했습니다.

장르홈 리뉴얼은 그 지향점으로 가는 길목에 있던 큰 산이었습니다. 그리하여 가야 할 방향을 잃지 않으면서, 유저의 혼란을 최소한으로 줄이면서, 앞서 열거한 핵심 목표를 달성하기 위한 긴 여정이 시작되었습니다.

웹툰, 웹소설 탭 분리
뜯어보기
📣
장르홈 리뉴얼은 웹, 앱 모두 진행된 사항이나 제가 주로 맡은 것이 앱이었기 때문에 이 글에서는 앱 장르홈만을 다루겠습니다.
1. 탭
단순 타이틀에 불과했던 기존의 탭 1depth를 클릭 가능한 버튼으로 변경했습니다. 이는 웹툰, 웹소설뿐이었던 장르가 보다 폭넓게 확장되었기 때문입니다.

언뜻 선택해야 할 요소가 하나 늘어난 것처럼 보이지만, 한 번 원하는 장르(1depth), 원하는 카테고리(2depth)를 선택하고 나면
앱을 재시작해도 선택값이 유지됩니다. 따라서 유저는 자신이 정한 바운더리 내에서 다양한 작품을 탐색할 수 있으며, 원하는 경우 쉽게 다른 장르에 접근할 수도 있습니다.

이는
작품홈 리뉴얼에서 소개했던 ‘이 작품 다양하게 즐기기’ 섹션과 같은 맥락입니다.

(왼쪽부터) 웹툰, 만화, 웹소설, 도서
알림, 검색 기능 위치 변경
탭 1depth에 속해 있던 알림과 검색을 엄지 영역에 속하는 내비바로 옮겨 접근성을 높였습니다. 해당 기능은 앱에서 가장 빈번하게 사용되고 있으므로, 탐색 깊이에 따라 접근 가능 여부가 달라져서는 안 됩니다.

만약 상단 위치에 그대로 두었더라면 유저는 검색과 알림 기능을 사용하기 위해 매번 장르홈으로 돌아가야 했을 것입니다. 이러한 불편함을 방치하는 것보다는 위치 변경이 맞겠다고 생각했습니다.

반면, 그보다 빈번하게 사용되지 않는 선호작품은 위치를 유지하고 직관적인 형태로 아이콘을 변경했습니다.
2. 캐러셀
작품의 매력이 돋보일 수 있는 큰 사이즈의 캐러셀 유형을 추가했습니다.
프로덕트 디자인팀과 마케팅 디자인팀의 도움으로 방대한 케이스를 정리하여
운영 가이드를 제작했고, 각 사업부 및 CP사에 전달하여 기존보다 훨씬 정돈된 형태로 캐러셀을 운영할 수 있게 되었습니다.

이것으로 유저는 앱(모바일/태블릿)과 웹(모바일/데스크탑), 그 어디에서든지 일관된 느낌을 받을 수 있습니다.

(왼쪽부터) 앱, 웹 모바일, 웹 데스크탑
3. 퀵메뉴
기존 퀵메뉴의 문제점은 캐러셀이나 작품으로 가야 할 시선을 크게 빼앗는다는 것이었습니다. 배경색을 선택하는 기준은 담당자의 선택에 달려 있었고, 간혹 아이콘과 성격이 맞지 않는 경우도 있었습니다. 더해서, 텍스트의 줄 바꿈을 허용한 탓에 단번에 텍스트가 읽히지 않았습니다.

이에 퀵메뉴 규칙을 다음과 같이 정리했고, 퀵메뉴의 과도한 존재감을 덜어냈습니다.
배경색을 하나로 통일
아이콘 사이즈 축소 및 리디자인
텍스트 사이즈 축소 및 최대 글자 수 규칙 수립
퀵메뉴 성격별 아이콘 선정 규칙 수립
4. 다양한 섹션
기존 앱에 없던 다양한 섹션을 추가하여, 탐색을 원하는 유저가 새로운 작품을 발견하는 데 도움을 주고자 했습니다.

추가된 섹션
오늘, 리디의 발견
키워드로 검색하기
이 작품 어때요 (작품 최대 24개까지 노출)
오늘, 리디의 발견
키워드로 검색하기
이 작품 어때요
5. 내비바
내비바는 이번 리뉴얼의 핵심 목표를 관통하는 요소입니다. 그 중요성만큼 작업도 까다로웠는데, 이유는 다음의 조건을 한 번에 충족하기 어려웠기 때문입니다.
웹툰, 웹소설 외 다양한 장르를 추가할 것
각 장르의 독립성을 존중하되, 언제라도 쉽게 다른 장르를 찾아볼 수 있게 할 것
여기서 기존의 방식을 유지했다면 어떻게 되었을지 먼저 가정해보겠습니다.

예시 : 탭에 기능, 내비바에 장르를 넣는다면
탭에 기능을, 내비바에 장르를 담는 방식입니다. 내비바가 정리되어 언뜻 편리하게 느껴집니다.
그러나 내비바에서 밀려난 내서재, MY가 위쪽으로 향하면서 탭은 더욱 어렵고 복잡해졌습니다.
이들은 장르와 달리 ‘더보기’ 등으로 묶을 수 없는 중요 기능이므로, 언제나 큰 부피를 차지하고 있을 것입니다.

더해서, 내비바 역시 확장성이 전혀 없는 구조로 되어 있습니다. 기기 해상도상 내비바는 (아무리 작게 그린다 해도) 최대 6개의 아이템밖에 수용할 수 없습니다. 그런 상황에서 장르가 하나 늘어난다면 어떻게 해야 할까요? 그때는 또다시 난관에 봉착하고 말 것입니다.

따라서 많은 유저가 기존 앱에 익숙해져 있음을 알면서도, 서비스 리뉴얼팀은 아래와 같은 결론을 내릴 수밖에 없게 되었습니다.
내비바 중앙의 장르 변경 버튼은 웹툰/만화, 웹소설, 도서, 셀렉트라는 하위 브랜드를 담는 컨테이너로써 기능합니다. 이것으로 유저는 언제든지 원하는 장르에 접근할 수 있습니다.

탭과 내비바의 복잡도를 줄이는 것은 물론, 하위 브랜드 추가 시 모달 height를 늘리는 방식으로 확장성을 확보했습니다. 리디에서는 처음 시도하는 것이지만, 타 서비스에서 중앙 버튼을 사용하는 사례가 적지 않으므로 사용성을 크게 저해하는 요소는 아니라고 판단했습니다.
마치며
장르홈 리뉴얼을 마지막으로 서비스 리뉴얼팀은 해산하게 되었습니다. 다시 프로덕트 디자인팀으로 돌아가고 보니 어느덧 리디에 입사한 지 일 년이 지나 있더군요 😅 그간 시간이 어떻게 가는지도 모를 만큼 치열하게 공부하고, 작업하고, 이야기했던 것 같습니다.

리뉴얼팀의 여파로 언제부터인가 앱 담당자가 되었는데, 오랜 기간 앱에 매달려 있어서인지 오히려 기뻤습니다. 리디만큼 어마어마한 수의 유저를 보유한 서비스를 맡는다는 것 자체가 영광이라고 생각했습니다.

그로부터 시간이 더 지난 지금은 앱과 웹을 구분하지 않고 일하고 있는데요, 웹은 또 매우 다른 세상이어서 처음부터 다시 배우는 기분이 듭니다. 앞으로 어떤 배움과 깨달음이 저를 기다리고 있을지 설레고 기다려집니다. 그럼 다음 회고를 올릴 때까지 다시 열일‼️ 하겠습니다.
/grit-han-94
Subscribe
Subtle UX Squad
소속 : RIDI (Subtle UX Squad) 기간 : 2022.4 - 2022.9 인원 : 6명 PM팀 1명, 프로덕트 디자인팀 3명(본인), 앱팀 1명, 웹팀 1명 배경 큰 단위의 프로젝트가 끝나고 나면 백로그에 ‘보류’ 태그를 단 태스크가 산더미처럼 쌓이기 마련입니다. 바로 중요도나 긴급도, 내부 이슈 등으로 인해 우선순위에서 밀려난 것들인데요. 리디 역시 여기저기에 이러한 태스크가 산적해 있는 상태였습니다. ‘이거 다음에 하기로 했었는데’, ‘별로 중요하지도 않고, 어디에 끼워넣기도 애매하니 그냥 두자.’ 생각했던 것들이 모여 어느샌가 리디를 미묘하게 불편한 서비스로 만들고 있었죠. Subtle UX Squad(이하 서들 스쿼드)는 이러한 불편함을 개선해 전체 서비스의 UX 완성도를 높이고, 이전에 놓쳤던 디테일을 고도화하기 위해 조직되었습니다. 유의할 점은 콘텐츠 서비스로서 감상에 방해가 될 수 있는 과한 사용성, 편의성은 (서들 스쿼드 내에서) 개선을 지양하자는 것이었습니다. 자칫 성급하게 손을 댔다가는 차후에 있을 다른 프로젝트에 방해가 될 수 있을뿐 아니라 잦은 정책 변경으로 유저에게 혼란을 줄 수도 있으니까요. 들어가며 본격적인 작업에 앞서 멤버 전원이 리디 웹/앱 전반을 면밀히 살펴보는 시간을 가졌습니다. 이후 아래 기준에 맞춰 분류된 개선점은 약 200여 개에 달했습니다. 이때 업력이 오래된 탓에 히스토리를 알 수 없어진 기능과 PSD 파일조차 찾을 수 없는 화면이 많아 애를 먹었던 기억이 있네요. 😅 Type Trivial 사소한 UI 이슈 결함
Grit Han
앱 작품홈 리뉴얼
소속 : RIDI (서비스 리뉴얼팀) 기간 : 2021.5 - 2021.11 인원 : 8명 PM팀 1명, 프로덕트 디자인팀 2명(본인), 앱팀 2명, 웹팀 1명, 백엔드팀 1명, CP팀 1명 배경 지난해 5월, 리디 내 목적 조직 중 하나인 서비스 리뉴얼팀에 합류했습니다. 팀의 궁극적인 목표는 리디 서비스를 앱 중심으로 개편하는 것이었습니다. 기존 리디 앱은 문자 그대로 ‘뷰어’였습니다. 웹에서 구매한 작품을 다운로드 및 감상하는, 굉장히 단순한 기능에 국한되어 있었습니다. 따라서 유저들은 iOS, Android 앱과 웹을 모두 다르게 경험할 수밖에 없었습니다. 그러나 유저들은 하나의 앱에서 모든 기능이 통일성과 완결성을 갖기를 바랐습니다. 어디에서는 되고, 어디에서는 안 되는 것이 아니라 어디서든 동일하고 다양한 경험을 할 수 있기를. 이를 위해 서비스 리뉴얼팀은 아래와 같은 세부 목표를 세웠습니다. 탐색 경험 개선 장르홈, 작품홈을 리뉴얼해 유저의 탐색을 돕는다. 구매 경험 개선 앱에서 e북을 구매 및 감상할 수 있게 한다. 뷰어에서 쉬운 구매가 가능하게 한다. 이 글은 그중 작품홈 리뉴얼에 관한 회고를 담고 있습니다. 들어가며 기존 작품홈은 컨텐츠 성격에 따라 최적화되는 것이 아니라, 하나의 형태에 모든 컨텐츠를 담는 형식이었습니다. 쉽게 말하자면 단권/세트, 연재/e북 등 수많은 형태의 작품들이 모두 동일하게 보이고 있었다는 뜻입니다. 작품홈은 유저들이 가장 많이, 그리고 오래 보아야 하는 화면인데, 그 중요도에 비해 정보가 현저히 부족했습니다. 이에 VOC 및 데이터를 파악하여 아래와 같이 개선하기로 했습니다. 키워드, 리뷰를 비롯한 자세한 작품 정보를 제공한다.
Grit Han
마크다운 ISP 개선
소속 : RIDI (프로덕트 디자인팀) 기간 : 2022.8 - 2022.12 인원 : 6명 PM팀 1명, 프로덕트 디자인팀 1명(본인), 웹팀 1명, 백엔드팀 1명, CP팀 1명 배경 매년 12월경, 리디에서는 마크다운(Mark Down)이라는 큰 이벤트가 열립니다. 마크다운이란 e북 세트를 20% ~ 50% 가량 할인된 가격으로 구매할 수 있을뿐 아니라 구매 금액에 따라 리디포인트까지 챙겨갈 수 있는 행사입니다. 마크다운에 참여하는 작품의 수는 매년 많아지고 있습니다. 이번에는 각 장르당 최대 1,100종, 모두 합해 6,000종 정도가 참여하게 되었는데요, 결코 적지 않은 숫자입니다. 당연한 말이지만 작품의 수가 많아질수록, 또 할인의 폭과 혜택이 커질수록 이벤트에 참여하는 유저의 수 또한 많아집니다. 그러나 애당초 마크다운 이벤트 페이지는 이 정도의 규모를 고려하여 만들어진 것이 아니었습니다. 마크다운 이벤트 상세페이지(이하 ISP)는 아래와 같은 형식을 띠고 있었습니다. 오래전에 만들어져 올드한 디자인은 차치하고, 많은 수의 작품이 그저 MD가 등록한 순서대로 나열되어 있는 모습입니다. 유저의 입장에서 보면 도무지 어떤 기준으로 작품을 선택해야 할지 알 수 없죠. 이처럼 기존 ISP에서 찾을 수 있는 문제점을 아래와 같이 정리해 미션으로 삼았습니다. 탐색 관련 작품을 장르별로 분류해 보기 어렵다. 탐색 관련 페이지 내에서 작품을 검색할 수 없다. 탐색 관련 이미 소장하고 있는 작품을 걸러낼 수 없다. 구매 관련 작품을 바로 카트에 담을 수 없다.
Grit Han