[iOS/Architecture] Coordinator Pattern

안녕하세요 제인입니다!

오늘은 참여하고 있는 프로젝트에 도입하게 된 코디네이터 패턴에 대해 정리해보려합니다.

코디네이터를 프로젝트에 적용해보는 것이 처음이라 공부를 하면서 적용하는 과정에 있기 때문에

이번 포스팅에서는 코디네이터 패턴이 무엇인지 알아보는 정도로만 정리하고, 다른 포스팅으로 구체적인 적용기를 들고오도록 하겠습니다!!

이 점 참고해서 읽어주시면 감사하겠습니다 : )

Coordinator Pattern을 도입하게 된 계기

MVVM 아키텍처를 적용해 UI와 비즈니스 로직 코드를 분리해서 코드를 작성하는 과정에서 화면전환은 어디서 해줘야하는거지..?

라는 의문이 들었었는데요, 화면전환이 따지고 보면 UI와 관련된 부분은 아니지만 ViewController가 다음 화면을 present 해주어야하니까..라는 생각에 VC에 화면전환 코드를 작성해준 적이 있습니다.

MVVM 아키텍처를 도입하게 된 이유가 기존 MVC 패턴에서 VC가 모든 역할을 담당하고 있었기 때문에 VC가 점점 무거워지게 된다는 단점이 있어 VC의 역할을 분리해주기 위해서였는데요, 화면전환 코드도 VC가 담당하니까 뭔가 역할 분리를 덜한 느낌...과 함께 MVVM 패턴을 제대로 적용하고 있는 것이 맞나?? 하는 생각이 들었습니다. 화면전환 코드까지 분리해서 VC는 정말 UI만 보여주는 역할만 하게 할 수 없을까? 하며 찾아보다 Coordinator Pattern으로 이러한 문제를 해결할 수 있다는 것을 알게 되었습니다!

기존의 화면 전환 방식

iOS에서는 화면 전환을 담당하는 컨트롤러인 UINavigationController가 있습니다. Stack 방식으로 새로운 화면을 push하고, 이전화면으로 돌아가가기 위해 pop하는 방식으로 동작하죠! 가장 첫 화면을 기준으로 새로운 화면으로 넘어갈때 마다 순서대로 쌓이고, 뒤로가기 버튼을 통해 이전에 방문했던 화면들을 순서대로 꺼낼 수 있습니다.

 

navigationController?.pushviewController(nextViewController, animated:true)

 

push, pop을 이용하여 쉽고 간단하게 화면을 전환 할 수 있지만, 단점이 존재합니다.

앱이 점차 커지고 화면이 많아져 화면전환 플로우가 복잡해지게 되면 네비게이션 스택관리가 어려워지고,

화면을 전환하는 코드가 사용하는 ViewController를 의존하기 때문에 VC가 무거워지게 됩니다..

이러한 단점들을 직접 느꼈기 때문에 위의 문제를 해결하기 위해서 Coordinator 패턴을 도입하게 된 것입니다!

Coordinator Pattern이란?

코디네이터 패턴은 ViewController로 부터 화면 전환의 부담을 줄여주고, 화면전환을 보다 더 관리하기 쉽도록 도와주기 위한 패턴입니다. (화면의 흐름을 제어해주는 역할, 라우팅, VC관리)

 

코디네이터 패턴을 사용하면 얻을 수 있는 장점은 무엇일까요??

coordinator 패턴을 사용하면, ViewController 사이의 결합도를 낮춰 줄 수 있습니다.

화면전환은 coordinator가 모두 관리하기 때문에, 각 ViewController는 이전에 어떤 컨트롤러가 있었는지, 다음에 어떤 컨트롤러가 오는지 알 필요가 없습니다. 오로지 coordinator만이 이것을 알고 관리하기 때문에 VC 사이의 결합도는 낮아지겠죠??

 

또한, coordinator를 이용한 화면 전환 시 ViewController에서 사용할 ViewModel을 함께 주입해줄 수 있어 DI 또한 쉽게 해결할 수 있습니다! (ViewModel을 VC 내부가 아닌 외부에 정의하도록 하여 의존성을 분리시킬 수 있습니다.)

