라이너 PDF UI/UX 디자인 리뉴얼 – 이 집 PDF도 잘 하네…!
PDF에서도 하이라이트 돼?
라이너는 웹뿐만 아니라 PDF에도 하이라이팅 및 코멘트를 남길 수 있는 서비스입니다. PDF에 하이라이팅 하는 기능은 예전부터 존재했었지만, 올해 초에 더욱 더 튼튼하게 정비한 후 리뉴얼하여 배포하였습니다.
그러나 슬프게도 PDF 업로드 수가 잘 늘지 않았습니다.🥺 그러다 알렉스의 데이터 분석을 통해 PDF를 업로드 한 유저들의 프리미엄 전환율이 높은 것을 확인하고 PDF 기능을 본격적으로 밀어야겠다는 결론이 나서 이번 오메가 5 스프린트 때 실행하게 되었습니다.
PDF가 왜 중요한가
라이너의 유저는 의사🧑⚕️, 대학생🧑🎓, 개발자🧑💻, 법률 직군🧑⚖️ 쪽과 같은 텍스트를 많이 접하는 전문 직군의 비율이 높습니다. 이러한 유저들은 논문을 읽으며 라이너를 사용하는 분들이 많은데, 이 논문들이 대부분 PDF 문서입니다. 따라서 주요 라이너 유저들에게는 PDF annotation 기능이 중요할 수밖에 없습니다.
이 뿐만 아니라 앞에서 말했듯이 모바일로 유입되어 한 번이라도 데스크톱에서 페이지를 저장한 전적이 있는 유저들(이하 mobDESK) 중에서 라이너 프리미엄을 구독한 유저들의 40.45%는 PDF기능을 사용했습니다.
베이식 mobDESK의 PDF 사용률이 13.05%에 비하면 3배가 넘는 수치입니다. (thanks to @알렉스) 따라서 저희 라이너 팀은 구독 전환율에서도 PDF 사용을 유저들에게 부각할 필요성을 느끼게 되었습니다. 구독 전환율을 높이는 것도 굉장히 중요한 사안이죠.🧐
그래서 무엇이 바뀌었는가
이번 스프린트 때는 큰 리소스를 투입하지 않고 쉽게 바꿀 수 있는 것 위주로 1차 PDF 개선을 진행하기로 하였습니다. 가장 먼저 라이너 웹 헤더에 있는 <+Add Highlight> 버튼 이름을 <+PDF>로 바꾸었습니다.
기존에 <+Add Highlight> 였던 이유가 있습니다. PDF 추가뿐만 아니라 브라우저 익스텐션을 거치지 않고도 이 버튼을 통해서 URL을 추가하여 페이지를 저장하게 하려는 의도였는데요, 사실상 크게 쓰이지 않는 기능이기 때문에 URL을 직접 입력해서 추가하는 방식은 삭제하였습니다. 이에 맞춰 페이지 추가 모달도 파일만 찾아 추가할 수 있도록 변하게 되었죠.
다음은 내 하이라이트 목록에서의 변화입니다. 역시나 PDF 기능을 열심히 사용하는 알렉스가 내 하이라이트 목록에서 PDF 페이지가 쉽게 구별되면 좋겠다는 의견을 내주셨습니다.👀 그래서 타이틀의 끝에 PDF 배지를 추가하였습니다. 또한 PDF의 favicon도 웹페이지와 동일한 default favicon에서 PDF 용 favicon으로 변경하였습니다. 옆에 적히는 URL 또한 getliner.com 이었는데 PDF로 변경하였어요.
여기까지는 getliner.com 내에서의 변화였다면
지금부터는 작지만… 브라우저 익스텐션에서의 변화입니다.
구글 검색 결과 혹은 구글 스칼라 검색 결과에서 PDF 파일이 있으면 바로 라이너 PDF 뷰어를 통해 하이라이트 할 수 있도록 버튼을 추가하였습니다. 최대한 구글 검색 결과 UI에 녹아들 수 있도록 구글의 PDF 뱃지와 비슷하게 디자인하였습니다.
이 외에도 백엔드 엔지니어분들께서 PDF 경험 최적화를 위해 많은 힘을 써주셨습니다.
1. 원래는 PDF를 라이너 뷰어로 열 때의 속도가 느렸지만 이번에 PDF 로딩 최적화도 진행되었고,
2. 구글과 구글 스칼라의 검색 결과의 PDF에도 라이너가 추천하는 콘텐츠인 picked by LINER 를 추가하기로 했습니다. (기존에는 웹페이지에만 제한적으로 존재했었습니다.)
3. 그리고 또 URL로 업로드하는 기존 방식에서부터 파일을 읽어서 바로 업로드할 수 있도록 루크가 개발을 해주셨습니다.👏
이런 팀원들의 노력으로 라이너 유저들이 PDF에 하이라이팅 할 때 어려움을 느끼지 않고 더 많이 하이라이팅을 해줬으면 하는 바람입니다.
이번 글과 디자인 변경에는 알렉스의 도움이 정말 컸어요.
알렉스 이 글 보고 마음껏 뿌듯해하시는 걸 허락 해드립니다🥸
다음에는 더 알찬 디자인 글로 만나 뵈었으면 합니다!
그럼 저는 프로덕트 디자이너를 찾으러 이만…🏃♀️ 다음 글에서 만나요!
