[UI/UX Challenge] Tab Bar

Yi Joon Choi·2021년 11월 10일

iOS UI/UX Challenge

목록 보기

2/2

1. 탭바가 뭐람

❗️탭바는 스크린의 맨 밑에 위치하며, 사용자에게 앱이 제공하는 정보나 기능의 이해를 돕습니다.

A tab bar appears at the bottom of a screen, helping people understand the types of information or functionality an app provides.

기본적으로 탭바는 반투명합니다.

뒤에 콘텐츠가 있을 때 → 반투명한 탭바에 배경으로 사용됩니다.

뒤에 콘텐츠가 없을 때 → 콘텐츠가 배경으로 사용되지 않습니다.

탭바는...

투명도와 배경색을 가질 수 있으며
모든 화면에서 동일한 높이를 유지하고
키보드가 나타나면 사라집니다.

❗️일반적으로 앱에서 정보를 구성하는데 탭바를 사용합니다.

2. 애플에서 제안하는 탭바 사용 규칙

화면이동 (Navigation) 에만 탭바를 사용하세요

화면 이동이 아닌 작업을 수행하는데 탭바를 사용하지 마세요.
현재 화면에 적용되는 컨트롤을 제공해야 할 경우, ToolBar를 사용하세요!
툴바는 탭바와 같이 화면 하단에 위치합니다.

탭바가 화면 이동을 담당한다면, 툴바는 현재 화면과 관련된 항목 추가, 삭제, 주석추가, 사진촬영과 같은 액션을 보여줍니다.

기능을 사용할 수 없더라도 탭을 제거하거나 비활성화 하지 마세요

모든 탭이 항상 사용 가능한지 확인하고 탭의 컨텐츠를 이용할 수 없을 경우, 그 이유를 설명하세요.
예시) iOS기기에 노래가 없는 경우 음악 앱 내의 음악 탭에 노래 다운로드 방법이 설명되어 있습니다.

탭이 너무 적어도, 많아도 안됩니다

탭을 추가할때마다 사용할 수 있는 영역이 줄어들고 앱의 복잡성이 커져 정보를 찾기가 어려워집니다.
필수 탭만 포함하고 정보 계층에 필요한 최소 탭을 사용하세요.
인터페이스가 단절된것처럼 느껴질 수 있으므로 탭이 너무 적어도 문제가 될 수 있습니다.
일반적으로 아이폰에서는 3-5개의 탭 사용을 권장합니다. (아이패드에서는 추가할 수 있습니다.)
- 혹시 탭 5개이상을 권하지 않는 이유가 궁금하지 않나요?
- 보통 핸드폰을 할때 사용자들이 엄지로 많이 핸드폰을 하는 것을 볼 수 있죠.
- 탭바 하나의 크기는 기기의 가로사이즈를 동등하게 나눠서 정하는데, 5개가 넘어가면 탭 하나의 크기가 엄지에 들어오지 않을 가능성이 높다고 합니다.
- 페이스북 앱이 탭이 6개 인데, 탭이 4개인 알람 앱과 비교해보면 확연히 탭 하나의 사이즈가 작다는 것을 알 수 있죠!

티나지 않게 알림을 전달하려면 배지를 사용하세요

새 정보를 나타내기 위해 탭에 배지 (흰색 텍스트와 숫자 또는 느낌표가 포함된 빨간색 타원)을 표시할 수 있습니다.

3. 조금 더 나은 탭바를 만들기 위한 몇가지 팁

❗️조금 더 나은 탭바를 만들기 위해서는?

필수적인 화면만 탭바에 추가하세요.

불필요한 화면들을 탭바에 추가한다면 사용자에게 혼란을 줄 수 있습니다.
앱 사용시 꼭 사용자가 필수적으로 머물러야 한다고 판단되는 화면들만 탭바에 추가해야합니다.
이것의 연장선으로... 탭바의 갯수를 줄이려면 관련이 있는 화면들을 하나로 모으는것이 좋겠죠?
예를들면 "Pinterest" 에서 업데이트와 메세지를 "Notification" 탭에서 한꺼번에 보여주는 것처럼 말이에요!

탭에 라벨을 포함하는 것은 선택사항입니다

심플함을 추구한다면, 그리고 아이콘으로 충분히 설명이 가능하다면 탭바에 라벨을 넣지 않아도 됩니다.
하지만 라벨을 넣게 된다면, 짧고 간결해야 합니다.

