나쁜 디자인, 밀리의서재 앱 분석 (패스트캠퍼스 챌린지 4일차)

오늘은 개선이 필요한 UI 디자인, '밀리의 서재' 앱을 분석해보고 분석하면서 알게될 UI 용어들을 이해하기 위해 구글 머테리얼 디자인 파운데이션을 가볍게 공부해보도록 하겠습니다! #Googlematerialdesign #foundation그럼 가보시죠!

 

 

본 글은 패스트캠퍼스 챌린지를 신청하고 수강 중인 실리콘밸리 시리즈 구글 프로덕트 디자이너의 강의 후기입니다. 

구글 프로덕트 디자이너의 강의 (패스트캠퍼스 챌린지 1일차)

⬆️ 위 글 ⬆️ 을 보시면 더 자세한 설명이 나와있습니다.

 

오늘도 챕터 4 진도를 나갔습니다. 챕터 4부터는 실습 강의가 진행됩니다.

먼저 강사님이 실제적인 예제로 에어비앤비와 밀리의서재를 가져와서 크리틱 해주셨고, 해당 회차는 4-1, 4-2 입니다. 

4-1 에서는 잘 된 디자인을 분석하며 에어비앤비 앱 구조를, 4-2 에서는 개선이 필요한 디자인을 분석하며 밀리의서재 앱 구조를 분석합니다. 그리고 4-3 부터는 유튜브와 클럽하우스 앱을 심도 있게 분석하고 카피해보는 시간을 가집니다. 

 

제가 이 포스팅 거의 2시간에 걸쳐서 썼는데.. 티스토리 오류인지 사파리 오류인지 .. 글이 다 날라가서.. 다시 쓰고 있어요ㅠㅠ 이번 포스팅은 특히 많은 시간 들여서 쓴 것이니 방문해주신 분들께 도움이 되었으면 좋겠습니다ㅎㅎ

 

오늘은 챌린지 4회차로 4-2 강의를 수강하고 작성하는 후기입니다.

패스트캠퍼스 문의 결과 유료 강의 내용이 너무 많이 노출되면 수정을 요청할 수도 있다고 하셔서, 앞으로는 강의에서 강사님이 말씀해주신 핵심만 짚고 넘어가며 제가 꼭 기억해야 될 부분들과 제가 배웠던 것들, 그리고 제 생각을 위주로 적도록 하겠습니다.

 

구글 디자이너의 크리틱, 시작하겠습니다!

개선이 필요한 디자인 '밀리의 서재' 분석입니다.

그럼 여기서 잠깐, 복습해볼까요?

좋은 UX 디자인이란 무엇일까요?

좋은 UX 디자인이란 어떤 디자인을 말하는 걸까요?

 

강사님은 좋은 UX 디자인 = 심플한 UX 디자인을 구성하는 네 가지 요소를 설명해주셨습니다

지난 포스팅에 자세히 적어놨던 네 가지 요소들.

Targeted, Intuitive, Harmonious, Beautiful 입니다. 구글에서도 디자이너들이 작업하는 모든 과정에서 이 네 가지 측면을 정말 많이 생각한다고 하죠.

2021.11.03 - [서비스 기획·디자인/UI, UX 디자인] - 좋은 UX 디자인이란? (패스트캠퍼스 챌린지 3일차)

좋은 UX 디자인이란? (패스트캠퍼스 챌린지 3일차)

위 포스팅에 들어가시면 해당 내용을 더 자세히 볼 수 있습니다!

그렇다면 이 네 가지 요소가 제대로 지켜지지 않은 디자인이 나쁜 디자인이라고 할 수 있겠죠?

 

  필기 1

먼저, UI UX를 디자인할 때나 분석할 때 가장 먼저 파악해야할 것은 코어 유저 져니(Core User Journey)입니다. '고객여정지도'라고도 불리는 이 Core User Journey는 그 서비스를 기획하고 디자인하는 근본적인 원인으로 설정해야합니다. 그럼 밀리의서재의 Core User Journey는 무엇일까요?

1. 내가 읽고싶은 책을 찾고싶다.

2. 내가 읽고있던 책을 계속 읽고싶다.

가 되겠죠? 그럼 과연 밀리의서재 앱이 이 CUJ (Core User Journey)를 얼마나 충족시키는지 한번 알아봅시다.

 

