[CloneApp] (UIKit) toss 앱 클론코딩 - (1) TabBar 만들기

 

애플 디벨로퍼 아카데미에서 문화센터로 진행하고있는 하나의 프로그램(?) 소모임(?)에 참여중인데, 지금까지 두 개의 클론 프로젝트를 진행했지만 프로젝트 기간 겹침 + 약간의 머리정리가 안됨 + 약간의 게으름 으로 업로드하지 못했다. 오늘 시작하는 toss 앱 클론코딩은 매일매일 조금씩 개발하면서 겪었던 어려움이나 고민들을 적어보려고 한다.

---

 🟣 프로젝트 생성

코드리뷰를 같이 진행했던 멘티분이 ".gitignore"파일과 "xcodeproj" 폴더는 동일한 경로에 있어야 좋다고 말씀해주셨다. 자세한 이유는,,, 잘 못들었지만 (다시 물어보고 적어놓자!) 나중에 접근하기 편하다나..? 이런이유였던것 같다. 그래서 아래와 같이 프로젝트를 만들었다. 

원래 평소에는 아래와 같이 만들었었다. 앞으로는 위에처럼 만들것이다! 
(아래의 파일 구조는 xcodeproj 파일이 AppStoreClone 폴더 내부에 위치한다.이렇게 depth가 하나 더 들어가는 구조가 아니라, 위처럼 depth가 하나 줄어든 경로설정을 실제 개발 환경에서는 선호한다고 했다!)

X 이렇게하지말고 위에처럼 레포를 생성하자!

 

🟣 Code Base로 구현

사실 의도해서 Code Base로 구현해야지!!! 이렇게 생각한건 아니었고, 처음 Swift를 접한게 SwiftUI이기 때문에 코드로 화면을 구성하는게 더 익숙했다. 물론 storyboard를 활용하는게 더 쉽다고는 하지만 아직 크게 와닿지 않았다고 해야하나?
하지만, 추후 storyboard도 다룰줄 알아야 한다고 하니, 차차 배워보도록 하자.

나는 그래서 Main.storyboard를 삭제하고 code base로 구현했다.

 

 🟣 Tab Bar 구현

https://github.com/DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown/issues/3

[FEAT] Tab Bar UI구현 · Issue #3 · DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown

 

👾 UINavigationController vs. UIViewController

TabBar를 구현할 때 이렇게 두가지 방법이 존재했다. UITabBarController를 상속받아서, 그 안에 탭들을 구현할때 어떤 것을 상속받아 구현할지 고민이었다. 두 개에 어떤 차이점이 존재하는지 정확한 이유를 알고 써야 될 것 같았다.

https://www.zehye.kr/ios/2020/03/13/iOS_vc_navigation_vc/

UINavigationController와 UIViewController 차이점 · 지혜의 개발공부로그

내가 참고한 레퍼런스이다. 일단 이 글을 이해한 것은 아래와 같다.

• UIViewController는 모든 뷰를 단독으로 관리하기 때문에, 각 뷰컨트롤러가 다른 뷰의 데이터를 간직하지 않는다. 탭을 타고타고 넘어가는 유저들의 flow에서, 이전 탭의 데이터를 갖고있지 않아 정보의 흐름이 끊긴다고 이해했다.
• 그래서 정보의 흐름이 끊기지 않고 뷰의 전환이 가능한 navigation컨트롤러를 사용하기로 결정했다.

UINavigationController를 선택한 이유에 대해서 코드리뷰를 기다리고 있다. 멘토에게 더 정확한 답변이 달리면 포스팅을 수정해야지

1. UIViewController를 사용한 TabBar 코드

// ui view controller
private lazy var gamesViewController: UIViewController = {
        let viewController = UIViewController()
        let tabBarItem = UITabBarItem(title: "Games", image: UIImage(systemName: "gamecontroller.fill"), tag: 1)
        viewController.tabBarItem = tabBarItem
        
        return viewController
    }()

2. UINavigationController를 사용한 TabBar 코드 -- 해당 방식을 선택!

