[iOS] iOS 앱 하단 탭 막대(Tab Bar) / UITabBarController

iOS에서 탭 막대(Tab Bar)는 일반적으로 앱 화면의 하단에 위치한 내비게이션 요소로, 사용자가 앱의 여러 주요 섹션을 빠르고 쉽게 전환할 수 있도록 돕는 탐색 제어 요소입니다. 즉 Tab Bar는 iOS에서 사용되는 UI 컴포넌트로 앱 내에서 주요 화면이나 기능에 쉽게 접근할 수 있게 도와주고 앱 내 여러 화면 간의 빠른 탐색을 가능하게 합니다. 탭 바는 여러 개의 탭을 포함할 수 있으며, 기본적으로 아이콘과 텍스트를 함께 표시하여 사용자가 현재 선택된 탭을 쉽게 알 수 있도록 합니다. 각 탭은 다른 화면이나 기능을 연결하며, 탭 막대는 앱의 정보 계층을 단순화하고, 동등한 수준의 카테고리에 동시에 접근할 수 있도록 하는 데 유용합니다. iOS 앱 개발에서 UITabBarController를 사용하여 구현할 수 있습니다.

 

 

 

iOS 앱 하단 탭 막대(Tab Bar)

 

주요 특징 및 디자인 가이드라인

• 탭(Tab) : 여러 개의 탭 아이템이 포함되며, 각 아이템은 다른 화면이나 기능으로 연결된다. 각 탭은 특정 화면이나 기능을 나타낸다.
• 탐색 전용 : 탭 막대는 앱 내 탐색을 위해 사용된다. 현재 화면의 콘텐츠에 대한 특정 작업을 수행하는 데 사용되는 도구 막대(Toolbar)와는 명확히 구분된다.
• 간편한 내비게이션 : 사용자가 앱 내에서 여러 화면을 빠르게 전환할 수 있도록 돕는다.
• 지속적인 가시성 : 앱의 어떤 화면에 있든 항상 같은 위치에 표시되어 사용자가 언제든지 다른 주요 섹션으로 이동할 수 있게 해 준다. 사용자가 앱의 다른 섹션으로 이동하더라도 탭 막대는 항상 화면에 표시되어야 한다. 다만, 모달 뷰(일시적이고 독립적인 화면)가 나타날 때는 예외적으로 가려질 수 있다.
• 주요 기능 접근 : 앱의 핵심적인 기능이나 콘텐츠 카테고리로 직접적인 접근을 제공한다. 예를 들어, 사진 앱의 '라이브러리', '앨범', '검색' 탭이 이에 해당한다. 사용자가 앱 내에서 헤매지 않도록 일관된 탐색 구조를 제공한다.
• 비계층적 구조 : 탭 나는 계층적 탐색(내비게이션 바)과 달리, 서로 다른 기능을 평면적으로 배치하는 데 사용된다.
• 탭 수 최적화 : 너무 많은 탭은 사용자 경험을 복잡하게 만들고, 탭을 선택하는 데 필요한 영역을 줄일 수 있다. iPhone에서는 일반적으로 3~5개의 탭을 사용하는 것을 권장한다. 탭이 5개를 초과하면, 마지막 탭이 "더 보기(More)" 탭으로 자동으로 생성되어 하위 메뉴를 제공하고 나머지 항목들을 별도의 목록으로 보여준다.
• 일관성 유지 : 각 탭은 고정된 위치를 유지하며, 탭을 선택하면 해당 뷰로 전환되지만 탭 바 자체는 그대로 남아 있다. 탭의 내용이 일시적으로 비어 있더라도 탭 버튼을 비활성화하거나 숨겨서는 안 된다. 탭의 가용성이 일정하지 않으면 앱 인터페이스가 불안정하고 예측 불가능하게 느껴질 수 있다.
• 탭 바 스타일 : 탭 바는 화면의 하단에 고정되며, 기본적으로 모든 화면에서 동일하게 표시된다. 탭 바의 스타일을 UITabBarController를 사용하여 설정한다.
• 아이콘 및 텍스트 : 각 탭은 일반적으로 아이콘과 함께 짧은 텍스트 레이블을 포함하여 그 기능이나 내용을 시각적으로 명확하게 나타낸다. 텍스트는 선택된 상태에서 강조되며, 아이콘은 일반적으로 크기가 작다.
• 간결한 레이블 : 탭 아이콘 아래나 옆에 표시되는 레이블은 탭의 콘텐츠나 기능을 명확하게 설명해야 한다. 가능하면 한 단어로 된 간결한 명사를 사용하는 것이 좋다.
• 동작 금지 : 탭을 눌렀을 때 특정 작업을 실행하거나 일시적인 상태를 보여주는 용도로 사용해서는 안된다. 탭은 단순히 화면 전환의 용도로만 사용해야 한다.
• 활성 상태 표시 : 사용자가 현재 어떤 탭에 있는지 명확하게 보여주기 위해 현재 선택된 탭은 색상 변경, 하이라이트, 아이콘 굵기 변화 등을 통해 활성 상태임을 명확히 보여준다.
• 재사용성 : 탭 바는 다른 화면으로 이동해도 그 상태를 유지해야 한다. 예를 들어, "검색" 탭에서 다른 화면으로 갔다가 다시 돌아와도 검색 결과가 그대로 유지되어야 한다.
• 뱃지(Badge) 활용 : 탭의 새로운 정보나 업데이트된 정보가 있음을 알리기 위해 뱃지(숫자나 느낌표가 포함된 빨간색 원형)를 표시할 수 있다. 뱃지는 중요한 정보에만 사용하여 그 의미를 희석시키지 않도록 해야 한다.
• 애니메이션 지원 : 탭 전환 시 애니메이션 효과를 적용할 수 있다.

 

