Apple Design Challenge Part 1 - 컨설팅 후기

챌린지에 참가하면 소정의 혜택으로 원하면, 본인의 앱을 애플 에반젤리스트 분이 컨설팅 해준다.
할까말까 고민하다가, 현재 회사 앱이 앱이 너무 예쁘지 않아서 받게 되었다.

컨설팅에서 다음과 같은 말을 해주셨는데 아주 정확한 말씀이셨다.

 

앱의 첫 인상이 초기 기획보다 피처가 많이 확장되어보이는데, UX의 고려 없이 덧붙힌 느낌이다.

초기 기획은 채팅 + 음성/영상 VOIP였다. 이 후, 유료 비디오 스트리밍 + 정기 구독이 추가되었다.

컨설팅 전

세션 듣고 수정한 사항

첫 페이지 이후 탭바 숨김 처리한 것 해제 - 트위터 / 인스타 / 슬랙 등이 이미 이를 지키고 있음.

프로필 메뉴를 80 / 20 룰을 지켜 분리 함

컨설팅을 원하는 항목

찾기(검색) 탭 타이틀의 애매함.

더보기 탭 메뉴 이름 및 정체성이 애매함.

더보기 메뉴의 복잡함.

- 더보기에 설정을 만들어 기능 숨기기

- 블루 마크 유저와 일반 유저의 메뉴 페이지를 분리하기

백버튼 및 네비 타이틀이 현재 없음

로그인 페이지가 앱 시작 시 존재

컨설팅 후 피드백 

앱 스토어

앱스토어에서 앱 이름이 안 뜸. 세부 타이틀까지 넣어 검색해야 적용 됨. 많이 아쉬움.

>> 앱 스토어 키워드에서 정작 중요한 앱 이름은 빼먹었다.

앱 진입

로그인을 요구하는 화면은 유저 경험에 좋지 못함. → 게스트로 진입하여 앱을 써보는게 만드는 것을 추천합니다.

>> 게스트로 앱 사용하려면 API 수정이 필요하기 때문에 당장 수정은 어려움.

탭바: 탭바 숨김

탭바를 Modal(아래에서 위로 올라오는 화면) 이외의 상황에서 숨기지 말 것을 추천합니다. 일부 앱에서의 채팅방 UI 같이 숨길 수도 있습니다. 하지만 숨긴다고 물었을 때 숨기는 이유를 답할 수 있어야합니다. ㅇㅇ앱이 그렇게 했다와 같은 답은 적절하지 못합니다.

>> 이건 여러가지 경우가 있는데, 카카오톡같은 경우는 숨기고, 슬랙 같은 경우는 숨기지 않았다. 유저가 채팅에 집중하고, 플로우를 제한하려면 숨기는 게 맞다고 본다.

탭바: 홈 탭의 위치

HIG에서는 가장 왼쪽에서 부터 중요도로 나열한다. 따라서, 강조를 목적으로 가운데에 두는 것은 맞지 않다. 예외 적으로 가운데에 두는 UX가 있다. e.g. 궁수의 신 게임의 경우, 스와이프를 통하여 화면을 이동 겸험을 주기 때문에 유효한 UX이다.

탭바: 홈 탭 네이밍

앞서 세션에서 내용에서 말했듯이, 홈이라는 네이밍을 쓰는 것에 주의할 필요가 있습니다.

현재 홈 탭에서 보여주는 내용은 비디오 / 이미지 피드인데 홈이라는 이름을 쓰기에는 직관적이지 못합니다. 유저가 홈 탭에서 얻을 수 있는 것이 홈 관련인가요? 하나 이상의 컨텐츠가 있나요? 아니라면 피드 / 프로 등의 이름으로 변경하길 추천합니다.

>> 같은 피드를 보여주는 메뉴에서 홈이라는 명칭을 사용하는다음과 같은 앱이 있음.(인스타, 트위터, 유튜브 등) 하지만 우리 앱과 다르게 부수적 기능이 존재했다. 이 앱이 피드 및 비디오를 올리는 SNS 기능이 메인인지, 컨설팅이 메인인지 헷갈린다. 방향을 정하고, 홈 탭에 컨텐츠를 추가해서 홈 탭의 이름을 유지하는 쪽으로 가야겠다.

탭바: 찾기 탭

찾기 탭에 네비 바에 찾기 버튼이 또 있다. 중복되는 표현을 지양해야 함. 해탕 탭에는 카테고리가 있고, 유저가 찾을 수 있는 블루마크 유저(프로)들이 있다. 따라서, 프로들 프로리스트 등의 직관적인 이름으로 변경하길 바랍니다.

>> 이 부분 또한, 이름이 많이 변경되어왔다. 프로 찾기, 프로 검색, 찾기 등. 앱의 정체성을 좀 더 확실히 한 뒤 변경을 고려 해야 겠다.

탭바: 더보기 메뉴

