[UI/UX Challenge] Tab Bar

Yi Joon Choi·2021년 11월 10일
1

iOS UI/UX Challenge

목록 보기
2/2
post-thumbnail

1. 탭바가 뭐람

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

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

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

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

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

탭바는...

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

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


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

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

    탭바가 화면 이동을 담당한다면, 툴바는 현재 화면과 관련된 항목 추가, 삭제, 주석추가, 사진촬영과 같은 액션을 보여줍니다.
  1. 기능을 사용할 수 없더라도 탭을 제거하거나 비활성화 하지 마세요
  • 모든 탭이 항상 사용 가능한지 확인하고 탭의 컨텐츠를 이용할 수 없을 경우, 그 이유를 설명하세요.
  • 예시) iOS기기에 노래가 없는 경우 음악 앱 내의 음악 탭에 노래 다운로드 방법이 설명되어 있습니다.
  1. 탭이 너무 적어도, 많아도 안됩니다
  • 탭을 추가할때마다 사용할 수 있는 영역이 줄어들고 앱의 복잡성이 커져 정보를 찾기가 어려워집니다.
  • 필수 탭만 포함하고 정보 계층에 필요한 최소 탭을 사용하세요.
  • 인터페이스가 단절된것처럼 느껴질 수 있으므로 탭이 너무 적어도 문제가 될 수 있습니다.
  • 일반적으로 아이폰에서는 3-5개의 탭 사용을 권장합니다. (아이패드에서는 추가할 수 있습니다.)
    - 혹시 탭 5개이상을 권하지 않는 이유가 궁금하지 않나요?
    - 보통 핸드폰을 할때 사용자들이 엄지로 많이 핸드폰을 하는 것을 볼 수 있죠.
    - 탭바 하나의 크기는 기기의 가로사이즈를 동등하게 나눠서 정하는데, 5개가 넘어가면 탭 하나의 크기가 엄지에 들어오지 않을 가능성이 높다고 합니다.
    - 페이스북 앱이 탭이 6개 인데, 탭이 4개인 알람 앱과 비교해보면 확연히 탭 하나의 사이즈가 작다는 것을 알 수 있죠!

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

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

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

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

  1. 필수적인 화면만 탭바에 추가하세요.
  • 불필요한 화면들을 탭바에 추가한다면 사용자에게 혼란을 줄 수 있습니다.
  • 앱 사용시 꼭 사용자가 필수적으로 머물러야 한다고 판단되는 화면들만 탭바에 추가해야합니다.
  • 이것의 연장선으로... 탭바의 갯수를 줄이려면 관련이 있는 화면들을 하나로 모으는것이 좋겠죠?
  • 예를들면 "Pinterest" 에서 업데이트와 메세지를 "Notification" 탭에서 한꺼번에 보여주는 것처럼 말이에요!
  1. 탭에 라벨을 포함하는 것은 선택사항입니다
  • 심플함을 추구한다면, 그리고 아이콘으로 충분히 설명이 가능하다면 탭바에 라벨을 넣지 않아도 됩니다.
  • 하지만 라벨을 넣게 된다면, 짧고 간결해야 합니다.
  1. 사용자가 어디에 위치하고 있는지 표시해야합니다
  • 탭의 아이콘 색을 바꾸거나, 커스텀탭바와 같이 움직이는 라인을 넣어줌으로서 사용자가 어느 탭에 머무르고 있는지 표시할 수 있습니다.

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
    }
}

풀코드 올립니다...

profile
최이준

0개의 댓글