감성과 편의를 잇는 리디페이퍼 4 UX/UI 개선기
UX/UI에서도 이어지는 ‘슈퍼 노멀(Super normal)’
Summary 뭔가 설명하기 어려운데 묘하게 편하고 끌리는 감정을 느껴 보신 적이 있나요?
리디페이퍼 4는 단순히 아름다움만을 추구하는 것이 아닌, 편안하면서도 기억에 남을 수 있는 일상적인 디자인에 주력합니다. 이 컨셉을 UI에도 어떻게 반영했는지, 사용성을 높이면서 군더더기를 덜어내기 위해 어떤 노력을 기울였는지 리디 프로덕트 디자인팀의 리디페이퍼 4 UX/UI 개선기를 소개합니다.
군더더기를 덜어내다
2015년에 처음 출시된 리디페이퍼 1세대 이후, 2019년 3세대까지 리디페이퍼의 기기 디자인은 조금씩 변화했지만 UX/UI는 주로 유지 보수 중심으로 운영되어 큰 변화가 없었다.
다시 한번 독서에 몰입할 수 있는 최고의 환경을 만들고자 하는 열망과 리디의 브랜드 리뉴얼 적용 시점이 맞물리면서 새로운 이미지로 출시되는 리디페이퍼 4세대에서만큼은 전반적인 UX/UI 개선이 함께 이루어지는 것이 좋겠다는 회사의 결정이 내려졌다.
'손에 쥐었을 때 독서만 남는 제품을 디자인한다'라는 컨셉(리디페이퍼4 리뉴얼 글 참고)을 유지하여 UX/UI에서도 몰입을 방해하는 요소를 제거하고, 기존의 무겁고 올드한 디자인에서 군더더기를 덜어내는 것으로 큰 방향성을 정했다.
3세대와 비교하여 4세대에서 UX/UI의 어떤 부분이 개선되었고, 그 과정에서 어떤 고민들이 있었는지 프로덕트 디자이너의 시선으로 리디페이퍼 4 개선 과정을 소개해 보고자 한다.
비슷한 듯 다른 E Ink 환경
프로덕트 디자이너는 UX/UI 디자인을 진행하기 전에 제품의 특성과 환경을 파악하고 이해하는 것이 중요하다. 업무를 시작한 초기에는 페이퍼 외에도 다양한 전자책 디바이스를 사용해 보며 E Ink(전자잉크) 특성을 이해하는 데에 적지 않은 시간을 투자했다. 이는 그림을 그리기 전에 도화지의 질감과 특성을 파악하고, 그에 맞는 물감과 도구를 선택하는 것과 같은 맥락이다.
E Ink 디바이스는 언뜻 태블릿과 비슷해 보이지만, 그와 다른 독자적인 특성을 가지고 있다.
흑백 표현, 느린 반응 속도, 페이지 넘김 시 필수적으로 발생하는 잔상 등이 바로 그것들이었는데 이는 페이퍼 UI를 디자인할 때 중요하게 고려해야 하는 특징들이었다. 따라서 사용자가 기기와의 인터렉션을 최대한 덜 할 수 있도록 만드는 데 집중했다. UX/UI를 직관적으로 개선해 사용자의 동작을 최소화할 수 있도록 만드는 것이 이번 프로젝트의 키포인트라고 생각했기 때문이다.
UI에서도 이어지는 ‘Super normal’
일러스트 & 아이콘
리디페이퍼 4의 컨셉은 '슈퍼 노멀(Super normal)'이다. 이는 군더더기를 최소화한 '미니멀한 디자인'을 의미하는데, 리디페이퍼 4의 일러스트와 아이콘은 철저히 이 컨셉을 따랐다. 특히 잔상이 남는 E Ink 특성상 형태가 복잡할수록 잔상의 간섭이 커져 사용성을 해칠 수 있기 때문에 더욱더 직관적이고 심플한 형태가 필요했다.
그러나 기존 일러스트로는 이 문제를 해결하기 어려웠다.
형태가 복잡한 것은 둘째 치고, 리디가 추구하는 '재미있는 컨텐츠'보다 '학습지의 삽화'를 떠올리게 했기 때문이다. 물론 이 일러스트도 나름의 이유를 가지고 만들어진 거겠지만, 새로 리뉴얼되는 리디페이퍼 4에 그대로 적용하기는 어렵겠다는 생각이 들었다.
아이콘도 상황은 비슷했다.
기존 아이콘들은 라인 두께, 라운드값, 부피감 등이 미세하게 달라 전체적으로 일관성이 떨어지고, 간혹 디테일이 과해서 복잡해 보이는 아이콘도 몇몇 보였다. 이러한 아쉬움을 보완하기 위해 먼저 라인의 두께를 줄여 투박함을 털어내고, 불필요한 요소를 하나씩 덜어내 직관성을 높이면서 조형적으로 안정감을 주는 형태를 찾아 나갔다.
다이얼로그
다이얼로그도 불필요한 요소를 제거하고, 전반적으로 텍스트 사이즈와 여백 등의 밸런스를 조정하는 과정을 거쳤다. 텍스트 앞에 붙어 있던 아이콘을 제거하고, 토글 또한 널리 통용되고 있는 기본 스타일로 변경했다.
또, 화면을 복잡하게 만드는 데 일조하는 보조 텍스트 중 불필요한 것은 삭제하고, 필요한 정보가 한눈에 잘 들어오도록 '상태값' 정보만 오른쪽으로 옮겨 정보의 위계를 분리했다.
내 서재
상태바
최상단 상태바에도 변화가 있었다. 홈 버튼과 뒤로 가기 버튼을 추가한 것이다.
E Ink 디바이스는 그 특성상 페이지를 이동할 때마다 딜레이가 생긴다. 만약 어떤 사용자가 뒤로 가기를 눌러 내 서재로 돌아가고자 한다면, 해당 사용자는 필연적으로 여러 번의 딜레이를 겪어야만 한다는 뜻이다.
별것 아닌 것처럼 들릴지 모르지만, 아무리 사소한 불편이라도 누적되는 순간 사용자의 피로도를 높이는 주범이 된다.
이 문제를 해결하기 위하여 홈 버튼을 추가하는 것에 대한 아이디어가 나왔다. 홈 버튼을 추가하면 사용자가 여러 페이지를 넘나들더라도 홈으로 쉽게 돌아가 유저 동선을 줄일 수 있으리라고 생각했기 때문이었다.
책 리스트
책 표지의 좌우 그라데이션을 제거해 플랫한 디자인으로 변경했다. 그 덕에 무겁고 올드한 느낌을 덜어낼 수 있었지만, 기존보다 책의 감성이 줄어드는 부분이 아쉬워 우측의 상하 코너를 라운드 처리해 아날로그적인 감성을 남겼다. 또한 기존에는 내 서재 첫 화면에서 독서 진행률을 확인할 수 없어 상세 페이지를 들어가서 확인해야 했는데, 책 표지 아랫부분에 진행률 정보를 추가해 페이지를 이동할 필요성을 없앴다.
내비게이션바 & 최근 본 작품바
상단 내비게이션바에서는 '더보기'로 묶여 있던 기능을 밖으로 꺼내 접근성을 높이고, 다소 모호했던 편집 아이콘도 텍스트로 변경해 직관성을 높였다. 또, 최근 본 작품 바의 감상률 정보(%)를 추가하고, 전체적으로 밸런스를 조정해 한눈에 정보가 잘 보이도록 만들었다.
뷰어
뷰어 툴바
개별 페이지로 나뉘어 있던 보기 설정과 뷰어 설정을 한 페이지로 통합했다. 번거롭게 여러 페이지를 확인할 필요 없이, 한 곳에서 모든 설정을 마칠 수 있게 만들었다. 또, 아이콘 옆에 있던 보조 텍스트를 삭제하고, 툴바를 2단에서 1단으로 줄임으로써 사용자가 한눈에 볼 수 있는 컨텐츠 양을 늘렸다.
TTS
상하로 분산되어 있던 TTS 기능은 아래로 모았다. 타이머를 비롯한 여러 TTS 관련 기능을 한 곳에서 모두 설정할 수 있게 만들고자 했다.
형광펜 & 독서 노트
뷰어에서 텍스트를 길게 누르면 문장에 형광펜을 치거나 밑줄을 그을 수 있다. 여기에 메모를 추가하면 텍스트 우하단에 쪽지 모양의 아이콘이 생긴다. 이는 '추가된 메시지가 있다'는 의미를 직접적으로 전달할 수 있는 좋은 형태지만, 형태 자체가 가진 복잡도가 큰 게 문제였다. 부피가 커 아랫줄의 텍스트를 가리는 것도 좋지 않아 보였다. 이 부분을 어떻게 개선할 수 있을지 고민하다, 작은 삼각형만으로도 메모가 있다는 사실을 충분히 인지할 수 있을 것이라는 생각이 들어 기존에 비해 매우 단순한 형태로 변경했다.
새롭게 추가된 두 가지 기능 : 댓글&리뷰, 독서노트
리디페이퍼 4는 위에 열거한 여러 개선 사항 외에도 두 가지의 신규 기능이 포함되어 있다.
먼저 댓글과 리뷰 기능이다. 이전에는 보고 있는 작품에 대한 다른 사용자들의 반응을 확인할 수 없어, 작품이 아무리 재미있어도 혼자만의 감상으로 그쳐야 했는데 리디페이퍼 4에서는 댓글과 리뷰 기능을 통해 조금 더 풍성한 시각으로 작품을 즐길 수 있게 되었다.
다음은 독서노트다. 독서노트가 추가됨으로써 사용자는 각각의 작품에 흩어져 있던 밑줄과 메모를 한곳에서 모아보고, 쉽게 찾을 수 있게 되었다.
오래 보아도 자연스럽고 편안할 수 있도록
무엇이든지 더하는 것은 쉽지만, 빼는 것은 어렵다.
'있으면 좋을 것 같은' 기능을 하나둘 더하다 보면 처음에 제공하려던 가치는 어느새 희미해져 버리게 된다. 그리고 뒤늦게 있던 기능을 빼려고 할 때는, 더할 때보다 더 큰 장애물을 넘어야 한다.
제품은 단순히 미(美)를 위해 존재해서는 안 된다. 제품의 아름다움은 편리하고 단순한 기능 위에서 비로소 빛을 발하는 법이다.
누군가에게 리디페이퍼 4가 어떠냐고 물었을 때, '너무 좋다'라는 말이 돌아오지 않아도 괜찮다.
가끔 생각날 때 준비 없이 들러도 괜찮은, 지금 이대로도 충분한. 리디페이퍼 4가 사용자들에게 그런 의미가 되기를 바래본다.
리디페이퍼 4의 글 더보기
리디 프로덕트디자인팀의 글 더보기
© RIDI Corporation
Projected by RIDI Product Design Team
Drafted by Jungwon Baek | RIDI Product Design Team
Designed by Jungwon Baek | RIDI Product Design Team
Edited by Hee Jung, Eunbi Han | RIDI Product Design Team
Cover Designed by Jungwon Baek | RIDI Product Design Team
Published by RIDI Design Center
