#02. 앱의 구성요소
App Anatomy / App Components
[앱디자인] #02. 앱의 구성요소
앱의 구조는 iOS와 안드로이드가 조금씩 다르다.
먼저 Apple에서 정의하는 iOS의 UI 구성요소들은 다음과 같다.
iOS App Anatomy (출처: Apple's iOS Developer Library)
iOS App Anatomy (출처: Apple's iOS Developer Library)다음은 구글 Material Design에서 제시된 앱 구성요소들의 일부다.
Google Material Design(출처: Google Design)앱의 구성요소들은 비슷한 듯하면서 조금씩 다른 용어로 사용되는걸 확인할 수 있는데,
이는 근본적으로 iOS와 안드로이드의 UI가 다르기 때문이기도 하며
(iOS와 안드로이드의 차이는 다음 포스팅에서 작성할 계획!)
어떤 앱이냐에 따라 그 구성요소들이 너무 다양하게 변화하는 앱의 특성 상 뭐가 뭐다라고 명확히 정의내리는 것이 불가능한 것이 현실이기 때문이다.
그래도 공통적으로 사용되는 구성요소의 개념들은 분명히 존재하기에,
이번 포스팅에서는 앱을 구성하는 요소들(중 자주 사용되는 요소들 중심으로)에 대해서 정리해보고자 한다.
# 1. Bars
가장 혼동되는 개념이지 싶은 게 바로 앱에서는 너무나 익숙한 이 "바"다.
내비게이션 바(navigation bar), 앱바(app bar), 툴바(toolbar), 탭 바(tab bar), 액션바(action bar) 등 그 종류도 다양하며, 비슷한 듯 다르기 때문에 사실 뭐가 뭐다 이렇게 명확히 구분 짓는 기준도 명확하지 않아 보이지만 그래도 구분을 해보자면 아래 정도로 구분이 가능하지 않을까 싶다.
# 1.1 Status Bar
안드로이드 Material Design 가이드 수정본래 윈도 하단의 상태 표시줄로 통용된 Status Bar은 그래도
모바일 환경에서는 iOS와 안드로이드를 구분하지 않고 상단의 상태창(Status Bar)으로 통용되어 사용되는 듯하다.
# 1.2 Navigation Bar
내비게이션 바는 정보를 위계적으로 혹은 콘텐츠의 화면을 이동할 수 있도록 돕는 인터페이스로 정의되는데,
상단 그림의 App Bar와 Navigation Bar 혹은 Tab Bar가 분리된 사례에서처럼
명확하게 구분되는 개념은 아니라고 보인다.
App Bar와 Tab Bar가 내비게이션이라는 기능을 구현한다면 이들은 Navigation Bar가 될 수도 있는 것이며, Navigation Bar라는 명칭은 기능적 정의를, App Bar 혹은 Tab Bar은 형식적 정의를 의미한다고 볼 수도 있겠다.(아닐 수도 있다.. 명확히 정의된 바는 없어 보인다.)
분명한 점은 Navigation Bar는 특정 기기에서 정보들을 항해(navigate)하는 것을 지원한다는 것이다.
# 1.3 Tab Bar
iOS는 그 탄생부터 탭 바(Tab Bar)를 통한 내비게이션을 지향한다(http://bit. ly/1dZF9 Vt).
페이스북이 오랜 시간 지향하던 Side Drawer에서 Tab Bar 형태로 UI를 변경한 사례는 주목할 만하다.
(왼) 과거 Side Drawer (우) 현재 Tab Bar를 통해 네비게이션을 지원하는 페이스북(이미지 출처: https://goo.gl/C7OsmK) iOS가 이렇게 하단에 Tab Bar를 배치하는 형태의 GUI를 추구한다면
안드로이드는 상단에 Tab Bar을 배치하는 형태의 GUI를 추구한다.
Tab Bar - iOS vs Android(출처: http://goo.gl/gVDpvi)이는 안드로이드 하단에 상시 고정되어있는 History Back 버튼이 있는 Navigation Bar 때문일 것이다.
(History Back은 안드로이드를 iOS와 구분 짓는 가장 큰 특징이 아닐까 싶다. 이 얘기는 다음 편에서..)
하지만 그렇다고 안드로이드의 Tab Bar가 Navigation Bar가 아닌 것은 아니다.
기능적인 측면에서 Tab bar 역시 콘텐츠의 여기저기를 탐색하는 것을 가능하게 해주기에 Navigation Bar라고 할 수 있으며, 단지 형태적 면에서 tab적 요소를 갖추고 있기 때문에 Tab Bar로 명명되는 것이다.
# 1.4 Toolbar
앞에서 살펴본 Tab Bar는 Navigation Bar와 비슷한 기능을 지닌다.
하지만 Toolbar와 Tab bar, Navgation Bar는 구분해야 한다.
Tab bar가 모바일 앱의 주요 카테고리들을 네비게이트 하는 것이 목적이라면,
Toolbar은 특정 화면에서 가능한 행동(action)들을 제시하는 것이 목적이다.
아래 화면은 필자의 Pinterest와 Instagram 앱을 캡쳐한 화면이다.
Tab Bar와 Toolbar의 사례 - (좌) Pinterest, (우) Instagram좌측의 Pinterest 앱에서 하단의 탭 바는 전체보기, 검색하기, 알람, 내 화면 보기 각각의 카테고리로 나를 네비게이트 하기 위한 역할을 수행한다면
특정 이미지를 터치했을 때, 상단에 나타나는 툴바는 해당 이미지를 어떻게 할 것인지(좋아요, 핀 보내기, 공유)에 대한 행동(action)을 지원하기 위함이다.
물론 Tab Bar와 Toolbar의 기능이 복합적으로 하나의 바에 혼용되어 제시되기도 한다.
홈 화면으로 가기, 검색하기, 활동, 내 페이지로 가기 위한 Tab Bar의 기능과 함께,
사진 찍기라는 Toolbar의 기능을 제공하는 Instagram의 하단바가 그 사례일 것이다.
만약 Instagram처럼 특정 행동(사진 찍기)에 강하게 어필하는 앱이라면 Tab Bar에 특정 행동을 할 수 있도록 하는 기능을 추가하는 것을 당연히 고려해야 할 것이다.
Tab bar와 Toolbar를 혼용하여 사용할 때 주의해야 할 점은 강조를 위한 탭이 지나치게 강조되어 내가 현재 있는 탭보다 overwhelming 되는 그런 상황을 피해야 할 것이다.
# 2. Content Views
Bar가 그나마 앱 구성요소들 중에서 혼동되는 개념이지 나머지 요소들은 그다지 어렵지 않다.
Contents Views는 말 그래도 특정 앱에 특화된 콘텐츠를 보여주는 화면이다.
사용자가 스크롤하거나, 재배치하거나, 추가 혹은 제거하는 행동 등이 Contents View에서 가능하다.
Contents View 디자인도 유행이 있는듯 한데 최근 카드 디자인이 대표적. (이미지 출처: https://goo.gl/2T7SzZ )# 3. Temporary Views
Temporary View는 사용자에게 중요한 정보나 가능한 대안을 보여주기 위함인데
팝업 형태로 나타나는 경고창이나 알람 창이 대표적인 사례이다.
Apple은 경고창에서 두 가지 선택권을 줄 것을 추천한다. (출처:https://goo.gl/uBAQnW)# 4. Controls
모바일 UI 구성요소의 마지막은 사용자로 하여금 조정하는 것을 가능하게 하는 Control이다.
날짜나 언어를 선택할 수 있는 Picker나
상세 정보를 확인할 수 있는 info(information) 버튼,
스와이핑을 통해 페이지를 넘겨볼 때 내가 어디에 있는지를 보여주는 Page Control 아이콘,
최근 상태를 업데이트하는 Refresh Control,
음량이나 화면 밝기 등을 조절할 때 사용되는 Slider 등이 그 대표적인 사례이다.
이 외에도 다양한 Control 요소들이 존재하니 자세한 내용은 애플 개발자 홈피(https://goo.gl/AQScJS)를 참고하면 될 듯 싶다.