사용 예시

• 홈 화면 탭 : 사용자가 메인 화면으로 돌아가도록 하는 탭. 일반적으로 앱의 주요 기능들을 빠르게 접근할 수 있는 화면.
• 검색 탭 : 검색 기능을 제공하는 탭. 사용자가 원하는 항목을 검색할 수 있는 화면.
• 설정 탭 : 애플리케이션의 설정을 관리할 수 있는 화면.
• 알림 탭 : 새로운 알림이나 메시지를 확인할 수 있는 화면.

 

---

UITabBarController는 iOS에서 화면 하단에 탭을 통해 다양한 뷰 컨트롤러를 전환할 수 있도록 도와주는 컨트롤러입니다. 주로 여러 화면을 간단히 전환할 수 있는 기능을 제공하여, 앱 내에서 화면 이동을 직관적으로 만들 수 있습니다. 예를 들어, SNS 앱에서 홈, 검색, 알림, 프로필 등의 탭을 사용할 때 주로 활용됩니다.

 

 

 

애플 알람 앱의 기존 탭바 구성

 

주요 특징 및 역할

• 컨테이너 뷰 컨트롤러 : UITabBarController는 그 자체로 하나의 뷰 컨트롤러지만, 여러 개의 다른 뷰 컨트롤러를 자식(child)으로 포함하고 관리한다.
• 탭 기반 내비게이션 : 각 자식 뷰 컨트롤러는 탭 바의 탭 아이템에 연결된다. 사용자가 탭을 선택하면 해당 탭에 연관된 뷰 컨트롤러의 화면이 표시된다.
• 탭 바 생성 : UITabBarController는 여러 개의 UIViewController를 탭 바에 배치하여 화면 전환을 쉽게 할 수 있다.
• 탭 바 아이템 : 각 UIViewController에 해당하는 UITabBarItem을 설정하여 각 화면을 설명하는 아이콘과 텍스트를 표시할 수 있다.
• 탭 전환 : 사용자가 탭을 선택할 때마다 자동으로 관련된 화면이 표시된다. 탭을 탭할 때마다 뷰 컨트롤러의 생성, 전환, 해제 등을 UITabBarController가 자동으로 처리한다. 개발자는 각 탭에 표시될 뷰 컨트롤러만 지정해 주면 된다.
• UITabBarItem : 탭 바에 표시되는 개별 버튼을 의미한다. 각 탭 아이템은 제목, 아이콘, 선택 상태 등을 설정할 수 있으며, 해당 뷰 컨트롤러의 UITabBarItem 속성에 할당하여 사용한다. 커스터마이징이 가능하다.

 

탭바 컨트롤러의 주요 뷰

 

 

iOS 탭 바 구현 방법

