야, 솔직히 말해서 앱 개발할 때 가장 짜증나는 게 뭔지 알아? 🤔 바로 아이폰 SE에서는 완벽하게 보이던 화면이 아이패드 프로에서는 완전 망가져 보이는 거지. 그리고 가로모드로 돌리면? 아... 말도 마. 😱

근데 있잖아, 이런 문제를 해결하는 마법 같은 도구가 있어. 바로 Auto Layout과 Size Classes야! 이 두 친구만 제대로 이해하면, 너의 앱은 어떤 디바이스에서든 완벽하게 보일 거야. 진짜로! 💪

오늘은 내가 실제 프로젝트에서 겪었던 삽질과 성공 경험을 바탕으로, 이 두 개념을 완전히 정복하는 방법을 알려줄게. 재능넷 같은 플랫폼에서도 이런 UI/UX 개발 노하우를 공유하는 전문가들이 많은데, 오늘 내가 너한테 알려주는 내용도 그만큼 실전적이고 유용할 거야! 🚀

🎯 Auto Layout이 뭔데? 기초부터 탄탄하게!

자, 일단 Auto Layout부터 제대로 이해해보자. 이거 없이 iOS 개발한다는 건... 마치 네비게이션 없이 처음 가는 곳 찾아가는 것과 같아. 가능은 한데 엄청 힘들지. 😅

🔧 제약조건(Constraints)의 세계

제약조건은 Auto Layout의 핵심이야. 이걸 이해하지 못하면 절대 반응형 UI를 만들 수 없어. 근데 걱정 마, 생각보다 간단해! 😊

📐 제약조건 우선순위 (Priority)

자, 이제 좀 더 고급 개념으로 들어가볼까? 제약조건에는 우선순위라는 게 있어. 이게 진짜 중요해! 🎯

예를 들어볼게. 버튼의 너비를 200포인트로 하고 싶은데, 화면이 작으면 줄어들어도 괜찮다고 하자. 그럼 이렇게 하면 돼:

// Swift 코드 예시
let widthConstraint = button.widthAnchor.constraint(equalToConstant: 200)
widthConstraint.priority = .defaultHigh // 750
widthConstraint.isActive = true

// 최소 너비는 반드시 지켜야 함
let minWidthConstraint = button.widthAnchor.constraint(greaterThanOrEqualToConstant: 100)
minWidthConstraint.priority = .required // 1000
minWidthConstraint.isActive = true

이렇게 하면 버튼은 가능하면 200포인트 너비를 유지하지만, 공간이 부족하면 100포인트까지 줄어들 수 있어. 근데 100포인트 이하로는 절대 안 줄어들지! 완벽하지? 😎

🎨 Intrinsic Content Size - 뷰의 자연스러운 크기

야, 이거 진짜 신기한 개념인데, Intrinsic Content Size라는 게 있어. 직역하면 "고유 콘텐츠 크기"인데, 쉽게 말하면 뷰가 자기 내용물에 맞춰서 "나는 이 정도 크기면 돼!"라고 자동으로 알려주는 거야. 🤓

실전 예시를 보자:

// 두 개의 레이블이 나란히 있을 때
let nameLabel = UILabel()
nameLabel.text = "이름"
nameLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal) // 251

let valueLabel = UILabel()
valueLabel.text = "홍길동입니다만 이름이 좀 길어요"
valueLabel.setContentHuggingPriority(.defaultLow, for: .horizontal) // 250

// 결과: nameLabel은 "이름" 크기만큼만 차지하고,
// valueLabel이 남은 공간을 다 차지함

이렇게 하면 "이름"이라는 짧은 텍스트는 필요한 만큼만 공간을 차지하고, 긴 이름 값이 나머지 공간을 유연하게 사용할 수 있어. 완전 스마트하지? 🧠

📱 Size Classes - 진짜 반응형의 시작

자, 이제 본격적으로 Size Classes에 대해 알아보자! 이게 진짜 게임 체인저야. 🎮

Size Classes는 애플이 만든 추상화 개념인데, 디바이스의 화면 크기를 Compact와 Regular 두 가지 카테고리로 나눈 거야. 그리고 이걸 가로(Width)와 세로(Height)에 각각 적용해서 총 4가지 조합이 나오지.

🎨 Size Classes 실전 활용법

자, 이제 실제로 어떻게 쓰는지 보자. Interface Builder(스토리보드)에서 Size Classes를 활용하는 방법부터 시작할게! 📐

코드로도 할 수 있어! 이게 더 유연하고 강력해:

// Swift 코드로 Size Classes 대응하기
class ResponsiveViewController: UIViewController {
    
    let stackView = UIStackView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupStackView()
    }
    
    func setupStackView() {
        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView)
        
        // 기본 제약조건
        NSLayoutConstraint.activate([
            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stackView.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -20)
        ])
        
        updateLayoutForTraitCollection()
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        
        // Size Class가 변경되었을 때만 레이아웃 업데이트
        if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass ||
           traitCollection.verticalSizeClass != previousTraitCollection?.verticalSizeClass {
            updateLayoutForTraitCollection()
        }
    }
    
    func updateLayoutForTraitCollection() {
        // Regular Width (iPad, iPhone 가로모드 큰 모델)
        if traitCollection.horizontalSizeClass == .regular {
            stackView.axis = .horizontal
            stackView.spacing = 30
            stackView.distribution = .fillEqually
        }
        // Compact Width (iPhone 세로모드)
        else {
            stackView.axis = .vertical
            stackView.spacing = 15
            stackView.distribution = .fill
        }
        
        // 애니메이션과 함께 레이아웃 변경
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
}

🔄 Adaptive Layout 패턴

실제 프로젝트에서 자주 쓰는 패턴들을 소개할게. 이거 알아두면 진짜 유용해! 💎

class AdaptiveCollectionViewController: UIViewController {
    
    var collectionView: UICollectionView!
    
    func numberOfColumns() -> Int {
        let horizontalClass = traitCollection.horizontalSizeClass
        let verticalClass = traitCollection.verticalSizeClass
        
        switch (horizontalClass, verticalClass) {
        case (.regular, .regular):
            // iPad - 4열
            return 4
        case (.regular, .compact):
            // iPhone Plus/Max 가로모드 - 3열
            return 3
        case (.compact, .regular):
            // iPhone 세로모드 - 2열
            return 2
        default:
            // iPhone 가로모드 - 2열
            return 2
        }
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        collectionView.collectionViewLayout.invalidateLayout()
    }
}

