Nib & Xib (feat. storyboard)

안녕하세요. 그린입니다🍏

이번 포스팅에서는 Nib와 Xib에 대해 알아보겠습니다🙌

 

UI 구현 종류

우리가 iOS 개발을 하다보면 UI 즉, 화면을 그리는것은 빼놓을 수가 없습니다.

iOS에서는 이 UI를 구현하는 방법에 대해 3가지를 이용할 수 있습니다.

1. 스토리보드로 구현하기

2. 코드로 구현하기

3. Nib, Xib로 구현하기

 

여기서 오늘 알아볼 것이 세번째 Nib, Xib로 구현하는것에 대해 알아보겠습니다🕺🏻
우선 그럼 Nib와 Xib의 정의부터 알아보시죠!

 

Nib

Nib는 Nextstep Interface Builder의 약자입니다.

iOS / MacOS에서 애플리케이션의 유저 인터페이스를 저장하는 파일이죠.

Nib는 UI를 그리는것에 있어서 바이너리 형식의 압축 파일을 이용해 필요한 클래스들을 담고 있습니다.

인터페이스 빌더에서 저장 시 아카이브 형태로 저장됩니다.

중요한건 바이너리 형식이며 프로세스를 처리하는 속도가 빠릅니다.

이 장점이 결국 앱 배포 시에는 Xib도 Nib 파일로 변환되어 배포됩니다😄

Nib 파일이 바이너리로 어떻게 구성되어 있는지 보려고 Nib 파일 오픈할 수 있는 툴을 봤는데 유료더라구요🥲

그래서 블로그를 참고해 Nib 파일 구성을 보여드리겠습니다!

(참고한 블로그는 아래 참고 자료 링크에도 기재되어있습니다ㅎㅎ)

출처: https://dalgonakit.tistory.com/82

요렇게 로우레벨의 바이너리 코드를 띕니다.

 

그럼 이어서 Xib를 알아보시죠!

 

Xib

Xib는 Xcode Interface Builder의 약자입니다.

Nib와 동일한 역할을 하지만 Nib는 바이너리 형식인 반면 Xib는 xml 형식입니다.

즉 우리가 바이너리 코드는 해석할 수 없더라도 xml 형식은 조금 더 고레벨 언어이기에 해석할 수 있죠.

소스코드를 보고 고치고 이해하기에 충분합니다.

또한 Xcode에서도 Xib에 대한 인터페이스 빌더를 제공하여 아래와 같이 쉽게 화면으로 구성할 수 있죠.

Xib 파일은 Table, Collection과 관련된 View와 VC 및 UIViewController, UIView와 같은 커스텀한 뷰에 대해서만 생성이 가능합니다. 

 

Nib와 Xib의 공통점

둘의 공통점은 결국 유저 인터페이스를 위해 존재하고 UI를 구성한 정보를 바이너리든 xml이든 저장해주는 파일이라는거에 지나지 않습니다.

즉, 기능적으로 하는 역할을 똑같습니다👍

 

Xib -> Nib

우리는 주로 작업 시 Xib 파일로 작업을 하게 됩니다.

당연하게도 바이너리보단 xml이 편하고 Xcode에서도 인터페이스 빌더를 제공해주니까요.

그럼 Xib와 Nib의 차이는 알겠는데 둘다 필요한걸까요?

우선 Nib가 존재했었고 조금 더 구현 및 수정에 편하고 소스코드로의 관리 이점을 가져가기 위해 Xib가 생겨났습니다.

또, Nib는 바이너리기에 SVN 도구를 함께 사용하여 파일을 관리할때 문제가 발생함으로 xml 파일이 대체해야한다고 해요!

그렇기에 Xib 파일을 결국 앱 배포 시에는 Nib 파일을 만들어주게 되고 이 작업은 컴파일 시 앱 번들에 생겨납니다.

요렇게 위 TableViewCell을 Xib 파일로 생성하고 아카이빙 했을때 앱 실행파일 패키지 내부에 생성되어 존재하는걸 확인할 수 있습니다.

결국 또 요약하면 둘다 동일한 기능인데 Nib 파일을 쉽게 사용할 수 있도록 Xml 언어로 변환된 것이 Xib 파일이고 앱 배포시에는 결국 다시 Nib 파일로 변환 생성하여 만들어주고 사용되는것으로 이해가 되네요🙌

 

그럼 어디 한번 예제로 테이블뷰 셀을 Xib 파일로 UI를 구성하고 이를 Nib로 변환해보겠습니다!

 

Xib 파일을 Nib로 변환해 사용하기

우선 CocoaTouchClass File을 새로 생성하여 Xib를 생성을 체크해주면 아래와 같이 Swift파일과 Xib파일이 생성됩니다.

그럼 Xib 파일의 인스펙터를 보시면 identifier를 입력할 수 있어요.

이 식별자는 이 Xib 파일의 식별자로 테이블뷰 셀의 재사용 될 때 필요합니다.

물론 코드로도 가능합니다!

그런 다음 이 셀을 재사용하거나 관장할 뷰 컨트롤러에서 테이블뷰의 설정들을 끝내준 뒤 Nib파일로 변환하고 등록해줘야합니다.

let nib = UINib("TableViewCell", bundle: nil)
tableView.register(nib, forCellReuseIdentifier: "cell)

위와 같이 UINib 클래스 객체 형태로 변환하기 위해 Xib 파일명을 넣어 Nib으로 만들어줍니다.

그리고 VC에서 해당 셀이 사용될 테이블 뷰 객체에 nib과 위에서 정의한 Xib의 식별자인 cell을 통해 등록해줍니다.

요렇게만 해준다면 우리가 잘 알고 있는 테이블 뷰 구현이 되는것이죠.

 

지금까지 Nib와 Xib에 대해 알아봤는데요, 그럼 스토리보드는 어떻게 구성되어 있는걸까요? 알아보시죠!🙃

 

Storyboard

우리가 iOS 앱 개발을 시작하면서 아마도 가장 친숙하고 많이 사용되었을것이 스토리보드입니다.

스토리보드 또한 UI를 그리고 해당 정보들을 저장하고 있는 파일이죠!

스토리보드 역시나 xml 형식으로 이뤄진 Xib 형태를 띄고 있습니다.

해당 Xib 파일들과 이것의 설정들을 관리하는 info.plist 파일의 조합이죠.

스토리보드 역시 빌드 시 storyboardc 파일이 생성되고 이 패키지 내용물을 본다면 아래와 같이 Nib파일과 info.plist로 이뤄져있습니다.

 

마무리

어떻게 보면 이번 포스팅이 왜? 3탄이였던것 같네요!

아주 단순한 UI 구성이라도 어떤것이 필요한지 왜 그렇게 탄생했는지 알아보는 재밌는 과정이였네요

 

 

[참고 자료]

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/LoadingResources/CocoaNibs/CocoaNibs.html

Nib Files

https://www.hackingwithswift.com/example-code/language/what-is-a-nib

What is a nib? - free Swift 5.4 example code and tips

https://myssun0325.tistory.com/23

[iOS] NIB, XIB란

https://dalgonakit.tistory.com/82

iOS의 화면을 그리기 위해선 이것이 필요합니다! XIB, NIB, Storyboard