[오늘의 코드 조각] [iOS 3-2] 실전 레이아웃: 오토레이아웃으로 로그인 화면 만들기 (Constraints 실습)

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

지난 시간에 오토레이아웃의 '이론'을 배웠다면, 오늘은 직접 **'고무줄(Constraints)'**을 당겨볼 시간입니다. 앱 개발의 가장 기본이 되는 로그인 화면을 만들며, UI 요소들이 어떻게 화면에 고정되는지 그 손맛을 느껴보겠습니다.

---

3.2.1 실습 준비: UI 요소 올리기 🏺

Xcode의 **Library(단축키: Cmd + Shift + L)**를 열어 다음 요소들을 스토리보드의 캔버스 위로 드래그합니다.

1. ImageView: 상단에 로고가 들어갈 자리입니다.
2. TextField: 아이디와 비밀번호를 입력받을 두 개의 칸입니다.
3. Button: 하단의 '로그인' 버튼입니다.

---

3.2.2 제약 조건 걸기 (Adding Constraints) 📜

이제 이 요소들이 둥둥 떠다니지 않게 고정해 봅시다.

1. 중앙 정렬: 로고 이미지를 클릭하고 하단의 Align 아이콘을 눌러 Horizontally in Container에 체크합니다. "너는 무조건 가로 중앙이야!"라고 명시하는 것이죠.
2. 간격 설정: 로고와 아이디 입력창 사이의 간격을 설정합니다. Add New Constraints 아이콘(핀 모양)을 눌러 상단 간격을 40으로 고정합니다.
3. 너비 조절: 입력창이 너무 좁지 않게 양옆(Leading, Trailing) 간격을 20씩 줍니다.

---

3.2.3 빨간 선이 떴나요? 에러 해결법 🚀

오토레이아웃을 잡다 보면 빨간색 선이 뜰 때가 있습니다. 이는 **"정보가 부족해!"**라는 뜻입니다.

• X축 정보: 가로 어디에 있는지?
• Y축 정보: 세로 어디에 있는지?
• 크기 정보: 가로/세로 길이는 얼마인지?

이 3가지 정보가 모두 충족되어야 빨간 선이 사라집니다. 만약 빨간 선이 떴다면, 내가 어느 정보를 빠뜨렸는지 체크해 보세요.

---

📂 프로젝트 샘플 및 실습 자료

• 실습 환경: Xcode 12.4 / iOS 14
• 실습 프로젝트: Chapter-3-2-LoginUI
• [GitHub 소스 코드 링크]

관련 내부 링크 섹션

• [[iOS 3-1] UIKit의 기초 : 스토리보드와 오토레이아웃(Auto Layout) 핵심 원리]
• [[iOS 부록] 100% 활용하기 : 예제 소스 코드 다운로드 및 활용법] (예정)