세션의 Bad Case와 같이 많은 메뉴를 몰아 넣은 것 처럼 보인다. 80/20 rule을 이용해 잘 사용하지 않는 메뉴는 Depth를 줘서 숨기는 것을 추천합니다. 또한, 현재 섹션으로 묶인 메뉴들이 통일성 없어 보입니다. 프로 섹션의 튜토리얼과 게시판 출금, 구독 등급 설정 등 분리가 필요해보입니다.

일반유저와 블루마크 유저(프로)의 메뉴를 분리하고 필요하다면 프로 메뉴를 탭 메뉴로 추가하는 것도 방법 중 하나입니다.

탭바: 채팅

채팅은 중요한 메뉴인 것 같은데 탭 메뉴에 없고, 왜 네비버튼으로만 존재하나요?
>> 채팅이 활성화 되어 있지 않아서, 탭 바 메뉴에서 일단 제거했다. 비즈니스 모델을 유료 컨설팅에서 비디오 정기구독으로 변경해서 그런 것 같은데 나중에 컨설팅이 활성화가 되면, 탭 바 메뉴로 복귀한다고 한다.

네비게이션: 버튼 아이콘

BackButton Indicator를 arrow를 쓰지 말고, Chevron(꺾쇠)를 사용하세요. 세로 ellipsis 아이콘 보다 가로 ellipsis 아이콘을 사용하거나 한글 메뉴(더보기 / 수정 등)의 버튼을 추천합니다. 사용하시는 앱이 혹시 Native인가요? 크로스 플랫폼인가요? Native면 Native만의 디자인 사용을 적극 추천드립니다. 디자인이란 앱을 벗어나 플랫폼 전반적으로 적용되어 있고, 설계에서부터 고려되는 것을 말합니다.

>> Chevron 적용은 전부터 생각해왔다. 여러 앱들을 보다보니 (트위터 제외) 대부분의 앱들이 arrow 보다 Chevron을 사용하였고, first-party 앱들은 전부였다.

 

네비게이션 버튼은 3개를 넘지 말아야합니다. 알림 버튼이 모든 탭에 있는데 한 곳에만 있는 걸을 추천드립니다.

>> 알림 버튼은 홈 탭에만 넣고 나머진 다 지웠다.

 

워크플로우: 탭 강제 전환 지양

절대적으로 하지 말아야합니다. 딥 링크방식(애니메이션을 줘서 탭을 이동하는 방식)도 추천드리지 않습니다. 강제 탭 전환을 하면 유저가 뒤로가기를 할 때 어느 화면이 나올지 예측할 수 없습니다.
Q. 그럼 push 메세지를 클릭하여 화면 이동을 할 때 어떻게 해야 하나요?
A. 현재 페이지 stack에 추가하십시오.
e.g. push 메세지를 클릭하여 채팅방 이동 등.
>> 흠.. 이건 많은 고민이 필요할 것 같다. 때에 따라서 딥 링크 방식은 필요할 것 같은데 아직 해답을 찾지 못하였다. 하지만 의도는 잘 이해했다. 또한, 이 문제는 탭바를 숨기지 않게 되고, 탭바의 이동을 고려하게 되면서 더욱 드러난 것 같다.

결론

탭바 만으로 이 앱을 설명할 수 있어야 한다는 말이 중요한 것 같다. 

인사이트를 얻을 수 있는 앱을 추천드릴게요 - Productive

CURD 기능은 첫번째 탭에 몰려있고, 중복된 기능 없이 탭별로 기능 분리가 잘 되어있습니다.

즉, 목적에 집중되는 UI입니다.

 

약간 이나마 써 본 후기

1. 온보딩이 정말 잘 되어있다. 감동했다. 한 화면에 너무 많은 정보를 전달하지 않으면서, 순차적으로 진행됐다.

2. 탭 별 관심사 분리가 잘 되어있다. 따라서, 중복되는 기능 또한 없앴다.

3. 안드로이드 앱도 깔아서 살펴봤는데, 각 플랫폼의 Native한 디자인을 추구하는 것 같았다. 앱 메뉴 구성도 다르고 특히, 안드로이드는 탭바가 없고 사이드바가 있더라.

4. 로컬 스토리지 활용이 잘 되어있다. 즉, 네트워크 의존도가 적었다. 네트워크 끊고, 북마크한 포스트를 보는데 포스트 내용까지 열람 가능했고, 읽은 진행도 또한 로컬로 관리되고 있었다. 또한 탭에 로드된 리스트의 항목 전부 열람이 가능했고, 북마크 연동도 잘됐다.

사이드 프로젝트할 때 항상 어떤 API 써야하지 고민했는데 네트워크 의존 없이 앱이 잘 굴러가는 걸 보니 신기했다.(물론 일정 관리 앱이 보통 그렇긴하지만)

 

아쉬운 점은 정기구독료가 8,000대로 매우 높았다..

https://apps.apple.com/us/app/productive-habit-tracker/id983826477

‎Productive - Habit Tracker