Share
Sign In
🏢
소속 : RIDI (Subtle UX Squad)
🗓️
기간 : 2022.4 - 2022.9
🤝
인원 : 6명
PM팀 1명, 프로덕트 디자인팀 3명(본인), 앱팀 1명, 웹팀 1명
배경
큰 단위의 프로젝트가 끝나고 나면 백로그에 ‘보류’ 태그를 단 태스크가 산더미처럼 쌓이기 마련입니다. 바로 중요도나 긴급도, 내부 이슈 등으로 인해 우선순위에서 밀려난 것들인데요.

리디 역시 여기저기에 이러한 태스크가 산적해 있는 상태였습니다. ‘이거 다음에 하기로 했었는데’, ‘별로 중요하지도 않고, 어디에 끼워넣기도 애매하니 그냥 두자.’ 생각했던 것들이 모여 어느샌가 리디를
미묘하게 불편한 서비스로 만들고 있었죠.

Subtle UX Squad(이하 서들 스쿼드)는 이러한 불편함을 개선해
전체 서비스의 UX 완성도를 높이고, 이전에 놓쳤던 디테일을 고도화하기 위해 조직되었습니다. 유의할 점은 콘텐츠 서비스로서 감상에 방해가 될 수 있는 과한 사용성, 편의성은 (서들 스쿼드 내에서) 개선을 지양하자는 것이었습니다.

자칫 성급하게 손을 댔다가는 차후에 있을 다른 프로젝트에 방해가 될 수 있을뿐 아니라 잦은 정책 변경으로 유저에게 혼란을 줄 수도 있으니까요.
들어가며
본격적인 작업에 앞서 멤버 전원이 리디 웹/앱 전반을 면밀히 살펴보는 시간을 가졌습니다. 이후 아래 기준에 맞춰 분류된 개선점은 약 200여 개에 달했습니다. 이때 업력이 오래된 탓에 히스토리를 알 수 없어진 기능과 PSD 파일조차 찾을 수 없는 화면이 많아 애를 먹었던 기억이 있네요. 😅
Type
Trivial 사소한 UI 이슈 결함
Bug fix 기획한 의도대로 기능이 동작하지 않는 경우
New feature 새로운 기능 추가
Impact
Low 유저가 크게 인지하기 어려운 개선
Normal 유저가 인지 가능한 정도의 개선
High UX 변경이 필요한 경우
그러나 분류를 거친 개선점이 모두 배포의 문턱을 넘은 것은 아닙니다. Daily / Weekly 싱크업을 통해 재검토 및 분석하고, 서들 스쿼드에서 다룰 만하다는 판단이 서면 그때 개선안 작업에 착수하는 수순이었죠.
물론 번거로운 일이지만, 아무리 사소하더라도 유저의 경험에 영향을 주는 것이라면 뭐든 꼼꼼하게 검토할 필요가 있었습니다.
뜯어보기
📣
아래에 소개할 기능들은 현재 리디 서비스에 반영된 것 중 6가지를 추린 것이며 웹/앱이 섞여 있습니다.
1. 형광펜 on/off
웹소설 또는 도서 유저에게 형광펜은 매우 유용한 기능입니다. 감명 깊은 문장에 형광펜을 칠하면 ‘독서노트’에서 모아보거나 이미지로 멋지게 공유할 수 있습니다.
(좌) 독서노트에서 형광펜 등 모아보기 / (우) 이미지로 멋지게 공유하기
그러나 어떤 작품을 다시 보고싶은 유저에게는 이 형광펜 기능이 오히려 감상에 방해가 될 수 있습니다. 여기저기 쳐진 형광펜이 몰입을 깨뜨리는 요소로 작용하기 때문이죠.
이에 유저들은 오랫동안 자신이 원할 때만 형광펜을 볼 수 있는 기능을 요청해왔는데요. 서들 스쿼드 멤버들은 이 불편에 공감했고 형광펜 보기 라는 이름 하에 아래와 같이 실현시키기로 했습니다.
2. 작성 취소 팝업
태블릿 PC에서 작품의 화별 댓글 또는 리뷰를 작성하려고 할 때, 유저는 아래와 같은 화면을 보게 됩니다. 뷰어 화면에 dim이 깔리고, 그 위로 Layer popup이 뜨는 방식입니다.

언뜻 문제가 없어 보이는 화면이지만, 작성 중 실수로 dim 영역을 클릭하게 되면 popup이 닫히면서
작성하고 있던 내용이 날아가게 됩니다. 댓글과 리뷰는 (돌아오는 혜택이 없으면) 작성까지 도달하기가 매우 어려우므로 이 부분을 꼭 개선해야겠다고 생각했습니다.

