본문 바로가기

UXUI 기타/Reference Study

라이프스타일 독서플랫폼 앱 - 북모리/리더스 서비스 비교

[레퍼런스 분석하는 방법]
1. 화면 구조 분석 : 사람마다 다른 기준, 파운데이션-앨리먼트-모듈-페이지
2. 디자인 원칙 기반 분석 : 사용성, 심미성, 다양한 관점, 좋음/나쁨 둘다 → 논리적인 근거
3. 인사이트 정하기 : 제품에 참고하고 적용할 것을 그룹화, 아쉬운점/나쁜점의 개선점도 찾아보기


#화면 구조 분석

(좌) 피그마 작성; 페이지 / (우) 피그잼 작성; 정보구조도

우선, 화면 구조 분석을 위해 직접 두 앱을 깔고 화면 캡처를 진행했다. 이미지를 가져와서 피그마에 화면 배열을 하여 나누어 보았다. 그 후, 간단한 정보구조도를 파악하기 위해 피그잼을 활용하여 진행했다. 간단한 정보구조도를 통해 한눈에 앱의 맵을 파악 할 수 있었다. 
한 눈에 보아도 두 앱의 차이점이 보이는데, 바로 메뉴의 단순화와 리소스 낭비가 있는지 없는지 파악할 수 있다.

첫번째 북모리의 경우에는,
튜토리얼 페이지 4장이 나온다. 이 앱에서 강조하고자 하는 내용이므로 자세하게 살펴보았다. (1)기록 하는 기능, (2)기록을 언제든지 꺼내서 볼수 있음, (3)공유가능(타sns에 게시글로 올릴 수 있음), (4)이용자가 만족감을 느낄 수 있음.
특이점은, 이용자 만의 기록하는 노트를 꾸밀 수 있다.(배경색,포인트컬러,폰트가 굉장히 많음-유료포함), 북모리앱의 인스타링크가 있다. 그곳에서는 북모리 앱의 업데이트 안내와 앱 관리자의 책 한 권 완독 축하 게시글이 올라온다. 또, 카카오톡으로 문의하기, 이메일로 사용문의하기 링크가 있다. 마지막으로, 시간 관리 및 체크가 용이하게 되어있다. 그래프로 표시하여 자세하고 꼼꼼하게 보여준다.
하단 네비게이션바에 홈-노트-서재-마이페이지 메뉴가 있다. 홈화면 페이지에 메뉴들이 대체로 몰아 있는 상황이다. 그 곳에서 긴 스크롤을 내려가면서 클릭 시 새페이지로 들어가는 구조였다. 한 눈에 앱을 파악하기에 어려운 구조였다. 애니메이션과 그래픽이미지도 너무 많아서 리소스가 낭비되는 느낌이 들었다.
유료 서비스로는 프리미엄제를 운영한다. (1)광고 제거, (2)무제한 텍스트 추출(광고 노출 없이), (3)일간 통계, (4)폭 넓은 통계 이용 가능, (5)유료 테마 이용이다. 가격은 3900/월, 35000/년 이다. 커피 한잔의 가격으로 나만의 서재를 관리 할 수 있다는 멘트.

