Tab Bar — 개념 설명, 모바일 앱의 탭 패널

Tab Bar란?

Tab Bar(탭 바)는 모바일 애플리케이션 화면 하단에 위치한 그래픽 인터페이스 요소입니다. 앱의 3~5개 주요 섹션에 빠르게 접근할 수 있도록 해줍니다. 각 섹션은 아이콘과 텍스트 레이블로 표시됩니다. 사용자는 탭을 눌러 해당 섹션으로 전환합니다. Tab Bar는 각 섹션 내의 모든 화면에서 계속 표시되어 일정한 진입점을 제공합니다.

Apple은 동등한 중요성을 가진 섹션에 Tab Bar 사용을 권장합니다. Human Interface Guidelines(2026)는 "Tab Bar는 3~5개의 탭을 표시합니다. 더 필요한 경우 마지막 탭이 나머지를 포함하는 '더보기' 항목이 됩니다."라고 명시합니다. Google Material Design(2026)도 동일한 목적으로 Bottom Navigation을 권장합니다 — 3~5개 항목, 활성 탭은 색상과 애니메이션으로 강조 표시됩니다.

상단 탭 바와 달리 하단 패널은 한 손으로 조작하기에 더 편리합니다 — 엄지손가락이 자연스럽게 화면 하단에 닿습니다. Nielsen Norman Group(2025)의 연구에 따르면 6인치 이상 화면의 스마트폰에서 하단 내비게이션이 상단 내비게이션에 비해 작업 완료 시간을 22% 단축시키는 것으로 나타났습니다.

iOS의 UITabBarController

UITabBarController는 탭을 통한 내비게이션을 구성하기 위한 iOS 내장 컨트롤러입니다. 각 탭은 일반적으로 UINavigationController로 구성된 자체 화면 세트를 관리합니다. UITabBarController는 시스템 반투명 배경과 전환 애니메이션을 갖춘 Tab Bar를 화면 하단에 자동으로 생성합니다.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "홈",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "검색",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "프로필",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

예제의 각 탭에는 UINavigationController가 포함되어 있어 섹션 내에서 스택 내비게이션이 가능합니다. tabBarItem은 아이콘, 제목 및 배지를 구성합니다. 시스템은 아이콘에 SF Symbols 스타일을 자동으로 적용합니다 — 다이나믹 타입 및 멀티컬러를 지원하는 Apple 표준 심볼입니다.

Android의 BottomNavigationView

BottomNavigationView는 하단 내비게이션 패널을 구현하는 Material Design Library의 Android 컴포넌트입니다. Android 13+에서는 향상된 애니메이션과 적응형 동작을 갖춘 후속 제품인 NavigationBarView가 사용됩니다. BottomNavigationView는 Material Design 3(Material You) 사양을 따르며 앱 테마, 다이나믹 색상 및 전환 애니메이션을 지원합니다.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // BottomNavigation을 NavController에 바인딩
        navView.setupWithNavController(navController)

        // 알림 탭에 배지 설정
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

BottomNavigationView 컴포넌트는 세 가지 스타일로 Material Design 3을 지원합니다: default(레이블 + 아이콘), labeled(더 큰 레이블), unlabeled(아이콘만). setupWithNavController 메서드는 패널을 Navigation Component에 바인딩하여 화면 변경 시 활성 탭을 자동으로 업데이트합니다. 배지는 getOrCreateBadge를 통해 생성되며 숫자 및 점 표시기를 지원합니다.

Tab Bar의 배지 및 표시기

배지는 탭 아이콘의 숫자 또는 점 표시기로, 알림, 새 메시지 또는 작업 수를 표시합니다. iOS에서는 UITabBarItem의 badgeValue 속성을 통해 배지가 설정됩니다. Android에서는 BadgeDrawable(Material 3) 또는 NavigationBarView의 getOrCreateBadge를 통해 배지가 관리됩니다.

배지는 강력한 참여 도구입니다: Localytics(2025)의 연구에 따르면 배지가 있는 앱은 7일차에 유지율이 18% 더 높은 것으로 나타났습니다. 그러나 배지를 과도하게 사용하면(동시에 3개 이상) CTR이 12% 감소합니다. Apple과 Google은 관련 알림에 대해서만 배지를 표시하고 섹션을 열 때 재설정할 것을 권장합니다.

Tab Bar 커스터마이징: 아이콘, 색상, 애니메이션

두 플랫폼 모두 Tab Bar에 대한 광범위한 커스터마이징 옵션을 제공합니다. iOS에서는 배경색, 활성 탭의 틴트 색상, 레이블 글꼴을 변경하고 SF Symbols 또는 사용자 정의 에셋을 통해 사용자 정의 아이콘을 추가할 수 있습니다. Android에서는 Material 3 스타일, 전환 애니메이션, 리플 효과 및 배경화면 기반 다이나믹 색상이 커스터마이징에 포함됩니다.

// iOS에서 Tab Bar 커스터마이징
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

Android에서는 BottomNavigationView 커스터마이징이 XML 속성 또는 프로그래밍 방식으로 수행됩니다. Material 3는 다이나믹 색상 개념을 도입합니다: 색상 팔레트는 사용자의 배경화면에서 생성되어 컴포넌트에 자동으로 적용됩니다. 개발자는 테마를 통해 색상을 재정의하고, 사용자 정의 표시기 애니메이션을 설정하고, 리플 효과를 구성할 수 있습니다.

// Android에서 BottomNavigationView 커스터마이징
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// XML에서: app:menu="@menu/bottom_nav_menu"
// XML에서: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

하단 내비게이션 모범 사례

Tab Bar를 설계할 때는 플랫폼 권장 사항과 사용성 연구를 따르는 것이 중요합니다. Apple HIG: 5개 이하의 탭, 간결한 텍스트, 의미론적 아이콘. Material Design: 3~5개 항목, 활성 항목 강조, 배지 카운터 99 이하. NN Group(2025): 하단 내비게이션은 섹션의 모든 화면에서 계속 표시되어야 하며, 그렇지 않으면 사용자가 컨텍스트를 잃습니다.

일반적인 실수: 6개 이상의 탭('더보기' 사용 강제 — 발견 가능성 저하), 내비게이션 중 탭 순서 변경(사용자 혼란), 중첩 화면에서 Tab Bar 숨기기(내비게이션 앵커 손실). 모범 사례에는 고정된 순서, 일관된 아이콘 및 텍스트 레이블, 사용자 작업에만 배지 사용(마케팅 목적 제외)이 포함됩니다.

• 3~5개 탭 — 과부하 없이 빠른 선택을 위한 최적의 수
• 고정된 순서 — 탭은 동적 재정렬 없이 안정적이어야 합니다
• 아이콘 + 레이블 — 섹션 이해를 위해 두 요소 모두 필요합니다
• 활성 탭 — 색상, 아이콘 또는 애니메이션으로 시각적으로 구분되어야 합니다
• 배지 — 알림에 사용하고 섹션을 열 때 재설정하세요