// UICollectionViewDelegateFlowLayout 구현
extension AdaptiveCollectionViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, 
                       layout collectionViewLayout: UICollectionViewLayout,
                       sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let columns = CGFloat(numberOfColumns())
        let spacing: CGFloat = 10
        let totalSpacing = spacing * (columns - 1)
        
        let width = (collectionView.bounds.width - totalSpacing) / columns
        return CGSize(width: width, height: width)
    }
}

class AdaptiveNavigationController: UIViewController {
    
    var splitViewController: UISplitViewController?
    var navigationController: UINavigationController?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupAdaptiveNavigation()
    }
    
    func setupAdaptiveNavigation() {
        if traitCollection.horizontalSizeClass == .regular {
            // iPad: Split View 사용
            let masterVC = MasterViewController()
            let detailVC = DetailViewController()
            
            let split = UISplitViewController()
            split.viewControllers = [
                UINavigationController(rootViewController: masterVC),
                UINavigationController(rootViewController: detailVC)
            ]
            split.preferredDisplayMode = .oneBesideSecondary
            
            addChild(split)
            view.addSubview(split.view)
            split.didMove(toParent: self)
            
            splitViewController = split
        } else {
            // iPhone: 일반 네비게이션
            let masterVC = MasterViewController()
            let navController = UINavigationController(rootViewController: masterVC)
            
            addChild(navController)
            view.addSubview(navController.view)
            navController.didMove(toParent: self)
            
            navigationController = navController
        }
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        
        // Size Class 변경 시 네비게이션 스타일 재구성
        if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass {
            // 기존 뷰 제거
            children.forEach { child in
                child.willMove(toParent: nil)
                child.view.removeFromSuperview()
                child.removeFromParent()
            }
            
            // 새로운 스타일로 재구성
            setupAdaptiveNavigation()
        }
    }
}

🛠️ 실전 프로젝트: 반응형 로그인 화면 만들기

자, 이제 배운 걸 다 합쳐서 실전 프로젝트를 만들어보자! 모든 디바이스에서 완벽하게 보이는 로그인 화면을 만들 거야. 🎯

import UIKit

class ResponsiveLoginViewController: UIViewController {
    
    // MARK: - UI Components
    
    private let scrollView: UIScrollView = {
        let scroll = UIScrollView()
        scroll.translatesAutoresizingMaskIntoConstraints = false
        scroll.showsVerticalScrollIndicator = false
        return scroll
    }()
    
    private let contentView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    private let logoImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(systemName: "person.circle.fill")
        imageView.tintColor = .systemBlue
        return imageView
    }()
    
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "환영합니다"
        label.font = .systemFont(ofSize: 32, weight: .bold)
        label.textAlignment = .center
        return label
    }()
    
    private let subtitleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "로그인하여 계속하세요"
        label.font = .systemFont(ofSize: 16, weight: .regular)
        label.textColor = .secondaryLabel
        label.textAlignment = .center
        return label
    }()
    
    private let emailTextField: UITextField = {
        let textField = UITextField()
        textField.translatesAutoresizingMaskIntoConstraints = false
        textField.placeholder = "이메일"
        textField.borderStyle = .roundedRect
        textField.keyboardType = .emailAddress
        textField.autocapitalizationType = .none
        return textField
    }()
    
    private let passwordTextField: UITextField = {
        let textField = UITextField()
        textField.translatesAutoresizingMaskIntoConstraints = false
        textField.placeholder = "비밀번호"
        textField.borderStyle = .roundedRect
        textField.isSecureTextEntry = true
        return textField
    }()
    
    private let loginButton: UIButton = {
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("로그인", for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 18, weight: .semibold)
        button.backgroundColor = .systemBlue
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 12
        return button
    }()
    
    // MARK: - Constraints
    
    private var logoHeightConstraint: NSLayoutConstraint!
    private var contentWidthConstraint: NSLayoutConstraint!
    private var topSpacingConstraint: NSLayoutConstraint!
    
    // MARK: - Lifecycle
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        setupConstraints()
        setupKeyboardObservers()
        updateLayoutForTraitCollection()
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        
        if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass ||
           traitCollection.verticalSizeClass != previousTraitCollection?.verticalSizeClass {
            updateLayoutForTraitCollection()
        }
    }
    
    // MARK: - Setup
    
    private func setupUI() {
        view.backgroundColor = .systemBackground
        
        view.addSubview(scrollView)
        scrollView.addSubview(contentView)
        
        contentView.addSubview(logoImageView)
        contentView.addSubview(titleLabel)
        contentView.addSubview(subtitleLabel)
        contentView.addSubview(emailTextField)
        contentView.addSubview(passwordTextField)
        contentView.addSubview(loginButton)
    }
    
    private func setupConstraints() {
        // ScrollView Constraints
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        // ContentView Constraints
        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            contentView.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor)
        ])
        
        // Content Width - Size Class에 따라 변경될 제약조건
        contentWidthConstraint = contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 0.9)
        contentWidthConstraint.isActive = true
        
        // Logo Constraints
        logoHeightConstraint = logoImageView.heightAnchor.constraint(equalToConstant: 120)
        topSpacingConstraint = logoImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 60)
        
        NSLayoutConstraint.activate([
            topSpacingConstraint,
            logoImageView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
            logoHeightConstraint,
            logoImageView.widthAnchor.constraint(equalTo: logoImageView.heightAnchor)
        ])
        
        // Title Label Constraints
        NSLayoutConstraint.activate([
            titleLabel.topAnchor.constraint(equalTo: logoImageView.bottomAnchor, constant: 30),
            titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20)
        ])
        
        // Subtitle Label Constraints
        NSLayoutConstraint.activate([
            subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
            subtitleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            subtitleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20)
        ])
        
        // Email TextField Constraints
        NSLayoutConstraint.activate([
            emailTextField.topAnchor.constraint(equalTo: subtitleLabel.bottomAnchor, constant: 40),
            emailTextField.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            emailTextField.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),
            emailTextField.heightAnchor.constraint(equalToConstant: 50)
        ])
        
        // Password TextField Constraints
        NSLayoutConstraint.activate([
            passwordTextField.topAnchor.constraint(equalTo: emailTextField.bottomAnchor, constant: 16),
            passwordTextField.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            passwordTextField.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),
            passwordTextField.heightAnchor.constraint(equalToConstant: 50)
        ])
        
        // Login Button Constraints
        NSLayoutConstraint.activate([
            loginButton.topAnchor.constraint(equalTo: passwordTextField.bottomAnchor, constant: 30),
            loginButton.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            loginButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),
            loginButton.heightAnchor.constraint(equalToConstant: 56),
            loginButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -40)
        ])
    }
    
    // MARK: - Adaptive Layout
    
    private func updateLayoutForTraitCollection() {
        let horizontalClass = traitCollection.horizontalSizeClass
        let verticalClass = traitCollection.verticalSizeClass
        
        // Size Class에 따른 레이아웃 조정
        switch (horizontalClass, verticalClass) {
        case (.regular, .regular):
            // iPad - 넓은 화면
            contentWidthConstraint.isActive = false
            contentWidthConstraint = contentView.widthAnchor.constraint(equalToConstant: 500)
            contentWidthConstraint.isActive = true
            
            logoHeightConstraint.constant = 150
            topSpacingConstraint.constant = 80
            titleLabel.font = .systemFont(ofSize: 38, weight: .bold)
            subtitleLabel.font = .systemFont(ofSize: 18, weight: .regular)
            
        case (.compact, .regular):
            // iPhone 세로모드
            contentWidthConstraint.isActive = false
            contentWidthConstraint = contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 0.9)
            contentWidthConstraint.isActive = true
            
            logoHeightConstraint.constant = 120
            topSpacingConstraint.constant = 60
            titleLabel.font = .systemFont(ofSize: 32, weight: .bold)
            subtitleLabel.font = .systemFont(ofSize: 16, weight: .regular)
            
        case (.regular, .compact), (.compact, .compact):
            // 가로모드 - 공간 절약
            contentWidthConstraint.isActive = false
            contentWidthConstraint = contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 0.7)
            contentWidthConstraint.isActive = true
            
            logoHeightConstraint.constant = 80
            topSpacingConstraint.constant = 30
            titleLabel.font = .systemFont(ofSize: 28, weight: .bold)
            subtitleLabel.font = .systemFont(ofSize: 14, weight: .regular)
            
        default:
            break
        }
        
        // 애니메이션과 함께 레이아웃 업데이트
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
    
    // MARK: - Keyboard Handling
    
    private func setupKeyboardObservers() {
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(keyboardWillShow),
            name: UIResponder.keyboardWillShowNotification,
            object: nil
        )
        
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(keyboardWillHide),
            name: UIResponder.keyboardWillHideNotification,
            object: nil
        )
    }
    
    @objc private func keyboardWillShow(_ notification: Notification) {
        guard let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else {
            return
        }
        
        let keyboardHeight = keyboardFrame.height
        let contentInsets = UIEdgeInsets(top: 0, left: 0, bottom: keyboardHeight, right: 0)
        
        scrollView.contentInset = contentInsets
        scrollView.scrollIndicatorInsets = contentInsets
        
        // 활성화된 텍스트 필드가 보이도록 스크롤
        if let activeField = [emailTextField, passwordTextField].first(where: { $0.isFirstResponder }) {
            let rect = activeField.convert(activeField.bounds, to: scrollView)
            scrollView.scrollRectToVisible(rect, animated: true)
        }
    }
    
    @objc private func keyboardWillHide(_ notification: Notification) {
        scrollView.contentInset = .zero
        scrollView.scrollIndicatorInsets = .zero
    }
    
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
}