코디네이터를 의존성 주입을 해줄 수 있는 허브라고 생각하면 이해가 쉬울 것 같습니다.

정리하자면, 코디네이터는 화면 전환 제어 담당자이자 의존성 주입을 가능하게 해주는 허브라고 할 수 있을 것 같네요!!

Coordinator Pattern의 흐름

앱 규모가 커진다면, 위와 같은 형태로 코디네이터 패턴을 적용할 수 있습니다!

물론 간단한 앱의 경우 코디네이터 하나만 두고도 화면전환을 관리할 수 있겠지만, 기존에 UINavigationController를 사용해 화면전환을 해줬던 경험을 생각해본다면, 앱의 규모가 클 경우 스택 하나만으로 화면전환이 불가능하다는 것을 이해할 수 있을 것 같습니다.

기존의 방식에서 보통 탭별로 NavigationController를 하나씩 두고 관리해주었었는데,

coordinator 패턴도 비슷하게 최상위에 MainCoordinator가 존재하고 하위에 각각의 스택(보통 탭 단위나 역할단위)을 관리하는 하위 코디네이터인 ChildCoordinator들을 두고 화면전환을 관리합니다.

 

• 최상위 Coordinator: ChildCoordinator(하위 코디네이터)를 생성하고 제거. 모든 코디네이터를 관리하는 부모 코디네이터
• ChildCoordinator: 화면 전환을 수행하는 역할

화면을 전환해야할 때, 각각의 View 담당 Coordinator에게 요청을 보내면 이 요청을 받은 Coordinator는 응답으로 화면을 전환시켜주는 방식으로 작동한다고 할 수 있는데요, 간단한 코드를 보면서 이해해봅시다!

코드로 이해해보자

 

MainViewController에서 첫번째 버튼을 누르면 FirstViewController, 두번째 버튼을 누르면 SecondViewController로 버튼에 따라 다른 화면을 보여주고, FirstViewController로 이동했을 경우에는 화면의 버튼 클릭 시 또 다른 뷰로의 전환까지 코디네이터를 이용해서 구현해보는 코드를 작성해보겠습니다! 구조는 아래 그림과 같이 MainCoordinator 밑에 두개의 하위 코디네이터들(FirstCoordinator, SecondCoordinator)을 두는 형태로 잡아보겠습니다!

protocol 생성

protocol Coordinator: AnyObject {
    var childCoordinators: [Coordinator] { get set }
    var navigationController: UINavigationController { get set }
    
    func start()
}

 

먼저, 프로토콜을 생성해줍니다.

이 프로토콜은 자식 Coordinator들을 가지고 있을 배열과 navigation 스택을 쌓을 UINavigationController 타입의 변수(화면전환시 기준이 되는 네비게이션 컨트롤러를 소유하기 위한 변수), 그리고 시작 시 실행될 함수(첫 화면을 띄워주는 메소드)를 가지고 있습니다.

MainCoordinator 정의

위에서 정의한 프로토콜을 채택하는 MainCoordinator 클래스를 생성합니다.

 

class MainCoordinator: Coordinator {
    var childCoordinators = [Coordinator]()
    var navigationController: UINavigationController
    
    init(navigationController: UINavigationController) {
        self.navigationController = navigationController
    }
    
    func start() {
        let mainViewController = MainViewController()
        mainViewController.coordinator = self
        navigationController.pushViewController(mainViewController, animated: true) // 화면전환
    }
    
    func pushFirstViewController() {
        let firstCoordinator = FirstCoordinator(navigationController: navigationController)
        firstCoordinator.parentCoordinator = self
        childCoordinators.append(firstCoordinator)
        firstCoordinator.start()
    }
    
    func pushSecondViewController() {
        let secondCoordinator = SecondCoordinator(navigationController: navigationController)
        secondCoordinator.parentCoordinator = self
        childCoordinators.append(secondCoordinator)
        secondCoordinator.start()
    }
}

 

init 생성자의 인자로 navigationController를 넣어주어 초기화를 해주고 start() 메서드를 구현해 VC로 부터 화면 전환 요청을 받으면, 응답으로 첫 화면을 띄울 수 있도록 해줍니다.