개선안은 간단합니다. 작성 완료 전 dim 영역 클릭 시 경고 팝업을 띄워주는 것입니다.
화별 댓글 작성 중 dim 클릭할 경우
3. 성인제외 필터
리디 유저는 성인 작품인가 아닌가를 중요하게 생각하는 경향이 있습니다. 후자의 경우 적나라한 성인 작품의 표지가 눈에 띄지 않았으면 하는 마음이 큰데, 지금까지 ‘키워드 검색’ 페이지에서는 성인 작품을 제외하고 볼 수 없었습니다.

이는 검색, 장르홈 상세페이지 등과 상반된 모습이며, 논의 결과 ‘키워드 검색’에도 동일하게 적용되어야 한다는 결론이 났습니다. 따라서
성인 제외 필터를 on할 경우 아래 리스트를 새로고침하여 전연령 작품만 노출되도록 변경되었습니다.
4. 카트 옵션바와 CTA
리디 유저들은 대개 카트에 작품을 여러 개 담아 한꺼번에 구매하는 방식을 취하고 있습니다. 이때 카트는 페이지네이션이 아닌 무한 스크롤로 구현되어 있으므로, 작품을 많이 담을수록 리스트가 길어지게 됩니다.

그러나 기존에는 카트에서 가장 중요한 기능인 선택, 삭제, 구매(CTA)를 스크롤 고정해두지 않고 있었습니다. 그대신
리스트 상하단에 옵션바를 중복으로 붙여 전체 선택하거나, 선택한 것을 위시리스트로 이동시키거나, 선택한 것을 삭제할 수 있게 해두었죠.

리스트 최상단 또는 최하단에 이르기 전까지는 옵션을 제어할 수도, CTA를 통해 결제 페이지로 이동할 수도 없다는 뜻입니다. 서들 스쿼드에서는 이 점에 주목해 카트 페이지의 사용성을 개선하기로 했습니다.

AS-IS
TO-BE
TO-BE 이미지처럼, CTA와 옵션바가 보이지 않게 되는 지점까지 스크롤을 내리면 상단에 옵션바가, 하단에 CTA가 스크롤 고정되는 방식으로 개선되었습니다.
5. 독서노트 터치 영역
독서노트에서는 작품별로 자신이 남긴 형광펜과 메모를 모아볼 수 있습니다. 독서광인 저는 이 기능을 애용하고 있는데요, 우연히 독서노트의 터치 영역이 유저 친화적이지 않다는 사실을 발견했습니다.

기존에는 터치하기 어렵게 설정된 터치 영역을 클릭해 해당 작품의 독서노트 상세페이지로 이동할 수 있었습니다. 처음 이 화면을 접했을 때 제가 원한 것은 각 독서노트 클릭 시에 해당 노트로 이동하는 것이었는데, 이동은커녕 클릭조차 할 수 없게 되어있는 것이 아쉬웠습니다.
AS-IS
이를 개선하기 위해 우선 터치 영역을 확대하고, 클릭한 요소에 따라 도달하는 위치를 분리해 아래와 같은 형태로 변경했습니다.
표지, 제목, 더보기 클릭 시 독서노트 상세페이지로 이동
독서노트 클릭 시 독서노트 상세페이지로 이동 → 해당 노트 위치로 스크롤 이동 → 노트 포커스
TO-BE
6. 영구삭제 시 경고
내서재의 숨긴 작품 목록에서 작품을 선택한 후 선택 영구 삭제하게 되면 해당 작품은 즉시 이용이 불가능해집니다. 이를 되돌릴 방법은 고객센터를 통해 문의하는 것뿐이며, 그마저 여의치 않으면 작품을 다시 구매 및 다운로드해야 합니다.

기존에도 영구삭제 클릭 시에 경고 팝업이 뜨고 있었는데요. 실수로 ‘삭제’를 클릭하는 유저는 여전히 존재했고 고객센터로 들어오는 CS 역시 줄지 않았습니다. 따라서
(서들 스쿼드의 취지에 맞게) 영구 삭제 UX 자체를 건드리지 않으면서 조금이나마 개선할 방법이 무엇인지 고민하게 되었습니다.
(좌) AS-IS / (우) TO-BE
팝업을 내서재 기본 컴포넌트에 맞춰 변경하고, ‘삭제’ 버튼의 컬러를 블루에서 레드로 변경해 가시성을 높였습니다. 이후 CS가 눈에 띄게 줄었으나 아쉬운 부분은 여전히 남아 있습니다. 차후에 있을 내서재 개선 프로젝트에서 이 역시 더 나은 방향으로 바뀌리라 기대합니다.
마치며
서들 스쿼드는 약 5개월간 진행된 프로젝트입니다. 긴 기간치고 소소한 태스크들을 다뤘는데, 그럼에도 찾아내고 의논하고 고치는 과정이 아주 유익하고 흥미로웠습니다. 앞으로 대형 프로젝트가 줄줄이 대기하고 있는만큼 서들 스쿼드도 시즌 2, 시즌 3을 거듭하면 좋겠습니다.

