[Swift] XIB 이해 하기 : 이론, 파일 생성, 페이지 이동 방법

해당 글에서는 XIB에 대해서 이해를 하고 이를 통해 파일을 생성하고 페이지 간의 이동방법에 대해서 공유합니다.

1) XIB(XML Interface Builder)

---

💡 XIB(XML Interface Builder)란?

- iOS 애플리케이션에서 사용자 인터페이스를 디자인하고 구성하기 위한 통합 개발 환경입니다. XIB를 사용하여 개발자는 스토리 보드와 같은 인터페이스 디자인 및 개발을 수행할 수 있습니다.
- XIB는 XML 기반의 파일 형식으로 ‘NIB 파일’로 컴파일되어 iOS 디바이스에서 로드됩니다.


💡 NIB(Next Interface Builder)란?

- 인터페이스 디자인을 위한 시각적인 요소들과 그들의 역할을 정의한 객체들을 포함하는 바이너리 파일입니다.
- 이 파일들은 '앱 번들의 리소스 디렉토리에 저장'되며 실행 시점에 로드되어 화면에 표시됩니다.

 

 

[참고] Swift UI의 종류

분류	XIB	Storyboard	SwiftUI
파일 확장자	.xib	.storyboard	.swift
호환성	iOS 2.0+	iOS 5.0+	iOS 13+
레이아웃	개별 파일	개별 파일	코드 기반
인터페이스	드래그 앤 드롭	드래그 앤 드롭	선언적
미리보기	사용 불가	Xcode 11+에서 사용 가능	Xcode 11+에서 사용 가능
재 사용성	여러 뷰에서 재사용 가능	여러 뷰에서 재사용 가능	여러 뷰에서 재사용 가능
러닝 커브	쉽게 배울 수 있음	중간 정도의 학습 곡선	높은 학습 곡선
성능	Storyboard보다 빠름	XIB보다 느림	둘보다 빠름

 

[참고] Storyboard, SwiftUI를 기반으로 구성한 형태는 아래의 글을 참고하시면 도움이 됩니다.

 

[Swift] Storyboard 프로젝트 구성 -1 : 개발 환경 구성

[Swift] 앱 프로젝트 생성 및 환경 구성 : SwiftUI

 

2) XIB 프로젝트 구성요소 : Xib, UIView, UIViewController

---

💡 Xib를 이용하는 프로젝트에서 하나의 세트로 구성되는것이 .xib 파일, UIView, UIViewController로 하나의 세트로 구성이 됩니다.

 

1. 구성요소에 대한 이해

---

💡 XIB(XML Interface Builder)란?

- XIB를 사용하여 개발자는 스토리 보드와 같은 ‘인터페이스 디자인’ 및 개발을 수행할 수 있습니다.


💡 View(UIView)란?

- 인터페이스의 ‘기본요소’를 관리하며 모든 뷰에 대한 ‘레이아웃’과 ‘이벤트 처리’를 담당합니다.


💡 ViewController(UIViewController)란?

- 화면의 라이프사이클 및 인터페이스의 ‘로직’을 관리하며 다른 뷰 컨트롤러와 함께 ‘앱의 전반적인 동작’을 조율합니다.

 

2. 각각 요소에 대한 설명

---

💡 XIB란?

- 인터페이스 ‘디자인 파일’입니다. 해당 파일은 개발자가 앱의 뷰 계층 구조를 만들기 위해 사용됩니다.


💡 View(UIView)란?

- 화면을 구성하는 뷰의 기본 클래스를 의미하며 모든 뷰에 대한 ‘레이아웃’과 레이아웃의 ‘이벤트 처리’를 담당합니다.
예로는 애니메이션, 그리기, 그림자, 터치 이벤트 등의 다양한 기능을 제공합니다.


💡 ViewController(UIViewController)란?

- UIView에서 처리된 이벤트들을 수신하고 데이터 처리, 화면 간의 전환을 담당합니다.

 

3. 구성 요소 간의 흐름도

---

 💡 사용자의 관점에서의 흐름도는 xib → UIView → UIViewController 순으로 전달이 되어서 UIViewController → UIView → xib로 반환을 받습니다.


1. 사용자는 xib 파일을 통해 화면이 보여집니다.
2. 사용자는 특정 행동을 위해 xib 파일을 선택하면 매핑된 UIView로 이벤트 처리가 수행됩니다.
3. 이벤트 처리가 완료된 뒤 UIViewController에서 이벤트를 수신하여 데이터 처리 혹은 화면 간의 전환을 수행합니다.

 

💡 UIView를 제외하고 구성이 가능합니다.
💡 xib → UIViewController 순으로 데이터가 전달되어서 UIViewController → .xib로 반환을 받습니다.

- 사용자는 xib 파일을 통해 화면이 보여집니다.사용자의 특정 행동을 통해 xib 파일을 선택하면 매핑된 UIViewController에서 이벤트 처리와 함께 처리하고 데이터 처리 혹은 화면 간의 전환을 수행합니다.

 

[ 더 알아보기 ]

