새로워진 밀리의 서재 투데이, NOW!
밀리 4.0 개편 이야기
안녕하세요. 밀리의 서재 프로덕트 디자이너 Sally입니다.
8월 4일에 밀리 4.0 업데이트가 있었습니다. 바뀐 화면은 잘 적응하셨나요?
오늘은 머리부터 발끝까지 탈바꿈한 ‘홈’, 이제는 ‘투데이’로 불리는 화면에 대해서 이야기할까 합니다.
저에게 독서는 하면 좋다는 걸 알지만, 막상 실천하기는 어려운 숙제같이 느껴집니다. 몇 시간 동안 글을 읽는다는 게 부담으로 다가올 수 있기 때문이죠. 아마 저뿐만 아니라 많은 분들이 그렇게 느낄 겁니다.
밀리는 이런 독서에 대한 부담감을 덜어주고자 했습니다. '책을 읽지 않아도, 밀리에 들어오는 것만으로도 독서'라는 방향을 설정하고 책에 대한 진입장벽을 낮출 수 있는 콘텐츠를 기획하여 4.0 업데이트를 진행하였습니다.
새로워진 투데이, NOW.
밀리에 진입하면 제일 먼저 마주하는 화면은 홈이었습니다. 이 홈에 포함되는 탭은 투데이, 독서당, 스토리, 북클럽 총 4개로 구성되어 있었고요. 우리는 4.0 업데이트 성격에 맞추어 해당 영역의 명칭을 바꾸는 작업을 진행했습니다. 우선 홈이라는 탭 명칭을 투데이로 변경하였습니다. 책, 큐레이션, 이벤트 등의 콘텐츠가 주로 하루를 기준으로 리프레시되기 때문에 더 직관적으로 표현하고자 하였습니다.
홈이 투데이로 변경되면서 기존의 투데이 탭은 NOW로 명칭을 변경했습니다. 기능을 파악하기 어려웠던 독서당은 더 명확한 오디오북・챗북으로 변경했습니다. 북클럽은 역할이 모호했던 탓에 일부 내용을 NOW 속 콘텐츠에 녹여내면서 탭을 제거하였습니다.
로고가 포함된 헤더와 탭, 배너 영역의 구분이 뚜렷하여 단절되어 보이던 화면에 그라디언트 배경을 이용하여 연결성을 부여했습니다. 기존에는 이벤트 모아보기에 진입해야만 찾을 수 있었던 알림과 사용자들이 자주 찾는 검색 기능을 우측 상단에 배치하여 빠르게 진입할 수 있도록 했습니다.
여기서 가장 큰 변화점은 배너입니다. 통 이미지의 배너를 탈피하고 배경과 텍스트, 이미지를 모두 분리하여 반응형으로 퍼블리싱했습니다. 운영은 어드민에서 이미지를 등록하면서 텍스트를 입력하는 방식으로 변경하였습니다. 이로써 모바일, 태블릿, 데스크톱 사이즈로 배너를 베리에이션 하거나 문구 변경을 위해 수정을 하는 디자인 공수가 많이 줄어들게 되었습니다. 또한 종종 동일한 배너이지만 어떤 문구가 회원들에게 후킹 되는지 테스트할 때 디자이너에게 시안을 여러 개 요청하는 데, 이제 그 절차도 사라지게 되었습니다.
오늘의 책
기존 오늘의 책은 전자책, 오디오북, 챗북 각 1권씩 총 3권을 업데이트하고 있었습니다. 타입별로 책을 추천해 줄 수 있다는 장점도 있었지만, 아무래도 관심이 분산될 수밖에 없었습니다. 그래서 타입에 관계없이 1일 1권 업데이트로 변경하여 집중도를 높였습니다. 그리고 추천사는 그대로 가져가되 다양한 에디터가 직접 추천해주고 있다는 점을 보여주기 위해 프로필 UI를 추가하였습니다. 또한 오늘의 책으로 선정된 타당성을 보여주는 추천 이유가 추가되었는데, 추천사와의 역할을 구분하기 위해 텍스트를 간략하게 제공하고 읽기 전 살펴봐야 하는 체크리스트처럼 표현했습니다.
오픈 전 7/7~7/26과 오픈 후 8/4~8/23 각 3주간의 PV를 비교해본 결과, 약 105% 증가율을 보였습니다. 중복을 제거한 순 클릭은 약 84% 증가했습니다. 그렇다면 이 수치가 실제 독서까지 이어졌을까요? 2020년 1월~7월 동안 오늘의 책이 내 서재에 담긴 횟수는 일 평균 480.5회였습니다. 오픈 후 8월은 647회, 9월은 739회, 10월은 779회로 업데이트 이후 확실히 증가했음을 알 수 있습니다. 관심이 증가되면서 실제 독서로 이어진 횟수도 늘게 된 셈입니다.
오늘의 TMI
오늘의 TMI는 독서의 진입 장벽을 낮추려는 시도에서 출발했습니다. 그래서 회원이 부담감을 느끼지 않도록 복잡함을 덜어내고 일러스트를 활용한 심플한 UI로 구성했습니다. 주로 책에서 발췌한 내용을 짧고 강렬하게 제공하여 회원의 흥미를 유발하고 있습니다. 또한 클릭 시 내용을 발췌한 책으로 연결시켜주어 자연스럽게 실제 독서로 이어지게 하였습니다. 만약 쓱 보고 넘어가더라도 괜찮습니다. 그 또한 책의 일부를 읽은 가벼운 독서 행위이기 때문에 저희가 의도에 충분히 부합한다고 볼 수 있습니다.
오늘의 토픽
오늘의 토픽은 시의성 있고 재미있는 토픽을 아티클 형태로 제공하는 영역으로 맥락 있는 도서 추천과 더불어 서비스 체류 시간 증가를 목표로 삼아 제작을 시작했습니다.
목표를 달성하려면 주제 선정이 중요하지만 그만큼 시선을 끌만한 UI가 필요했습니다. 이에 이미지를 과감하게 배치하고 텍스트를 박스 안에 두는 등 대비를 통해 집중도를 높였습니다. 타이틀에 무게를 두어 주제를 파악하기 쉽게 하였고 내용을 일부분만 노출하여 읽다가 자연스럽게 페이지로 진입할 수 있게 구성했습니다.
여기서 재미있는 이야기를 하나 하자면, 오픈 이후 경제&경영 분야가 꾸준히 관심받고 있다는 사실입니다. 돈 모으기나 주식 관련 토픽의 PV가 높은 편으로 회원들이 관심과 성향을 파악해볼 수 있는 결과입니다.
이럴 땐 이런 책
투데이는 큐레이션이 주를 이루고 있습니다. 이 방식은 주제에 맞는 책을 선정하여 질 높은 추천을 해준다는 장점을 가졌지만 단방향으로 사용자에게 책을 추천한다고 느껴지는 단점이 있습니다. 우리는 이 점을 극복하기 위해 다른 형태의 콘텐츠를 제공하고자 했습니다. 그 결과, 회원 간의 소통을 통해 책 추천을 주고받는 이럴 땐 이런 책을 제작하게 되었습니다. 이럴 땐 이런 책은 자신의 사연을 업로드하면 회원들이 그에 맞는 책을 추천해주는 방식인 참여형 콘텐츠입니다.
NOW에 노출되는 게시글들은 최대한 효율적으로 보여주기 위해 카드 UI를 사용했습니다. 각 카드는 게시글 제목과 내용, 추천 책, 추천한 회원, 추천하기로 구성하였습니다. 제목과 내용을 최상단에 두고 추천 책 표지를 비중 있게 잡았습니다. 슬라이드가 되는 카드 안에 최대한 많은 책 표지를 보여줄 수 있게 타일 형태로 배치했는데, 이때 동일한 크기로 8권을 두면 반복되는 지루함과 복잡도가 높아질 것을 우려하여 가장 최근 추천 책 표지의 크기를 확대하여 구성했습니다.
이럴 때 이런 책은 현재 게시글이 1700건 이상 누적되었고 일 평균 18건이 업로드되고 있습니다. 월평균 유니크 회원 396명이 게시글을, 1011명이 답글을 업로드해주었습니다. 예상보다 높은 참여도와 뜨거운 반응을 보이고 있어 더 나은 사용성을 위해 저희는 지금 2차 개선을 진행하고 있습니다. 회원이 찾는 주제에 잘 도달할 수 있도록 필터 기능을 강화하고 소외되는 게시글이 없도록 책 추천을 유도하는 기능을 추가할 예정이니 기대해주셔도 좋습니다.
오늘의 첫 문장
‘한 문장으로 독서하기’라는 제목으로 브런치를 작성한 적이 있습니다. 바로 홈 커버에 관한 내용인데요. 당시 글을 마무리하며 ‘다시 보고 싶다’, ‘모아서 보고 싶다’는 문의가 있다고 언급했었습니다. 이번 업데이트를 통해 드디어 그 문의를 반영할 수 있게 되었습니다!
NOW에 오늘의 첫 문장이라는 영역을 개설하여 지난 4월부터 업로드되었던 모든 홈 커버를 모아볼 수 있도록 하였습니다. 더 이상 일회성 콘텐츠가 아니게 되었습니다. 이제 홈 커버를 놓쳤거나, 다시 되새겨보고 싶을 땐 오늘의 첫 문장을 방문하면 되며 월별로 필터링하여 찾아볼 수 있습니다.
그 외 개편 사항
이번 업데이트 과정에서 책 표지를 어떻게 하면 더 효율적으로 보여줄 수 있을까 고민했습니다. 기존에는 1:1.4 비율의 프레임에 책 표지를 맞추어 보여주는 방식을 사용하고 있었습니다. 이는 크기가 제각각인 책이 일정하게 정리되어 보인다는 장점이 있지만 표지 일부가 잘려서 나오는 현상도 많았습니다. 우리는 일정한 레이아웃보다 책 표지가 잘림 없이 보이는 것이 더 중요하다고 판단하였고 책 고유의 비율을 살리기로 결정했습니다. 또한 책 표지 하단을 기준으로 정렬하여 각기 다른 사이즈의 책이 책장에 꽂혀있는 것처럼 표현하였습니다. 여기서 표지가 과하게 차이나는 상황을 대처하기 위해 넓이에 따라 S, M, L 사이즈를 정하고 사이즈별로 최소 높이와 최대 높이를 제한하는 구조를 설계했습니다. 해당 정책은 반영되기 힘든 일부 레이아웃을 제외하고 대부분의 케이스에 적용되었습니다.
작가 이미지는 세대에 따라 오래되어 흑백사진만 있는 경우가 존재합니다. 간혹 얼굴 노출을 꺼려하려 이미지 퀄리티가 떨어지는 경우도 있죠. 하지만 일부 작가의 경우 프로필 사진을 별도로 촬영하여 제공해줍니다. 즉, 이미지 퀄리티가 천차만별이라는 뜻이죠. 이 엄청난 이미지 퀄리티의 갭을 초소화하기 위해 듀오톤을 활용하여 이미지를 가공했습니다.
커밍순의 경우, 책 표지를 많이 가려서 정보를 파악하기 힘들다는 문의가 있었습니다. 책 제목과 작가 이름이 표기되기 때문에 표지를 가려도 된다는 판단의 오류인 셈입니다. 이를 인정하고 UI를 개선하기로 했습니다. 우선 표지 사이즈를 25% 키우고 인식을 어렵게 만들었던 블러와 딤 처리를 제거하였습니다. D-Day를 표기하는 달력 UI의 사이즈를 최소화하였고 표지와의 구분을 위해 그림자 효과를 추가했습니다.
밀리의 서재는 앱 기반 서비스이기에 데스크톱 대응에 적극적이지 못했습니다. 하지만 최근 밀리 PC뷰어를 업데이트하면서 데스크톱 환경에서 밀리를 사용하는 회원이 늘어났습니다. 우리는 해당 회원들에게도 좋은 경험을 제공하기 위해 해상도 1280px까지 화면을 대응하고 GNB를 상단으로 배치하는 등 레이아웃 변경을 통해 데스크톱의 사용성을 증대시켰습니다.
하나하나 살펴본 투데이, 어떤가요?
오픈 전 7월과 오픈 후 8월의 데이터를 살펴본 결과 방문 수 5.4%, 평균 체류 시간이 9%가량 증가하였습니다. 이외에도 업데이트 후 모든 항목에서 증가된 결과를 보였습니다! (박수)
이 결과가 일시적인 수치가 되지 않도록 지속적인 모니터링과 개선을 진행할 예정입니다.
이제 새로워진 밀리에서 독서를 부담 없이 가볍게 시작할 수 있습니다.
감사합니다.