먼저 앱에 접속하면 하단에 네비게이션 앱바가 있는데요, 이 네비게이션은 유저가 어떠한 행동을 하도록 유도하는 것이기 때문에 주요 요소 중 하나입니다. 그래서 본 강의에서는 전체적인 앱의 네비게이션 스트럭쳐(navigation structure)를 먼저 살펴보았습니다.

 

접속하자마자 아래에

( 투데이/ 완독지수/ 피드/ 내서재/ 관리 )가 뜹니다.

 

그런데 투데이에선 너무 다양한 방법으로 책을 추천해줘서 유저가 결정하는 데 어려움을 겪을 것 같았고, 완독지수와 피드에서까지 책추천을 해주는 것을 보며 각 페이지의 역할이 겹친다는 것을 알 수 있었어요.

'좋은 책을 많이 추천해줘야지'라는 목적이 강한 것은 알겠지만 각각의 페이지마다 다른 역할을 하는 게 아니라 모두가 겹치는 역할을 하고 있으면 무의미하고 오히려 사용자 경험을 저하시킬 것 같아요.

 

우리는 이렇게 over design 되지 않도록 조심해야합니다. 그리고 targeting 타겟팅을 잘 해야해요. 이전 포스팅에서도 꾸준히 얘기했지만 특히 사용자 경험 디자인, user experience user interface 디자인 파트에서는 정말 디자인된 모-든- 부분에 설득력있는 근거가 있어야합니다.

 

"나는 이런 목표를 가지고 이렇게 디자인했어. 이런 목표는 회사의 비전과 장기적 가치 창출에 적합하기 때문이야." 와 같이 자신만의 논리를 어필하면서 팀원들을 설득할 수 있어야겠죠.

 

한편, 완독지수에서는 데이터 신뢰성이 떨어졌습니다. 사람들이 어떤 책을 완독한 경우가 많다보니 나에게도 완독할 확률이 높은 책이라고 떴는데, 어이없게도 저는 그 장르의 책을 싫어했던 겁니다. 데이터 신뢰도가 낮은 상태! 그리고 harmonious도 떨어졌다고 볼 수 있겠네요. 유저의 행동을 자연스럽게 유도하는 게 아니라, 억지로 유도한 것 같이 느껴집니다. 그러니까 우리는 기획한 사람이 목표한 바를 이루려고 하면 안되고 늘 유저에게 포커스해야한다는 걸 절대 잊어서는 안됩니다. 무조건!! 무슨일이있어도 유저에게 FOCUS !!!

 

'피드' 파트에서는 직관성이 떨어지는 아이콘들이 꽤 있었구요. Intuitive 직관성 !! 보완해야겠죠?

 

메인페이지와 하단 앱바 네비게이션 스트럭쳐를 보며 이 앱은 전반적으로 targeted 가 제대로 되어있지 않다는 것을 알 수 있었습니다.

이 페이지가 하고자하는 게 무엇인지 불명확해요. 이래선 안됩니다.. 

 

이렇게 앱을 분석해보면서 내가 디자인할 땐 어떤 식으로 디자인할지도 잘 생각해보자고요!!

필기 2 

이건 '내서재' 페이지입니다. 내서재 페이지를 들어와보니 중앙에 네비게이션이 하나 더 있었어요.

 (전체도서/ 책장/ 독서노트/ 통계/ +연필아이콘) 이 있었습니다. 그런데 하나하나 클릭해보면서 확인해보니 네비게이션 레벨이 안 맞고 있다는 생각이 들었어요. 각각 다른 perspective관점으로 (책장, 독서노트, 통계)를 브라우징하는 반면 글을 쓰는 파트도 만들어놓았더라구요.

 

맨 오른쪽에 있는 +연필 아이콘은 유저가 글을 쓰게끔 하는 네 가지 뎁스가 있었는데 이렇게 뭔가를 작성하라는 부분을 굳이 '내서재'에 넣었어야할까? 싶은 의문도 들었습니다. 오히려 '피드'에 넣었으면 낫지 않았을까 싶기도 하고요.

 

결론적으로, 밀리의서재는 너무 잡다한 기능이 많았고 겹치는 기능들도 많았습니다. 여러 항목이 모두 겹치는 기능(책추천)을 갖고있으면 유저를 불편하게 만들 수 있겠죠. 게다가 책을 추천하는 카드부분도 형식이 다 달랐습니다. 사이즈도 다르고 carousel 형식, two column 형식 ..모두 섞여있는데 스크롤을 내릴 때마다 달라지더라구요.

 