간단한 예제 코드라 뷰모델을 사용하지 않는 방식으로 작성해주어 뷰모델을 주입해주는 코드가 없는데, 뷰모델이 필요한 경우에는 ViewController 생성시점에 뷰모델을 주입해주면 됩니다!!

 

다음으로, MainViewController의 버튼을 클릭하게 되면 적절한 화면으로 전환해주기 위해 새로운 메서드 생성이 필요합니다.

해당 예제에서 메인 뷰 다음으로 오늘 플로우에 대해서는 자식 코디네이터들이 관리하게 됩니다. 

이를 위해서 FirstCoordinator 객체를 생성한 후, 부모 코디네이터를 self로 설정해주고 childCoordinators에 추가해줍니다.

마지막으로, start() 메서드를 호출해주어 화면 전환 요청 시 다음 화면으로 전환할 수 있도록 해줍니다.

ChildCoordinator(FirstCoordinator, SecondCoordinator) 정의

class FirstCoordinator: Coordinator {
    var childCoordinators: [Coordinator] = []
    var navigationController: UINavigationController
    weak var parentCoordinator: MainCoordinator?
    
    init(navigationController: UINavigationController) {
        self.navigationController = navigationController
    }
    
    func start() {
        let firstViewController = FirstViewController()
        firstViewController.coordinator = self
        navigationController.pushViewController(firstViewController, animated: true)
    }
    
    func pushNextViewController() {
        let nextViewController = FirstSubViewController()
        nextViewController.coordinator = self
        navigationController.pushViewController(nextViewController, animated: true)
    }
}

 

Parent와 Child사이에 메시지를 주고 받기 위해서 child는 부모를 기억하고 있어야 하겠죠?
이 때문에 ChildCoordinator는 부모 코디네이터를 프로퍼티로 가져야 합니다. 

하지만 여기서 주의할 점은 부모 코디네이터와 자식 코디네이터가 서로를 알고 있기 때문에 메모리 참조 순환 문제가 발생하게 되는데, 이는 weak 키워드를 붙여 해결할 수 있습니다.

 

 

FirstCoordinator(메인 코디네이터에 대한 자식 코디네이터)에서는 FirstViewController와 FirstSubViewController에 대한 화면 전환 로직을 관리합니다. 그렇기 때문에, 메인 코디네이터에서와 똑같이 화면전환 요청이 오면 화면을 전환할 수 있도록 start()함수를 구현해 FirstViewController로 이동할 수 있도록 해주고, pushNextViewController()라는 함수를 추가로 생성해 FirstSubViewController로 이동할 수 있는 로직도 만들어 주었습니다.

SecondCoordinator도 동일한 과정으로 코드를 작성해주면 되는데, SecondCoordinator는 SecondViewController에 대한 화면 전환 로직만을 관리하기 때문에 start() 메서드만 구현해주면 되겠죠??

 

SceneDelegate 설정

이제 코디네이터에 대한 준비는 끝났습니다. 첫 화면을 띄워봅시다!!

 

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?
    var mainCoordinator: MainCoordinator?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        let navigationController = UINavigationController()
        mainCoordinator = MainCoordinator(navigationController: navigationController)
        mainCoordinator?.start()
        
        self.window = UIWindow(windowScene: windowScene)
        self.window?.rootViewController = navigationController
        self.window?.makeKeyAndVisible()
    }
}

 

첫 화면 설정은 SceneDelegate에서 해주면 되는데요!(iOS13 이하라면 AppDelegate에서)

 

MainCoordinator 생성을 위해 필요한 NavigationController 객체를 생성하고 이를 기반으로 MainCoordinator 객체를 생성합니다.

이후, start() 메서드를 호출하여 해당 NavigationController에 MainViewController를 push합니다.

이를 통해 앱에서 런칭이 끝나면 첫 화면인 MainViewController가 화면에 보여지게 됩니다!

MainViewController 설정

그렇다면 현재 화면에서 다음 화면으로 전환하기 위해 VC에서 코디네이터로 어떻게 화면 전환 요청을 보내는지 살펴봅시다!

 

class MainViewController: UIViewController {
    
