라이너 PDF UI/UX 디자인 리뉴얼 – 이 집 PDF도 잘 하네…!
![](https://blog.getliner.com/wp-content/uploads/2020/11/Chloelog1-1024x640.png)
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을 직접 입력해서 추가하는 방식은 삭제하였습니다. 이에 맞춰 페이지 추가 모달도 파일만 찾아 추가할 수 있도록 변하게 되었죠.
![](https://blog.getliner.com/wp-content/uploads/2020/11/치ㅐ디ㅐㅎ2.png)
![](https://blog.getliner.com/wp-content/uploads/2020/11/chloelog3-1024x933.png)
다음은 내 하이라이트 목록에서의 변화입니다. 역시나 PDF 기능을 열심히 사용하는 알렉스가 내 하이라이트 목록에서 PDF 페이지가 쉽게 구별되면 좋겠다는 의견을 내주셨습니다.👀 그래서 타이틀의 끝에 PDF 배지를 추가하였습니다. 또한 PDF의 favicon도 웹페이지와 동일한 default favicon에서 PDF 용 favicon으로 변경하였습니다. 옆에 적히는 URL 또한 getliner.com 이었는데 PDF로 변경하였어요.
![](https://blog.getliner.com/wp-content/uploads/2020/11/chloelog4-1024x298.png)
여기까지는 getliner.com 내에서의 변화였다면
지금부터는 작지만… 브라우저 익스텐션에서의 변화입니다.
구글 검색 결과 혹은 구글 스칼라 검색 결과에서 PDF 파일이 있으면 바로 라이너 PDF 뷰어를 통해 하이라이트 할 수 있도록 버튼을 추가하였습니다. 최대한 구글 검색 결과 UI에 녹아들 수 있도록 구글의 PDF 뱃지와 비슷하게 디자인하였습니다.
![](https://blog.getliner.com/wp-content/uploads/2020/11/chloelog5-1024x222.png)
이 외에도 백엔드 엔지니어분들께서 PDF 경험 최적화를 위해 많은 힘을 써주셨습니다.
1. 원래는 PDF를 라이너 뷰어로 열 때의 속도가 느렸지만 이번에 PDF 로딩 최적화도 진행되었고,
2. 구글과 구글 스칼라의 검색 결과의 PDF에도 라이너가 추천하는 콘텐츠인 picked by LINER 를 추가하기로 했습니다. (기존에는 웹페이지에만 제한적으로 존재했었습니다.)
3. 그리고 또 URL로 업로드하는 기존 방식에서부터 파일을 읽어서 바로 업로드할 수 있도록 루크가 개발을 해주셨습니다.👏
이런 팀원들의 노력으로 라이너 유저들이 PDF에 하이라이팅 할 때 어려움을 느끼지 않고 더 많이 하이라이팅을 해줬으면 하는 바람입니다.
이번 글과 디자인 변경에는 알렉스의 도움이 정말 컸어요.
알렉스 이 글 보고 마음껏 뿌듯해하시는 걸 허락 해드립니다🥸
다음에는 더 알찬 디자인 글로 만나 뵈었으면 합니다!
그럼 저는 프로덕트 디자이너를 찾으러 이만…🏃♀️ 다음 글에서 만나요!