[iOS] Push, Present 화면 전환에 대해 알아보자.

오늘은 iOS에서 화면 전환을 하는 방식에 대해서 정리하겠습니다.

 

iOS에는 크게 소스코드를 통해서 화면을 전환하는 방식과, 스토리보드에서 Segueway를 통해 화면을 전환하는 방식이 있습니다. 이 2가지 방법에 대해 알아볼 건데, 우선 Segueway에 대해 먼저 알아보겠습니다.

 

기본 세팅

처음에는, Navigation Controller를 생성해서 아래 이미지와 같이 화면을 만들어줍니다.

 

Navigation Controller와 RootViewController 세팅

 

 

영상이 있지만, 글로도 설명을 해볼게요 :)

First!
Navigation Controller을 만들어서 같이 생성되는 RootViewController을 없애줍시다.

Second!
Navigation Controller의 Attributes inspector에서 Is Initial View Controller을 체크해줍시다. 

Last!
Navigation Controller에서 우클릭 드래그를 통해서 만들어준 View Controller에 Root View Controller로 연결해주면 끝입니다.

 

자 기본 세팅은 했으니, 이제 하나하나 버튼을 만들면서 화면 전환을 해보도록 합시다. 😋

 

 

Segueway를 통한 Push

처음 설명할 방법은, Storyboard를 통해서 소스코드 없이 세그웨이로 Push하는 방법입니다.

 

우선 Main.storyboard에 화면 이동할 ViewController를 하나 생성해줍니다. 그리고 그 안에 Push 할 버튼을 하나 만들어주시면 됩니다.

 

이제 이쪽으로 세그웨이로 Push 연결을 해야겠죠? 아래 영상처럼 우클릭 + 드래그를 통해서 화면 전환될 ViewController에 Action Segue의 Show를 클릭해서 연결해줍니다!

 

세그웨이 연결 방법

 

 

이러면 세그웨이를 통해 Push연결이 되었습니다. 이제 만들어줬던 버튼을 클릭하면 화면 전환이 되는 것을 확인하실 수 있습니다.

 

이제 상단 Back 버튼과 오른쪽 스와이프 제스처로 뒤로 가기가 될 겁니다. 하지만, 이번에는 뒤로 가기 버튼을 만들어서 뒤로 가는 방법을 알아봅시다.

 

Push 뒤로가기 버튼

뒤로 가기 버튼의 코드를 작성하기 위해, 아래의 사진과 같이 Command + N을 눌러서 뒤로 가기 코드를 작성해줄 Cocoa Touch Class 파일을 생성해줍시다.

 

Cocoa Touch Class 파일 생성

Class 이름은 원하는대로 설정해주시면 됩니다.

 

그리고 Main.storboard에 화면 전환하려는 ViewController를 선택 후 identity Inspector로 이동하여 아래 이미지와 같이 만들어준 파일명과 동일하게 하여 매칭 해줍니다. (여기서는 SeguePushViewController)

이러면 만들어준 파일에 작성하는 소스 코드가 화면 전환을 해줄 화면에 적용이 되겠죠?

 

이후에 뒤로가기 버튼을 만들어준 후, 우클릭 or Control + 좌 클릭하여 연결해준 Class 파일에 액션 함수(Action)로 정의해줍시다.

 

그리고 정의해준 액션 함수 안에, popViewController(animated:) 메서드를 사용하여 이전 화면으로 돌아가게 해 줍시다.

self.navigationController?.popViewController(animated: true)

소스 코드 이미지

 

이제 아래에 보이는 것과 동일하게 만들어준 Back!! 버튼을 누르고 나오는 화면에서 왼쪽 상단의 Back버튼과 뒤로 가기 버튼, 오른쪽으로 스와이프 3가지 방법을 통해서 화면 전환을 할 수 있습니다.

 

시연 영상

 

Segueway를 통한 Present

자 이번에는 세그웨이를 통해 Present 화면 전환을 해봅시다.

 

