안녕하세요, **'생각하는 개발자'**입니다.
지난 시간에는 오토레이아웃이 뷰의 X, Y, Width, Height를 결정하는 '수학적 방정식'이라는 이론을 살펴보았습니다. 백문이 불여일견이죠! 오늘은 실제 Xcode를 열고, 현대 앱의 가장 기본이 되는 '로그인 화면'을 만들며 제약조건(Constraints)을 직접 몸으로 익혀보겠습니다.
오늘 사용할 재료는 딱 세 가지입니다. 타이틀을 위한 UILabel, 입력을 위한 UITextField, 그리고 로그인을 위한 UIButton입니다. 자, Xcode를 켜고 따라오세요!
3.2.1 캔버스 위에 재료 얹기 (UI Object 배치)
먼저 Main.storyboard를 열어줍니다. 우측 상단의 + 버튼(Library)을 누르거나 Cmd + Shift + L을 눌러 아래 컴포넌트들을 뷰 컨트롤러 위에 대충 드래그 앤 드롭해 줍니다.
- UILabel 1개 (앱 타이틀용)
- UITextField 2개 (이메일, 비밀번호 입력용)
- UIButton 1개 (로그인 버튼용)
아직 제약조건을 주지 않았기 때문에, 컴포넌트들 옆에 주황색 점선이나 숫자가 뜨며 "내 자리가 여기가 맞아?"라고 물어볼 것입니다. 이제 하나씩 확실한 자리를 잡아줍시다.
3.2.2 [단계별 실습] 꼬이지 않는 오토레이아웃 규칙
오토레이아웃을 잡을 때는 '기준이 되는 큰 뼈대'부터 시작해서 아래로 내려오는 것이 좋습니다.
1단계: 타이틀 레이블(Label) 배치 (상단 기준점)
- 레이블을 선택하고, 스토리보드 하단의 Add New Constraints 아이콘(점 4개 있는 모니터 모양)을 누릅니다.
- 위쪽(Top)의 빨간 선을 켜고 80을 입력합니다. (화면 최상단, 즉 Safe Area로부터 80pt 떨어뜨리겠다는 뜻입니다.)
- 가로 정렬을 위해 하단의 Align 아이콘(막대그래프 모양)을 누르고, Horizontally in Container 체크박스를 켠 뒤 Add 1 Constraint를 누릅니다.
💡 중간 점검: 레이블의 X(가로 중앙)와 Y(상단에서 80pt)가 결정되었습니다. Width와 Height는 레이블 안의 글자 크기(Intrinsic Content Size)가 스스로 결정하므로, 이것만으로 빨간 에러 없이 완벽하게 고정됩니다.
2단계: 이메일 입력창(TextField) 배치
- 첫 번째 텍스트 필드를 선택합니다.
- Add New Constraints 창을 엽니다.
- 위쪽(Top) 선을 켜고 기준을 Label로 잡은 뒤 40을 입력합니다.
- 좌(Leading) / 우(Trailing) 선을 켜고 각각 20을 입력합니다.
- 입력창의 높이를 확보하기 위해 Height 체크박스를 켜고 45를 입력합니다.
💡 왜 에러가 안 날까?: Y축은 레이블 아래로 40pt, X축과 Width는 좌우 여백 20pt를 줌으로써 전체 화면 너비에서 자동으로 계산됩니다. Height는 우리가 45pt로 명시했으니 4대 요소(X, Y, W, H)가 모두 충족되었습니다!
3단계: 비밀번호 입력창 & 로그인 버튼 배치
나머지 요소들은 바로 위의 요소를 기준으로 삼아 연쇄적으로 엮어줍니다.
- 비밀번호 TextField: 이메일 TextField를 기준으로 Top 20, Leading 20, Trailing 20, Height 45를 줍니다.
- 로그인 Button: 비밀번호 TextField를 기준으로 Top 40, Leading 20, Trailing 20, Height 50을 줍니다.
3.2.3 마법의 UIStackView로 리팩토링하기
방금 우리는 모든 컴포넌트에 일일이 Top, Leading, Trailing을 주었습니다. 만약 중간에 "이메일과 비밀번호 사이에 다른 입력창을 하나 더 넣어주세요"라는 요구사항이 오면 어떻게 할까요? 기존 제약조건을 다 지우고 새로 연결해야 하는 대공사가 벌어집니다.
이때 안드로이드의 LinearLayout처럼 구원투수로 등판하는 것이 바로 UIStackView입니다.
- 방금 만든 이메일 TextField, 비밀번호 TextField, 로그인 버튼 3개를 Command를 누른 채 동시에 선택합니다.
- 스토리보드 우측 하단의 Embed In 아이콘(화살표가 상자 안으로 들어가는 모양)을 누르고 Stack View를 선택합니다.
- 셋이 순식간에 하나의 상자(Stack) 안으로 쏙 들어갑니다.
- 우측 Attributes Inspector에서 Spacing을 20으로 조절해 줍니다.
- 이제 이 Stack View 자체에만 Top(레이블 기준 40), Leading(20), Trailing(20) 제약을 주면 끝납니다.
중간에 컴포넌트 순서를 바꾸고 싶다면? 그냥 스택뷰 안에서 드래그로 위아래 위치만 바꾸면 오토레이아웃이 알아서 재계산됩니다. 현업에서는 화면을 짤 때 이 스택뷰를 정말 적극적으로 활용합니다.
👨💻 C++ / 게임 개발자를 위한 비교 조각
Cocos2d-x나 일반적인 게임 엔진에서는 UI의 Anchor Point를 (0.5, 0.5)로 잡고 화면의 절대 좌표(Position)를 직접 계산해 뿌리는 경우가 많습니다. 해상도가 바뀌면 코드에서 직접 getVisibleSize()를 가져와 스케일을 계산하곤 하죠.
반면, iOS UIKit의 오토레이아웃은 코드로 좌표를 계산하는 피로감을 시스템에 위임합니다. "이 뷰는 저 뷰 아래에 붙어라"라는 관계(Relationship)만 정의해 두면, 시스템이 알아서 Matrix를 계산해 렌더링 영역을 잡는 구조입니다. 좌표 연산 코드가 UI 레이어에서 완전히 사라지는 쾌적함을 느낄 수 있습니다.
🎯 오늘의 요약
- 오토레이아웃을 잡을 때는 상단이나 중앙의 확실한 기준점(Anchor)부터 아래로 엮어 나간다.
- 텍스트 필드나 빈 뷰처럼 고유 높이가 모호한 컴포넌트는 Height 제약조건을 명시해 준다.
- 복잡하게 엮인 UI는 UIStackView로 묶어 관리하면 유지보수성이 극대화된다.
축하합니다! 이제 여러분은 화면 크기가 다른 아이폰 13, 아이폰 SE, 아이폰 15 프로 맥스 그 어떤 기기에서 돌려도 깨지지 않는 완벽한 반응형 로그인 화면을 만드셨습니다.
다음 장 [iOS 3-3]에서는 이 투박한 로그인 화면을 더 세련되게 만들어 줄 UIImageView(프로필 이미지)와 여백을 제어하는 UIView의 심화 활용법으로 찾아오겠습니다. 즐거운 코딩 하세요!
직접 빌드해 보시다가 주황색 경고나 빨간 에러 라인이 해결되지 않는다면, Constraints 캡처와 함께 댓글로 남겨주세요. 함께 풀어봐 드립니다!
관련 내부 링크 섹션
