---
# System prepended metadata

title: ' Code-BaseUI와 Storyboard, XIB의 차이점은 '
tags: [Swift, "\U0001F4BB TIL"]

---

<h1><center> Code-BaseUI와 Storyboard, XIB의 차이점은 </center></h1>

###### tags: `💻 TIL`, `Swift`
###### date: `2024-02-01T15:12:33.284Z`

> [color=#724cd1][name=데릭]

> [iOS - Architecture](https://github.com/protocorn93/iOS-Architecture)

## 개요

> SwiftUI가 나오기 전에는 UI를 구현할 때, 어떻게 했을까? 
> 어떤 차이점들이 있을까?

## Code-Base UI

Code-Base UI는 말 그대로 코드로 직접 UI를 작성하는 방식을 말한다. 

- 주로 동적인 Custom UI를 만들 때 사용한다. 
- 버전 관리가 용이하고, 동적인 UI를 쉽게 만들 수 있다.
- 코드로 작성된 UI는 프로그램을 제어할 때, 높은 유연성을 가지고 있다.

**단점**

1. 시각적 표현 부족: Storyboard, XIB에 비해 시각적인 툴이 부족하여 디자인을 즉각적으로 확인하기 어렵다.
2. 복잡성 증가: 동적이고 복잡한 UI를 다룰 때 코드의 양이 증가하고, 이에 따라 유지보수의 어려움이 발생할 수 있다.

## Storyboard & XIB

> Storyboard와 XIB는 Interface Builder라는 툴을 사용하여 UI를 구현하는 방식이다. 

**Storyboard**

- 여러 뷰 컨트롤러 간의 전환을 시각적으로 표현하는 데 사용된다. 
- 하나의 파일에 여러 뷰 컨트롤러, 화면 흐름 및 화면 간 전환을 표현할 수 있다. 
- 앱의 전체 구조를 파악하기 쉽다.

**XIB**

- 단일 뷰나 뷰 컨트롤러를의 디자인을 위해 사용되며, 주로 재사용 가능한 UI 컴포넌트를 만들거나 특정 화면의 디자인을 분리하여 구현하는 데 사용한다.
- 특정 UI 컴포넌트나 화면의 디자인을 단일 파일로 분리하여 유지보수성을 높일 수 있다.

**단점**

1. 병합 충돌: 같은 Storyboard or XIB 파일을 수정할 때 병합 충돌이 발생할 수 있다.
2. 시각적 복잡성: 복잡한 UI의 경우, Storyboard, XIB 파일이 길어질 수 있어 파악하기 어려울 수 있고, Autolayout 설정을 파악하기 어려울 수 있다. 
3. 재사용 어려움: XIB 파일의 재사용이나 여러 프로젝트에서의 공통 사용이 어려울 수 있다.
4. 로드 시간 증가: 프로젝트의 크기가 커질수록 Storyboard, XIB 파일을 읽어들이는 데에 시간이 늘어날 수 있다.
