네비게이션?
그게 정확히 어딘데? 2편
목적별로 다르고 OS별로 헷갈리는 네비게이션 명칭 파헤치기 (2/2)
1편 글에선 구글에서 만든 디자인 시스템인 Material Design과 애플에서 만든 Human Interface Guidelines를 많이 사용한다고 말씀드렸죠? 앱이 아니라면 제약이 적고 다방면으로 활용 가능한 매터리얼 디자인을 많이 참고하고 있습니다.
물론 Material Design(이하 M3)과 Human Interface Guidelines(이하 HIG)를 무조건 따라야 하는건 아니지만 둘다 검증된 스탠다드한 디자인 시스템이기 때문에 알아두면 좋겠죠? 이번 2편에선 M3의 네비게이션에 대해 파헤쳐보겠습니다. M2에서 변한점도 함께 살펴보겠습니다.
M3의 네비게이션
Material Guide는 기존 2버전에서 3로 트렌드에 맞게 개선이 되어 버전업을 했습니다. M3는 네비게이션 컴포넌트를 모두 한 그룹으로 지정하고 있습니다. 총 세가지 종류가 있어요.
Google Material Design의 네비게이션M3
Material 2(이하 M2)에선 앱 바와 바텀 네비게이션으로 구분되었는데, 다음 버전인 Material 3에선 바텀 앱 바 라는 새로운 항목이 생겼습니다. 바텀 앱 바는 기존의 앱 바를 top과 bottom으로 분리시킨 형태입니다. 그래서 네비게이션 컴포넌트는 탑, 바텀 앱 바와 네비게이션 바로 구분되어 있습니다.
M3의 탑 앱 바탑 앱 바
그럼 우선 탑 앱 바 부터 보겠습니다. 탑 앱 바의 정의는 이렇습니다.
탑 앱 바 : 탑 앱 바를 사용하여 탐색, 헤드라인, 관련 도구 등 현재 화면과 관련된 콘텐츠 및 작업을 제공합니다. 제공되는 정보 및 액션은 화면에 따라 변경할 수 있습니다.
탑 앱 바의 특징은 기기의 가로 사이즈와 탑 앱 바의 가로가 동일하게 채워져야 합니다. 타이틀은 앱 이름이나 페이지 제목, scrolled view의 스몰 탑 앱 바 혹은 하위 뎁스의 네비게이션으로 사용합니다.
iOS의 네비게이션 바와 유사한 컴포넌트 입니다. iOS와의 차이는 좌측 뒤로가기 아이콘 위치에 네비게이션 아이콘(햄버거 아이콘)을 넣을 수 있다는 점 입니다. 네비게이션 아이콘은 바텀이 아닌 탑에서 사용할 수 있습니다. 햄버거 버튼의 일반적인 형태이죠. 그리고 뒤로가기 버튼에 부모 페이지의 제목을 넣는 iOS와 달리 탑 앱 바는 현재 페이지 타이틀만 넣습니다.
우측의 인터랙티브 아이콘 그룹도 특징입니다. 이 아이콘은 최대 3개까지 배치하고 그 이상은 최우측의 더보기 아이콘 하위로 넣을 수 있습니다. 많이 사용하는 순서대로 배치해야 합니다.
M3의 바텀 앱 바바텀 앱 바
바텀 앱 바 : 탑 앱 바와 동일한 기능을 갖고 있고 스크롤 시 숨겨지는 등 노출 형태를 보다 유동적으로 전환할 수 있습니다.
바텀 앱 바는 탑 앱 바와 동일한 스타일을 갖고 하단으로 내려온 형태 입니다. 특징은 좌측의 아이콘을 최대 4개 배치할 수 있고 선택사항으로 우측에 FAB을 배치할 수 있습니다. 단, 바텀 앱 바가 있을 경우 FAB은 반드시 바텀 앱 바에 포함되어야 합니다. M2의 바텀 앱 바는 FAB을 포함시키지 않았던 점이 차이가 있습니다. 하단 바에 걸쳐있던 형태였었죠. 앱 바에 elevation 8dp도 적용하여 구분짓고 있었습니다.
M2의 바텀 앱 바
M3 바텀 앱 바는 스크롤 시 숨겨질 수 있고(FAB이 있었다면 스크롤 다운 시 바텀 앱 바가 아래로 사라지면 기본 FAB처럼 분리, 스크롤 업 시 원래 형태로 FAB 포함) 콘텐츠에 따라 툴(아이콘) 들이 전환될 수 있습니다.
스낵바의 위치
AOS의 스낵바는 탑 앱 바를 포함시키면 안됩니다. 스낵바는 항상 하단에서 올라오는데, 멈추는 위치는 바텀 앱 바의 상단! FAB이 있다면 FAB의 상단까지 올라와서 멈추어야 합니다.
모바일 전용
그리고 모바일 키보드엔 숨겨져야 하고 키보드 위로 올라갈 수 없습니다. 키보드의 elevation 보다는 낮기때문입니다. 바텀 앱 바는 데스크톱 및 큰 화면에선 사용성이 떨어지기 때문에 사용하지 않습니다. 데스크톱과 같은 대형 화면에서 우측 하단은 시선이 가장 마지막으로 도달하기 때문에 인지가 어렵기 때문이죠.
M3의 바텀 앱 바는 iOS의 툴바와 비슷한 기능을 갖고 있습니다. 하지만 탐색과 도구 액션을 모두 포함할 수 있기에 보다 자유롭게 사용 가능합니다.
M3의 네비게이션 바네비게이션 바
다음은 네비게이션 바 입니다. iOS와 문구는 같지만 전혀 다른 용도로 사용되고 있습니다. 비교하자면 탭바와 유사한 컴포넌트 입니다. 위에있는 M3 바텀 앱바에서 탐색만 특화한 형태 입니다.
네비게이션 바 : 서비스의 탐색을 쉽게 도와주는 기능을 하고 각 항목들의 상호작용 및 중요도가 동일해야 합니다. 이 항목들은 각자 최상위 뎁스 페이지로 이동해야하고 네비게이션 바는 앱의 어디에서든 볼 수 있어야 합니다.
스타일 특징
매터리얼의 네비게이션 바는 디폴트 항목은 outlined 아이콘으로 적용하고 활성화 시 filled 아이콘에 pill 형태의 활성 인디케이터를 표시해야 한다는 가이드가 있습니다. 네비게이션은 앱의 어디에서나 접근 가능해야 하고 iOS와 동일하게 항목을 3~5개 까지 넣을 수 있습니다. 앱의 최상위로 보여지는 항목이기 때문에 상세한 스타일 가이드가 있습니다.
네비게이션 바와 탭
또한 iOS의 탭바와 동일하게 상호 배타적이어야 하고 공통의 주제를 공유한다면 M3의 탭을 활용해야 합니다. 그리고 항목이 3개 미만일 경우에도 M3 탭을 활용해야 합니다. 참고로 탭의 위치는 탑 앱 바의 하단에 위치합니다.
FAB의 활용
M3의 FAB과 네비게이션 바FAB과 같이 사용할 수 도 있습니다. 이 경우 바텀 앱 바와 달리 네비게이션 바에 포함시키지 않고 분리해야 합니다. 네비게이션 바는 탐색을 위한 컴포넌트이기 때문이죠.
모바일 전용
iOS의 툴바와 비슷하게 AOS 네비게이션 역시 데스크탑에선 사용하지 않습니다. 큰 화면에선 이에 맞는 적절한 네비게이션을 사용해야 합니다. 태블릿에선 네비게이션 rail이 적절하고, 데스크탑에선 네비게이션 drawer가 적절합니다. iPadOS, macOS에서는 사이드바가 있었죠.
정리하자면, AOS의 네비게이션 바는 탐색용!
탑 앱 바와 바텀 앱 바는 컨트롤용! 이라고 보시면 됩니다!
이렇게 총 2편에 걸쳐 iOS와 AOS의 네비게이션을 알아보았는데요, 같은 탐색 용도인 네비게이션이지만 말하는 위치가 서로 다른 등의 차이가 있죠! 하지만 가이드는 가이드일 뿐! 철칙으로 따라야 하는 건 아닙니다. 단지 소통할 때 "이 컴포넌트는 AOS의 바텀 앱 바와 비슷한 형태에요!" 이렇게 꼬집어서 말한다면 아마 상대방이 참고하기 쉬울것이라 생각합니다!
추가로 궁금한점 있으시면 댓글로 남겨주세요! 프로덕트 디자이너 여러분 함께 소통하며 성장해요!
감사합니다
참고 사이트
이 참고 사이트에서 해당 컴포넌트에 더 상세한 가이드를 확인하실 수 있습니다.
M3 Top app bar
https://m3.material.io/components/top-app-bar/overview
M3 Bottom app bar
https://m3.material.io/components/bottom-app-bar/overview
M3 Navigation bar
https://m3.material.io/components/navigation-bar/overview
