행복을 담는 블로그

[Swift] iOS 개발하기: 여러 개의 화면(View Controller) 연결하기 본문

Mobile/iOS (Swift)

[Swift] iOS 개발하기: 여러 개의 화면(View Controller) 연결하기

hyun0zin 2025. 12. 19. 18:00

iOS 앱은 보통 한 개 이상의 화면으로 구성됩니다. 이 화면들을 서로 연결하고 데이터를 주고받는 과정이 앱 개발의 핵심입니다.

Xcode에서 여러 개의 View ControllerStoryboard 화면을 연결하고 이동시키는 방법에 대해서 정리해보고자 합니다. 


 

1. View Controller와 Class 연결하기

Storyboard에 추가한 시각적인 화면 요소(ViewController)가 실제 로직을 처리하는 Swift 코드 파일과 연결되어야 합니다.



View Controller 추가: Storyboard 캔버스에 새로운 View Controller를 추가합니다. (라이브러리 검색: View Controller)
Swift 파일 생성: 연결할 Swift 파일(예: ViewController2.swift)을 프로젝트 내에 생성합니다.
Custom Class 연결:

  • Storyboard에서 새로 추가한 View Controller를 클릭합니다.
  • 화면 오른쪽의 인스펙터 영역Identity Inspector 를 선택합니다.
  • Custom Class 섹션에서 Class 필드에 방금 생성한 Swift 파일의 이름(예: ViewController2)을 입력하고 Enter를 눌러 연결합니다.

 

💡 검증: 클래스 연결이 성공적으로 완료되면, 이제 해당 ViewController의 아웃렛 변수나 액션 함수를 이 Swift 파일 내에서 정의하고 사용할 수 있게 됩니다.

 


 

2. Navigation Controller를 사용한 화면 이동 설정

iOS 앱에서 가장 일반적이고 구조적인 화면 이동 방식은 Navigation Controller를 사용하는 것입니다.

 

A. Navigation Controller 추가 (Embed In)

Navigation Controller는 화면 이동 경로를 스택(Stack) 형태로 관리해주는 컨테이너 역할을 합니다.

 

  1. 초기 View Controller 선택: Storyboard에서 앱이 가장 먼저 시작할 화면인 최초의 View Controller를 선택합니다.
  2. Embed In 실행: Xcode 상단 메뉴에서 Editor > Embed In > Navigation Controller를 선택합니다.
  3. 결과 확인: 선택된 View Controller 앞에 새로운 Navigation Controller가 자동으로 생성되고 연결됩니다. 이제 화면 상단에 회색 또는 흰색의 내비게이션 바(Navigation Bar)가 생깁니다.

 

가장 첫 번째 화면 앞으로 Navigation Controller 연결

💡 특징
Navigation Controller는 스택 구조로 화면을 관리합니다.
새로운 화면을 추가(Push)하면 스택 위에 쌓이고, '뒤로 가기' 버튼을 누르면 가장 위의 화면이 제거(Pop)됩니다.

 

 

B. 버튼을 이용한 화면 간 연결 (Segue)

버튼 클릭과 같은 사용자 상호작용을 통해 화면을 전환하는 연결 방식을 세그웨이(Segue)라고 합니다.

  1. 버튼 배치: 첫 번째 View Controller에 화면 이동을 위한 버튼(Button)을 추가합니다.
  2. 세그웨이 연결:
    • Ctrl 키를 누른 채, 방금 추가한 버튼을 클릭하여 다음 화면(연결하고자 하는 View Controller)으로 드래그합니다.
    • 드래그를 멈추면 Segue 선택 메뉴가 나타납니다.
    • 이동 방식으로 Show (e.g. Push)를 선택합니다.

 

💡 Show (Push)란?
Navigation Controller가 관리하는 스택에 새로운 화면을 밀어 넣는(Push) 방식입니다. 이 방식은 자동으로 이전 화면으로 돌아갈 수 있는 'Back' 버튼을 내비게이션 바에 생성해 줍니다.

 


 

3.  세그웨이 실행 및 데이터 전달 

단순히 화면만 이동하는 것이 아니라, 다음 화면으로 데이터를 전달하는 작업은 필수적입니다. 이럴 때 세그웨이 실행 직전에 호출되는 메서드를 사용합니다.

  • 준비 메서드: 세그웨이가 실행되기 직전에 ViewController에서 prepare(for:sender:) 메서드가 자동으로 호출됩니다.
  • 데이터 전달 로직: 이 메서드 내에서 이동할 다음 화면(Destination View Controller)에 접근하여 데이터를 전달하는 코드를 작성합니다.
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    // 세그웨이 식별자(Identifier)를 확인하여 원하는 화면 전환인지 검사
    if segue.identifier == "GoToNextScreen" { 
        // 다음 화면의 인스턴스를 가져옵니다.
        let nextVC = segue.destination as! ViewController2
        
        // 다음 화면의 변수에 데이터를 전달합니다.
        nextVC.receivedData = "첫 번째 화면에서 보낸 데이터"
    }
}