SwiftUI SafeArea 완벽 이해 (layout 깨짐, NavigationBar 겹침 해결)

SwiftUI SafeArea 완벽 이해 (layout 깨짐, NavigationBar 겹침 해결)

SwiftUI에서 UI를 만들다 보면 반드시 마주치는 문제가 있습니다.

• NavigationBar랑 겹침
• 상단/하단 여백 이상
• 전체 화면인데 일부만 채워짐

이 문제의 핵심 원인은 SafeArea입니다.

이 글에서는 SafeArea의 개념부터 실무 해결 방법까지 정리합니다.

---

1. SafeArea란 무엇인가?

SafeArea는 시스템 UI를 침범하지 않는 안전한 영역입니다.

• 상단: 상태바, 노치
• 하단: 홈 인디케이터

SwiftUI는 기본적으로 SafeArea 안에서만 View를 배치합니다.

---

2. 왜 layout이 깨질까?

문제는 다음 상황에서 발생합니다.

• 전체 화면을 쓰고 싶은 경우
• NavigationStack과 함께 사용하는 경우
• background를 설정할 때

---

3. ignoresSafeArea

SafeArea를 무시하고 전체 화면을 사용합니다.

Color.blue
    .ignoresSafeArea()

👉 화면 전체를 덮음

---

4. 특정 방향만 무시하기

.ignoresSafeArea(edges: .top)

옵션:

• .top
• .bottom
• .horizontal
• .all

---

5. NavigationBar와 겹치는 문제

가장 많이 발생하는 문제입니다.

NavigationStack {
    Color.red
        .ignoresSafeArea()
}

👉 NavigationBar 아래로 침범

해결 방법

.safeAreaInset(edge: .top) {
    Color.clear.frame(height: 0)
}

또는 NavigationBar 숨김 처리

---

6. safeAreaInset 활용

SafeArea 안쪽에 UI를 추가할 수 있습니다.

.safeAreaInset(edge: .bottom) {
    Button("확인") {
    }
    .frame(maxWidth: .infinity)
    .padding()
    .background(Color.blue)
}

👉 하단 고정 버튼 구현 가능

---

7. background가 안 채워지는 문제

VStack {
    Text("Hello")
}
.background(Color.yellow)

👉 SafeArea 밖은 채워지지 않음

해결

.background(Color.yellow.ignoresSafeArea())

---

8. ScrollView와 SafeArea

ScrollView는 SafeArea를 자동으로 적용합니다.

문제:

• 상단 여백 이상
• content offset 문제

해결

.scrollContentBackground(.hidden)

---

9. 실무에서 자주 하는 실수

• ignoresSafeArea 남용
• NavigationStack과 함께 무조건 전체화면 사용
• background 위치 잘못 설정

---

10. 실무 추천 전략

• 기본은 SafeArea 유지
• 필요한 부분만 선택적으로 무시
• safeAreaInset 적극 활용

---

11. 결론

SafeArea의 핵심은 다음입니다.

기본은 보호, 필요할 때만 해제

• 전체화면 → ignoresSafeArea
• 부분 제어 → edges 옵션
• 추가 UI → safeAreaInset

이 구조를 이해하면 대부분의 layout 문제를 해결할 수 있습니다.

---

다음 글에서는 SwiftUI WebView (WKWebView) 연동 및 쿠키 처리를 다루면 실무 활용도가 크게 올라갑니다.