SwiftUI Layout 시스템 내부 동작 완벽 이해

SwiftUI Layout 시스템 내부 동작 완벽 이해

SwiftUI를 제대로 이해하려면 단순히 modifier를 사용하는 수준을 넘어 레이아웃이 어떻게 계산되는지를 알아야 합니다.

SwiftUI의 Layout 시스템은 크게 3단계로 동작합니다.

• Propose (크기 제안)
• Size (크기 결정)
• Place (위치 배치)

이 흐름을 이해하면 padding, frame, alignment가 왜 그렇게 동작하는지 명확해집니다.

---

1. 전체 흐름 한눈에 보기

SwiftUI 레이아웃은 항상 부모 → 자식 방향으로 진행됩니다.

1. 부모가 자식에게 크기를 제안한다
2. 자식이 자신의 크기를 결정한다
3. 부모가 자식을 배치한다

이 과정을 흔히 Propose → Size → Place라고 부릅니다.

---

2. Propose (크기 제안)

부모 뷰는 자식 뷰에게 "이 정도 크기 안에서 그려라"라는 제안을 합니다.

VStack {
    Text("Hello")
}

위 코드에서 VStack은 Text에게 가능한 width/height를 제안합니다.

중요한 점은 이 제안이 강제값이 아니라는 것입니다.

• 부모 → 자식에게 제안
• 자식은 이를 무시할 수도 있음

---

3. Size (크기 결정)

자식 뷰는 부모의 제안을 바탕으로 자신의 크기를 결정합니다.

Text("Hello")
    .padding()

Text는 intrinsic size를 기반으로 크기를 결정하고, padding이 추가되면서 최종 크기가 커집니다.

이 단계에서 중요한 개념은 다음입니다.

• Intrinsic Size
• Modifier가 size에 미치는 영향
• 뷰는 스스로 크기를 결정한다

---

4. Place (위치 배치)

부모 뷰는 자식 뷰가 결정한 크기를 기반으로 위치를 정합니다.

HStack {
    Text("A")
    Text("B")
}

HStack은 각 자식의 크기를 확인한 뒤 좌우로 배치합니다.

이 단계에서 alignment와 spacing이 적용됩니다.

---

5. Modifier가 Layout에 미치는 영향

padding

padding은 뷰의 크기를 증가시킵니다.

frame

frame은 부모에게 "이 크기로 보겠다"고 선언합니다.

offset

offset은 실제 layout에는 영향을 주지 않고 렌더링 위치만 이동시킵니다.

---

6. 중요한 특징 3가지

1) Constraint가 없다

SwiftUI는 AutoLayout처럼 constraint 충돌이 없습니다.

2) 단방향 흐름

부모 → 자식으로만 계산됩니다.

3) Layout은 재귀적으로 수행된다

각 뷰는 자신의 자식에게 동일한 과정을 반복합니다.

---

7. 실무에서 자주 헷갈리는 포인트

• frame을 주면 항상 그 크기로 고정된다고 생각하는 것
• padding과 spacing의 차이를 혼동
• offset이 layout을 바꾼다고 착각

---

8. 예제로 이해하기

VStack {
    Text("Hello")
        .frame(width: 100, height: 50)
        .background(Color.red)
}

동작 과정은 다음과 같습니다.

1. VStack이 Text에게 크기 제안
2. Text는 frame modifier에 의해 크기 결정
3. VStack이 해당 크기로 위치 배치

---

9. 결론

SwiftUI Layout의 핵심은 단 하나입니다.

부모는 제안하고, 자식은 결정하고, 부모는 배치한다.

이 원리를 이해하면 어떤 레이아웃 문제도 논리적으로 해결할 수 있습니다.

---

다음 단계에서는 alignmentGuide와 custom layout을 이해하면 더 복잡한 UI도 자유롭게 구현할 수 있습니다.