내비게이션 바, 탭 바, 앱 바, 뭐가 다를까요
내비게이션의 종류와 사용방법
내비게이션의 종류
내비게이션을 위한 컴포넌트는 유독 그 이름이나 생김새가 유사하여 구별하기 어렵게 느껴집니다. 유사한 컴포넌트도 가이드마다 이름이나 역할이 다르기 때문입니다. 제목에 대한 결론은 Google의 Material 3을 기준으로 다음과 같이 정리할 수 있습니다.
내비게이션
❶ 내비게이션 바 (Navigation bar)
앱 바
❷ 상단 앱 바 (Top App bar)
❸ 하단 앱 바 (Bottom App bar)
HIG에서는 다르게 부르던데요?
반면 Apple의 HIG에서는 ❶을 탭 바(Tab bar)로, ❷를 내비게이션 바(Navigation bar)로 정의하고 있습니다. 왜 HIG에서는 내비게이션 바의 정의가 다를까요?
iOS에서의 ❷는 단순히 제목 표시뿐 아니라, 이전화면으로 돌아가거나 계층 구조를 이동하는 내비게이션의 기능을 담당하기 때문으로 생각됩니다. 서로 다른 섹션을 전환하는 ❶은 탭 바로 정의하고 있지만, 이 역시도 내비게이션의 일부로 정의하고 있습니다.
교통정리
디자인 가이드마다 당연히 다르겠으나, 일반적으로는 Material 3와 같이 ❶을 내비게이션 바로, ❷를 앱 바로 정의하고 있습니다. 물론 기업마다 내부적인 정의가 다르고, 이러한 용어에 대해 엄격히 구분하지 않는 경우도 많아 보입니다. 일반적으로는 다음과 같이 불리기도 합니다.
❶ 내비게이션 바 → GNB(Global Navigation Bar), 탭 메뉴 등
❷ 상단 앱 바 → 액션 바, 헤더(주로 웹에서 정의) 등
이어서 내비게이션 바와 앱 바의 구성, 사용방법에 대해서 이어 알아보도록 하겠습니다.
내비게이션 바 (Navigation bar)
내비게이션 바는 3~5개의 목적지에 대한 접근을 제공합니다. 내비게이션 바의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 컨테이너 (Container)
❷ 활성화 인디케이터 (Active indicator)
❸ 아이콘 (Icon)
❹ 텍스트 (Label text)
❺ 대형 배지 (Large badge, 선택 사항)
❻ 소형 배지 (Small badge, 선택 사항)
너비
내비게이션 컨테이너는 아이콘, 텍스트, 활성화 인디케이터 등 목적지를 구성하는 모든 요소를 포함합니다. 컨테이너는 각 목적지에 대해 동일한 너비의 열로 나뉘며, 각 너비는 탐색 막대의 너비를 목적지 수로 나누어 계산합니다. (4개이므로 1/4의 너비)
배경 색상
컨테이너는 색상을 채워 뒤에 있는 콘텐츠와 구분할 수 있습니다. 뒤에 충돌하는 콘텐츠가 없는 경우 컨테이너는 배경과 같은 색상일 수 있습니다.
아이콘
내비게이션 바의 목적지에는 항상 아이콘이 포함됩니다. 특히 아이콘에 명확한 의미가 없는 경우, 텍스트를 함께 사용하는 것이 좋습니다. 활성화된 목적지에는 채워진 아이콘을 사용하고, 비활성화된 목적지에는 윤곽선 아이콘 사용을 지향합니다.
채워진 아이콘을 사용할 수 없는 경우, 활성화 인디케이터를 통해 보조적인 단서를 제공할 수 있습니다. 그럼에도 가능한 경우 채워진 아이콘을 권장합니다.
내비게이션 바는 다이얼로그, 바텀 시트, 내비게이션 드로어, 키보드 등의 요소로 일시적으로 가려질 수 있습니다. 어떤 화면에서도 영구적으로 가려져서는 안 됩니다.
❶ 내비게이션 바 (작은 창 크기)
바 형태의 소형 기기의 경우 수평 공간이 매우 중요합니다. 이 경우 작은 내비게이션 바를 레이아웃 상단이나 하단에 고정하여 공간을 절약하는 동시에 주요 목적지에 쉽게 접근할 수 있도록 합니다.
❷ 내비게이션 레일 (중간 및 확장된 창 크기)
태블릿과 같은 중간 크기의 기기에서는 주요 내비게이션 요소를 레이아웃의 앞쪽 가장자리에 고정된 내비게이션 레일에 배치합니다.
❸ 내비게이션 드로어 (대형 창 크기)
노트북 및 데스크톱 기기의 웹 환경의 경우 목적지를 영구적으로 표시하거나 닫을 수 있는 내비게이션 드로어에 표시합니다. 사용자가 목적지 간에 이동해야 하는 빈도 또는 속도에 따라 계층을 할당합니다.
상단 앱 바 (Top App bar)
상단 앱 바를 사용해 탐색, 제목, 작업 등 현재 화면과 관련된 콘텐츠와 작업을 제공합니다. 상단 앱 바의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 컨테이너 (Container)
❷ 선행 탐색 아이콘 (Leading navigation icon)
❸ 타이틀 텍스트 (Headline)
❹ 후행 아이콘 (Trailing interactive icons)
유형
상단 앱 바는 4가지 유형으로 나뉩니다.
❶ 중앙 정렬
앱의 메인 페이지에 사용
앱 이름이나 페이지 타이틀을 표시하는 데 사용
❷ 소형
하위 페이지에서 뒤로 가기 탐색과 여러 작업이 필요한 레이아웃이나 스크롤 뷰에 적합
❸ 중형
스크롤하기 전 작은 상단 앱 바의 초기 상태
더 큰 타이틀을 표시하는 데 사용
❹ 대형
더 큰 상단 앱 바를 위해, 혹은 페이지 타이틀을 강조하는 데 사용
선행 탐색 아이콘
상단 앱 바에는 선택 사항인 선행 탐색 아이콘이 있습니다. 앱 바의 왼쪽에 정렬되며, 다음 형태 중 하나를 취할 수 있습니다.
내비게이션을 여는 메뉴 아이콘
이전 화면으로 돌아가는 뒤로 가기 아이콘
후행 아이콘
최대 3개의 아이콘을 타이틀 뒤, 컨테이너의 맨 끝에 배치할 수 있습니다. 가장 많이 사용되는 작업을 앞에 가깝게 배치합니다. 세 개 이상의 아이콘이 있는 경우, 덜 중요한 아이콘을 메뉴(더 보기) 아이콘으로 축소시킬 수 있습니다.
하단 앱 바 (Bottom App bar)
하단 앱 바에서는 FAB을 포함하여 최대 4개의 작업에 접근할 수 있습니다. 하단 앱 바의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 컨테이너 (Container)
❷ 더 보기 버튼 (Icon button for overflow menu)
❸ 아이콘 버튼 (Icon button)
❹ FAB (Floating action button, 선택 사항)
하단 앱 바는 모바일 기기일 때에만, 2~5개의 동작이 있는 화면에서만 사용해야 합니다. 내비게이션 바가 있는 앱이나 동작이 1개 이하인 화면에서는 사용하면 안 됩니다.
하단 앱 바는 내비게이션 바와 다릅니다. 내비게이션 바는 목적지에 대한 접근을 제공하는 반면, 하단 앱 바는 목적지와 작업을 모두 포함할 수 있습니다.
모든 제품이 하단 앱 바를 사용해야 하는 것은 아닙니다. 제품에 더 많은 아이콘 버튼, 목적지 등이 필요한 경우, 하단 앱 바에 강제로 넣기보다는 대체 컴포넌트나 커스텀 레이아웃을 고려해야 합니다.
왼쪽 화면 캘린더 이벤트 초대장의 버튼 세트와 같이 대체 컴포넌트나 커스텀 레이아웃을 고려할 수 있습니다.
하단 앱 바에 작업을 강제로 넣으면 안 됩니다. 오른쪽 화면의 아이콘은 의미를 명확하게 전달하지 못합니다.
FAB (선택 사항)
FAB이 존재하는 경우 하단 앱 바 내부에 표시됩니다. 이 경우, 앱 바 컨테이너가 다른 콘텐츠와 분리하기 때문에 FAB의 높이는 0이고 그림자가 없습니다. FAB을 하단 앱 바 밖에 두면 닿기 어려워지므로 지양합니다.
상단·하단 앱 바의 배치
하단 앱 바와 함께 사용하는 경우, 상단 앱 바에 탐색 및 추가 작업을 제공할 수 있습니다. 앱 전체에서 작업은 두 앱 바에 걸쳐 일관되게 구성되고 구분되어야 합니다. 이에 따른 이점은 다음과 같습니다.
상단 앱 바에 탐색 항목 배치
후행 액션으로 단일 더 보기 메뉴 항목을 배치
검색과 같은 작업은 앱 전체에서 일관된 위치에 배치
삭제와 같은 파괴적인 작업은 상단 앱 바에 배치
마치며
내비게이션 바는 주요 화면 간 빠른 전환을 위한 컴포넌트이므로 너무 많은 아이템(5개 초과)을 배치하면 복잡해질 수 있습니다. 상단 앱 바는 현재 화면의 콘텍스트를 명확하게 보여주고 뒤로 가기 및 더 보기 메뉴를 통해 탐색 및 추가 액션을 제공하지만, 많은 정보를 담으면 가독성이 떨어질 수 있습니다. 하단 앱 바는 FAB과 결합하여 유용한 경험을 제공할 수 있지만, 너무 많은 버튼을 배치하면 혼란스러울 수 있습니다.
공통적으로 너무 많은 아이템의 배치를 지양해야 하며, 적절히 사용 시 직관적이고 빠른 전환이나 효율적인 액션에 큰 도움을 줄 수 있습니다. 또한 혼재된 용어에 대해서는 억지로 구분하기보다는, 각 컴포넌트의 사용 맥락과 목적을 파악하여 팀의 목표나 커뮤니케이션에 따라 유연하게 정의할 필요가 있어 보입니다.
본 글에서는 내비게이션 컴포넌트의 구분 및 사용방법에 대해 알아보았으며, 기회가 된다면 내비게이션 레일이나 내비게이션 드로어에 대해서도 자세히 다뤄보도록 하겠습니다. 더욱 자세한 내용은 아래 가이드에서 확인하실 수 있습니다.