🎯 고급 테크닉: Stack View 마스터하기

야, 솔직히 말하면 Auto Layout 제약조건 일일이 다 설정하는 거 진짜 귀찮지 않아? 😅 그래서 애플이 만든 게 바로 UIStackView야! 이거 진짜 혁명적이야.

📚 Stack View 속성 완전 정복

실전 예시를 보자:

class StackViewMasterViewController: UIViewController {
    
    // MARK: - 기본 Stack View 설정
    
    func createBasicStackView() -> UIStackView {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        // 기본 속성 설정
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .fill
        stackView.spacing = 16
        
        return stackView
    }
    
    // MARK: - Distribution 예시
    
    func demonstrateDistributions() {
        // 1. Fill - 하나의 뷰가 남은 공간을 다 차지
        let fillStack = UIStackView()
        fillStack.distribution = .fill
        // Content Hugging Priority가 낮은 뷰가 늘어남
        
        // 2. Fill Equally - 모든 뷰가 같은 크기
        let equalStack = UIStackView()
        equalStack.distribution = .fillEqually
        // 모든 뷰의 크기가 동일하게 조정됨
        
        // 3. Fill Proportionally - 비율에 맞춰 분배
        let proportionalStack = UIStackView()
        proportionalStack.distribution = .fillProportionally
        // Intrinsic Content Size 비율대로 공간 분배
        
        // 4. Equal Spacing - 뷰 사이 간격이 동일
        let spacingStack = UIStackView()
        spacingStack.distribution = .equalSpacing
        // 뷰는 고유 크기 유지, 간격만 조정
        
        // 5. Equal Centering - 중심점 사이 거리가 동일
        let centeringStack = UIStackView()
        centeringStack.distribution = .equalCentering
        // 각 뷰의 중심점 사이 거리가 같음
    }
    
    // MARK: - 중첩 Stack View로 복잡한 레이아웃
    
