네비게이션?
그게 정확히 어딘데? 1편
목적별로 다르고 OS별로 헷갈리는 네비게이션 명칭 파헤치기 (1/2)
화면 설계 혹은 디자인 시스템을 작업할 때 많이 참고하는 사이트가 있습니다. 바로 구글에서 만든 디자인 시스템인 Material Design과 애플에서 만든 Human Interface Guidelines입니다. 보통 제약이 적고 다방면으로 활용 가능한 매터리얼 디자인을 많이 참고하고 앱스토어에 배포할 경우 애플의 가이드를 많이 참고합니다.
이때 개발자, 기획자, 프로덕트 디자이너들과 소통시 통상 사용하는 컴포넌트 명칭이 있습니다. 네비게이션, 탭바, 모달, 스낵바 등... 많이 있죠. 하지만 이 명칭들을 공용으로 사용하진 않습니다. 회사마다 부르는 명칭도 다르고 앱, 웹 개발자 마다 다르게 부르기도 합니다. 그래서 헷갈리는 명칭을 정리해보기로 했습니다.
물론 Material Design(이하 M3)과 Human Interface Guidelines(이하 HIG)를 무조건 따라야 하는건 아니지만 둘다 검증된 스탠다드한 디자인 시스템이기 때문에 알아두면 좋겠죠? 우선 이번 글에선 iOS의 네비게이션에 대해 파헤쳐보겠습니다. 추가로 헷갈리는 툴바도 알아보겠습니다.
HIG와 M3의 네비게이션
HIG와 M3는 네비게이션으로 사용하는 컴포넌트를 이렇게 정리하고 있습니다.
HIG는 네비게이션으로 네비게이션바와 탭바를 사용하고 M3는 탑앱바와 바텀앱바, 네비게이션바 이렇게 3가지로 사용하고 있습니다. 먼저 iOS의 탭바와 툴바가 조금 헷갈리는데, 사용 용도가 다릅니다. 먼저 탭바와 툴바의 정의부터 살펴보겠습니다.
탭바와 툴바
탭바 : 탭바는 바의 항목을 사용하여 동일한 페이지(view)에서 상호 배타적인 콘텐츠 영역을 이동합니다.
툴바 : 툴바는 자주 사용하는 명령과 현재 페이지(view)와 관련된 컨트롤에 편리한 접근을 제공합니다.
상호배타적 이란? : ‘배타적' 이란 같은 속성이지만 서로 다른 범주 있다는 것입니다. 반면에 ‘독립적’ 이란 서로 아무런 관련이 없다는 것입니다.
즉, 탭바는 네비게이션의 기능을 하고 툴바는 도구의 기능, 액션의 기능을 합니다. HIG에서는 이 두가지 컴포넌트를 나누어 그룹핑 하였습니다. 서로간의 사용 목적이 다른 것입니다.
탭바의 특징
탭바의 목적은 작업 수행에 도움을 주는것이 아닌 탐색 활성을 위해 사용해야만 합니다. iOS 시계 앱의 알람, 스톱워치, 타이머를 생각하면 됩니다. 참고로 iOS 에서는 3~5개의 탭 사용을 권장합니다. 또한 탭은 콘텐츠가 없는 경우에도 계속 표시해주어야 합니다. 이 경우엔 해당 탭으로 이동하여 사용할 수 없는 이유를 보여주어야 합니다. 예시로 iOS 음악 앱의 경우 리스트에 음악이 없어도 지금 듣기 탭을 계속 사용할 수 있고, 지금 듣기 탭에 음악 다운로드 제안을 보여줍니다.
iOS Clock app의 탭바툴바의 특징
반면에 툴바의 목적은 항목 만들기, 필터링, 마크업과 같이 화면과 관련된 작업 수행 버튼입니다. macOS는 공간의 여유가 있어서 항목을 그룹핑 할 수 있는데 키노트 앱이 그 예시 입니다. 또한 iOS에서 특징이 스크롤이 가능한 페이지일 때 툴바는 기본적으로 반투명 배경을 갖고 있습니다. 그리고 맨 아래로 스크롤 되면 이 배경은 사라집니다. 툴바의 항목이 3개 이하라면 명확성을 위해 간결한 텍스트 레이블을 사용하는 것을 추천합니다. 캘린더 앱이 이와 같이 되어있습니다. 3개 이상의 항목은 공간 절약을 위해 심볼(icon) 사용을 추천하고 있습니다.
iOS Calendar의 텍스트 레이블탭바와 툴바의 비교는 사진앱을 예시로 보면 쉽습니다. 사진 어플리케이션이라는 공통 속성 안에서 보관함, 앨범 등 다른 콘텐츠 영역을 탐색할 수 있게 해주는 것은 탭바. 사진을 선택하면 하단에 나오는 공유, 즐겨찾기, 삭제 등의 도구 모음은 말그대로 툴바. 이제 쉽죠?
iOS의 네비게이션네비게이션
자, 그럼 네비게이션을 보겠습니다. 네비게이션의 정의는요.
네비게이션 : 앱 화면 상단에 내비게이션 바를 보여주어 콘텐츠 계층 구조를 탐색할 수 있습니다.
즉, 말 그대로 탐색을 도와주는 영역 입니다. 참고로 이 탐색 부분이 AOS와 대표적으로 다른 부분인데요, iOS는 네비게이션 바를 이용하여 뒤로가기 시 뎁스(hierarchy back)를 이동합니다. AOS 사용자는 보통 뒤로 이동할 때 하단의 시스템 네비게이션 버튼을 이용하여 액션(history back)을 사용합니다. 각 사용자별로 익숙한 방식이 다르겠죠?
참고로, 네비게이션 바는 윈도우가 없는 모바일 환경에 알맞은 UI 이기 때문에 macOS는 네비게이션 바를 사용하지 않습니다. 대신에 사이드바, 혹은 툴바의 뒤로가기 컨트롤을 사용합니다. 그리고 제목도 창의 타이틀 바에 표시합니다.
네비게이션의 타이틀
네비게이션의 제목은 앱을 탐색할 때 현재 위치를 확인하는데 도움을 주는데요, 제목 지정이 불필요하면 제목 영역을 비워둘 수 있습니다. 노트 앱의 메모들은 제목 영역이 비워져있습니다. 메모의 첫 번째 줄이 충분한 컨텍스트를 제공하기 때문이죠. 참고로 앱 이름은 타이틀로 넣는 것은 계층 구조에 유용한 정보를 제공하지 않기 때문에 제목으로 적합하지 않습니다. 타이틀 글자 수는 15자 이하를 사용하면 대부분의 화면에서 공간을 확보할 수 있습니다.
정리하자면, iOS의 네비게이션바와 탭바는 탐색용!
툴바는 컨트롤용! 이라고 보시면 됩니다!
이렇게 iOS의 네비게이션을 알아보았는데요, 추가로 궁금한점 있으시면 댓글로 남겨주세요! 프로덕트 디자이너 여러분 함께 소통하며 성장해요! 다음 글은 AOS의 네비게이션을 파헤쳐 보겠습니다. 감사합니다!
참고 사이트
이 참고 사이트에서 해당 컴포넌트에 더 상세한 가이드를 확인하실 수 있습니다.
HIG Navigation bars
https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/navigation-bars
HIG Tab bars
https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/tab-bars
HIG Toolbars
https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/toolbars
