#05. iOS vs Android UI
iOS와 안드로이드 UI는 어떻게 다를까?
원래는 안드로이드를 사용하다가 iOS를 사용했을 때 그 당혹감이란.. 누구나 겪는다는 있지도 않은 뒤로가기 버튼을 꾹꾹 눌러대며 가장 적응하기 힘들었던 건 무엇보다 "뒤로가기(history back)"가 없었다는 사실..
OS가 '적응이 안된다'는건 좋고 나쁘다의 개념보다는 내가 원래 사용하던 OS의 UI와 다르다는 의미인 듯 싶다. iOS와 안드로이드 UI는 확실히 예전보다는 서로를 닮아가고 있지만 그럼에도 여전히 다른 점이 한두 가지가 아니다. 그리고 가장 기본적인 차이는 앞서 얘기한 "뒤로가기" 존재 여부랄까..
무엇 무엇이 다르다라고 딱딱 잘라서 말하기 어려워서 막상 포스팅을 하려니 난감했던 것이 사실이지만
그래도 사용하면서 느낀 두 OS의 UI 차이점에 대해 간단히 적어보고자 한다.
# Navigation UI: History Back & Hierarchy Back
iOS와 안드로이드의 내비게이션 UI의 가장 큰 차이점은 안드로이드의 History Back(뒤로) 기능이다.
이는 주로 앱 바 좌측 상단에 뜨는 Hierarchy Back(위로) 버튼과 다른데, Hierarchy Back이 앱의 상위 계층으로 가기 위함이라면 History Back은 앱의 계층과 상관없이 사용자가 이전에 작업한 화면을 보여준다.
iOS는 안드로이드와 달리 Hierarchy Back의 기능만 제공한다.
■ History Back(뒤로): 시간 순서에 따른 화면 간 이동 / iOS (X), Android(O)
■ Hierarchy Back(위로): Depth를 가진 메뉴 계층 간(소메뉴→ 중 메뉴→ 대 메뉴) 이동
/ iOS (O), Android(O)
안드로이드 네비게이션UI (출처: http://developer.android.com/)안드로이드의 내비게이션 UI. 붉은색 원의 History Back은 이전에 작업한 화면을 보여주는 반면, 노란색 원의 Hierarchy Back은 상위 메뉴를 보여준다.
iOS 네비게이션 UIiOS의 내비게이션 UI는 기본적으로 Hierarchy Back 기능만을 제공한다.
# Search UI
주로 상태바(status bar) 바로 아래에 나타나는 내비게이션 바 (안드로이드에서 iOS의 내비게이션 바를 액션바라고 칭하며 안드로이드의 내비게이션 바는 뒤로가기 버튼이 있는 하단바를 얘기함) 스타일에 대한 가이드도 iOS와 안드로이드에서 조금씩 차이가 있다.
iOS의 네비게이션 바의 가장 기본적인 기능은 메뉴 사이의 계층적 이동을 가능하게 하는 것이며 추가적으로 화면 내용에 대한 관리의 기능을 제공한다. 안드로이드의 경우 "위로 - 앱 아이콘 - 뷰 컨트롤 - 액션 버튼 - 액션 Overflow"가 액션바에 들어갈 것을 추천하는 등 가이드가 좀 더 구체적인 것을 확인할 수 있다.
앱 바 구성 요소들 중 특히 차이가 나는 것은 두 OS의 검색 기능에 대한 UI다.
iOS는 내비게이션 바 아래 별도의 검색바가 들어가는 것을, 안드로이드는 액션 바 내 검색 액션 버튼을 통해 검색 기능을 제공하는 것을 가이드의 기준으로 한다.
iOS Navigation Bar Guide (출처:developer.apple.com) iOS의 경우 검색바를 내비게이션 바 아래에 별도로 분리하는 UI를 가이드로 한다.
Android Action Bar Guide (출처: http://developer.android.com/)안드로이드는 액션바 내에 검색 기능을 제공하는 버튼이 들어가는 것을 가이드로 한다.
이런 내비게이션과 검색 UI의 차이 때문에 같은 앱이어도 iOS와 안드로이드에서의 디자인이 다르다.
아래는 페이스북의 사례인데 iOS와 안드로이드에서 디자인이 각각 다른 것을 확인할 수 있다.
Facebook Main (좌) iOS / (우) Android
Facebook Search (좌) iOS / (우) Android- 노란색 하이라이트 된 앱바의 구성: 검색 UI의 차이와 함께, 안드로이드에서는 상시 노출되는 앱의 로고.. 웹 앱에서는 앱의 로고를 노출시키는 것이 맞다고 쳐도 어떤 앱을 쓰겠다는 명확한 의도를 가지고 앱으로 들어온 사용자에게 앱의 로고를 저래 상시 노출하는 게 의미가 있을까?? 고려해야 하는 부분이다..
- 빨간색 하이라이트 된 툴바와 초록색 하이라이트 된 탭 바의 위치: 안드로이드에서는 상시 하단에 노출되는 내비게이션 바 때문에 탭 바를 하단에 위치하는 것을 최대한 지양하는 것을 많은 앱애서 확인할 수 있다. 그리고 iOS는 탭 바에 아이콘과 함께 텍스트를 거의 항상 표기한다면 안드로이드는 많은 경우 아이콘만 표시한다.. 친절한 듯 무심한 안드로이드, 무심한 듯 친절한 iOS.. 안드로이드는 탭 바도 보통 상단에 노출되기 때문에 내가 현재 있는 위치의 탭 아이콘이 하이라이트 됨과 동시에 아래쪽에 선으로도 하이라이트 되는 모양을 자주 발견할 수 있다.
# Home Screen
Home Screen (좌) iOS 8.1 / (우) Android 5.0 (http://goo.gl/rqR3g5)홈스크린에서 가장 눈에 띄는 차이는 앱 아이콘인데 iOS는 앱 아이콘을 모서리가 둥근 정사각형으로 통일한 반면, 안드로이드는 규격만 정해져 있는 것을 확인할 수 있다. 따라서 로고를 각각의 OS에 맞게 varify 하는 것이 필요하다.
# Dropdown Menu & Drawer
같은 앱이라도 Dropdown Menu나 Drawer가 두 OS에서 표현되는 방식이 다른데
많은 경우 iOS에서 dropdown menu가 가로화면을 꽉 채우면서 뜬다면(덮는듯한 느낌..),
안드로이드에서는 일정 영역만 차지하면서 위로 얹는다는 느낌이다.
Dropbox Dropdown Menu (좌)iOS (우)Android햄버거 버튼이란 명칭으로 통용되는 Menu Drawer의 경우도
iOS에서는 옆에서 밀어낸다는 느낌이라면 안드로이드는 위로 얹는다는 레이어의 느낌이 강하다.
Youtube Menu Drawer (좌)iOS (우)Android# 기타
잠금화면, 통화 화면과 같은 기본 OS의 디자인도 비교해 보면 각각 너무 다르고, 같은 앱의 다른 OS 버전을 비교하다 보면 그 외에도 정말 많은 차이들이 보인다.
가령 안드로이드 앱의 경우 하단에 상시 노출되는 내비게이션 바 때문에 하단의 탭 바의 사용을 최소화한다던지, 탭 바를 사용하더라도 아이콘만 표시하는 등 그 표현을 최소화하는 것을 확인할 수 있다.
Foursquare (좌) iOS / (우) 안드로이드하단의 탭 바의 경우 iOS는 텍스트를 아이콘과 함께 제시하는 반면, 안드로이드에서는 아이콘만 제시하는 형태를 쉽게 발견할 수 있다. 위의 페이스북보다는 안드로이드와 iOS 디자인이 많이 통일된 형태의 Foursquare. 어떤 앱이 각각의 OS에 맞게 최적화된 디자인을 했는지는 말하지 않아도 알겠지만.. 한정된 자본으로 최대의 효과를 누리고자 한다면 이렇게 통일하는 것도.. 불가피한 선택이겠지..
(좌) iOS App Store / (우) Android Playstore안드로이드는 가능한 한 하단 탭 바의 사용을 최소화하는 반면 iOS 사용자들에게는 하단 탭 바가 너무나도 익숙하다.
외에도 사용되는 아이콘이나 색상, 이미지를 제시하는 방식 등 너무 다양한 요소들이 각각의 OS에 적합한 방식으로 다르게 나타나는데, 이는 근본적으로 iOS와 안드로이드가 추구하는 UI가 다르기 때문이다. 각각의 환경에서 사용자의 경험을 최적화할 수 있는 방향으로 UI를 디자인해야 하며 그러기 위해서는 두 가지 OS를 항상 자주 사용하며 UI의 차이점을 직접 느끼는 것이 중요하다.
배경 이미지 출처: http://blog.applause.com/