Bottom Navigation: 기초, BottomNavigationView 및 TabView

Bottom Navigation란?

Bottom Navigation은 주요 앱 섹션이 화면 하단의 패널을 통해 접근 가능한 내비게이션 패턴입니다. 이 패턴은 한 손으로 사용할 수 있는 편의성 덕분에 모바일 디자인의 표준이 되었습니다. 사이드 메뉴(Drawer)와 달리 Bottom Navigation은 항상 표시되며 열기 위한 추가 제스처가 필요하지 않습니다.

Material Design 3(2026)는 Navigation Bar를 세 가지 상태를 가진 구성 요소로 정의합니다: default(아이콘 + 레이블), labeled(확대된 레이블, 하나의 활성 탭), unlabeled(아이콘만). Google은 3~5개의 동등한 섹션이 있는 앱에 Navigation Bar를 권장합니다. 6+ 섹션의 경우 — Navigation Drawer를 사용합니다. iOS SwiftUI에서 TabView는 자동으로 시스템 스타일의 하단 패널을 사용합니다.

UX Movement(2025)의 연구에 따르면 Bottom Navigation은 슬라이딩 메뉴에 비해 작업 완료 시간이 27% 개선되며, 사용자는 추가 작업 없이 모든 사용 가능한 섹션을 볼 수 있습니다. 큰 터치 대상(Android에서는 최소 48x48 dp, iOS에서는 44x44 pt) 덕분에 잘못된 탭 수가 34% 감소합니다.

Android의 BottomNavigationView(Material 3)

Android의 BottomNavigationView는 Material 3 라이브러리(com.google.android.material.navigation.NavigationBarView)의 구성 요소입니다. 이는 Material 2의 이전 BottomNavigationView를 대체하고 Material You 동적 색상, 애니메이션 활성 탭 표시기 및 내장 배지에 대한 지원을 추가했습니다. 구성 요소는 XML 메뉴를 통해 구성되며 Navigation Component와 완전히 호환됩니다.

// BottomNavigationView 및 NavHostFragment를 사용한 액티비티
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // 자동 내비게이션 동기화
        navView.setupWithNavController(navController)

        // 배지 설정
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Bottom Navigation용 XML 메뉴(res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="홈" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="채팅" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="프로필" />
// </menu>

Material 3 NavigationBarView는 세 가지 labelVisibilityMode 모드를 지원합니다: LABEL_VISIBILITY_AUTO(기본값 — 활성 탭에 레이블 표시), LABEL_VISIBILITY_LABELED(모두에 레이블 표시), LABEL_VISIBILITY_UNLABELED(아이콘만). 애니메이션 활성 탭 표시기는 사용자 정의 리플 효과와 함께 itemActiveIndicatorStyle을 통해 구성됩니다.

iOS용 SwiftUI의 TabView

TabView는 하단 내비게이션을 생성하기 위한 SwiftUI의 내장 컨테이너입니다. 각 탭은 아이콘과 텍스트와 함께 .tabItem 수정자를 사용하여 정의됩니다. TabView는 내부적으로 자동으로 UITabBarController를 생성하고 배지, 배지 색상, 전환 애니메이션 및 Dynamic Type 적응과 같은 모든 기본 패널 기능을 지원합니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("홈", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("검색", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("알림", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("프로필", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView는 .badge 수정자(iOS 15+)를 지원하며, Int(숫자 배지) 또는 String(텍스트 배지)을 허용합니다. 배지 색상은 .badgeProminence(.increased)를 통해 변경할 수 있으며, 배지가 더 밝아집니다. 탭 전환 애니메이션은 .tabViewStyle(.automatic) 또는 사용자 정의 스타일을 통해 구성됩니다. 프로그래밍 방식 전환 제어를 위해 selection과 함께 @State가 사용됩니다.

하단 및 스택 내비게이션 결합

Bottom Navigation은 단독으로 사용되는 경우가 드물며, 각 탭에는 일반적으로 스택 내비게이터(SwiftUI의 NavigationView/NavigationStack, Android의 NavHostFragment)가 포함됩니다. 이 조합은 사용자에게 섹션에 대한 빠른 액세스(Tab)와 각 섹션 내의 심층 내비게이션(Stack)을 모두 제공합니다. 이는 프로덕션 앱의 표준 아키텍처입니다.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("홈", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("검색", systemImage: "magnifyingglass")
            }
        }
    }
}

// HomeView 내부 — 스택 내비게이션
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

Android에서는 동일한 조합이 각 탭에 대한 NavHostFragment를 통해 구현됩니다. Navigation Component는 각 탭에 대한 백 스택 생성을 자동화합니다: 탭을 전환할 때 스택 상태가 유지되고, 돌아올 때 복원됩니다. 이는 Google 시스템 앱(Play Market, YouTube)과 같은 원활한 UX를 제공합니다.

Material 3: 동적 색상 및 애니메이션

Material 3(Material You)는 Bottom Navigation에 중요한 변화를 도입합니다 — 사용자의 배경화면에서 생성되는 동적 색상입니다. 시스템은 배경화면에서 지배적인 색상을 추출하고 5개의 주요 톤 팔레트를 만듭니다. NavigationBarView는 자동으로 이러한 색상을 적용합니다: 활성 탭은 기본 색상을, 비활성 탭은 onSurface 변형을 받습니다.

활성 탭 표시기 애니메이션이 부드러워졌습니다: 전환 시 표시기가 보간과 함께 새 탭 쪽으로 애니메이션됩니다. 터치 시 리플 효과는 보조 색상을 사용합니다. Material 3의 Bottom Navigation은 itemActiveIndicatorStyle을 통한 사용자 정의 애니메이션도 지원합니다 — 개발자가 모양(타원형, 직사각형), 여백 및 표시기 색상을 설정할 수 있습니다.

<!-- NavigationBarView의 활성 표시기 스타일 -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

Bottom Navigation을 위한 UX 권장 사항

Bottom Navigation을 설계할 때 사용성 연구를 고려해야 합니다. NN Group(2026): 하단 패널의 높이는 최소 56 dp, 터치 대상은 최소 48 dp여야 합니다. 레이블 텍스트는 최대 12자(라틴 문자) 또는 8자(키릴 문자)입니다. 활성 탭은 색상뿐만 아니라 아이콘 상태(채워짐 대 윤곽선)에서도 달라야 합니다.

Material Design 3는 다음 패턴을 권장합니다: 4개의 탭 — 쉬운 스캐닝에 최적; 중앙의 "+" 아이콘(FloatingActionButton) — 기본 작업용; 배지 — 사용자 작업 카운터 전용. 피해야 할 사항: 2개의 탭으로 Bottom Navigation 사용(대신 Tab Layout 사용), 탭 순서를 동적으로 변경, 중첩된 화면에서 패널 숨기기.

• 높이 — 편안한 엄지손가락 도달을 위해 최소 56 dp
• 대비 — 활성 탭이 구별 가능해야 함(색상 + 아이콘 채우기)
• 레이블 — 짧게, 1-2단어, 자르기 없음(12자 이하)
• 순서 — 고정, 가장 중요한 것에서 덜 중요한 것 순으로
• 카운터 — 사용자 알림 전용, 마케팅용이 아님