도서 상세 개선하기
고민하고 결정하는 과정에 대한 이야기
안녕하세요. 밀리의 서재 프로덕트 디자이너 Sally입니다.
서비스를 개선하는 과정에서 어떤 고민을 하고 왜 그렇게 결정했는지에 대한 이야기를 해볼까 합니다.
목표 설정하기
밀리의 서재는 2월 말에 도서 상세 페이지를 개선하여 배포했습니다. 5만 권의 도서를 보유하고 있는 만큼, 서비스에서 매우 중요한 역할을 하고 있는 페이지입니다. 저희의 개선 목표 첫 번째는 도서 표지 확대, 두 번째는 명확한 정보 전달, 마지막은 UI 및 컬러 통일성 강화였습니다.
확 커진 도서 표지
도서 표지를 시원하게 확대했습니다. 표지는 책의 가장 중요한 정보를 담고 있기 때문입니다. 도서명과 작가, 일러스트나 이미지 등 독자가 책을 선택할 때 가장 큰 영향을 받습니다. 표지에 끌려서 책을 훑어본 경험, 다들 있으시죠? 이러한 이유로 정보를 텍스트보다 이미지 위주로 제공하는 것이 책을 파악하기 쉬울 거라 판단했습니다. 우선 여러 사이즈를 후보군에 두고 프로토타입을 제작하였습니다. 그 후 기기별로 테스트하여 진입 시 표지와 도서 정보를 한 눈에 볼 수 있는 적절한 사이즈를 선택했습니다. 결과적으로 기존의 약 1.6배가량 확대하였으며 중앙 배치를 통해 여백을 확보하여 집중도를 높였습니다.
여기서 가장 큰 골칫거리는 바로 화질입니다. 이미지를 키웠는데 화질이 받쳐주지 않으면 소용이 없죠. 다행히도 너무 오래되어 고화질이 없는 일부 도서 이외에는 모두 화질을 향상하였습니다! 이제 크고 깨끗한 도서 표지를 만날 수 있습니다.
각 도서의 정보를 정리하기
도서 종류 : 전자책/PDF, 오디오북, 챗북, 도슨트북, 만화
도서 상태 : 밀리 오리지널 전용 도서, 커밍순 도서, 미 서비스 도서, 종료 예정 도서, 무료 도서, 성인 도서
밀리의 서재가 서비스하고 있는 도서는 그 종류에 따라 노출되는 정보가 다릅니다. 그렇기 때문에 우선적으로 도서의 종류와 상태, 표기되고 있는 정보를 파악하고 정리하였습니다.
그 후 필수 정보만 남기고 전자책과 관련 없는 종이책 가격, 중복되는 버튼 하단 설명 텍스트 등의 정보는 삭제했습니다. 또한 도서명이 중복되고 있던 액션바의 타이틀은 스크롤 시 노출되도록 변경하였습니다.
저자나 역자, 출판사와 같은 타이틀도 삭제했습니다. 해당 정보가 도서 관련임을 충분히 인지했을 거라 판단했기 때문입니다. 저자, 역자, 옮긴이 등의 정보는 같은 레벨로 분류하여 묶어서 표기하였습니다.
시리즈, 완결, 용량은 만화에서만 표기되는 정보이므로 뱃지 형태로 만들어 표기했습니다. 미 서비스, 서비스 종료 예정 등의 정보는 중요도가 높으므로 별도로 안내사항 영역을 만들어 표기했습니다.
전체적으로 정보를 정리하고 텍스트의 양을 덜어내고 실질적인 정보에 집중할 수 있도록 하였습니다.
이 책을 읽고 있는 사람들
해당 영역은 도서를 서재에 담아서 읽은, 또는 읽는 중인 회원 수를 나타냅니다. 이를 ‘이 책이 담긴 서재 N개’ 에서 ‘N명이 읽고 있는 중’ 으로 변경했습니다. 값을 산출하는 방식은 그대로입니다. 다만 이 책을 선택할 때, 몇 개의 서재에 담겼는지 보다 몇 명의 회원이 읽는지가 더 와 닿지 않을까요?
얼마나 많은 회원들이 이 책을 읽었는지는 알았습니다. 이제 이 회원들이 궁금해집니다. 다른 책은 어떤 걸 읽었는지 혹은 나와 취향이 비슷한 지도요. 이런 궁금증을 위해 해당 영역을 클릭하면 회원 목록이 뜨고 해당 서재로 이동이 가능합니다. 하지만 안타깝게도 클릭이 가능한 부분인걸 인지하기 어렵습니다. 방법을 고민한 결과, 목록을 보여주기로 판단했습니다. 아주 간단합니다. 프로필 사진 일부를 밖으로 꺼냈습니다. 이제 더 많은 회원을 보고 싶다면, 클릭하면 된다는 사실이 명확해졌습니다.
‘내 취향’을 미리 예측
별점이나 한 줄평과 같은 시스템은 책을 선택하는데 많은 도움을 줍니다. 하지만 이 또한 타인의 의견으로, 내가 직접 읽었을 때 느끼는 바와 상이할 수 있습니다. 남들은 그저 그런 평을 남겼어도 나에게는 또 하나의 인생책이 될지도 모르기 때문입니다. 우리는 이런 간극을 최소화할 수 있는 방법을 고민했습니다.
다른 회원에 의한 값은 ‘N명이 읽고 있는 중’ 에서 파악할 수 있습니다. 그렇다면 타인에 의한 결과보다 개인에 의한 결과를 보여주는 건 어떨까요? 우리는 내서재-분석 탭에서 개개인의 독서 패턴을 분석해주고 있습니다. 몇 권을 읽는지, 얼마나 읽는지, 어떤 분야를 읽는지를 말이죠. 이걸 활용하기로 결정했습니다. 회원이 읽은 책을 기반으로 취향 일치율을 표기해주는 겁니다. 이제 내 취향을 기반으로 책을 선택해보는건 어떠신가요?
한 층 더 직관적인 버튼으로 책 읽기
As-is에서는 [종이책 구매]와 [e북 읽기] 버튼이 있었습니다. 여기서 [e북 읽기]를 선택하면 팝업으로 [서재에 등록 후 다음에 열기]와 [등록 후 바로 열기]가 나왔습니다. 기능을 파악하고 열람하기까지 긴 시간을 소요하게 만드는 방식입니다. 그래서 뷰어의 가장 핵심적인 기능인 ‘읽기’에 집중하기로 했습니다. 분기 처리되어 있던 읽기 기능을 밖으로 꺼냈습니다. 버튼명도 더 직관적이게 [찜하기]와 [바로 읽기]로 변경했습니다. 이제 등록하고 나중에 읽고 싶다면 찜을 하고, 이 책이다 싶을 때는 바로 읽으면 됩니다.
또 하나의 개선점은 버튼 하단 고정입니다. 도서 표지가 커진 만큼 밀려난 버튼을 하단에 고정하여 편의성을 증가시켰습니다. 이제 저 밑에 저자 소개를 보고 난 뒤, 다시 스크롤을 올릴 필요가 없습니다. 마음껏 살펴보고 바로 읽으세요.
빠른 대응을 위해 일정을 나누어 진행하였고, 1차로 상단 영역만 변경하였습니다. 가까운 시일 안에 전체적인 개선을 진행할 예정입니다. 이번 배포에 관련된 데이터와 CS를 통해 더 나은 개선이 될 수 있도록 고민하고 노력하겠습니다.
긴 글 읽어주셔서 감사합니다.
