Swift) AutoLayout vs Frame

 📘 Swift 문법 정리: AutoLayout vs Frame

Auto Layout 과 frame은 뷰의 위치와 크기를 설정하는 두 가지 방식이다각각에 대해 한 번 알아보자

---

🔹 Auto Layout 이란?

뷰들 간의 관계(제약 조건)를 통해 위치/크기를 자동으로 계산하는 시스템

기기의 화면 크기, 회전, 콘텐츠에 따라 동적으로 레이아웃을 조정할 수 있다.

---

🔍 사용 예시

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let label = UILabel()
        label.text = "안녕하세요"
        label.backgroundColor = .systemBlue
        label.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(label)

        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),
            label.widthAnchor.constraint(equalToConstant: 200),
            label.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
}

 

📌 설명

위치를 고정 좌표가 아닌 관계로 지정

모든 기기, 다국어, 회전, 다크 모드 등에서 적응형 UI 구현 가능

가변 레이아웃, 반응형 디자인 구현에 유리

---

🔹 frame 이란?

뷰의 위치와 크기(Rectangle)를 직접 지정하는 방식

좌표 기준은 상위 뷰(superview)의 좌상단 (0, 0)이다.

---

🔍 사용 예시

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let label = UILabel()
        label.text = "안녕하세요"
        label.backgroundColor = .systemBlue 
        label.frame = CGRect(x: 50, y: 100, width: 200, height: 40)
        view.addSubview(label)
    }
}

📌 설명

절대적인 위치 지정 (정해진 좌표)

레이아웃이 고정됨 -> 기기 크기나 회전에 따라 반응 안 함

간단한 UI에는 빠르고 직관적

---

🔹 Auto Layout vs frame 차이 정리

항목	frame	Auto Layout
설정 방식	CGRect(x:y:width:height:) 직접 지정	Anchor 또는 제약 조건(NSLayoutConstraint) 사용
기준 좌표	상위 뷰 (superview)의 좌표계 기준	뷰 간의 관계 기준
반응형 지원	화면 크기 변화에 대응 어려움	지동 크기 조정 가능
코드 복잡도	간단하고 빠름	코드 많고 복잡할 수 있음
인터페이스 빌더	부분적으로 사용 가능	Interface Builder와 가장 잘 통합됨
추천 사용처	아주 간단한 뷰 배치	실무 대부분의 UI 구성에 적합

---

🔹SwiftUI 에서는?

SwiftUI는 frame을 직접 지정하는 방법과

Spacer, padding, alignment, GeometryReader 등을 활용한 레이아웃 선언 방식을 모두 지원함

Text("Hello")
	.frame(width: 200, height: 40)
    .background(Color.yellow)

내부적으로는 Auto Layout이 쓰이지만,

프로그래머는 선언적으로 뷰를 배치하기에 직접 쓸 일이 없음

---