SwiftUI Layout 성능 최적화 완벽 가이드

SwiftUI Layout 성능 최적화 완벽 가이드

SwiftUI는 선언형 UI로 생산성이 높지만, 레이아웃과 렌더링 구조를 이해하지 못하면 성능 문제가 쉽게 발생합니다.

특히 리스트, 애니메이션, 복잡한 View 계층에서는 불필요한 Layout 계산이 누적되어 프레임 드랍으로 이어집니다.

---

1. SwiftUI 성능의 핵심 구조

SwiftUI는 다음 흐름으로 동작합니다.

• State 변경
• Body 재계산
• Diffing
• Layout (Propose → Size → Place)
• Rendering

이 중 성능에 가장 큰 영향을 주는 부분은 다음입니다.

• Body 재계산
• Layout 반복 수행

---

2. 가장 흔한 성능 문제

1) 불필요한 Body 재렌더링

struct ContentView: View {
    @State var count = 0

    var body: some View {
        VStack {
            Text("\(count)")
            HeavyView()
        }
    }
}

count가 변경될 때마다 HeavyView까지 다시 계산됩니다.

---

2) 복잡한 Layout 중첩

Stack이 과도하게 중첩되면 Layout 비용이 증가합니다.

---

3) GeometryReader 남용

GeometryReader는 부모 Layout을 다시 계산하게 만들 수 있습니다.

---

3. 성능 최적화 핵심 전략

1) View 분리

struct ContentView: View {
    @State var count = 0

    var body: some View {
        VStack {
            Text("\(count)")
            HeavyView()
        }
    }
}

→ HeavyView를 별도 View로 분리하면 영향 범위가 줄어듭니다.

---

2) EquatableView 활용

EquatableView(content: MyView(data: model))

데이터가 동일하면 다시 그리지 않습니다.

---

3) @State / @ObservedObject 분리

State 범위를 최소화하면 불필요한 재렌더링을 줄일 수 있습니다.

---

4) Lazy 컨테이너 사용

LazyVStack {
    ForEach(items) { item in
        ItemView(item: item)
    }
}

보이는 영역만 렌더링하여 성능을 개선합니다.

---

5) redraw 최소화

• .id() 남용 금지
• 불필요한 animation 제거
• onAppear 과다 사용 지양

---

4. Layout 최적화 전략

Stack 깊이 줄이기

중첩된 VStack/HStack을 줄이면 Layout 계산 비용이 감소합니다.

Fixed Size 활용

Text("Hello")
    .fixedSize()

불필요한 size 계산을 줄입니다.

---

Frame 최소화

frame은 layout 단계에 영향을 주므로 남용하면 비용이 증가합니다.

---

5. Animation 성능 최적화

• withAnimation 범위 최소화
• 불필요한 implicit animation 제거
• opacity + transform 위주 사용

---

6. 디버깅 방법

• Instruments → Time Profiler
• SwiftUI Inspector 활용
• print로 body 호출 확인

---

7. 실무 체크리스트

• State 범위 최소화
• View 분리
• LazyStack 사용 여부
• GeometryReader 최소화
• Animation 범위 확인

---

8. 결론

SwiftUI 성능의 핵심은 단순합니다.

불필요한 재계산을 줄이고, Layout을 가볍게 유지하는 것

이를 위해 다음을 기억하면 됩니다.

• State 관리가 성능이다
• Layout 구조가 성능이다
• 렌더링 횟수가 성능이다

---

이제 SwiftUI Layout의 구조부터 최적화까지 이해했다면, 실무에서 충분히 안정적인 UI를 설계할 수 있습니다.