• UITabBarController 사용 : iOS에서는 UITabBarController를 사용하여 탭 바를 쉽게 구현할 수 있다. UITabBarController는 여러 개의 자식 뷰 컨트롤러를 탭으로 표시하여 사용자 인터페이스를 구성한다. 각 탭에 다른 뷰 컨트롤러를 연결하여 탭을 전환할 때마다 해당하는 화면으로 이동할 수 있게 한다.
• Tap Bar Customization : Tap Bar는 기본 스타일을 제공하지만, 아이콘, 제목, 배경색 등을 커스터마이즈 하여 탭 바의 디자인을 변경할 수 있다. 예를 들어, 아이콘을 변경하거나 탭 바의 스타일을 translucent로 설정할 수 있다.
  • 아이콘 변경 : UITabBarItem을 사용하여 아이콘을 설정.
  • 선택된 색상 변경 : 탭 바의 선택된 색상 등을 UITabBar의 속성을 변경하여 커스터마이징 할 수 있다.
  • 스토리보드 : 스토리보드에서 Tab Bar Controller를 추가하고 뷰 컨트롤러들을 연결하는 가장 일반적인 방법이에요. 각 탭 아이템의 이미지와 제목을 설정할 수 있다.
  • 코드로 구현 : 코드를 통해 UITabBarController의 속성을 직접 설정하여 탭 바의 색상, 폰트, 아이콘 등을 세밀하게 제어하거나, 탭 선택 시 발생하는 이벤트를 처리할 수 있다. 예를 들어, UITabBarControllerDelegate를 사용하여 탭이 선택될 때마다 특정 동작을 실행하도록 만들 수 있다.

let tabBarController = UITabBarController()

// 각 탭에 해당하는 뷰 컨트롤러를 생성
let firstViewController = UIViewController()
firstViewController.tabBarItem = 
UITabBarItem(title: "홈", image: UIImage(named: "home_icon"), tag: 0)

let secondViewController = UIViewController()
secondViewController.tabBarItem = 
UITabBarItem(title: "검색", image: UIImage(named: "search_icon"), tag: 1)

tabBarController.viewControllers = [firstViewController, secondViewController]

위 코드로 두 개의 탭을 가진 간단한 UITabBarController를 만들 수 있다. 각 탭은 "홈"과 "검색" 아이콘을 가지고 있으며, 해당 탭을 선택할 때마다 다른 화면을 표시한다.

 

 

---

 

간단 요약

TapBarController 언제 사용?

앱에서 더 많은 뷰를 보여주고 싶을 때

 

iOS에서 탭 바는 어떻게 구현?

• 코드, 스토리뷰 둘 다 구현 가능.
• UITabbarController를 이용하며, UITabbarController는 여러 뷰 컨트롤러를 세팅할 수 있다.
  • setViewControllers() 메서드를 이용해서 코드로 설정 가능.
  • viewControllers 프로퍼티로 확인 가능하다.
• selectedIndex를 통해서 어떤 뷰컨트롤러를 선택되었는지 확인 가능.
• 각 Tab Bar Item에는 UITabBarItem으로 구성된다.
  • 각 뷰컨트롤러에서 image, title 프로퍼티 설정해 준다.

 

탭 바 사용 시 장점

• 빠른 탐색 : 사용자가 깊이 들어가지 않고도 앱의 핵심 기능에 즉시 접근할 수 있다.
• 일관된 사용자 경험 : 앱의 주요 섹션이 항상 동일한 위치에 있어 사용자가 쉽게 앱 구조를 파악하고 사용할 수 있다.
• 효율적인 공간 활용 : 화면 상단 영역을 다른 UI 요소(예: 내비게이션 바)를 위해 비워둘 수 있다.

 

 

---

 

 

 

iOS 앱에서 Tab Bar는 iOS Human Interface Guidelines에서 권장하는 중요한 UI 요소 중 하나이며, 필수 구현 스킬 중 하나이다. 사용하는 유명한 앱에는 화면 하단에 탭 바가 있는데, 대부분의 iOS 앱에서 핵심 내비게이션 방식으로 사용된다. 주로 여러 기능을 제공하는 앱에서 유용하게 사용되며, 사용자 경험을 크게 향상할 수 있다. 탭 바 아이템의 아이콘은 시스템 아이콘을 사용할 수도 있고, 커스텀 이미지를 사용하여 다양한 디자인을 구현할 수도 있다. 이 외에도 다양한 커스터마이징이 가능하며, 사용자가 앱을 직관적으로 탐색하고 핵심 기능에 쉽게 접근할 수 있도록 돕는 효과적인 UI를 구축할 수 있다.

 

 

참고 : 

https://developer.apple.com/design/human-interface-guidelines/tab-bars

Tab bars | Apple Developer Documentation

 

https://developer.apple.com/documentation/uikit/uitabbarcontroller

UITabBarController | Apple Developer Documentation