    func createComplexLayout() -> UIView {
        // 메인 세로 스택
        let mainStack = UIStackView()
        mainStack.axis = .vertical
        mainStack.spacing = 20
        mainStack.translatesAutoresizingMaskIntoConstraints = false
        
        // 헤더 영역
        let headerStack = UIStackView()
        headerStack.axis = .horizontal
        headerStack.spacing = 12
        headerStack.alignment = .center
        
        let profileImage = UIImageView()
        profileImage.widthAnchor.constraint(equalToConstant: 50).isActive = true
        profileImage.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        let nameLabel = UILabel()
        nameLabel.text = "홍길동"
        nameLabel.font = .systemFont(ofSize: 18, weight: .bold)
        
        headerStack.addArrangedSubview(profileImage)
        headerStack.addArrangedSubview(nameLabel)
        
        // 콘텐츠 영역 - 가로 스택
        let contentStack = UIStackView()
        contentStack.axis = .horizontal
        contentStack.spacing = 16
        contentStack.distribution = .fillEqually
        
        for i in 1...3 {
            let card = createCardView(title: "카드 \(i)")
            contentStack.addArrangedSubview(card)
        }
        
        // 버튼 영역
        let buttonStack = UIStackView()
        buttonStack.axis = .horizontal
        buttonStack.spacing = 12
        buttonStack.distribution = .fillEqually
        
        let cancelButton = UIButton(type: .system)
        cancelButton.setTitle("취소", for: .normal)
        cancelButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        let confirmButton = UIButton(type: .system)
        confirmButton.setTitle("확인", for: .normal)
        confirmButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        buttonStack.addArrangedSubview(cancelButton)
        buttonStack.addArrangedSubview(confirmButton)
        
        // 모두 메인 스택에 추가
        mainStack.addArrangedSubview(headerStack)
        mainStack.addArrangedSubview(contentStack)
        mainStack.addArrangedSubview(buttonStack)
        
        return mainStack
    }
    
    func createCardView(title: String) -> UIView {
        let container = UIView()
        container.backgroundColor = .systemGray6
        container.layer.cornerRadius = 12
        
        let label = UILabel()
        label.text = title
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        
        container.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: container.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: container.centerYAnchor),
            container.heightAnchor.constraint(equalToConstant: 100)
        ])
        
        return container
    }
    
    // MARK: - 동적 Stack View 관리
    
    func dynamicStackViewManagement() {
        let stackView = UIStackView()
        
        // 뷰 추가
        let newView = UILabel()
        newView.text = "새로운 항목"
        stackView.addArrangedSubview(newView)
        
        // 특정 위치에 삽입
        let insertView = UILabel()
        insertView.text = "삽입된 항목"
        stackView.insertArrangedSubview(insertView, at: 0)
        
        // 뷰 제거 (애니메이션과 함께)
        UIView.animate(withDuration: 0.3, animations: {
            newView.isHidden = true
        }) { _ in
            stackView.removeArrangedSubview(newView)
            newView.removeFromSuperview()
        }
        
        // 모든 뷰 제거
        stackView.arrangedSubviews.forEach { view in
            stackView.removeArrangedSubview(view)
            view.removeFromSuperview()
        }
    }
    
    // MARK: - Size Classes와 Stack View 조합
    
    func adaptiveStackView() -> UIStackView {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        // 초기 설정
        updateStackViewForTraitCollection(stackView)
        
        return stackView
    }
    
    func updateStackViewForTraitCollection(_ stackView: UIStackView) {
        if traitCollection.horizontalSizeClass == .regular {
            // iPad: 가로 배치
            stackView.axis = .horizontal
            stackView.spacing = 30
            stackView.distribution = .fillEqually
        } else {
            // iPhone: 세로 배치
            stackView.axis = .vertical
            stackView.spacing = 16
            stackView.distribution = .fill
        }
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        
        // Stack View 업데이트
        view.subviews.compactMap { $0 as? UIStackView }.forEach { stackView in
            updateStackViewForTraitCollection(stackView)
        }
    }
}

🔍 디버깅과 문제 해결

Auto Layout 작업하다 보면 제약조건 충돌이나 예상치 못한 레이아웃 문제가 생기기 마련이야. 이럴 때 어떻게 해결하는지 알아보자! 🔧

⚠️ 흔한 문제들과 해결법

Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want...

// 충돌 해결 예시
class ConflictResolutionExample: UIViewController {
    
    func resolveConflict() {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(view)
        
        // 문제: 고정 너비와 양쪽 여백을 동시에 설정
        let widthConstraint = view.widthAnchor.constraint(equalToConstant: 300)
        let leadingConstraint = view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20)
        let trailingConstraint = view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20)
        
        // 해결 1: 우선순위 조정
        widthConstraint.priority = .defaultHigh // 750
        trailingConstraint.priority = .defaultLow // 250
        
        NSLayoutConstraint.activate([
            widthConstraint,
            leadingConstraint,
            trailingConstraint,
            view.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
        
        // 결과: 가능하면 300 너비를 유지하되, 
        // 화면이 작으면 trailing 제약이 양보함
    }
    
    func betterApproach() {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(view)
        
        // 해결 2: 최대/최소 제약조건 사용
        NSLayoutConstraint.activate([
            view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20),
            view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20),
            view.widthAnchor.constraint(lessThanOrEqualToConstant: 300), // 최대 300
            view.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            view.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
        
        // 결과: 화면이 넓으면 300, 좁으면 양쪽 20 여백 유지
    }
}

// Ambiguous Layout 디버깅
extension UIView {
    func debugAmbiguousLayout() {
        #if DEBUG
        if self.hasAmbiguousLayout {
            print("⚠️ Ambiguous Layout 발견: \(self)")
            print("현재 프레임: \(self.frame)")
            print("제약조건들:")
            self.constraints.forEach { constraint in
                print("  - \(constraint)")
            }
        }
        
        // 모든 서브뷰도 확인
        for subview in self.subviews {
            subview.debugAmbiguousLayout()
        }
        #endif
    }
    
    func exerciseAmbiguityInLayout() {
        #if DEBUG
        // 가능한 레이아웃들을 순환하며 보여줌 (디버깅용)
        if self.hasAmbiguousLayout {
            self.exerciseAmbiguityInLayout()
        }
        #endif
    }
}

// 사용 예시
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    #if DEBUG
    view.debugAmbiguousLayout()
    #endif
}

🛠️ 디버깅 도구 활용하기

let constraint = view.widthAnchor.constraint(equalToConstant: 200)
constraint.identifier = "MainView.Width"
constraint.isActive = true

// 에러 메시지에서 "MainView.Width"로 표시되어 찾기 쉬움!

class DynamicConstraintViewController: UIViewController {
    
    var widthConstraint: NSLayoutConstraint!
    
    func setupView() {
        let myView = UIView()
        myView.translatesAutoresizingMaskIntoConstraints = false
        myView.backgroundColor = .systemBlue
        view.addSubview(myView)
        
        widthConstraint = myView.widthAnchor.constraint(equalToConstant: 100)
        
        NSLayoutConstraint.activate([
            myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            widthConstraint,
            myView.heightAnchor.constraint(equalToConstant: 100)
        ])
    }
    
