티스토리 뷰

앱 서비스의 Andriod와 IOS 차이

1. YouTube Music 온보딩

 유튜브 뮤직 온보딩 중 '아티스트 선택' 페이지 하단 버튼은 Android에 경우 중앙에 텍스트 길이만큼 배치되어 있고, IOS에 경우 풀 화면을 기준으로 Fill 되어 있다. 이러한 이유는 무엇일까? 

 

 Android와 IOS 공통적으로 하단 Push 제스처를 사용한다. (안드로이드에 경우 하단 좌측, IOS는 좌측과 하단) 이때는 안드로이드는 기본 네비게이션을 Push 제스처로 사용하고 있고, IOS에 경우 하단 전체는 페이지 전환, 좌측은 뒤로가기로 사용하고 있다. 이때는 터치가 아닌 Push 제스처 형태를 취하기 때문에 터치 버튼과 유저 간의 휴먼 에러가 적게 나타난다. 그러나 삼성 안드로이드 기본 네비게이션 뒤로가기 버튼은 다르다. 하단 터치 한 번으로 뒤로가기가 실행된다. 이는 하단 버튼과 충돌되는 형태로 만일 유저가 실수하여 뒤로가기 버튼을 누르지 않고, 완료 버튼을 누르게 되면, 이는 유저에게 좋지 않은 경험으로 남는다.

 그래서 YouTube Music은 터치 충돌로 인한 휴먼에러를 방지하기 위해 안드로이드에 경우 Fill 방식이 아닌, 텍스트 Hug 방식을 사용하여 UI를 디자인하였다. Hug 방식의 경우 치명적 실수의 원인인 뒤로 가기 버튼이나, 부차적 위험요소인 목차 버튼을 누를 가능성도 차단할 수 있어 유저에게 매우 편리하다.

YouTube Music 온보딩 '아티스트 선택' 좌측: Android 우측: IOS

2. Airbnb 맵

 에어비앤비 앱의 Map으로 숙소 찾기 페이지에 들어가보면, 안드로이드에 경우 위치 찾기에 대한 정보 설정을 처음만 물어보는 형태를 취하고 다시 묻지 않으나, IOS의 경우 최근 위치 정보 표시를 위해서 권한을 변경하라는 메시지와 변경하러 가기 버튼이 같이 표시되는 형태를 취한다. 이는 무엇 때문일까?

 

 안드로이드 삼성 위치 시스템에 경우 처음 권한을 허용하지 않고, 위치 서비스를 재실행 해야하는 경우 유저가 들여야 하는 수고로움이 크지 않다. 그러나 IOS에 경우는 다르다. IOS에 경우 보안 시스템이 복잡하기 때문에 위치 시스템을 설정하기 위해서는 개인 권한을 일일이 허용해야 한다. 일괄 적용도 없다. 그래서 Airbnb IOS 서비스에 경우 위치 서비스 허용에 대한 모달을 두어서 쉽게 유저가 위치 서비스를 허용할 수 있도록 하고 있다. 

Airbnb 맵 좌측: 안드로이드 우측: IOS

앱 서비스의 웹과 앱 차이

1. 원티드 '상세'

 웹앱 원티드, 앱 원티드 상세페이지는 어떤 차이가 있을까? 상단 하단 네비게이션의 유무가 가장 큰 차이였다. 웹앱 원티드의 경우 어떤 페이지를 들어가던지 간에 상단과 하단 모두 네비게이션 바가 존재하였다. 상단 네비게이션은 서치, 알림, 카테고리 전체보기가 위치해 있고, 하단 네비게이션은 채용, 커리어, 소셜, 마이 순으로 위치해있다. 그러나 앱 원티드는 상세 페이지로 들어가게 되면 상하단 네비바가 사라지고, 검색에만 집중할 수 있게 UI가 구성되어 있다.

  먼저 웹앱 원티드가 이런 형태를 취한 이유는 반응형과 웹앱이라는 특수성 때문이다. 반응형 디자인의 경우 리소스를 효율적으로 사용하기 위해 웹 GNB가 Breakpoint에 따라서 자연스럽게 줄어들도록 설계한다. 또한 웹앱의 경우 모든 유저가 홈 화면에서만 유입되는 경우가 적고, 앱의 다양한 콘텐츠들을 모르는 상태로 유입되는 경우가 많기 때문에 친절한 지표를 다량 함유하는 것이 좋다. 따라서 웹앱 원티드의 경우도 상 하단 모두 네비게이션을 사용하여, 어느 페이지에서 유저들이 접속하더라도 메뉴를 찾을 수 있도록 설계하였다.

 앱 원티드에 경우는 앱이라는 특성으로 인해 상하단 네비게이션 바를 사용하지 않았다. HIG(Human Interface Design)의 브랜딩 항목을 보면, 맥락을 제공하려는데 꼭 필요한 경우가 아니라면 앱 전반에 로고를 표시하는 것은 지양하라는 지침이 있다. 앱의 이름을 상기시키는 것 보다 정보, 제어기능을 더욱 넓은 화면으로 사용자에게 제공하는 것이 더욱 좋다는 것이다. 앱 원티드를 이미 설치한 유저들에게 로고를 상기시키는 것 보다 검색 기능에 충실한 UI 화면으로 편의성을 부여하는 것이 더욱 좋다고 판단한 결과라고 생각한다. 또한 앱에서는 항상 홈 화면으로 유입되기 때문에 웹앱에서 고려해야 할 사항을 고려할 필요성이 없어진다. 따라서 앱 원티드에서는 검색 편의성을 부여하기 위해 상하단 네비게이션 바를 삭제하고, 검색 기능만을 넣은 UI를 설계하였다.

원티드 카테고리 좌측: 웹앱 우측: 앱

2. Youtube Shorts 만들기 버튼

 유튜브에서는 쇼츠 만들기를 앱 한정으로 서비스하고 있다. 이는 쇼츠 제작의 특수성에 있다. 쇼츠를 제작하기 위해서는 카메라 권한이 필요하다. 그런데, 권한을 허용하기 위해서는 앱을 스토어에 출시하여, 권한 허용을 해야 하는데, 웹앱에 경우 브라우저 상에서 켜지기 때문에 권한 허용을 진행하기 쉽지 않다. 따라서 모바일 앱 스토어에서 다운받아 사용할 수 있는 앱 유튜브만이 쇼츠 서비스를 이용할 수 있는 것이다.

유튜브 홈 화면 좌측: 웹앱 우측: 앱

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함