이번에도 동일하게 화면 전환을 시켜줄 View Controller를 생성합시다. 그리고 그 View Controller에 화면 전환 이벤트를 실행해줄 버튼을 만들어 줍시다.

 

이제 화면 전환을 담당해줄 버튼을 ViewController에 Present Modally 방식으로 연결해주시면 화면 전환이 됩니다. 이것도 매우 쉽죠?

 

Present는 Back 버튼이 없으니, 이것도 뒤로 가기 버튼을 만들어봅시다!

 

Present 뒤로 가기 버튼

Present에서 뒤로 가는 방법도 간단하니 얼른 끝내봅시다!

 

시작은 세그웨이로 Push에서의 방법과 동일하게 소스코드를 담당해줄 Cocoa Touch Class 파일을 생성해주고, Push 방법과 동일하게 파일명과 Main.storyboard에 화면 전환할 ViewController의 Class 명과 동일하게 맞춰서 연결해줍시다. (여기서는 SeguePresentViewController로 해주었습니다)

 

이제 그러면 방금 생성한 파일에 작성하는 코드들은 화면 전환할 ViewController에 적용이 되겠죠? 👍

 

그리고 동일하게 뒤로 가기 액션을 담당할 버튼을 만들어주고, 그 버튼을 Assistant를 켜서 우클릭 드래그를 통해 액션 함수(Action)로 정의해줍시다.

 

그리고 그 액션 함수 안에 아래의 코드를 작성해주시면 끝입니다!

self.presentingViewController?.dismiss(animated: true, completion: nil)

 

여기서 코드를 보면, 뒤로 가기 버튼의 코드가 위의 Push 뒤로 가기 코드와는 다른 것을 알 수 있습니다.

 

이는 Push 방법이 아닌, Present 방식으로 화면 전환을 했기 때문에 dismiss(animated : completion : ) 메서드를 사용해야 하기 때문입니다.

 

그러면 이제 아래와 같이 잘 작동하는 모습을 볼 수 있습니다.

 

시연 영상

 

 

Code를 통한 Push

이번에는 소스코드를 사용해서 연결하는 방법을 알아봅시다.

 

우선, 동일하게 화면 전환 이벤트를 담당해줄 버튼을 만들어줍시다. 그리고 화면 전환될 View Controller를 하나 생성해줍시다. 여기까지는 위와 동일하죠?

 

이번에는 조금 다르게, 화면 변환 버튼을 만들어주었던 ViewController.swift에 방금 만들어준 버튼을 액션 함수로 정의해줍시다.

 

그리고 액션 함수 안에 아래와 같은 코드를 작성합시다.

guard let viewController = self.storyboard?.instantiateViewController(withIdentifier: "자신이 만들어준 Storyboard ID값") else { return }
self.navigationController?.pushViewController(viewController, animated: true)

위의 코드는 Storyboard에서 View Controller에 정의한 해당하는 ID값을 찾아서 인스턴스화를 해주는 역할을 합니다. 그리고 2번째 코드를 통해 인스턴스 화한 viewController를 navigation Stack에 새로운 화면을 Push 해줍니다. 여기서 우리는 Storyboard ID 값을 모르죠? 이제, 그 값을 지정해줘서 코드를 완성시켜 봅시다!

 

우선, 화면 전환을 위해 만들어준 View Controller의 Identity inspector로 가서 storyboardID를 지정해줍시다. (여기서는 CodePush로 이름을 지어주겠습니다.)

Storyboard ID 값 지정

 

그리고 그 안에 넣어준 Storyboard ID값을 방금 작성하였던 코드 첫 줄에 괄호 안에 작성해주시면 됩니다. 

 

이렇게 되면, Code Push 버튼을 눌렀을 경우 Storyboard ID 값을 통해서 우리가 원하는 View Controller를 찾아 인스턴스화를 해주고, 그 View Controller로 Push를 하게 해 줍니다.

 

이렇게 되면 Code를 통해 Push 화면 전환이 잘 되는 걸 볼 수 있을 겁니다 😋

 

