안녕하세요! [생각하는 개발자]입니다.
지난 시간 우리는 Xcode 인터페이스 빌더에서 제약조건(Constraints)을 일일이 주어가며 기본적인 로그인 화면을 만들어 보았습니다. 그리고 마지막에 여러 뷰를 묶어주었던 마법의 주머니, UIStackView의 맛을 살짝 보았죠.
오늘은 이 StackView를 더 깊게 파고들어, 실제 상용 앱에서 가장 흔하게 쓰이는 '세련된 프로필 편집 화면'을 만들어 보겠습니다. 이번 실습을 통해 이미지 표현의 핵심인 UIImageView와, 여백을 마술처럼 제어하는 UIView의 꿀팁까지 한 번에 가져가세요!
3.3.1 캔버스 위에 재료 얹기 (UI Object 배치)
먼저 Main.storyboard에 새 화면을 준비하거나 기존 캔버스를 깨끗이 비워줍니다. 이번 화면을 구성할 재료들을 Library(Cmd + Shift + L)에서 꺼내 대충 올려둡니다.
- UIImageView 1개 (프로필 사진용)
- UIButton 1개 (사진 변경 버튼용)
- UITextField 2개 (이름, 한줄소개 입력용)
- UIView 1개 (하단 여백을 밀어줄 더미 뷰)
3.3.2 UIStackView의 속성 3대장 마스터하기
재료를 그냥 배치하기 전에, StackView를 지배하는 3가지 핵심 속성(Attributes)을 먼저 머릿속에 넣고 가야 합니다. 인스펙터 창에서 이 세 가지만 조절하면 복잡한 오토레이아웃 연산이 끝납니다.
- Axis (축): 뷰를 가로로 쌓을 것인가(Horizontal), 세로로 쌓을 것인가(Vertical).
- Alignment (정렬): 축의 반대 방향 정렬입니다. 세로 스택뷰라면 뷰들을 왼쪽에 붙일지(Leading), 채울지(Fill), 가운데 정렬할지(Center) 결정합니다.
- Distribution (분배): 축 방향으로 내부 뷰들의 크기를 어떻게 나눌 것인가입니다. 크기를 똑같이 쪼갤지(Fill Equally), 여백 비율에 맞출지(Fill) 결정합니다.
3.3.3 [단계별 실습] 조립식 프로필 화면 만들기
1단계: 프로필 이미지와 버튼 묶기 (Horizontal Stack)
- UIImageView와 UIButton을 동시에 선택한 뒤, 하단의 Embed In 아이콘을 눌러 Stack View로 묶어줍니다.
- 스택뷰의 속성을 설정합니다: Axis = Vertical, Alignment = Center, Spacing = 8.
- UIImageView 자체에 Width 120, Height 120 제약을 줍니다. (이미지뷰는 고유 크기가 모호할 수 있으므로 명시해 주는 것이 안전합니다.)
2단계: 전체 입력창 구조 짜기 (Vertical Stack)
- 1단계에서 만든 '이미지 스택뷰'와 나머지 TextField 2개, 그리고 더미 UIView를 한 번에 선택합니다.
- 다시 한 번 Embed In -> Stack View로 묶어줍니다. 대형 상자가 완성되었습니다.
- 이 최외곽 스택뷰의 속성을 다음과 같이 설정합니다:
- Axis = Vertical, Alignment = Fill (화면 너비에 꽉 채우기), Distribution = Fill, Spacing = 20.
3단계: 최종 외곽 제약조건 설정
- 최외곽 스택뷰를 선택하고 Add New Constraints 아이콘을 누릅니다.
- 화면 상단(Safe Area)에서 40, 좌(Leading) 20, 우(Trailing) 20, 하단(Bottom) 40을 주고 Add 4 Constraints를 누릅니다.
⚠️ 어라? 하단 제약을 주니까 빨간 에러(충돌)가 나요!
스택뷰의 Content들을 다 합친 높이보다 화면 전체 높이가 더 크기 때문에 발생한 에러입니다. 누군가는 늘어나서 화면 아래쪽까지 닿아야 하는데, 시스템이 "누구를 늘려야 할지 모르겠어"라고 하는 상태죠.
4단계: 더미 UIView로 오토레이아웃 심폐소생술하기
이때 우리가 넣어둔 더미 UIView가 마법을 부립니다.
- 스택뷰 내부 가장 아래에 있는 더미 UIView를 선택합니다.
- 이 뷰의 배경색(Background)을 투명하게 바꿉니다.
- 시스템에게 이 투명한 뷰를 스프링처럼 마음껏 늘리라고 신호를 줍니다. (스택뷰의 Distribution이 Fill일 때, 고유 저항이 가장 낮은 뷰가 화면 나머지 공간을 다 채우며 늘어나게 됩니다.)
- 짜잔! 빨간 에러가 사라지고 프로필 레이아웃이 상단부터 예쁘게 안착합니다.
👨💻 안드로이드 개발자를 위한 비교 조각
안드로이드의 LinearLayout에서 하단 공간을 꽉 채우기 위해 특정 뷰에 android:layout_weight="1"을 주었던 기억이 있으신가요?
iOS UIKit의 UIStackView(Distribution = Fill) 환경에서는 별도의 weight 값 없이, 내부에 아무런 고유 크기가 없는 **투명한 UIView(더미 뷰)**를 툭 던져놓는 것만으로 정확히 같은 효과를 낼 수 있습니다. 남은 공간을 이 더미 뷰가 흡수하여 밀어 올리는 셈이죠. 구조가 훨씬 단순해집니다.
🎯 오늘의 요약
- UIStackView는 Axis, Alignment, Distribution 3대장 속성으로 내부 레이아웃을 자동 제어한다.
- 이미지나 텍스트 필드를 다룰 때는 복잡한 선을 긋는 대신 스택뷰 내부의 Spacing을 활용하자.
- 화면 전체에 제약을 걸었을 때 남는 공간은 투명한 더미 UIView를 스택 내부에 배치해 깔끔하게 밀어줄 수 있다.
이제 복잡한 서브 UI가 들어와도 무서워하지 않고 스택뷰로 조립할 수 있는 눈이 생기셨을 겁니다.
다음 장 [iOS 3-4]에서는 이렇게 열심히 그린 화면들이 메모리에 올라오고 사라지는 순간을 다루는, 면접 단골 주제 ViewController의 일생(Lifecycle)으로 돌아오겠습니다. 생각하는 재미를 아는 개발자가 됩시다!
스택뷰 속성을 바꿨는데 원하는 대로 정렬이 안 되시나요? Distribution 설정 상태를 댓글로 공유해 주시면 원인을 짚어드릴게요!