    func animateWidthChange(to newWidth: CGFloat) {
        // 제약조건 값 변경
        widthConstraint.constant = newWidth
        
        // 애니메이션과 함께 레이아웃 업데이트
        UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
            self.view.layoutIfNeeded()
        }
    }
    
    func toggleConstraint() {
        // 제약조건 활성화/비활성화
        widthConstraint.isActive.toggle()
        
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
}

🎨 실전 팁과 베스트 프랙티스

자, 이제 진짜 프로처럼 Auto Layout을 다루는 방법을 알려줄게! 이건 내가 수년간 삽질하면서 배운 노하우야. 😎

// ❌ 나쁜 예
view.topAnchor.constraint(equalTo: superview.topAnchor)

// ✅ 좋은 예
view.topAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.topAnchor)

// 더 나은 예 - 상황에 따라 선택
if #available(iOS 11.0, *) {
    view.topAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.topAnchor).isActive = true
} else {
    view.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
}

// Layout Margins 사용
view.leadingAnchor.constraint(equalTo: superview.layoutMarginsGuide.leadingAnchor)

// 커스텀 마진 설정
superview.directionalLayoutMargins = NSDirectionalEdgeInsets(
    top: 20,
    leading: 16,
    bottom: 20,
    trailing: 16
)

// Readable Content Guide (텍스트 가독성 최적화)
label.leadingAnchor.constraint(equalTo: view.readableContentGuide.leadingAnchor)
label.trailingAnchor.constraint(equalTo: view.readableContentGuide.trailingAnchor)
// iPad에서 텍스트가 너무 넓게 펼쳐지는 것을 방지!

class ReusableConstraintsViewController: UIViewController {
    
    // 제약조건을 프로퍼티로 저장
    private var compactConstraints: [NSLayoutConstraint] = []
    private var regularConstraints: [NSLayoutConstraint] = []
    
    func setupConstraints() {
        let myView = UIView()
        myView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(myView)
        
        // 공통 제약조건
        let commonConstraints = [
            myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ]
        
        // Compact용 제약조건
        compactConstraints = [
            myView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),
            myView.heightAnchor.constraint(equalToConstant: 200)
        ]
        
        // Regular용 제약조건
        regularConstraints = [
            myView.widthAnchor.constraint(equalToConstant: 400),
            myView.heightAnchor.constraint(equalToConstant: 300)
        ]
        
        // 공통 제약조건은 항상 활성화
        NSLayoutConstraint.activate(commonConstraints)
        
        // Size Class에 따라 선택적 활성화
        updateConstraintsForTraitCollection()
    }
    
    func updateConstraintsForTraitCollection() {
        if traitCollection.horizontalSizeClass == .compact {
            NSLayoutConstraint.deactivate(regularConstraints)
            NSLayoutConstraint.activate(compactConstraints)
        } else {
            NSLayoutConstraint.deactivate(compactConstraints)
            NSLayoutConstraint.activate(regularConstraints)
        }
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        
        if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass {
            UIView.animate(withDuration: 0.3) {
                self.updateConstraintsForTraitCollection()
                self.view.layoutIfNeeded()
            }
        }
    }
}

// ❌ 나쁜 예 - 매번 제거하고 다시 추가
func updateLayout() {
    view.removeConstraints(view.constraints)
    // 새로운 제약조건 추가...
}

// ✅ 좋은 예 - 활성화/비활성화
func updateLayout() {
    oldConstraint.isActive = false
    newConstraint.isActive = true
}

// 더 나은 예 - 배치로 처리
func updateLayout() {
    NSLayoutConstraint.deactivate(oldConstraints)
    NSLayoutConstraint.activate(newConstraints)
}

class AnimatedConstraintViewController: UIViewController {
    
    var heightConstraint: NSLayoutConstraint!
    
    func animateHeightChange() {
        // 1. 제약조건 값 변경
        heightConstraint.constant = 300
        
        // 2. 애니메이션 블록 안에서 layoutIfNeeded() 호출
        UIView.animate(
            withDuration: 0.5,
            delay: 0,
            usingSpringWithDamping: 0.7,
            initialSpringVelocity: 0.5,
            options: .curveEaseInOut
        ) {
            self.view.layoutIfNeeded()
        } completion: { finished in
            print("애니메이션 완료!")
        }
    }
    
    func animateMultipleConstraints() {
        // 여러 제약조건을 동시에 애니메이션
        widthConstraint.constant = 200
        heightConstraint.constant = 200
        centerXConstraint.constant = 50
        
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
    
    func animateWithKeyframes() {
        // 키프레임 애니메이션으로 단계적 변화
        UIView.animateKeyframes(
            withDuration: 1.0,
            delay: 0,
            options: []
        ) {
            // 첫 번째 단계 (0~0.5초)
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
                self.heightConstraint.constant = 200
                self.view.layoutIfNeeded()
            }
            
            // 두 번째 단계 (0.5~1.0초)
            UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
                self.widthConstraint.constant = 300
                self.view.layoutIfNeeded()
            }
        }
    }
}

🎯 실무에서 자주 쓰는 패턴

class DynamicHeightTableViewCell: UITableViewCell {
    
    let titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 18, weight: .bold)
        label.numberOfLines = 0 // 여러 줄 허용
        return label
    }()
    
    let descriptionLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 14)
        label.textColor = .secondaryLabel
        label.numberOfLines = 0
        return label
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupViews() {
        contentView.addSubview(titleLabel)
        contentView.addSubview(descriptionLabel)
        
        NSLayoutConstraint.activate([
            // Title Label
            titleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            
            // Description Label
            descriptionLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 8),
            descriptionLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            descriptionLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            descriptionLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
            // 중요: 마지막 뷰의 bottom을 contentView.bottom에 연결!
        ])
    }
}

// ViewController에서 설정
class TableViewController: UITableViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 자동 높이 계산 활성화
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 100 // 예상 높이 (성능 최적화)
    }
}

class ScrollableFormViewController: UIViewController {
    