💡 UIView 없이 UIViewControler만으로 앱을 개발하는 경우 어떻게 되는가?

- 처리가 가능하지만 UIView가 없을 경우 사용자 인터페이스를 표시할 수 없기 때문에 UIViewController에서 데이터를 처리하고 표시해 주는 로직을 모두 작성해야 합니다.

- 이는 코드의 복잡도를 증가시키고 유지보수를 어렵게 만들 수 있습니다. 그러므로, UIView를 사용하여 앱의 사용자 인터페이스를 구성하고 UIViewController와 연결하여 데이터를 처리하는 것이 일반적인 방법입니다.

 

 

3) 파일 구성 -1 : UIView를 제외한 형태(xib, UIViewController)

---

 

1. User Interface - ‘View’을 선택하여 파일을 생성합니다 : Xib 파일 생성

---

💡 TempView.xib 파일명으로 파일을 생성해 주었습니다.

 

 

 

 

2. Source - ‘Cocoa Touch Class’을 선택하여 파일을 생성합니다. : UIViewController 파일 생성

---

💡 해당 파일을 생성할 때 ‘Subclass of’ 속성 값으로 ‘UIViewController’를 선택하여 생성합니다.

 

 

3. xib 파일과 UIViewController 화면을 매핑합니다 : xib 파일선택 - File’s Owner - Class 값을 생성한 ViewController와 연결한다.

---

 

 

 

 

3) 파일 구성 -2 : UIView를 포함하는 형태(xib, UIView, UIViewController)

---

 

1. [UIView 생성] Source - ‘Cocoa Touch Class’를 선택하고 파일을 생성합니다.

---

💡 해당 파일을 생성할 때 ‘Subclass of’ 속성 값으로 ‘UIView’를 선택하여 생성합니다.

 

 

 

2. [Xib 생성] User Interface - ‘View’을 선택하여 파일을 생성합니다.

---

💡 TempView.xib 파일명으로 파일을 생성하였습니다.

 

 

 

3. [UIViewController 생성] Source - ‘Cocoa Touch Class’을 선택하여 파일을 생성합니다.

---

💡 해당 파일을 생성할 때 ‘Subclass of’ 속성 값으로 ‘UIViewController’를 선택하여 생성합니다.

 

 

4. XIB UI 화면과 View를 연결합니다.

---

💡 TemView.xib 파일에서 File's Owner - Class명을 UIView 명으로 지정합니다.

 

 

5. Adjust Editor Options 버튼 - Assistant 버튼을 누릅니다.

---

 

 

 

6. 생성된 뷰를 ‘ctrl’ 버튼을 누른 상태에서 드래그 앤 드롭합니다.

---

 

 

7. View와 연결 변수를 생성합니다

---

💡 해당 부분에서 주의해야 할 점은 뷰에서 지정한 이름과 ‘동일한 이름’으로 이름을 지어야 합니다.

 

 

8. 잘 연결됨을 확인하였습니다.

---

 

 

 

4) 페이지 이동

---

💡 페이지 이동에는 최초 AppDelegate의 시작화면에서 이동하는 방법과 페이지에서 페이지로 이동하는 방식이 존재합니다.

 

 

1. AppDelegate에서 페이지 이동 : UINavigationController 이용

---

💡 UINavigationController 란?

- iOS에서 화면을 스택 형태로 관리할 때 사용되는 컨트롤러입니다. 즉, 다음 화면으로 이동할 때 이전 화면을 스택에 쌓아두고, 이전 화면으로 돌아갈 때 스택에서 꺼내서 보여주는 방식으로 화면을 관리합니다.
- 이를 통해 앱 내에서 여러 화면 간의 이동을 쉽게 구현할 수 있습니다.

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    internal var window: UIWindow?

    func application(
        _: UIApplication,
        didFinishLaunchingWithOptions _: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        // Override point for customization after application launch.
        let window = UIWindow(frame: UIScreen.main.bounds)
        window.rootViewController = buildTempViewController()
        window.makeKeyAndVisible()
        self.window = window
        return true
    }    
    /**
    * TempViewController를 호출합니다
     */
    private func buildTempViewController() -> UIViewController{
     
        let tempViewController = TempViewController()
        let navViewController = UINavigationController(rootViewController: tempViewController)
        if #available(iOS 11.0, *) {
            navViewController.navigationBar.prefersLargeTitles = true
        } else {
            navViewController.navigationBar.isTranslucent = false
        }
        return navViewController
    }
}

 

 

2. 페이지 간의 이동 : NavigationController 이용

---

💡 self.navigationController 란?

- 현재 UIViewController에 연결된 NavigationController 객체를 의미합니다. 이 객체를 사용하면 다른 ViewController와의 화면 전환이나 페이지 이동을 쉽게 구현할 수 있습니다.

import AVFoundation
import UIKit

class MainViewController: UIViewController {

	@IBAction func onTouchTempPage(_ sender: Any) {
	    let tempViewController = TempViewController()
	    self.navigationController?.pushViewController(tempViewController, animated: true)
	}
}

 

 

 

오늘도 감사합니다. 😀