iOS 앱 개발에서 뷰를 화면 하단에 정렬하는 가장 권장되는 방자자이자 현대적인 방식은 바로 제약 조건(Constraint)을 사용하는 것입니다. 이번 튜토리얼에서는 오토레이아웃(Auto Layout) 제약 조건을 활용해 뷰를 화면 하단에 정렬하는 과정을 단계별로 살펴보겠습니다.
1단계: 새 프로젝트 생성
Xcode를 실행한 뒤 New Project → Single View Application을 선택하고, 프로젝트 이름을 "ViewAlignment"로 지정합니다.
이 튜토리얼에서는 UIView를 사용하지만, 동일한 단계를 따르면 버튼이나 레이블 등 어떤 UI 컴포넌트에도 적용할 수 있습니다.
2단계: 스토리보드에서 뷰 추가하기
Main.storyboard 파일을 열고 ViewController의 배경색을 변경합니다. 이는 시각적으로 이해하기 쉽게 하기 위한 작업입니다. 이후 오브젝트 라이브러리에서 UIView를 드래그하여 화면에 추가합니다.
3단계: 제약 조건 추가하기
추가한 UIView를 클릭한 상태에서 Add New Constraints 메뉴를 엽니다.
제약 조건을 설정할 때는 반드시 네 가지 요소를 모두 고려해야 합니다.
- X축 위치
- Y축 위치
- 높이(Height)
- 너비(Width)
이 네 가지 중 하나라도 누락되면 UI가 비정상적으로 동작하거나 심할 경우 앱이 크래시될 수 있으므로 주의해야 합니다.
이 예제에서는 UIView를 화면 하단에 밀착시키기 위해 리딩(Leading) 공백 0포인트, 트레일링(Trailing) 공백 0포인트, 바텀(Bottom) 공백 0포인트로 설정하고, 높이는 100포인트로 지정했습니다. 만약 뷰 주변에 여백을 두고 싶다면 5~10포인트 정도의 값을 입력하면 됩니다.
4단계: 뷰 색상 변경 및 결과 확인
UIView의 배경색을 청록색(Cyan)으로 변경하면 최종적으로 아래와 같은 화면이 완성됩니다.
5단계: 다양한 기기와 방향에서 테스트
제약 조건 또는 오토레이아웃으로 뷰를 정렬했다면, 앱은 어떤 크기의 화면에서도, 그리고 세로·가로 어느 방향에서든 정상적으로 동작해야 합니다.
여기서는 iPhone 8과 iPad Pro(9.7인치) 두 기기에서 세로 및 가로 방향 모두로 앱을 실행해 결과를 확인해 보겠습니다.
모든 기기와 화면 방향에서 뷰가 하단에 일관되게 정렬되어 있다면, 제약 조건이 올바르게 설정된 것입니다. 이처럼 오토레이아웃 제약 조건을 활용하면 다양한 화면 크기에 유연하게 대응하는 반응형 UI를 손쉽게 구축할 수 있습니다.