그래서 ui가 굉장히 잡다하고 정리가 필요하다는 느낌이 들었습니다. 뎁스(Depth)나 기능도 불필요하게 많아서 줄이는 게 낫겠다는 생각이 들었어요. 디자인시스템도 제대로 잡혀있지 않아서, 이런 앱을 디자인하고 서비스를 기획할 때 디자인시스템 구축이 얼마나 중요한지 다시금 느낄 수 있었습니다.

 

디자인시스템에 대한 글은 여기서 읽어보세요!

2021.11.02 - [서비스 기획·디자인] - 디자인 시스템이란? 디자인 시스템 구축 프로세스는?

디자인 시스템이란? 디자인 시스템 구축 프로세스는?

 

마지막으로, 오늘 공부한 부분에서 모르는 용어가 있으시다면 참고하시라고 간략히 구글 머테리얼 디자인의 파운데이션을 설명해드리겠습니다. 학부 전공 수업시간에 교수님께서 설명해주시는 것 바탕으로 필기한 장표입니다.

구글 머테리얼 디자인 Google Material Design Founation에 정의된 component elevation values 입니다.

 

1. Nav drawer가 있죠? 이건 소위 햄버거 메뉴라고 불리는 컴포넌트입니다. 

2. App bar 는 서비스의 상단이나 하단에 있는 bar를 말하는겁니다.

3. Card는 가장 바닥 depth부터 존재하는 요소입니다. 화면의 대부분을 구성하는 네모 박스들이라고 생각하시면 됩니다. 인스타그램의 피드-같은 겁니다.

4. FAB 는 Floationg Actoin Button으로 눈에 띄었으면 좋겠는 화면을 다른 컴포넌트들보다 위에 오버레이 시켜서 바로 접근가능하도록 띄우는 버튼입니다.

5. Button은 무언가 클릭해야하는 요소들인거구요. 그러다보니 아까 말한 Card보다 1depth 위에서부터 존재합니다.

6. Dialog는 가장 위에 뜨는 팝업, 알림입니다. 

밀리의 서재에서는 '내서재' 페이지에 들어가면 우측 상단에 Nav drawer가 있었어요. 이 컴포넌트는 junk drawer가 되지 않도록 잘 생각해서 만들어야합니다. 개연성이 있어야해요.

 

그리고 서비스의 상단이나 하단에 있는 App bar 에는 이번 포스팅에서 줄곧 말해온 네비게이션이 들어가있어요. 그럼 네비게이션에 대해 알아볼까요?

UI UX에서 네비게이션은 유저가 이동하는 방식을 일컫는 말입니다.

구글 머테리얼 디자인의 정의에 따르면 네비게이션에는 이렇게 세 가지가 있는데요,

Lateral navigation는 병렬구조로 진행되는것, Forward navigation은 상하구조를 갖고있는 경우에 점점 깊이(depth있게) 들어가는 구조, Reverse navigation은 뒤로 돌아가는 구조입니다. 특히나 리버스 네비게이션은 꼭 필요한 네비게이션이니 잊으면 안돼요.

 

그럼 마지막으로 총정리입니다! 아래 이미지를 보면서 각 컴포넌트들의 영문 명칭을 확인해보시고, 어느 정도의 Elevation (DPs)가 있는지 확인해보세요!! 팝업의 공식 명칭은 dialog라는군요!

각 컴포넌트(component)별 뎁스(depth) 참고하세요

그럼 오늘 공부 끝!!!

4-2 강의

오늘의 강의에서는 개선이 필요한 '밀리의 서재'의 디자인 요소들을 자세히 분석하며 UX에 기반한 UI 컴포넌트들을 공부할 수 있었습니다. 

실제 앱의 각 페이지별 특성과 그 페이지의 각 컴포넌트들, 해당 부분에서 아쉬운 부분들이 무엇인지, 그리고 어떤 식으로 개선하면 좋을 것 같은지까지 자세히 설명해주시는 강사님 덕분에 UX 디자인을 논리적으로 만들어나갈 수 있는 기초를 쌓을 수 있었어요. 

내일은 다음 회차 강의 수강 후기를 가져와보겠습니다!

 

어제보다 더 나은 오늘을 위해! 오늘도 열심히 달려봅시다.

 

 

---

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 

#구글MaterialDesign시스템을활용한YoutubeforLearning앱디자인프로젝트

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.