두번째 리더스의 경우, 
튜토리얼 페이지 5장이 진행된다. (1)모든 사람이 가지는 서채, (2)가장 쉬운 책정리(손쉬운 정리), (3)쉬운 기록(간편하게 기록하는 기능), (4)같은 책, 다른 생각(다른 이용자의 생각도 공유 가능), (5)매일 생각을 쌓는 sns(블로그 형식으로 게시 가능, 팔로우/팔로잉 기능이 있어서 다른 이용자와의 유대가 가능) 이다.
특이점은, 홈 화면 상단 버튼에 지도로 근처 도서관 찾기(도서관에 내가 고른 책이 있는지 조회 가능), 베스트셀러(다수가 선택한 책 리스트), 전화번호로 친구찾기(전화번호를 입력하면 팔로우 가능)의 유용한 기능이 있다. 그 밑에 캐러셀에서는 앱의 업데이트 변화를 한 눈에 볼 수 있게 잘 정리가 되어 있다. 어떤 기능이 추가 되었고, 이용하기 편해 졌는지 등 앱의 발전을 볼 수 있다. 앱의 가장 눈에 띄는 점은 추천기능이다. 책, 유저, 스토리에서 자동 추천 기능이 포함되어 있어서 이용자 입장에서 사용하기 편리하다.
하단 네비게이션바에 메뉴가 홈-검색-스크랩-피드-내서재 로 다섯개 이다.  화면에서 낭비되는 리소스 없이 카드나 캐러셀 등으로 깔끔하게 구성한다. 한 눈에 구조를 파악하기 좋고, 필요한 기능이 알맞게 들어가 있는 느낌이다.
유로 서비스로는 북클럽 개설이 있다. 이 기능은 책을 완독하기 위한 디파짓을 걸고, 완독 후, 90%를 환급받는 형식이다. 완독률이 7%에 그쳤던 것이, 환급 서비스를 통해 90%나 상승했다고 한다.(출처)
#디자인 원칙 기반 분석
북모리
 ① 밋밋한 색상의 카드가 위계없이 나열되어 있고, 스크롤이 너무 길다. 모든 섹션에 같은 위계의 플레쉬 모션 그래픽이 들어가 있다. 
  → UX 비주얼 디자인 원칙 중 시각적 위계에 근거하여, 중요한 카테고리나 내용을 색상의 변화와 간격의 변화를 주어서 시선의 흐름을 만들었으면 좋았을 것 같다. 
 ② 홈 화면에 너무 많은 섹션이 몰아있다. 이는 한 눈에 내용을 파악하는데에 어려움을 준다.
  → UX/UI 심리학 법칙중 힉의 법칙에 근거하여, 한 화면에서 처리 할 양을 쪼개서 다음 화면으로 넘어가게 하는 방법 등을 차용할 수 있다. 비슷한 섹션을 모아 메뉴를 좀 더 세부적으로 나누어 네비게이션바를 보다 효과적으로 사용한다. 

리더스
 ① 리더스는 블랙모드, 화이트모드 두 가지를 제공한다. 블랙모드일 때, 회색 조의 텍스트가 가독성이 조금 떨어진다.
큰 문제는 화이트모드 일 때, 시각적 위계가 맞지 않는다. 최근 활동 팔로잉 섹션과 최근 활동 유저 섹션의 배경이 블랙으로 강조 되어있다. 큰 부분을 차지하며 시선이 집중 된다. 그런데 그 내용이 큰 대비를 활용 할 정도로 중요한 내용인지 다시 한번 검토해 봐야 한다. 또한, 배경색이 어두운데 텍스트 마저 어두운 회색조이므로 가독성에 문제가 있다. (배경이 흰색이라서 더욱 눈에 띄지 않음)
 → UX 비주얼 디자인 원칙 중 시각적 위계를 근거하여, 중요한 부분의 색상을 대비시켜서 시선의 흐름을 보기 편안하게 한다. 그런데, 이부분에서 시선의 흐름이 깨진다. 
 ② 홈 화면 섹션 중 '최근 활동 팔로잉'과 '최근 활동 유저'의 성격이 비슷한데, 섹션이 구별되어 있다. 
 → 게슈탈트 심리학 중 유사성의 원리에 근거하여, 비슷한 것끼리 그룹화 할 수있다. 최근 팔로잉 하는 유저는 섹션 상위에 고정되어 스크롤하면 가독성 부분이 더 좋아질 것이다.
#인사이트
소셜 독서플랫폼 리더스는 전체적으로 트랜디한 느낌이다. 이용자의 입장에서 불편함을 최소화 하고자 여러 기능들이 들어 있다.
자동 추천, 피드를 운영하며 사용자의 습관형성에 도움이 될 만한 것들을 잘 차용했다. 특히, 추천 기능은 다양한 플랫폼에서 활용하기 좋은 기능인것 같다.
북모리에서는 개선점 몇가지만 수정한다면 사용자 습관형성에 더 특화된 앱이 될 것 같다. 다른 이용자와의 교류를 통해 앱을 진행하는 것이 아닌 본인에게 집중해서 데이터를 관리할 수 있기 때문에 사용자에 따라서 더욱 유용하게 사용 될 수 있다.
위계에 관련하여 수정하고, 낭비되는 리소스 없이 섹션을 구성하면 보기에 더 편할 것 같다.