소스 코드를 통해서 Push, Present 방식에서 뒤로 가기 버튼을 만드는 방법은 Segueway를 통한 방법과 동일하므로, 위에 방식을 보고 따라 해 주시면 됩니다 :)

 

 

Code를 통한 Present

이제 마지막이네요 휴우.. 얼른 끝내 보도록 하죠!

 

위에서 Segueway로 Push, Present 방법에서 코드만 달랐듯이, 이번에도 화면 전환에서의 소스 코드 부분만 제외하고 동일합니다. 그래도 설명을 적으면서 해보도록 합시다~

 

자 우선, 처음 화면의 View Controller에 화면 이동을 해줄 버튼을 생성해줍시다.

 

그리고 Present로 화면 전환을 해줄 View Controller을 하나 생성해줍니다. 그리고 이번에는 한 번에 할 수 있도록 Storyboard ID를 잊지 말고 먼저 작성해줄게요 :)

 

자, 이렇게 Storyboard ID로 View Controller를 찾을 수 있도록 했으니, 이제 코드를 작성해서 연결해 주어야겠죠?

 

동일하게 Assistant 기능을 사용해서 ViewController.swift에 만들어준 버튼을 우클릭 드래그를 통해 액션 함수로 정의해줍시다. 그러면 @IBAction... 생긴 게 보일겁니다.

 

그러면 이제 뭘 해야 할지 다들 아실 겁니다. 바로 정의된 액션 함수 안에 코드를 작성해야겠죠?

 

바로 아래의 코드를 작성해줍시다. 여기서 우리는 Storyboard ID값을 미리 정의해뒀으니, 그걸 괄호 안에 작성하면 되겠죠?

guard let viewController = self.storyboard?.instantiateViewController(withIdentifier: "자신이 만들어준 Stroyboard ID의 값") else { return }
self.present(viewController, animated: true, completion: nil)

위의 코드를 잠시 볼까요? 좀 전에 만들어준 PushButton 코드가 위에 있는 게 보일 겁니다.

 

첫 줄은 Push에서 인스턴스화를 해준 것과 동일한데 아랫줄은 다른 게 보이시죠? 이것도 이제 다들 아시겠지만 Push와 Present 서로 다른 방식으로 화면 전환을 해준 것이기 때문에 Present로 화면 전환을 할 경우에는 아래의 present 메서드를 사용하게 되는 겁니다.

func present(_ viewControllerToPresent: UIViewController, animated flag: Bool, completion: (() -> Void)? = nil)

 

 

무엇을 언제 사용해야 하는가? 🤔

지금까지 구성한 화면입니다. 색상마다 구별이 쉽도록 소스 코드로 화면 전환을 한 것은 보라색, 세그웨이를 통해 화면 전환을 한 것은 파란색으로 해두었는데요. 막상 공부하다 보니, 두 방법 다 다르긴 하지만 서로 장/단점이 있었다고 생각이 들었고 어떠한 경우에 사용해야 하는 건가 궁금해졌습니다.

 

그래서 찾아보니, 소스코드로 한 것은 스토리보드에 화살표로 연결이 없어서 깔끔한 반면, 세그웨이로 한 것들은 선이 꼬이는 모습도 보입니다. 지금처럼 화면이 적다면 훨씬 편하고 문제가 없지만, 화면이 많아진다면? 화면이 매우 복잡하고 관리가 힘들 것으로 보이네요.

 

정리!	장점	단점
세그웨이	화면을 만들때 간단하고 쉬움	화면이 많아지면 많아질수록 관리가 힘들어지고 보이는게 복잡해짐
소스코드	코드로 구현하여 화살표가 생기지 않아 화면이 많아져도 깔끔하고 관리가 쉬움	화면을 만들때 세그웨이보다 복잡하고 어려움

 

 

 

이번에 정리할 내용은 여기까지입니다.
공부하면서 정리한 내용이라 틀린 부분이 있을 수 있습니다.
오타나 틀린 내용 등은 댓글로 알려주시면 감사하겠습니다!

 

Reference
https://fastcampus.co.kr/dev_online_iosappfinal