사용자가 어디에 위치하고 있는지 표시해야합니다

탭의 아이콘 색을 바꾸거나, 커스텀탭바와 같이 움직이는 라인을 넣어줌으로서 사용자가 어느 탭에 머무르고 있는지 표시할 수 있습니다.

4. 구현해보자

탭바가 ... 어디보자.... 눈이 침침하네요.

저는 탭바에 배지를 올리는 것을 한번 구현해보도록 하겠습니다.

보통 앱에서 사용자가 확인하지 않은 새로운 업데이트가 있는 탭에 저렇게 배지로 몇개가 업데이트 되었는지 알려준 다음, 그 탭을 클릭한다면 배지가 없어지곤 합니다.

추가하는 방법은... 사실 탭바 파일에 코드 한줄만 추가해주시면 됩니다.

tabBar.items?[4].badgeValue = "1"

4번째 인덱스에 있는 아이템에 있는 배지 값이 1이라는 뜻입니다.

그럼 이제 어떻게 없애주냐...

//해당 탭바컨트롤러가 delegate를 사용하도록 viewDidLoad에서 위임해주시고...
self.delegate = self

extension BaseTBC: UITabBarControllerDelegate{
    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        item.badgeValue = nil
    }
}

탭바 파일에서 UITabBarControllerDelegate 프로토콜을 채택하셔야 합니다...

마치... tableViewDelegate와 같이... didSelect 함수가 몇번째 탭을 클릭했는지 알려줍니다...

만약에 사용자가 탭을 클릭했다면, 그 탭의 badgeValue를 nil로 만들어줌으로써 배지를 없애주는것이죠!

import Foundation
import UIKit

extension UITabBar {
    func addBadge(index:Int) {
        if let tabItems = self.items {
            let tabItem = tabItems[index]
            tabItem.badgeValue = "●"
            tabItem.badgeColor = .clear
            tabItem.setBadgeTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .normal)
        }
    }
    func removeBadge(index:Int) {
        if let tabItems = self.items {
            let tabItem = tabItems[index]
            tabItem.badgeValue = nil
        }
    }
    
 }

요렇게 따로 익스텐션을 만들어놓고 쓸수도 있습니다...

//
//  BaseTBC.swift
//  29th_Youtube
//
//  Created by Yi Joon Choi on 2021/10/22.
//

import Foundation
import UIKit

class BaseTBC: UITabBarController {
    
    let titles = ["홈", "Shorts", "추가", "구독", "보관함"]
    
    let defaultImages = [Const.Image.homeIcon,
                         Const.Image.shortsIcon,
                         Const.Image.plusCircleIcon,
                         Const.Image.subscriptionsIcon,
                         Const.Image.LibraryIcon]
    
    let selectedImages = [Const.Image.homeIconFill,
                         Const.Image.shortsIconFill,
                         Const.Image.plusCircleIcon,
                         Const.Image.subscriptionsIconFill,
                         Const.Image.LibraryIconFill]
    
    let views = [HomeXibVC(), ShortsVC(), PlusVC(), SubscribeVC(), ArchiveVC()]
    var VCs : [UINavigationController] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        views.forEach{
            VCs.append(UINavigationController(rootViewController: $0))
        }
        
        viewControllers = VCs
        
        viewControllers?.indices.forEach{
            viewControllers?[$0].tabBarItem = UITabBarItem(title: titles[$0], image: defaultImages[$0], selectedImage: selectedImages[$0])
        }
        
        //나중에 플러스 아이콘만 modal로 present 될 경우를 대비하여 delegate 코드 미리 추가했습니다!
        self.delegate = self

        UITabBar.appearance().barTintColor = .white
        UITabBar.appearance().tintColor = .black
        UITabBar.appearance().isTranslucent = false
        
        tabBar.items?[4].badgeValue = "1"
        
        if #available(iOS 15, *) {
            let appearance = UITabBarAppearance()
            let tabBar = UITabBar()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = .white
            appearance.selectionIndicatorTintColor = .black
            tabBar.standardAppearance = appearance;
            UITabBar.appearance().scrollEdgeAppearance = appearance
        }
    }
    
}

extension BaseTBC: UITabBarControllerDelegate{
    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        item.badgeValue = nil
    }
}

풀코드 올립니다...

Yi Joon Choi

최이준

이전 포스트