밀리 PC뷰어 디자인 개편기 1편
날 것 그대로의 개편기
안녕하세요, 오늘은 밀리의 서재 프로덕트 디자이너 Jenna입니다.
지난 1월, 드디어 밀리의 서재가 Windows 뿐만 아니라 Mac OS까지 지원하는 PC뷰어Beta를 출시했습니다. 오늘은 그 PC뷰어Beta를 0부터 다시 디자인 했던 과정에 대해서 이야기를 해볼까 합니다. 구구절절이요.
컬러 팔레트 정리
오래 손을 못댔던 화면을 다시 디자인할 때, 가장 우선시하는 것이 있습니다. 바로 컬러입니다. 기존 PC뷰어는 짙은 남색과 어두운 노란색을 조합한 UI로 밀리의 서재 브랜딩을 전달했습니다. 밀리의 서재가 처음 세상에 이름을 알리던 때부터 사용하던 색상입니다. 현 밀리의 서재 서비스에서는 찾기 힘든 색상 조합인데요. 밀리의 서재 브랜드 컬러 팔레트의 변화를 정리하면 다음과 같습니다.
밀리의 서재는 2018년 2.0, 2019년 3.0 업데이트를 진행했습니다. 메인컬러인 옐로우를 millie Yellow로 정의하고, 트렌드에 발 맞추는 동시에 산뜻한 인상을 주기 위하여 밝은 노란색으로 다듬었습니다. 단독으로 사용하기 어려운 millie Yellow를 보조하기 위한 millie Purple, millie Charcoal도 정의했습니다. 사람들이 밀리의 서재와 함께 떠올리는 컬러가 저마다 달랐기 때문에, 사용하는 컬러의 개수를 줄여 브랜드를 정확하게 전달하고자 했습니다.
이런 컬러 시스템 재정의에도 불구하고 PC뷰어에는 기존에 사용하던 컬러가 (유해처럼) 남아있었습니다. 대규모 업데이트는 물론 작은 수정도 쉽지 않았기 때문입니다. 2019년 가을, PC뷰어를 다시 0부터 설계하는 프로젝트를 진행할 때 가장 먼저 개편하고 싶었던 것은 컬러 팔레트였습니다. 사용자가 책을 고르고 활자를 읽기 위해 뷰어에 접속하는 순간까지 일관성있는 컬러 커뮤니케이션을 제공하고 싶었기 때문입니다.
읽고 있는 책 목록 디자인 X 4
못생긴 것도 많이 있어요. 그런 것도 전부 과정의 일부죠.
디자인의 혁신을 다룬 넷플릭스 다큐멘터리 <앱스트랙트:시즌2>에서 인스타그램 리뉴얼을 맡았던 디자이너, 이안 스폴터가 로고 디자인 과정을 회상하며 남긴 말입니다. 저는 이 말이 참 마음에 박혔습니다. 다소 뭉툭하게 디자인되어 전달력이 떨어졌던 결과물에 대해 짚어보고 이야기를 나눠야겠다는 생각이 들었습니다.
읽고 있는 책 목록은 뷰어를 켜는 과정이 끝나면 사용자가 랜딩하는 페이지입니다. 지금까지 4번의 수정을 거쳤습니다. 작은 수정들까지 합하면 열 손가락이 부족하겠지만.
이 페이지를 디자인 하며 고려할 조건은 다음과 같습니다.
로그인 후 가장 첫번째 화면.
도서의 다운로드, 삭제가 가능한 페이지.
내장된 웹 브라우저를 호출하는 페이지.
PC뷰어Beta 에서는 아직 지원하지 않는 도서 컨텐츠가 노출됨.
첫번째 시안.
사용자가 로그인 후 만나는 첫번째 화면. 저는 이곳이 개인의 공간이라고 생각했습니다. 마치 서재처럼요. 강조된 프로필 사진이 있고 이 사진을 누르면 '내서재 바로가기', '로그아웃'의 메뉴가 뜹니다. 표지와 책 제목, 저자이름, 책을 읽은 진도율, 다운로드 여부를 표시하는 아이콘 등 화면을 복잡하게 만들 수 밖에 없는 요소들이 가득 모인 이 화면을 다루기 위해 생략 가능한 요소들을 배제하고자 했습니다. 화면을 구분 짓는 선, 면 요소들은 물론 텍스트 레이블까지 과감하게 생략했습니다. 모바일앱과는 달리 PC뷰어는 마우스로 조작하기 때문에 Hover 상태일 때, UI에 변화를 줄 수 있다는 점을 이용했습니다.
그러나 내부 테스트 결과, 텍스트 레이블이 없는 UI 사용이 익숙하지 않은 사용자도 있음을 인지하였고 (흑흑) 수정을 고려할 수 밖에 없었습니다. 또한 도서가 5권 미만일 경우, 화면이 필요 이상으로 비어보인다는 의견, 읽고 있는 책이라는 페이지 타이틀 앞에 있는 돋보기 아이콘이 검색 결과처럼 느껴진다는 의견을 수용하였습니다.
그리하여.
두번째 시안.
도서의 크기를 키우고 도서가 노출되는 영역과 그 외의 영역을 구분지어 공간감을 부여했습니다. 또한 테스트 중 일부 사용자들에게 인지가 떨어졌던 버튼 요소들의 디자인을 보강했습니다.
전환하며 서로 단절된 느낌을 주는 읽고 있는 책 목록/홈 브라우저 상단 UI그러나 하나의 버튼으로 읽고있는 책 목록과 홈 브라우저를 스위치하는 UX는 생각보다 부자연스러웠습니다. 홈 브라우저를 사용하다가 읽고 있는 책 목록으로 돌아오면 해당 아이콘과 화면이 완전히 사라집니다. 마치 종료된다는 것처럼. 하지만 다시 홈 브라우저를 켜면 탐색하던 페이지가 그대로 남아 있었습니다. 화면은 각 단계의 단절을 암시하는데, 개발된 플로우에는 단절이 없다니. 그 괴리에서 부자연스러움이 느껴졌습니다.
또한 아이콘을 인식하기 어렵다는 의견도 있었습니다. 볼드 효과와 커다란 크기로 강조된 제목 상단에 위치하고 있어 시선이 가장 먼저 도달하지 않는 데다가, 작업표시줄과 너무 가까이 붙어 있었기 때문이었는지도 모릅니다.
그리하여.
세번째 시안.
요즘 PC앱들에서 자주 보이는 사이드 메뉴 형태를 도입했습니다.
사실 이 시안은 개발자 Ray님이 임의로 잡아준 뼈대에 스타일만 얹은 것인데요. 홈 브라우저로 진입하거나 읽고 있는 책 목록에 있어도, 항상 왼쪽에 메뉴가 고정되어 있기 때문에 단절되었다는 느낌을 주지 않고 각 페이지간 전환이 쉽고 간편하게 느껴졌습니다. 하지만 디테일한 디자인은 다듬지 못한 채 세번째 시안으로 Beta버전을 릴리즈 했습니다.
이 과정에서 내부 관계자들뿐 아니라, 회원들의 생생한 피드백을 받았습니다. 피드백을 정리하고, 직접 사용해보며 디자인 개선에 대한 의지를 불태웠습니다.
마침내.
네번째 시안.
네, 글을 업로드하고 있는 2020년 5월 말에 업데이트 된 화면입니다.3번째 버전의 디테일들을 보완/개선한 화면입니다. 복잡함을 줄이기 위해 숨기려고 애썼던 읽은 진도율 그래프 등의 요소들을 과감하게 분리하여 크-게 한자리 내어줬습니다. 개별 요소의 시인성과 전체 레이아웃의 복잡성 사이에서 시인성을 높이는 쪽을 택했습니다.
설정 영역또, 설정이 시각적으로 큰 비중을 차지하지 않아도 되며, 프로필 사진이 노출되는 것이 뷰어에서는 큰 의미가 없다는 것도 관찰할 수 있었습니다. 그래서 네번째 결과물에서는 설정 페이지의 비중을 다소 적게 느껴지도록 디자인하여 해당 페이지의 존재감을 덜어냈습니다. 프로필 사진은 삭제하고 로그아웃은 뷰어 설정에 포함시켰습니다.
브라우저를 킨 모습, 홈으로 접속시 왼쪽 사이드 메뉴의 배경이 더해져 브라우저로 전환되었음을 전달하고자 하였습니다.네번째 시안에서 왼쪽 메뉴 배열을 상/하단 반복적으로 배치한 것을 알아채셨나요?
뷰어를 본격적으로 사용하기 전에는 읽고 있는 책 목록 아이콘과 홈 아이콘이 서로 가까이 있어야하고, 뷰어 설정 아이콘은 별개의 것이라고 생각했습니다. 그러나 설정 아이콘을 눌러 들어간 페이지에서 조작할 수 있는 항목들은 대부분 뷰어, 읽고있는 책 목록에 해당하고 홈 브라우저에 관한 것은 전혀 없습니다. 그래서 떨어트려놓은 설정 아이콘을 읽고 있는 책 목록의 하위메뉴인 것 처럼 보이게 배치했습니다.
읽고 있는 책 목록 하단에는 뷰어 설정이 있고, 홈 하단에는 홈이 아닌 검색, 피드, 내서재, 관리 아이콘들을 작게 놓았습니다. 그동안은 검색 페이지로 가고 싶었다면 홈 아이콘을 누른 뒤, 브라우저에 노출된 GNB에서 검색을 눌러야했습니다. 네번째 디자인에서는 사용자가 원하는 페이지로 빠르게 이동할 수 있습니다. 다만 이 아이콘들은 홈 아이콘 보다 작게 디자인 했습니다. 읽고 있는 책 목록의 하위에 설정이 있다면, 홈(브라우저)의 하위에 검색, 피드, 내서재, 관리가 있다는 맥락으로 사용자가 사이트맵을 파악하길 의도한 디자인입니다.
다음에 할 얘기
컬러 팔레트, 목록에 관해서만 회고했는데, 벌써 글이 이렇게 길어졌습니다. 구구절절한 개편기를 여기까지 읽어주셔서 감사합니다. 하지만 아직 할 얘기가 한 편 더 남아있네요. 다음에는 목록의 다음, 책 안쪽에 해당하는 뷰어 내부로 들어가 이야기 나눠보도록 하겠습니다.
한 방에 최고의 결과물이 나왔음을 이야기할 수 있다면 "제가 이렇게 천재입니다."라며 당당할 수 있겠습니다. 하지만 그렇기에 이렇게 몇 번의 디자인을 거치는 과정을 공개하는 것은 쑥스럽습니다. 인터페이스가 혼자만의 판단으로 절대 다수를 이해시킬 수 있을까, 하는 의문을 이 디자인 과정에 대한 변호로 달아둡니다.
날 것에 가까운 경험을 나누는 것은 제가 겪은 과정들에서 이 글을 보고 계신 디자이너 분들 혹은 관계자 여러분의 인사이트가 발생할 수 있다는 것을 믿기 때문입니다.
긴 글 읽어주셔서 감사합니다.
개편기 2편에서 만나요!
