식탁 위 의 프로그래머 : : 액션 바 와 네 비게 이 션 바 
 액션 바 와 네 비게 이 션 바 
 이런 저런 이야기 / 모바일 에 대한 잡담 2013 . 9 . 27 . 19 : 10 
 Android 의 액션 바 
 iOS 의 네 비게 이 션 바 
 액션 바 와 네 비게 이 션 바를 곰곰히 생각 해 보 다가 잡담 을 끼 적여 봅니다 . 
 액션 바 와 네 비게 이 션 바 ( ActionBar & NavigationBar ) 
 개발 을 하 게 될 때 , 기획 을 하 게 될 때 , 많이 고민 하 게 되 는 부분 이 바로 안드로이드 의 액션 바 와 iOS 의 네 비게 이 션 바 입니다 . 
 만드 는 사람 의 입장 에서 는 유저 에게 같 은 모습 으로 보여 지 면서 , 같 은 기능 , 같 은 동작 을 하 길 원하 게 되 거든요 . 하지만 , 안드로이드 와 iOS 의 차이점 들 을 생각 하 면 , 액션 바 와 네 비게 이 션 바 는 같 은 방식 으로 동작 하 게 기획 / 개발 될 수 없 는 부분 들 이 죠 . 
 이미 많 은 사람 들 에게 익숙 한 ' 네 비게 이 션 바 ' 에 비해 , 액션 바 는 얼마 전 에 야 support v 7 에서 지원 되 기 시작 해 정식 으로 사용 된 지 는 얼마 되 지 않 았 지요 . 
 이제 는 안드로이드 에서 도 support v 7 appcompat 및 Navigation drawer 에 대한 내용 이 공식 적 으로 공개 되 었 고 , 많 은 애플리케이션 들 이 이 를 사용 해 개발 하 고 있 어 이런 얘기 를 해 볼 때 가 된 것 같 네요 . ( 상위 버전 만 을 타 겟 으로 하 는 앱 들 에서 는 사용 되 고 있 었 습니다 . 하위 버전 을 지원 하 는 앱 들 에서 는 ActionBarSherlock 으로 사용 되 고 있 었 지만 요 . ) 
 개인 적 으로 저 는 액션 바 와 네 비게 이 션 바 는 ' 기본 적 인 기능 ' 은 동일 하 지만 ' 주 목적 ' 이 다르 다고 생각 합니다 . 
 둘 모두 공통 적 으로 현재 화면 이 어떤 화면 인지 를 텍스트 로 보여 주 고 , 현재 화면 에서 유저 가 할 수 있 는 중요 한 액션 을 보여 줍니다 . 
 Up caret vs Left bar button 
 우선 액션 바 의 Up caret ( 상위 기호 ) 와 네 비게 이 션 바 의 Left bar button ( 좌측 바 버튼 ) 을 보 도록 하 죠 . ( 여기 서 는 사이드 메뉴 에 대한 내용 은 배제 합니다 . ) 
 액션 바 에 는 ' 상위 계층 '( 일반 적 인 경우 ) 으로 이동 할 수 있 는 버튼 을 좌측 에 위치 시킵니다 . 
 네 비게 이 션 바 에 는 ' 이전 화면 '( 일반 적 인 경우 ) 으로 돌아갈 수 있 는 버튼 을 좌측 에 위치 시키 죠 . 
 ' 상위 계층 ' 과 ' 이전 화면 ' 이 라는 부분 에서 안드로이드 와 iOS 의 네비 게이팅 이 완전히 달라지 게 됩니다 . 화면 ( 뷰 ) 간 전환 도 완전 다른 방식 으로 동작 하 게 되 죠 . 
 네 비게 이 션 바 의 ' 이전 화면 ' 버튼 의 경우 이전 화면 이나 버튼 에 텍스트 로 표시 되 어 있 는 화면 으로 이동 하 게 됩니다 . 아이폰 / 아이패드 의 경우 홈 버튼 을 제외 한 다른 메뉴 키가 없 기 때문 에 화면 내 의 클릭 등 으로 이동 하 는 것 을 제외 하 고 는 앱 내 에서 의 네비 게이팅 은 네 비게 이 션 바 에 의존 하 게 됩니다 . 히스토리 를 보관 해 두 고 , 네 비게 이 션 바 의 좌측 버튼 으로 되돌 아 갈 수 있 는 루트 를 제공 해 주 지 않 으면 사용 자 는 혼란 에 빠지 게 되 겠 죠 . ( 어떻게 해서 도 첫 화면 으로 되돌 아 갈 수 없 게 된다는 . . ㄷ ㄷ ) 물론 개발 방식 에 따라 ' 이전 화면 ' 이 아닌 경우 도 존재 할 수 있 겠 죠 . ( 개발 하 기 나름 ) 
 액션 바 의 경우 는 네비 게이팅 에 있 어서 좀 복잡 해집니다 . 백 키 ( 소프트웨어 메뉴 키 / 하드웨어 메뉴 키 동일 ) 로 이동 할 경우 와 , ' 상위 계층 ' 으로 이동 할 경우 개념 이 달라지 죠 . 경우 에 따라 ' 백 키 ( Back Key ) 이동 ' 과 ' 상위 계층 이동 ' 이 같 은 화면 으로 이동 할 수 있 습니다 . 히스토리 를 보관 하 기 때문 에 ( BackStack ) 안드로이드 에서 의 ' 백 키 ' 는 iOS 네 비게 이 션 바 의 ' 이전 화면 으로 사용 되 는 Left bar button ' 과 비슷 한 역할 을 한다고 보 면 될 것 같 습니다 . 
 안드로이드 에서 의 네비 게이 션 중 , 같 은 계층 에서 의 뷰 전환 , 특정 상황 에서 는 ' 상위 계층 이동 ' 과 ' 뒤 로 이동 ' 이 같 은 기능 을 할 수 있 다 . 
 안드로이드 애플리케이션 구조 와 네 비게 이 션 
 일반 적 인 안드로이드 애플리케이션 은 이렇게 구성 됩니다 . ( 물론 만들 기 나름 이 지만 요 . ) 
 - 최상위 수준 뷰 ( Top level views ) 
 - 카테고리 뷰 ( Category views ) 
 - 세부 / 편집 뷰 ( Detail / Edit views ) 
 ( 안드로이드 디자인 가이드 - 앱 구조 참고 ) 
 일반 적 인 안드로이드 앱 이 라면 이런 앱 구조 안 에서 화면 을 전환 하 며 네비 게이 션 을 해 줍니다 . 
 1 ) 최상 이 수준 뷰 는 상위 버튼 ( Up caret ) 을 표시 하 지 않 고 , 2 ) 시스템 이전 키 는 사용 차 가 최근 본 화면 을 역순 으로 탐색 하 는 데 이용 하 며 , 3 ) 이전 에 봤 던 화면 이 현재 화면 의 계층 적 부모 라면 ' 이전 키 ' 를 누르 는 것 과 ' 상위 버튼 ' 을 누르 는 게 동일 한 결과 를 가져오 고 , 4 ) 같 은 계층 의 뷰 간 전환 이 일어났 을 때 는 , ' 이전 키 ' 와 ' 상위 버튼 ' 이 같 은 결과 를 가져오 고 , 5 ) 경우 에 따라 , 같 은 계층 뷰 간 전환 이 일어나 더라도 ' 기록 ' 을 남기 는 경우 , ' 이전 키 ' 와 ' 상위 버튼 ' 은 각각 동작 하 게 되 고 , 6 ) 외부 앱 에서 진입 한 경우 , ' 이전 키 ' 는 외부 앱 으로 돌아가 지만 ' 상위 버튼 ' 은 현재 앱 의 하이 라키 에서 상위 계층 으로 이동 할 수 있 으며 , 7 ) 하나 의 앱 내 에서 카테고리 뷰 를 건너뛰 고 ' 최상위 뷰 ' > ' 디테일 뷰 ' 로 이동한 경우 에 도 , ' 이전 키 ' 는 최상위 뷰 로 되돌 아 가 도록 하 지만 , ' 상위 버튼 ' 은 카테고리 뷰 로 이동 할 수 있 도록 해 주 는 거 죠 . 
 이외 에 도 상황 에 따른 여러 가지 네비 게이 션 에 대해서 는 안드로이드 디자인 가이드 - 네비 게이 션 을 참고 하 도록 하 죠 . 
 마지막 으로 짧 게 iOS 와 비교 하 자면 , 안드로이드 에서 는 외부 앱 에서 진입 한 경우 라도 , 해당 화면 이 ' 상위 계층 뷰 ' 를 가지 고 있 다면 , ' 상위 버튼 ' 을 통해 ' 상위 계층 뷰 ' 로 이동 할 수 있 도록 구성 되 어 있 습니다 . 어디 서 해당 화면 에 접근 했 더라도 해당 앱 에 남 아서 사용 할 수 있 도록 보장 해 주 는 것 이 지요 . ( 디자인 가이드 에 는 ' 사용 자 가 앱 내 에 남 아 있 을 수 있 도록 ( 보장 ) 해 주 는 상위 버튼 ' 이 라는 내용 이 있 죠 . ) 
 네 비게 이 션 바 는 Left bar button 을 이전 화면 으로 돌아가 는 네비 게이 션 을 위해 사용 하 기 도 하 지만 , 액션 을 위해서 사용 하 기 도 합니다 . 주로 최상위 계층 뷰 에서 ' 편집 ' 버튼 으로 쓰일 때 가 많 죠 . 추가 적 으로 Right bar button 을 통해서 도 주요 액션 을 사용 할 수 있 도록 해줍니다 . 예 를 들 자면 , + 버튼 이 라거나 , 글쓰기 , 편집 버튼 같 은 것 들 이 겠 죠 . 제한 된 화면 크기 로 인해 , 2 가지 이상 의 액션 에 는 화면 구성 상 잘 사용 하 지 않 고요 . ( 물론 여러 개 를 사용 할 수 있 고요 , 타이틀 이 짧 거나 한 경우 , 여유 롭 다면 2 ~ 3 개 를 사용 하 는 경우 도 꽤 있 습니다 . ) 
 액션 바 는 이름 그대로 Action 이 라는 주목적 을 위해 존재 한다고 생각 됩니다 . 
 여기 서 의 액션 은 ' 뷰 간 전환 ' 이나 말 그대로 의 ' 액션 ( 글쓰기 , 탐색 등 ) ' 이 될 수 있 습니다 . 기본 적 인 액션 에 대해서 는 네 비게 이 션 바 와 크 게 다르 지 않 습니다 . 해당 뷰 에서 사용 자 에게 중요 한 액션 을 액션 버튼 을 통해 노출 하 고 사용 자 가 사용 할 수 있 도록 해 주 지요 . 
 네 비게 이 션 바 와 의 차이점 으로 는 ' 액션 버튼 의 갯 수 ' 가 화면 너비 에 따라 정해 지 고 , ' 액션 오버 플로우 ' 가 있 다는 점 입니다 . 큰 화면 이 거나 영역 이 많 을 수록 더 많 은 버튼 을 보여 줄 수 있 다는 점 은 네 비게 이 션 바 와 비슷 하 겠 지만 , 액션 오버 플로우 를 통해 ' 덜 중요 한 액션 ' 들 을 처리 함 으로써 산만 함 을 줄일 수 있 죠 . Detail 뷰 로 이동 하 게 되 는 ' 탐색 액션 ' 으로 어떤 결과 를 보여 주 려 한다면 , 탐색 후 이동 된 뷰 에서 의 ' 상위 버튼 ' 과 ' 이전 키 ' 는 동일 한 기능 을 하 게 될 거 고요 . 글쓰기 , 편집 등 의 액션 도 물론 마찬가지 겠 죠 . 여기 서 논점 이 되 야 하 는 부분 은 , 액션 바 역시 네 비게 이 션 바 와 마찬가지 로 액션 들 을 처리 하 지만 , 추가 적 인 기능 들 이 있 고 , 네 비게 이 션 바 에 비해 더 디테일 하 게 액션 버튼 들 을 처리 할 수 있 도록 해 준다는 것 입니다 . 액션 버튼 들 을 통한 화면 전환 역시 마찬가지 고요 . 
 안드로이드 액션 바 , 우측 에 고정 된 액션 오버 플로우 
 액션 바 는 ? 
 액션 바 는 애플리케이션 아이콘 ( 또는 로고 ) 및 타이틀 을 사용 해 ' 앱 에 아이덴티티 를 부여 ' 하고 , 뷰 컨트롤 을 사용 해 사용 자 에게 ' 뷰 간 전환 을 지원 ' 하 며 , 액션 버튼 을 사용 해 ' 중요 한 동작 ' 을 의도 대로 사용 할 수 있 도록 하 고 , 액션 오버 플로우 로 많이 사용 하 지 않 는 액션 들 을 처리 해 ' 산만 함 을 줄여 주 는 ' 여러 가지 역할 을 동시 에 수행 합니다 . 
 [ 안드로이드 디자인 > 패턴 > 액션 바 ] 참고 
 http : / / klutzy . github . io / android - design - ko / patterns / actionbar . html 
 액션 버튼 및 액션 오버 플로우 
 액션 버튼 은 디바이스 의 화면 너비 ( dp ) 에 따라 보여질 수 있 는 갯 수 가 달라지 게 됩니다 . 
 일정 수 이상 의 액션 버튼 을 가지 게 되 면 , 액션 오버 플로우 를 통해 노출 하 게 되 고요 . 또한 , 하드웨어 로 메뉴 키가 있 는 예전 의 디바이스 라면 액션 오버 플로우 는 노출 되 지 않 습니다 . 대신 메뉴 키를 누르 면 액션 오버 플로우 버튼 을 누른 것 과 같이 예전 의 ' 옵션 메뉴 ' 스타일 로 액션 아이템 들 이 노출 되 죠 . 
 [ 안드로이드 디자인 > 패턴 > 액션 바 : 액션 바 요소 - 액션 버튼 & 액션 오버 플로우 ] 참고 
 ActionBar Tab vs NavigationBar Tab , iOS Tab 
 이번 에 는 안드로이드 액션 바 의 탭 과 , iOS Segmented control , iOS Tab control 
 을 봐야 하 는데 . .. 
 아 . .. 방대 하 다 . 일단 . . 킵 . . ( 킵 이 되 면 언제 작성 될지 모름 . .) 
 기 . 승 . 전 . 개인 의 취향 
 글 을 정리 하 다 보 니 , 
 사실 이 말 을 하 려고 여기 까지 글 을 쓴 것 같 다는 느낌 이 . .. 
 안드로이드 와 iOS 는 기본 적 인 밑바탕 에서 의 개념 이 많이 다릅니다 . 
 안드로이드 에서 의 Activity , Fragment 가 생성 되 고 동작 하 는 방식 과 , iOS 의 ViewController 가 생성 되 고 동작 하 는 방식 은 별개 의 이야기 죠 . ( 개발 얘기 빼 려고 노력 하 며 적 었 는데 결국 은 . ..) 
 거기 에 더 해 , 액션 바 와 네 비게 이 션 바 의 사용 에 대해서 도 기본 적 으로 비슷 한 기능 을 하 지만 , 많 은 차이점 또한 가지 고 있 죠 . 
 기획 적 으로 디자인 적 으로 , 혹은 개발 적 으로 같 은 화면 을 보여 주 고 같 은 유저 경험 을 가지 게 하 고 싶 다 라는 부분 에 대해서 어느 정도 공감 합니다 만 . 
 아직 도 많 은 부분 에서 , iOS 의 성향 을 따라가 고 있 는 부분 들 을 보 면 아무래도 속상한 부분 들 이 있 죠 . 
 우리 나라 에서 안드로이드 가 상용 화 된 지도 , 얼추 3 년 이 넘 은 것 같 네요 . 
 그 동안 저 를 포함 한 사용 자 들 은 안드로이드 기반 UI 에 익숙 해졌 고 , 안드로이드 에 특화 된 UX 에 도 익숙 해져왔 죠 . 하지만 우리 나라 에서 는 아직 도 많 은 부분 에서 안드로이드 스타일 UI 와 UX 가 배제 되 고 있 다는 느낌 입니다 . 
 사실상 우리 나라 전체 스마트폰 사용 비율 중 안드로이드 가 90 % 에 육박 합니다 . 
 적어도 수치 만 으로 만 놓 고 보 자면 , 안드로이드 에 중점 을 맞춘 애플리케이션 이 되 어야 하 는 게 맞 는데도 , ' 신기 하 게 도 ' 그런 모습 들 은 보 기 힘든 경향 이 있 죠 . 
 같 은 화면 이 라 해도 iOS / 안드로이드 화면 의 구성 요소 들 이 모두 같 은 필요 는 없 다고 생각 합니다 . 
 각 플랫폼 에 적합 한 뷰 들 을 사용 하 고 , 사용 자 에게 동일 한 결과 를 이끌 어 내 는 게 더 사용 자 친화 적 이 라고 생각 하 고요 . 
 더욱이 저 는 안드로이드 , 아이폰 을 동시 에 쓰 는 사용 자 는 많 지 않 다는 견해 고요 . 이렇게 사용 하 는 사람 들 은 저 처럼 대부분 IT 관련 업계 종사자 들 이 고요 . 많 은 모바일 애플리케이션 서비스 관련 업종 종사자 들 조차 하나 의 플랫폼 에 특화 된 디바이스 를 사용 하 는 것 도 심심찮 게 볼 수 있 습니다 . 일반 사용 자 라면 , iOS 와 안드로이드 애플리케이션 의 화면 구성 차이 라거나 , UX 차이 에 대해 모르 고 있 을 수 도 있 습니다 . 어떻 게 보 면 , ' 사용자 ' 는 모르 는 부분 에 대해서 ' 우리 ' 가 너무 예민 하 게 ' 공통 적 ' 으로 맞추 려고 한다는 생각 도 많이 들 고요 . 
 물론 모든 애플리케이션 들 이 안드로이드 디자인 가이드 대로 만 작성 되 어야 한다는 부분 은 아닙니다 . 각 플랫폼 에 맞 는 적합 한 UX 와 구성 요소 를 , 서비스 를 만드 는 사람 들 이 이해 한 후 결정 을 하 는 정도 의 노력 은 필요 하 지 않 을까 고민 을 해 보 게 됩니다 . ( 심지어 안드로이드 디자인 가이드 에 는 ' 디자인 원칙 ' 이 라는 페이지 가 존재 하 는 데 도 말 이 죠 . ) 
 서비스 를 만드 는 개인 의 취향 이 겠 지만 , 단순히 iOS 스타일 이 더 예뻐 보인다거나 안드로이드 스타일 로 하 면 별로 같 아 보인다거나 ( 이 또한 개인 의 취향 이 죠 . 주관 적 인 거 고요 . ) 하 는 등 의 이유 로 iOS 스타일 을 따라가 기 보다 는 , 혹은 역 으로 안드로이드 스타일 이 익숙 하 고 iOS 는 별로 니까 안드로이드 스타일 하 겠 어 같 은 이야기 는 정말 재미없 고 진부 한 이야기 가 되 버리 겠 죠 . 그런 것 보다 는 ' iOS 플랫 폼 ', ' 안드로이드 플랫 폼 ' 의 관점 에서 각 UI 구성 요소 들 을 이해 하 고 , 그동안 유저 들 에게 축적 된 UX 를 이해 한 후 , 기본 적 으로 는 각 플랫폼 에 최적 화 시키 겠 지만 플러스 알파 로 , ' 우리 는 이런 특화 된 점 을 가져가 고 싶 다 . ' 가 가장 베스트 가 아닐까 생각 해 보 게 되 네요 . 
 그럼 잡담 끝 ! 
 ' 이런 저런 이야기 > 모바일 에 대한 잡담 ' 카테고리 의 다른 글 
 [ 월간 싱글 생활 연구소 3 호 ] 소문 한 번 내보 자 >_< / / ( 0 ) 
 액션 바 와 네 비게 이 션 바 ( 0 ) 
 [ 스마트폰 추천 어 플 ] 친구 의 친구 도 친구 다 ! 신 개념 SNS 링 쿤 ( Linkoon ) ! ( 0 ) 
 TAG ActionBar , Android , craoute , ios , IT , NavigationBar , nova , 네 비게 이 션 바 , 네 비게 이 션 바 액션 바 , 네 비게 이 션 바 와 액션 바 , 모바일 , 안드로이드 , 안드로이드 와 iOS , 액션 바 , 액션 바 네 비게 이 션 바 , 액션 바 와 네 비게 이 션 바 , 태그 를 입력 해 주 세요 .