[오늘의 코드 조각] [iOS 3-1] UIKit의 기초 : 스토리보드와 오토레이아웃(Auto Layout) 핵심 원리

안녕하세요, **'생각하는 개발자'**입니다.

그동안 플레이그라운드에서 Swift라는 언어의 기초 체력을 길렀다면, 이제는 그 근육을 사용해 실제 앱의 '얼굴'을 만들 차례입니다. 안드로이드에 View나 Jetpack Compose가 있다면, iOS(특히 Xcode 12.4 환경)에는 UIKit이라는 든든한 프레임워크가 있습니다.

오늘은 코드를 한 줄도 쓰지 않고도 앱 화면을 구성할 수 있는 스토리보드와, 어떤 아이폰 화면에서도 UI가 깨지지 않게 잡아주는 오토레이아웃의 원리를 파헤쳐 보겠습니다.

---

3.1.1 스토리보드(Storyboard): 앱의 설계도 🏺

비유: 만화책의 콘티 안드로이드 개발 시 레이아웃 XML 파일을 열어 디자인 탭을 보던 것과 비슷합니다. 스토리보드는 앱의 전체적인 흐름과 화면 구성을 한눈에 보여주는 거대한 도화지입니다.

• Canvas: 버튼, 라벨, 이미지 뷰 등을 마우스로 끌어다 놓는 공간입니다.
• ViewController: 하나의 화면을 담당하는 단위입니다. 안드로이드의 Activity와 아주 유사한 개념이죠.

---

3.1.2 오토레이아웃(Auto Layout): 고무줄 당기기 📜

비유: 고무줄로 고정된 텐트 안드로이드의 ConstraintLayout을 써보셨다면 오토레이아웃이 매우 반가울 겁니다. 아이폰은 기종마다 화면 크기가 제각각입니다. 그래서 "왼쪽에서 20픽셀"이라는 절대 수치 대신 **'상대적인 관계(Constraints)'**를 정의합니다.

1. 상하좌우 간격 (Pinning): "이 버튼은 위쪽 벽면에서 50만큼 떨어져 있어라."
2. 정렬 (Alignment): "이 텍스트는 화면의 정중앙에 위치해라."
3. 크기 관계: "이미지 뷰의 가로 길이는 항상 화면 너비의 절반이어야 한다."

이러한 제약 조건들을 걸어두면, iPhone SE든 iPhone 12 Pro Max든 개발자가 의도한 위치에 UI가 안정적으로 배치됩니다.

---

3.1.3 안드로이드 개발자를 위한 꿀팁 🚀

• 안드로이드: match_parent, wrap_content라는 속성을 주로 사용하죠?
• iOS: 기본적으로 오토레이아웃에는 이런 키워드가 없습니다. 대신 **'Width/Height 제약 조건'**이나 **'간격 제약 조건'**을 통해 이를 구현합니다. 처음엔 조금 번거롭지만, 익숙해지면 훨씬 정교한 배치가 가능합니다.

---

📝 핵심 포인트 요약

1. UIKit은 iOS 앱의 UI를 담당하는 핵심 프레임워크입니다.
2. 스토리보드를 이용하면 직관적으로 화면을 설계하고 흐름을 관리할 수 있습니다.
3. 오토레이아웃은 화면 크기에 상관없이 UI를 유지해주는 '제약 조건(Constraints)' 기반의 시스템입니다.

관련 내부 링크 섹션

• [[iOS 2-4] 클래스와 구조체 : 객체지향 vs 값 타입, Swift가 구조체를 사랑하는 이유]
• [[iOS 1-3] Hello Swift World! : 첫 프로젝트 생성과 시뮬레이터 구동]