    private let scrollView = UIScrollView()
    private let contentView = UIView()
    private var activeTextField: UITextField?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupScrollView()
        setupForm()
        setupKeyboardHandling()
    }
    
    private func setupScrollView() {
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        contentView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(scrollView)
        scrollView.addSubview(contentView)
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
            // 중요: width는 scrollView와 같게!
        ])
    }
    
    private func setupForm() {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        stackView.spacing = 20
        
        contentView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 20),
            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20),
            stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20)
            // 중요: 마지막 뷰의 bottom을 contentView.bottom에 연결!
        ])
        
        // 폼 필드들 추가
        let fields = ["이름", "이메일", "전화번호", "주소", "상세주소", "우편번호"]
        fields.forEach { placeholder in
            let textField = UITextField()
            textField.placeholder = placeholder
            textField.borderStyle = .roundedRect
            textField.heightAnchor.constraint(equalToConstant: 50).isActive = true
            textField.delegate = self
            stackView.addArrangedSubview(textField)
        }
    }
    
    private func setupKeyboardHandling() {
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(keyboardWillShow),
            name: UIResponder.keyboardWillShowNotification,
            object: nil
        )
        
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(keyboardWillHide),
            name: UIResponder.keyboardWillHideNotification,
            object: nil
        )
        
        // 화면 탭하면 키보드 숨기기
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
        view.addGestureRecognizer(tapGesture)
    }
    
    @objc private func keyboardWillShow(_ notification: Notification) {
        guard let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect,
              let activeTextField = activeTextField else {
            return
        }
        
        let keyboardHeight = keyboardFrame.height
        let contentInsets = UIEdgeInsets(top: 0, left: 0, bottom: keyboardHeight + 20, right: 0)
        
        scrollView.contentInset = contentInsets
        scrollView.scrollIndicatorInsets = contentInsets
        
        // 활성 텍스트 필드가 보이도록 스크롤
        let textFieldFrame = activeTextField.convert(activeTextField.bounds, to: scrollView)
        scrollView.scrollRectToVisible(textFieldFrame, animated: true)
    }
    
    @objc private func keyboardWillHide(_ notification: Notification) {
        scrollView.contentInset = .zero
        scrollView.scrollIndicatorInsets = .zero
    }
    
    @objc private func dismissKeyboard() {
        view.endEditing(true)
    }
}

extension ScrollableFormViewController: UITextFieldDelegate {
    func textFieldDidBeginEditing(_ textField: UITextField) {
        activeTextField = textField
    }
    
    func textFieldDidEndEditing(_ textField: UITextField) {
        activeTextField = nil
    }
}

🌟 재능넷에서 배우는 실전 노하우

있잖아, 재능넷(https://www.jaenung.net)에 가보면 Auto Layout과 UI 디자인 전문가들이 정말 많아. 나도 거기서 많은 걸 배웠거든! 🎓

특히 실무 경험이 풍부한 개발자들이 자신만의 노하우를 공유하는데, 책이나 공식 문서에서는 배울 수 없는 실전 팁들이 가득해. 예를 들면:

🚀 고급 기법: Custom Layout과 최적화

자, 이제 진짜 고급 기법으로 넘어가볼까? 이건 중급 이상 개발자들을 위한 내용이야! 🎯

🎨 NSLayoutAnchor vs NSLayoutConstraint

두 가지 방법으로 제약조건을 만들 수 있는데, 각각 장단점이 있어:

// NSLayoutAnchor 방식 (추천)
view1.leadingAnchor.constraint(equalTo: view2.leadingAnchor, constant: 20).isActive = true

// NSLayoutConstraint 방식
NSLayoutConstraint(
    item: view1,
    attribute: .leading,
    relatedBy: .equal,
    toItem: view2,
    attribute: .leading,
    multiplier: 1.0,
    constant: 20
).isActive = true

// 잘못된 조합도 컴파일됨 (런타임 에러!)
NSLayoutConstraint(
    item: view1,
    attribute: .leading,  // X축
    relatedBy: .equal,
    toItem: view2,
    attribute: .top,      // Y축 - 이건 말이 안 되지!
    multiplier: 1.0,
    constant: 20
).isActive = true

⚡ 성능 최적화 기법

class OptimizedViewController: UIViewController {
    
    // 제약조건을 미리 만들어두고 활성화/비활성화만 함
    private var portraitConstraints: [NSLayoutConstraint] = []
    private var landscapeConstraints: [NSLayoutConstraint] = []
    
    func setupConstraints() {
        let myView = UIView()
        myView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(myView)
        
        // 세로 모드 제약조건
        portraitConstraints = [
            myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            myView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8),
            myView.heightAnchor.constraint(equalToConstant: 200)
        ]
        
        // 가로 모드 제약조건
        landscapeConstraints = [
            myView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            myView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
            myView.widthAnchor.constraint(equalToConstant: 300),
            myView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.6)
        ]
        
        // 초기 활성화
        updateConstraints()
    }
    
    func updateConstraints() {
        if view.bounds.width > view.bounds.height {
            // 가로 모드
            NSLayoutConstraint.deactivate(portraitConstraints)
            NSLayoutConstraint.activate(landscapeConstraints)
        } else {
            // 세로 모드
            NSLayoutConstraint.deactivate(landscapeConstraints)
            NSLayoutConstraint.activate(portraitConstraints)
        }
    }
    
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        
        coordinator.animate { _ in
            self.updateConstraints()
            self.view.layoutIfNeeded()
        }
    }
}

class EfficientLayoutViewController: UIViewController {
    
    func batchUpdateConstraints() {
        // ❌ 나쁜 예 - 매번 layoutIfNeeded() 호출
        constraint1.constant = 100
        view.layoutIfNeeded()
        
        constraint2.constant = 200
        view.layoutIfNeeded()
        
        constraint3.constant = 300
        view.layoutIfNeeded()
        
        // ✅ 좋은 예 - 한 번에 업데이트
        constraint1.constant = 100
        constraint2.constant = 200
        constraint3.constant = 300
        view.layoutIfNeeded() // 한 번만!
    }
    
    func efficientAnimation() {
        // 여러 제약조건을 동시에 변경
        UIView.animate(withDuration: 0.3) {
            self.constraint1.constant = 100
            self.constraint2.constant = 200
            self.constraint3.constant = 300
            // 애니메이션 블록 안에서 한 번만 호출
            self.view.layoutIfNeeded()
        }
    }
}

func optimizePriorities() {
    let titleLabel = UILabel()
    let subtitleLabel = UILabel()
    let button = UIButton()
    
    // 타이틀은 절대 잘리면 안 됨
    titleLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
    titleLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)
    
    // 서브타이틀은 공간이 부족하면 줄어들어도 됨
    subtitleLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
    subtitleLabel.setContentHuggingPriority(.defaultLow, for: .horizontal)
    
    // 버튼은 고정 크기 유지
    button.setContentCompressionResistancePriority(.required, for: .horizontal)
    button.setContentHuggingPriority(.required, for: .horizontal)
}