실제 작업에 투입된 인원은 여섯 명이지만, 그 외에 도움을 주신 분들이 많습니다. 특히 우연한 기회로 합류해주신 CTO, CPO 분들로부터 많은 인사이트를 얻었습니다. 역시
서비스는 경험이라는 생각이 들었달까요 🥹
❤️
3
/grit-han-94
Subscribe
앱 작품홈 리뉴얼
소속 : RIDI (서비스 리뉴얼팀) 기간 : 2021.5 - 2021.11 인원 : 8명 PM팀 1명, 프로덕트 디자인팀 2명(본인), 앱팀 2명, 웹팀 1명, 백엔드팀 1명, CP팀 1명 배경 지난해 5월, 리디 내 목적 조직 중 하나인 서비스 리뉴얼팀에 합류했습니다. 팀의 궁극적인 목표는 리디 서비스를 앱 중심으로 개편하는 것이었습니다. 기존 리디 앱은 문자 그대로 ‘뷰어’였습니다. 웹에서 구매한 작품을 다운로드 및 감상하는, 굉장히 단순한 기능에 국한되어 있었습니다. 따라서 유저들은 iOS, Android 앱과 웹을 모두 다르게 경험할 수밖에 없었습니다. 그러나 유저들은 하나의 앱에서 모든 기능이 통일성과 완결성을 갖기를 바랐습니다. 어디에서는 되고, 어디에서는 안 되는 것이 아니라 어디서든 동일하고 다양한 경험을 할 수 있기를. 이를 위해 서비스 리뉴얼팀은 아래와 같은 세부 목표를 세웠습니다. 탐색 경험 개선 장르홈, 작품홈을 리뉴얼해 유저의 탐색을 돕는다. 구매 경험 개선 앱에서 e북을 구매 및 감상할 수 있게 한다. 뷰어에서 쉬운 구매가 가능하게 한다. 이 글은 그중 작품홈 리뉴얼에 관한 회고를 담고 있습니다. 들어가며 기존 작품홈은 컨텐츠 성격에 따라 최적화되는 것이 아니라, 하나의 형태에 모든 컨텐츠를 담는 형식이었습니다. 쉽게 말하자면 단권/세트, 연재/e북 등 수많은 형태의 작품들이 모두 동일하게 보이고 있었다는 뜻입니다. 작품홈은 유저들이 가장 많이, 그리고 오래 보아야 하는 화면인데, 그 중요도에 비해 정보가 현저히 부족했습니다. 이에 VOC 및 데이터를 파악하여 아래와 같이 개선하기로 했습니다. 키워드, 리뷰를 비롯한 자세한 작품 정보를 제공한다.
Grit Han
앱 장르홈 리뉴얼
소속 : RIDI (서비스 리뉴얼팀) 기간 : 2021.10 - 2022.2 인원 : 10명 PM팀 2명, 프로덕트 디자인팀 2명(본인), 앱팀 2명, 백엔드팀 3명, 데이터분석팀 1명 배경 장르홈은 모든 장르와 작품, 그리고 기능을 하나로 잇는 연결부입니다. 리디에 들어온 유저가 처음으로 마주하게 되는 화면이기도 합니다. 사람과 마찬가지로, 서비스도 첫인상이 매우 중요합니다. 그 첫 느낌을 바탕으로 유저는 이 서비스가 쓸만한지 아닌지를 빠르게 판단하고 잔류하거나 이탈하게 될 것입니다. 그런 의미에서 장르홈 리뉴얼은 조심스럽지만 반드시 개선해야 하는 숙원사업과 같았습니다. 전자책 위주였던 ‘리디북스’에서 모든 컨텐츠를 아우를 수 있는 ‘리디’로 변화하면서 그 필요성은 더욱 커졌습니다. 이에 서비스 리뉴얼팀은 아래의 핵심 목표를 세우고, 쉬운 카테고리 구조부터 CMS, 유저 친화적인 UX까지 모든 것을 다시 쌓아 올린다는 마음으로 프로젝트에 임하게 되었습니다. 탐색 경험 개선 장르와 상관없이 리디의 모든 작품을 쉽게 발견할 수 있게 한다. 카테고리 개선 장르별 구분 및 위계를 정돈하여 유저의 혼란을 줄인다. 디자인 개선 히스토리를 알 수 없는 오래된 UI를 개선하고 디자인 시스템을 정립한다. 들어가며 지난해 4월, 앱에서 웹툰과 웹소설이 각각의 탭으로 분리되었습니다. 컨텐츠 확장의 초석이 마련된 셈이었습니다. 이로써 유저들은 리디가 단순한 전자책 서비스를 넘어서고 있다는 것을 직접적으로 인지하게 되었습니다.
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