이번 포스트에서는 iOS 애플리케이션에서 탭 바(Tab Bar) 레이아웃을 활용하는 방법을 단계별로 알아보겠습니다.
탭 바란 무엇인가?
애플 공식 문서에 따르면 탭 바는 다음과 같이 정의됩니다.
탭 바는 앱 화면 하단에 표시되며, 앱 내 서로 다른 섹션 간에 빠르게 전환할 수 있는 기능을 제공합니다. 탭 바는 반투명(translucent)하며 배경 색조(tint)를 지정할 수 있고, 모든 화면 방향에서 동일한 높이를 유지합니다. 또한 키보드가 표시될 때는 자동으로 숨겨집니다. 탭 바에는 원하는 만큼의 탭을 포함할 수 있지만, 실제로 화면에 보이는 탭의 개수는 기기 크기와 방향에 따라 달라집니다.
더 자세한 내용은 애플 휴먼 인터페이스 가이드라인(Human Interface Guidelines)의 탭 바 문서에서 확인할 수 있습니다.
탭 바 컨트롤러 구현하기
그럼 본격적으로 프로젝트를 만들어 보겠습니다.
1단계: 새 프로젝트 생성
Xcode에서 새로운 Single View Application을 생성하고, 프로젝트 이름을 TabBarController로 지정합니다.
2단계: 스토리보드에 탭 바 컨트롤러 추가
Main.storyboard 파일을 연 뒤, 오브젝트 라이브러리(Object Library)에서 Tab Bar Controller를 드래그하여 추가합니다. 아래 그림과 같이 진행하면 됩니다.
3단계: 기존 뷰 컨트롤러 삭제 및 새 파일 생성
스토리보드에서 기존에 있던 뷰 컨트롤러를 삭제합니다. 그다음 New File 메뉴를 통해 SecondViewController.swift라는 이름의 새 Swift 파일을 생성합니다.
4단계: 각 탭에 클래스 연결
스토리보드로 돌아가 두 개의 뷰 컨트롤러에 각각 클래스를 할당합니다. 첫 번째 아이템(Item 1)에는 ViewController.swift를, 두 번째 아이템(Item 2)에는 SecondViewController.swift를 연결해 주세요.
5단계: 배경색 변경으로 구분하기
두 뷰 컨트롤러의 배경색을 각각 회색(grey)과 검정(black)으로 변경합니다. 이렇게 하면 탭 전환이 정상적으로 작동하는지 시각적으로 쉽게 확인할 수 있습니다.
6단계: 초기 뷰 컨트롤러 설정
빼먹기 쉬운 중요한 단계입니다. 스토리보드에서 탭 바 컨트롤러가 Initial View Controller(시작 뷰 컨트롤러)로 지정되어 있는지 반드시 확인하세요. 체크박스가 선택되어 있지 않으면 앱 실행 시 탭 바가 나타나지 않습니다.
7단계: 프로젝트 실행
모든 설정이 끝났다면 프로젝트를 빌드하고 실행합니다. 시뮬레이터에서 하단에 탭 바가 표시되고, 탭을 누를 때마다 회색과 검정 화면이 전환되는 것을 확인할 수 있습니다.
마무리
이렇게 몇 가지 간단한 단계만으로 iOS 앱에 탭 바 레이아웃을 구현할 수 있습니다. 탭 바는 사용자가 앱의 주요 기능 사이를 직관적으로 이동할 수 있게 해주는 필수적인 UI 요소이므로, 섹션이 여러 개인 앱을 개발할 때 적극적으로 활용해 보시기 바랍니다.