🔍

Subtle UX Squad

Subtle UX

소속 : 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

웹소설 또는 도서 유저에게 형광펜은 매우 유용한 기능입니다. 감명 깊은 문장에 형광펜을 칠하면 ‘독서노트’에서 모아보거나 이미지로 멋지게 공유할 수 있습니다.

(좌) 독서노트에서 형광펜 등 모아보기 / (우) 이미지로 멋지게 공유하기

그러나 어떤 작품을 다시 보고싶은 유저에게는 이 형광펜 기능이 오히려 감상에 방해가 될 수 있습니다. 여기저기 쳐진 형광펜이 몰입을 깨뜨리는 요소로 작용하기 때문이죠.

이에 유저들은 오랫동안 자신이 원할 때만 형광펜을 볼 수 있는 기능을 요청해왔는데요. 서들 스쿼드 멤버들은 이 불편에 공감했고 형광펜 보기 라는 이름 하에 아래와 같이 실현시키기로 했습니다.

‘형광펜 보기’가 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 분들로부터 많은 인사이트를 얻었습니다. 역시 서비스는 경험이라는 생각이 들었달까요 🥹