🎯 실전 프로젝트: 완벽한 프로필 화면

지금까지 배운 모든 걸 종합해서, 진짜 실무에서 쓸 수 있는 프로필 화면을 만들어보자! 🚀

import UIKit

class ProfileViewController: UIViewController {
    
    // MARK: - UI Components
    
    private let scrollView: UIScrollView = {
        let scroll = UIScrollView()
        scroll.translatesAutoresizingMaskIntoConstraints = false
        scroll.showsVerticalScrollIndicator = false
        return scroll
    }()
    
    private let contentStackView: UIStackView = {
        let stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical
        stack.spacing = 24
        return stack
    }()
    
    private let headerView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    private let profileImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.backgroundColor = .systemGray5
        imageView.layer.borderWidth = 3
        imageView.layer.borderColor = UIColor.white.cgColor
        return imageView
    }()
    
    private let nameLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 28, weight: .bold)
        label.textAlignment = .center
        return label
    }()
    
    private let bioLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = .systemFont(ofSize: 16)
        label.textColor = .secondaryLabel
        label.textAlignment = .center
        label.numberOfLines = 0
        return label
    }()
    
    private let statsStackView: UIStackView = {
        let stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .horizontal
        stack.distribution = .fillEqually
        stack.spacing = 16
        return stack
    }()
    
    private let editButton: UIButton = {
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("프로필 편집", for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 16, weight: .semibold)
        button.backgroundColor = .systemBlue
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 12
        return button
    }()
    
    // MARK: - Constraints
    
    private var profileImageSizeConstraint: NSLayoutConstraint!
    private var compactConstraints: [NSLayoutConstraint] = []
    private var regularConstraints: [NSLayoutConstraint] = []
    
    // MARK: - Lifecycle
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        setupConstraints()
        loadData()
        updateLayoutForTraitCollection()
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // 프로필 이미지를 원형으로
        profileImageView.layer.cornerRadius = profileImageView.bounds.width / 2
    }
    
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        
        if traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass {
            updateLayoutForTraitCollection()
        }
    }
    
    // MARK: - Setup
    
    private func setupUI() {
        view.backgroundColor = .systemBackground
        title = "프로필"
        
        view.addSubview(scrollView)
        scrollView.addSubview(contentStackView)
        
        // Header 구성
        headerView.addSubview(profileImageView)
        headerView.addSubview(nameLabel)
        headerView.addSubview(bioLabel)
        
        // Stats 구성
        let stats = [
            ("게시물", "127"),
            ("팔로워", "1.2K"),
            ("팔로잉", "456")
        ]
        
        stats.forEach { title, value in
            let statView = createStatView(title: title, value: value)
            statsStackView.addArrangedSubview(statView)
        }
        
        // Stack View에 추가
        contentStackView.addArrangedSubview(headerView)
        contentStackView.addArrangedSubview(statsStackView)
        contentStackView.addArrangedSubview(editButton)
        
        // 추가 섹션들
        addInfoSection()
        addActivitySection()
    }
    
    private func setupConstraints() {
        // ScrollView
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        // ContentStackView
        NSLayoutConstraint.activate([
            contentStackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 20),
            contentStackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20),
            contentStackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -20),
            contentStackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -20),
            contentStackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -40)
        ])
        
        // Profile Image
        profileImageSizeConstraint = profileImageView.widthAnchor.constraint(equalToConstant: 120)
        
        NSLayoutConstraint.activate([
            profileImageView.topAnchor.constraint(equalTo: headerView.topAnchor),
            profileImageView.centerXAnchor.constraint(equalTo: headerView.centerXAnchor),
            profileImageSizeConstraint,
            profileImageView.heightAnchor.constraint(equalTo: profileImageView.widthAnchor)
        ])
        
        // Name Label
        NSLayoutConstraint.activate([
            nameLabel.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: 16),
            nameLabel.leadingAnchor.constraint(equalTo: headerView.leadingAnchor),
            nameLabel.trailingAnchor.constraint(equalTo: headerView.trailingAnchor)
        ])
        
        // Bio Label
        NSLayoutConstraint.activate([
            bioLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
            bioLabel.leadingAnchor.constraint(equalTo: headerView.leadingAnchor),
            bioLabel.trailingAnchor.constraint(equalTo: headerView.trailingAnchor),
            bioLabel.bottomAnchor.constraint(equalTo: headerView.bottomAnchor)
        ])
        
        // Edit Button
        NSLayoutConstraint.activate([
            editButton.heightAnchor.constraint(equalToConstant: 50)
        ])
        
        // Compact/Regular 제약조건 준비
        setupAdaptiveConstraints()
    }
    
    private func setupAdaptiveConstraints() {
        // Compact: 작은 프로필 이미지, 세로 배치
        compactConstraints = [
            profileImageSizeConstraint
        ]
        
        // Regular: 큰 프로필 이미지, 가로 배치 가능
        let regularImageSize = profileImageView.widthAnchor.constraint(equalToConstant: 150)
        regularConstraints = [
            regularImageSize
        ]
    }
    
    private func updateLayoutForTraitCollection() {
        if traitCollection.horizontalSizeClass == .regular {
            // iPad
            NSLayoutConstraint.deactivate(compactConstraints)
            NSLayoutConstraint.activate(regularConstraints)
            
            nameLabel.font = .systemFont(ofSize: 32, weight: .bold)
            bioLabel.font = .systemFont(ofSize: 18)
            contentStackView.spacing = 32
        } else {
            // iPhone
            NSLayoutConstraint.deactivate(regularConstraints)
            NSLayoutConstraint.activate(compactConstraints)
            
            nameLabel.font = .systemFont(ofSize: 28, weight: .bold)
            bioLabel.font = .systemFont(ofSize: 16)
            contentStackView.spacing = 24
        }
        
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
    
    // MARK: - Helper Methods
    
    private func createStatView(title: String, value: String) -> UIView {
        let container = UIView()
        container.translatesAutoresizingMaskIntoConstraints = false
        
        let valueLabel = UILabel()
        valueLabel.translatesAutoresizingMaskIntoConstraints = false
        valueLabel.text = value
        valueLabel.font = .systemFont(ofSize: 20, weight: .bold)
        valueLabel.textAlignment = .center
        
        let titleLabel = UILabel()
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.text = title
        titleLabel.font = .systemFont(ofSize: 14)
        titleLabel.textColor = .secondaryLabel
        titleLabel.textAlignment = .center
        
        container.addSubview(valueLabel)
        container.addSubview(titleLabel)
        
        NSLayoutConstraint.activate([
            valueLabel.topAnchor.constraint(equalTo: container.topAnchor),
            valueLabel.centerXAnchor.constraint(equalTo: container.centerXAnchor),
            
            titleLabel.topAnchor.constraint(equalTo: valueLabel.bottomAnchor, constant: 4),
            titleLabel.centerXAnchor.constraint(equalTo: container.centerXAnchor),
            titleLabel.bottomAnchor.constraint(equalTo: container.bottomAnchor)
        ])
        
        return container
    }
    
    private func addInfoSection() {
        let sectionTitle = createSectionTitle("정보")
        contentStackView.addArrangedSubview(sectionTitle)
        
        let infoItems = [
            ("📧", "이메일", "user@example.com"),
            ("📱", "전화", "+82 10-1234-5678"),
            ("📍", "위치", "서울, 대한민국"),
            ("🎂", "생일", "1990년 1월 1일")
        ]
        
        infoItems.forEach { emoji, title, value in
            let infoRow = createInfoRow(emoji: emoji, title: title, value: value)
            contentStackView.addArrangedSubview(infoRow)
        }
    }
    
    private func addActivitySection() {
        let sectionTitle = createSectionTitle("최근 활동")
        contentStackView.addArrangedSubview(sectionTitle)
        
        let activities = [
            "새로운 게시물 작성",
            "댓글 5개 작성",
            "프로필 업데이트"
        ]
        
        activities.forEach { activity in
            let activityRow = createActivityRow(text: activity)
            contentStackView.addArrangedSubview(activityRow)
        }
    }
    
    private func createSectionTitle(_ text: String) -> UILabel {
        let label = UILabel()
        label.text = text
        label.font = .systemFont(ofSize: 20, weight: .bold)
        return label
    }
    
    private func createInfoRow(emoji: String, title: String, value: String) -> UIView {
        let container = UIView()
        container.translatesAutoresizingMaskIntoConstraints = false
        container.backgroundColor = .systemGray6
        container.layer.cornerRadius = 12
        
        let emojiLabel = UILabel()
        emojiLabel.translatesAutoresizingMaskIntoConstraints = false
        emojiLabel.text = emoji
        emojiLabel.font = .systemFont(ofSize: 24)
        
        let titleLabel = UILabel()
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.text = title
        titleLabel.font = .systemFont(ofSize: 14, weight: .medium)
        titleLabel.textColor = .secondaryLabel
        
        let valueLabel = UILabel()
        valueLabel.translatesAutoresizingMaskIntoConstraints = false
        valueLabel.text = value
        valueLabel.font = .systemFont(ofSize: 16)
        
        let textStack = UIStackView(arrangedSubviews: [titleLabel, valueLabel])
        textStack.translatesAutoresizingMaskIntoConstraints = false
        textStack.axis = .vertical
        textStack.spacing = 4
        
        container.addSubview(emojiLabel)
        container.addSubview(textStack)
        
        NSLayoutConstraint.activate([
            container.heightAnchor.constraint(greaterThanOrEqualToConstant: 70),
            
            emojiLabel.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 16),
            emojiLabel.centerYAnchor.constraint(equalTo: container.centerYAnchor),
            
            textStack.leadingAnchor.constraint(equalTo: emojiLabel.trailingAnchor, constant: 16),
            textStack.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: -16),
            textStack.centerYAnchor.constraint(equalTo: container.centerYAnchor)
        ])
        
        return container
    }
    
    private func createActivityRow(text: String) -> UIView {
        let container = UIView()
        container.translatesAutoresizingMaskIntoConstraints = false
        container.backgroundColor = .systemGray6
        container.layer.cornerRadius = 12
        
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = text
        label.font = .systemFont(ofSize: 16)
        
        let timeLabel = UILabel()
        timeLabel.translatesAutoresizingMaskIntoConstraints = false
        timeLabel.text = "2시간 전"
        timeLabel.font = .systemFont(ofSize: 14)
        timeLabel.textColor = .secondaryLabel
        
        container.addSubview(label)
        container.addSubview(timeLabel)
        
        NSLayoutConstraint.activate([
            container.heightAnchor.constraint(equalToConstant: 60),
            
            label.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 16),
            label.centerYAnchor.constraint(equalTo: container.centerYAnchor),
            
            timeLabel.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: -16),
            timeLabel.centerYAnchor.constraint(equalTo: container.centerYAnchor),
            timeLabel.leadingAnchor.constraint(greaterThanOrEqualTo: label.trailingAnchor, constant: 8)
        ])
        
        label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        timeLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
        
        return container
    }
    
    private func loadData() {
        // 실제로는 서버에서 데이터를 가져옴
        nameLabel.text = "홍길동"
        bioLabel.text = "iOS 개발자 | Swift 전문가\n재능넷에서 개발 노하우를 공유합니다 ✨"
        profileImageView.image = UIImage(systemName: "person.circle.fill")
        profileImageView.tintColor = .systemBlue
    }
}

🎓 마무리하며

와... 여기까지 왔다니 대단한데? 👏 진짜 긴 여정이었지만, 이제 너는 Auto Layout과 Size Classes의 진정한 마스터야!

있잖아, 처음에는 Auto Layout이 어렵게 느껴질 수 있어. 나도 그랬거든. 하지만 계속 연습하다 보면 어느새 자연스럽게 손이 움직이게 될 거야. 마치 자전거 타는 것처럼! 🚴‍♂️

그리고 막히는 부분이 있으면 재능넷 같은 플랫폼에서 전문가들의 도움을 받는 것도 좋은 방법이야. 혼자 삽질하는 것보다 훨씬 빠르게 성장할 수 있거든!

자, 이제 너만의 멋진 반응형 UI를 만들어볼 시간이야! 화이팅! 🚀✨

행운을 빌어! 그리고 멋진 앱 만들면 꼭 자랑해줘! 😊👍