// navigation controller
private let homeViewController: UINavigationController = {
        let viewController = HomeViewController()
        let tabBarItem = UITabBarItem(
            title: "홈",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        viewController.tabBarItem = tabBarItem
        let navigationView = UINavigationController(rootViewController: viewController)
        return navigationView
    }()

모두 UITabBarController 내부에 있는 하나의 '탭'에 대한 코드이다. (자세한 건 github 참고)

 

👾 TabBar layer 수정하기 (둥근 형태의 탭바 만들기)

우선 토스의 화면을 보면 아래처럼 둥근모양의 TabBar를 가진다.

나는 이런 모양의 탭바를 가질라면 무조건 custom 이 필요할줄 알았는데, 단순히 layer cornerRadius로 수정이 가능했다.

extension TabBarController {
    func configureTabBar() {
        self.tabBar.tintColor = .label
        self.tabBar.layer.cornerRadius = 20 
        self.tabBar.layer.masksToBounds = true
        self.tabBar.layer.borderColor = UIColor.lightGray.cgColor  //테두리 색
        self.tabBar.layer.borderWidth = 0.4 //tabbar 테두리 굵기
    }
}

이렇게 레이어를 잡아서, viewDidLoad에서 메서드를 실행시켜주기만 하면 된다. 이렇게 적용시켜준 나의 결과물은 

짜잔!

아이콘들을 따로 가져올수가 없어서 최대한 비슷한 SF symbol을 이용해서 넣어주었다.

 

이 코드에서도 궁금한점이 생겨서 아래 조금 덧붙여보자면,

😈 tintcolor 란?

The first nondefault tint color value in the view’s hierarchy, ascending from and starting with the view itself.
뷰 계층에서 기본이 아닌 첫 번째 색조 색상 값으로, 뷰 자체에서 오름차순으로 시작합니다.
- 애플 공식문서

도대체 무슨소리야! 조금더 읽어보면 시스템이 계층에서 기본이 아닌 색상을 찾을 수 없는 경우, tintColor가 대신 시스템색상을 정의한다고 되어있다. 공식문서답게 와닿지 않는 설명이라서 구글링을 해본 결과, 조금 더 이해할 수 있었다.

tintColor는 시각적으로 화면 상의 어떤 요소가 활성화 되었는지 보여주는 요소라고 한다. 예를들어 NavigationBar의 아이템의 Refresh버튼이나 Back버튼을 누르면, 눌리기만 하는 것이 아니라 흰색으로 변했다가 다시 원래색으로 돌아오는 이런예시! 이런것을 가능케 하는게 바로 tintColor라고 한다. (참고래퍼런스)

 

👉 여기 아래 코드가 이해가 되지 않았다.

아래 코드를 입력했다고 왜 버튼 색이 검정색으로 변할까? 결과물은 아래 사진과 같다. 원래 탭바의 기본 색상은 파란색이다. 파란색이었다가, 아래 코드 한줄를 추가하면 검정색이 되는데, 이유가 뭐지!!

self.tabBar.tintColor = .label

.label. 부분을 red로 바꾸면, 아래처럼 바뀐다.

그럼 이제 왜 검정색인가! 를 알려면, .label을 살펴보면 되는데, opt키를 누르고 label을 클릭해보면, 이렇게 label이 UIColor이고, 텍스트 라벨의 색상이라고 나와있다. 그래서 검정색이 되는거구나!

 

👾 TabBar 높이 변경하기

tab bar 의 높이를 변경해주었다. 실제 toss의 탭바 높이는 기본 높이보다는 조금 낮은 것 같았다. 피그마로 재봤는데 67정도?

근데 내가 지금 만든 탭바는 높이가 71인데, sf Symbol이 조금 커서그런지 너무 부자연스럽게 아이콘이 위에 딱!붙어있는듯한 느낌이 들었다.

여기서 icon을 줄이는 방법을 알아보았는데, 대부분 custom tabBar로 구현하는 듯 했다. 우선 기본적인 개념부터 익히는게 나의 목표였기 때문에, custom tabBar까지는 가지 않고 그냥 내가 보기 편하게 tabBar의 height를 높여주기로 결정했다.

https://stickode.tistory.com/371

[iOS] TabBar Controller 만들기 (No StroyBoard)

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    var tabFrame = self.tabBar.frame
    tabFrame.size.height = 88
    tabFrame.origin.y = self.view.frame.size.height - 88
    self.tabBar.frame = tabFrame
}

이렇게 override func을 입력해주면 frame이 조절된다. 

👉 viewDidLayoutSubviews 가 뭘까?

이것은 view를 render하는데의 life cycle..? 이 있는것 같았다. 아래 레퍼런스를 보고 추가공부를 진행하고 다른 글에서 포스팅할 예정이다. (uikit은 이런 life cycle이라고하나.. 이런걸 이해하는게 중요한 것 같다. 뿌시자! 🤜🏻)

https://blog.naver.com/PostView.naver?blogId=soojin_2604&logNo=222437253619&parentCategoryNo=&categoryNo=64&viewDate=&isShowPopularPosts=false&from=postView 

[iOS] viewDidLayoutSubviews란? viewWillLayoutSubviews란?

 

👾 view 색상과 함께 TabBar색상이 바뀌는 버그 해결하기

tab이 잘 바뀌는지 보기 위해서 homeViewController를 생성해서 연결해줌. 해당 뷰 컨트롤러는 .blue 색상으로 적용해보았다.

// HomeViewController
final class HomeViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .blue
    }
}

이렇게 적용하고, tab bar에 연결을 해주니까 아래와 같은 버그가 발생했다.

엥 다른버튼 어디갔지? 그리고 왜 탭바 색상을 먹어버리는거지???
도저히 모르겠어서 뷰 hierachy를 살펴보았다.

왜 이렇게 변하는걸까? 아직은 이게 왜 이렇게 변하는가? 에 대한 해답은 찾지 못했다. (아시는분 알려주세요 흡..)

그래서 일단, tabBar에 backgroundcolor를 주는 방향으로 바꿔서 일단 버그는 해결했다. github pullrequest를 날릴때 질문에도 써놨는데, 이렇게 해결하는 방법이 맞는 방법인지 의문이다.

extension TabBarController {
    func configureTabBar() {
        self.tabBar.tintColor = .label
        self.tabBar.layer.cornerRadius = 20
        self.tabBar.layer.masksToBounds = true
        self.tabBar.layer.backgroundColor = UIColor.systemBackground.cgColor // 여기서 해결
        self.tabBar.layer.borderColor = UIColor.lightGray.cgColor
        self.tabBar.layer.borderWidth = 0.4
    }
}

 

 🟣 Tab Bar 완성본

이렇게 해서 최종 tabbar 구현 UI는 아래와 같다. (홈에만 green 색상을 넣은 viewcontroller를 연결시켜놨다! 나머지는 빈 view).
탭바를 구현한 최종 코드는 아래 깃허브에서 확인 가능하다.

https://github.com/DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown/pull/4

[ADD] Tabbar UI 구현 by deslog · Pull Request #4 · DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown

 

 

다음 포스팅은 오늘 가졌던 의문에 대한 포스팅과 코드리뷰받은 부분에 대해서 어떻게 수정해나가는지 작성할 것이다!