Auto Layout: 개념, 적응형 iOS 인터페이스 레이아웃

Auto Layout이란?

Auto Layout은 UI 요소를 배치하기 위해 수학적 제약(constraints)을 사용하는 Apple의 적응형 레이아웃 시스템입니다. 각 요소가 고정 좌표 x, y, width, height를 갖는 프레임 기반 레이아웃과 달리, Auto Layout은 요소 간의 관계를 설명합니다: «버튼이 부모의 오른쪽 가장자리에서 8pt 떨어져 있음» 또는 «텍스트 필드의 너비가 화면 너비의 절반과 같음». 이 메커니즘은 University of Washington(Greg J. Badros, 1999)에서 개발되고 Apple이 iOS 6에 구현한 Cassowary 알고리즘을 기반으로 합니다. Cassowary는 우선순위(Required(1000), Default High(750), Default Low(250))가 있는 선형 부등식 시스템을 해결하여 제약 충돌을 관리할 수 있습니다. Auto Layout은 세 가지 크기 유형을 지원합니다: intrinsic(콘텐츠에 의해 결정되는 요소의 자연스러운 크기), explicit(명시적으로 설정된 제약), compressible/stretchable(Content Hugging Priority 및 Compression Resistance Priority를 통한 탄성 모드).

Intrinsic Content Size 및 우선순위

Auto Layout의 각 UI 요소에는 Intrinsic Content Size(콘텐츠에 의해 결정되는 자연스러운 크기)가 있습니다. UILabel의 경우 텍스트와 글꼴에 따라 달라지며, UIImageView의 경우 이미지 크기에 따라 달라집니다. Content Hugging Priority(늘어나기에 대한 저항) 및 Compression Resistance Priority(압축에 대한 저항)는 사용 가능한 공간이 변경될 때 요소의 동작을 제어합니다. 표준 값: hugging은 251, compression resistance는 749입니다. 두 요소가 공간을 두고 경쟁하는 경우 우선순위에 따라 먼저 늘어나는 요소가 결정됩니다. 이러한 우선순위를 이해하는 것은 Xcode가 디버거에서 강조 표시하는 Ambiguous Layout(모호한 레이아웃)을 해결하는 핵심입니다.

Constraint 구조

제약은 다음 방정식으로 설명됩니다: view1.attribute = multiplier × view2.attribute + constant. 속성에는 leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline이 포함됩니다. Multiplier는 비례 관계( view1 너비 = 0.5 × superview 너비)에 사용됩니다. Constant는 고정 오프셋(leading = superview.leading + 16)을 설정합니다. Interface Builder 도구는 Ctrl-드래그를 통해 시각적으로 제약을 생성할 수 있지만, 복잡한 레이아웃은 NSLayoutConstraint 또는 VFL(Visual Format Language)을 통한 프로그래밍 방식 생성이 필요하며, Apple은 iOS 9부터 NSLayoutConstraint로 대체할 것을 권장합니다.

iOS에서 Constraints 작동 방식

제약 시스템은 선형 프로그래밍 문제로 해결됩니다: Cassowary 알고리즘은 우선순위를 고려하여 모든 제약을 충족하는 모든 요소의 최적 배열을 찾습니다. 제약이 서로 모순되는 경우 Unsatisfiable Layout이 발생합니다 — Xcode가 상세한 충돌 설명과 함께 로그하는 예외입니다. 하나 이상의 요소 위치를 결정하기에 충분한 제약이 없는 경우 Ambiguous Layout이 발생하며 요소가 임의의 위치에 표시됩니다. Apple은 최소 세트를 권장합니다: 각 요소에 대해 position(x, y) 및 size(width, height)를 명시적으로 또는 intrinsic content size를 통해 설정해야 합니다. 제약은 일급 객체일 수 있습니다: 선행 요소(예: superview)와 후행 요소(자식 뷰)가 계층 구조를 만듭니다.

Cassowary 알고리즘 및 우선순위

Cassowary는 Sequential Quadratic Programming 방법을 사용하여 선형 부등식 시스템을 해결합니다. 각 제약에는 1에서 1000까지의 우선순위가 있습니다. Required(1000)는 필수 제약입니다. 충족할 수 없는 경우 앱이 NSConstraintException과 함께 충돌합니다. Default High(750)는 권장되며 Default Low(250)는 가장 덜 중요합니다. 충돌 시 Cassowary는 낮은 우선순위의 제약을 완화합니다. 예를 들어, 두 요소가 고정 너비를 필요로 하지만 화면이 너무 좁은 경우 낮은 우선순위의 제약이 완화됩니다. Xcode Debug View Hierarchy(Xcode 6부터 사용 가능한 디버깅 도구)는 Required 제약에 대한 문제만 강조 표시하며, 나머지는 오류 없이 처리됩니다.

UIStackView: 자동 Constraints 관리

UIStackView는 iOS 9(2015)에 도입된 컨테이너로, 중첩된 arrangedSubviews에 대한 제약을 자동으로 생성하고 관리합니다. UIStackView는 두 가지 축(수평 및 수직)을 지원합니다. distribution 설정은 공간 할당을 결정합니다: fill(hugging priority에 따른 비례 채우기), fillEqually(동일한 크기), fillProportionally(intrinsic content size에 비례), equalSpacing(동일한 간격), equalCentering(중심 간 동일한 거리). Alignment는 교차 축 정렬을 정의합니다: fill, leading, center, trailing(수평의 경우) 또는 fill, top, center, bottom(수직의 경우). UIStackView는 간격, 기준선 정렬 및 Dynamic Type 적응을 자동으로 관리합니다.

import UIKit

class StackViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stack = UIStackView()
        stack.axis = NSLayoutConstraint.Axis.vertical
        stack.distribution = .fillEqually
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        let label = UILabel()
        label.text = "Auto Layout Guide"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Apply", for: .normal)
        
        stack.addArrangedSubview(label)
        stack.addArrangedSubview(button)
        view.addSubview(stack)
        
        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stack.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 16),
            stack.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -16)
        ])
    }
}

코드는 두 요소(UILabel 및 UIButton)가 있는 수직 UIStackView를 만들고 8pt 간격으로 균등하게 분배(fillEqually)합니다. 스택은 가장자리에서 최소 16pt의 여백으로 화면 중앙에 배치됩니다. translatesAutoresizingMaskIntoConstraints = false는 프로그래밍 방식으로 제약을 생성할 때 필수입니다 — 이것이 없으면 Auto Layout이 작동하지 않습니다. IT Sectr에서는 iOS 프로젝트 화면의 80%에서 UIStackView를 사용하여 적응형 양식, 설정 목록 및 카드를 구축합니다.

중첩된 Stack Views

UIStackView는 중첩될 수 있습니다: 수직 스택 내의 수평 스택은 복잡한 레이아웃의 표준 패턴입니다. 외부 스택은 행을 관리하고 내부 스택은 각 행 내의 열을 관리합니다. 각 수준에서 axis, alignment 및 distribution의 조합은 단일 수동 제약 없이 사실상 무제한의 유연성을 제공합니다. Apple은 UIKit의 기본 레이아웃 도구로 UIStackView를 권장하며, 스택으로 처리되지 않는 경우(겹치는 뷰, 정확한 픽셀 배치, 사용자 지정 bounds 애니메이션)에만 수동 NSLayoutConstraint를 사용합니다.

NSLayoutConstraint: 프로그래밍 방식 제약 생성

NSLayoutConstraint는 코드에서 개별 제약을 생성하기 위한 프로그래밍 방식 API입니다. 각 제약은 item, attribute, relatedBy, toItem, attribute, multiplier, constant 매개변수가 있는 초기화자를 통해 생성됩니다. iOS 9부터 Apple은 Anchor API를 도입했습니다 — view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor 속성을 통한 더 읽기 쉬운 구문입니다. Anchor API는 자동으로 relatedBy = .equal을 설정하고 Anchors에서 First Item/Second Item을 사용하여 클래식 NSLayoutConstraint에 비해 코드를 40% 줄입니다.

import UIKit

class ConstraintViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let childView = UIView()
        childView.backgroundColor = .systemBlue
        childView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(childView)
        
        NSLayoutConstraint.activate([
            childView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
            childView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            childView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            childView.heightAnchor.constraint(equalToConstant: 120),
            childView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -24)
        ])
    }
}

코드는 safeAreaLayoutGuide(top) 및 화면 가장자리(leading/trailing)에서 여백을 두고 childView를 배치합니다. bottom에 대한 lessThanOrEqualTo는 뷰가 하단 경계를 초과하지 않도록 보장합니다. Anchor API는 앵커가 호환되지 않는 경우(예: leadingAnchor와 rightAnchor 혼합) 컴파일 타임 예외를 발생시켜 런타임 오류를 방지합니다. Apple은 iOS 9부터 프로그래밍 방식 Auto Layout의 표준으로 Anchor API를 권장합니다.

Auto Layout의 Safe Area 및 Layout Margins

Safe Area는 Dynamic Island, Notch, Status Bar, Home Indicator, 둥근 모서리와 같은 시스템 요소로 덮이지 않은 화면 영역입니다. iOS 11에서 Apple은 topLayoutGuide/bottomLayoutGuide를 safeAreaLayoutGuide로 대체했으며, 이는 기기 방향과 화면 컷아웃 존재에 자동으로 적응합니다. Layout Margins는 기본 내부 뷰 여백입니다(iOS에서 16pt, iPadOS에서 20pt). UILayoutGuide의 경우 RIGHT-TO-LEFT 지역화를 고려하여 사용자 지정 directionalLayoutMargins를 설정할 수 있습니다. Auto Layout은 앵커에서 safeAreaLayoutGuide를 사용할 때 자동으로 safe area를 존중합니다.

Dynamic Island 및 Notch 적응

Dynamic Island(iPhone 14 Pro 이상) 및 Notch(iPhone X~13)가 있는 기기에서 Safe Area는 세로 모드에서 상단 44pt(활성 상태 Dynamic Island의 경우 59pt)를 제외합니다. Home Indicator는 하단에 34pt를 추가합니다. 올바른 적응을 위해 모든 상단 제약은 safeAreaLayoutGuide.topAnchor에 연결되어야 하며 view.topAnchor가 아닙니다. 하단 제약은 safeAreaLayoutGuide.bottomAnchor 또는 Home Indicator 여백이 있는 view.bottomAnchor에 연결되어야 합니다. IT Sectr에서는 iPhone SE(2022), iPhone 14 Pro Max 및 iPad Pro 12.9″ 시뮬레이터에서 모든 화면을 테스트합니다 — 모든 safe area 변형을 다루는 세 가지 기기입니다.

일반적인 Auto Layout 오류

Auto Layout 작업 시 가장 빈번한 오류: translatesAutoresizingMaskIntoConstraints = false 누락, 충돌하는 Required 제약(우선순위 1000), Ambiguous Layout(위치 결정을 위한 불충분한 제약), 여러 줄 UILabel에 대한 잘못된 Content Hugging Priority, leading/trailing과 left/right 앵커 혼합입니다. Xcode 15+는 Runtime Issue Navigator에서 레이아웃 문제를 표시하고 자동 수정을 제안합니다. 복잡한 레이아웃의 경우 Debug View Hierarchy를 사용하세요: 노란색 표시기는 ambiguous layout을, 빨간색 표시기는 unsatisfiable을 나타냅니다.