로고

Storyboard Segue 사용법: 화면 전환 구현

작성일 :

Storyboard Segue 사용법: 화면 전환 구현

Storyboard를 사용한 iOS 앱 개발에서 Segue는 화면 전환을 간단하게 구현하는 데 매우 중요한 요소입니다. Segue는 여러 화면(view controllers)을 연결하여 사용자 상호작용 흐름을 관리합니다. 이 글에서는 Storyboard에서 Segue를 설정하고 사용하는 방법에 대해 자세히 설명합니다.

초기 설정

먼저 Xcode에서 새로운 프로젝트를 생성하고 기본 제공되는 Main.storyboard 파일을 엽니다. 여기서 두 개의 UIViewController를 배치합니다. 하나는 메인 화면으로, 다른 하나는 전환될 두 번째 화면으로 사용합니다.

  1. UIViewController 추가 - 기본 ViewController는 프로젝트 시작 시 기본으로 생성됩니다. 추가로 UIViewController를 캔버스에 드래그 앤 드롭합니다.
  2. 뷰 설정 - 두 번째 UIViewController의 배경색을 변경하거나 Label을 추가하여 두 화면을 쉽게 구별할 수 있게 설정합니다.

Segue 생성

다음으로, 두 화면을 연결하는 Segue를 설정합니다. Segue는 주로 버튼이나 제스처와 연결됩니다.

  1. 버튼 추가 - 첫 번째 UIViewController에 버튼을 하나 추가합니다. 이 버튼의 역할은 두 번째 화면으로의 전환을 트리거하는 것입니다.
  2. Segue 연결 - Ctrl 키를 누른 상태에서 버튼을 두 번째 UIViewController로 드래그합니다. 나타나는 메뉴에서 Show를 선택합니다. 그러면 두 화면 사이에 화살표가 그려지고 Segue가 생성됩니다.

Segue 식별자 설정

Segue를 코드로 제어하려면 식별자가 필요합니다. 식별자를 설정하여 특정 Segue를 프로그래밍 방식으로 호출할 수 있습니다.

  1. 식별자 설정 - 생성된 Segue를 선택하고, Attributes Inspector에서 Identifier 값을 설정합니다. 예를 들어, showDetail로 설정할 수 있습니다.

Segue 실행

Segue는 버튼과 같은 UI 요소의 액션으로 실행될 수 있습니다. 그러나 특정 조건이 충족될 때 자동으로 실행되게 할 수도 있습니다.

  1. 버튼 클릭 액션 연결 - 버튼을 선택하고 Control 키를 누른 채 코드 에디터로 드래그하여 IBAction 메서드를 작성합니다. 예를 들어, showDetailButtonTapped 같은 메서드를 만듭니다.
swift
@IBAction func showDetailButtonTapped(_ sender: UIButton) {
    performSegue(withIdentifier: "showDetail", sender: self)
}

데이터 전달

두 번째 화면에 데이터를 전달하려면 prepare(for:sender:) 메서드를 오버라이드합니다.

swift
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "showDetail" {
        if let destinationVC = segue.destination as? DetailViewController {
            destinationVC.data = "Some Data"
        }
    }
}

이렇게 하면 첫 번째 화면에서 두 번째 화면으로 데이터를 전달할 수 있습니다. 이를 통해 Segue를 사용자 지정화할 수 있습니다.

Segue 타입

Segue에는 여러 가지 타입이 있습니다. 각 타입별로 사용되는 용도와 차이점을 이해하면 상황에 맞게 적절한 타입을 선택할 수 있습니다.

Show (Push)

주로 Navigation Controller를 사용할 때 사용됩니다. 기본적으로 스택에 새로운 UIViewController를 푸시(push)합니다.

Modal (Present)

현재 화면 위에 새 화면을 모달 형태로 표시합니다. 모달 화면은 일반적으로 취소 또는 완료 버튼을 포함하여 상호작용을 완료한 후 닫힐 수 있습니다.

Custom

사용자가 직접 정의한 전환 애니메이션을 사용합니다. 이를 통해 더 다채롭고 창의적인 화면 전환 효과를 구현할 수 있습니다.

Segue 해제

전환된 화면이 더 이상 필요하지 않을 때 화면을 해제할 필요가 있습니다. 이는 보통 모달 형태로 나타나는 화면에서 사용됩니다.

swift
@IBAction func closeButtonTapped(_ sender: UIButton) {
    self.dismiss(animated: true, completion: nil)
}

결론

Storyboard에서 Segue를 사용하면 화면 전환을 간단하게 구현할 수 있습니다. 이 글에서는 기본적인 Segue 생성 방법과 데이터 전달, 다양한 Segue 타입에 대해 설명했습니다. 이를 통해 더욱 직관적이고 유연한 iOS 앱을 개발할 수 있을 것입니다.