    // MARK: Properties
    private let firstButton = UIButton()
    private let secondButton = UIButton()
    weak var coordinator: MainCoordinator?
    
    let disposeBag = DisposeBag()
    
    // MARK: Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setStyle()
        setLayout()
        tapButtonAction()
    }
    
    // MARK: UI
    private func setStyle() {
        // UI 설정
    }
    
    private func setLayout() {
        // 레이아웃 설정
    }
    
    // MARK: Action
    private func tapButtonAction() {
        firstButton.rx.tap.asDriver(onErrorJustReturn: ())
            .drive(onNext: { [weak self] in
                self?.coordinator?.pushFirstViewController()
            })
            .disposed(by: disposeBag)
        
        secondButton.rx.tap.asDriver(onErrorJustReturn: ())
            .drive(onNext: { [weak self] in
                self?.coordinator?.pushSecondViewController()
            })
            .disposed(by: disposeBag)
    }
}

 

버튼을 두 개 만들고 RxCocoa를 이용해 해당 버튼들의 터치 이벤트를 구독했습니다.

버튼의 터치 이벤트가 방출되게 되면 coordinator의 메서드를 호출하여 원하는 화면으로 전환해줍니다! (뷰모델을 사용하게 되면 뷰모델이 VC의 이벤트를 구독하는 형태이기 때문에 코디네이터의 메서드 호출은 뷰모델에서 하게 됩니다)

 

현재까지의 화면 전환 과정을 정리하자면, MainViewController를  처음에 보여주는 것은 MainCoordinator가 담당하고 있으며, MainViewController에서 First, SecondViewController로의 이동은 각각 FirstViewCoordinator, SecondViewCoordinator가 담당하고 있습니다. (MainCoordinator.push~VC() → ~ViewCoordinator.start()의 흐름으로 동작)

FirstViewController 설정

마지막으로 FirstViewController에서 FirstSubViewController의 화면전환을 살펴봅시다.

 

class FirstViewController: UIViewController {

    // MARK: Properties
    private let titleLabel = UILabel()
    private let nextButton = UIButton()
    weak var coordinator: FirstCoordinator?
    
    let disposeBag = DisposeBag()
    
    // MARK: Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setStyle()
        setLayout()
        tapButtonAction()
    }
    
    // MARK: UI
    private func setStyle() {
        // UI 설정
    }
    
    private func setLayout() {
        // 레이아웃 설정
    }
    
    // MARK: Action
    private func tapButtonAction() {
        nextButton.rx.tap.asDriver(onErrorJustReturn: ())
            .drive(onNext: { [weak self] in
                self?.coordinator?.pushNextViewController()
            })
            .disposed(by: disposeBag)
    }
}

 

위에서 했던 것과 동일한 방식으로 RxCocoa를 이용해 해당 버튼의 터치 이벤트를 구독해 이벤트 방출 시 coordinator의 메서드를 호출하여 다음 화면으로 전환해줍니다. 방식은 동일하지만, 다음 화면인 FirstSubViewController로의 이동은 동일한 코디네이터(=FirstCoordinator)가 관리하기 때문에 여기서는 pushNextViewController() 함수 호출 시 별도의 코디네이터 생성 없이 화면전환이 이루어 진다는 점이 앞에서 봤던 화면 전환 과의 차이점입니다!

 

전체적으로 어떻게 화면 전환이 이루어지고 있는지 그림과 예시 코드로 이해가 되셨길 바라며,,

전체 코드도 같이 첨부하도록 하겠습니다!!

 

전체 코드

https://github.com/jane1choi/Coordinator-Practice

GitHub - jane1choi/Coordinator-Practice

위의 링크에서 전체 코드를 확인하실 수 있습니다!

다음 포스팅에서는 실제 프로젝트에 어떻게 적용했는지 좀 더 복잡한 플로우의 화면전환 예시를 가져와보도록 하겠습니다!!

부족한 점이 많은 글이니 조언이나 지적 환영합니다😊😊 

긴 글 읽어주셔서 감사합니다!!

 

---

[참고 자료]

[iOS] Coordinator Pattern

 

Coordinator Pattern

 

[iOS] 메이트러너: 코디네이터 패턴 적용기