안녕하세요.
SwiftUI에는 SafeAreaRegions라는 구조체가 있고, ignoreSafeArea 함수에서 자주 사용됩니다.
그래서 이번에는 SafeAreaRegions의 3가지 static property가 ignoreSafeArea 함수랑 같이 사용될 때 동작이 어떻게 다른지 알아보려고 해요.
# SafeArea
우선, SafeArea(안전 영역)이 뭔지 알아야 할 것 같습니다.
(iPhone 기준으로 설명할게요ㅎㅎ)
safe area는 navigation bar, tab bar, toolbar, Keyboard layout guide로 인해 덮이지 않는 영역을 의미합니다.
(user interaction, 즉 사용자에게 콘텐츠가 화면에 보이는 것이 보장되는 영역을 의미하기도 합니다.)
safe area 관련해서는 요정도만 알고 넘어가도 아래 글을 이해하는데 문제없을 것 같아요.
# SafeAreaReions
SafeAreaRegions에는 3가지 static property가 있는데, ignoreSafeArea 수식어랑 같이 사용할 때 각각 동작이 어떻게 되는지 알아볼게요.
## ignoreSafeArea 수식어를 사용하지 않은 경우
아래 코드처럼 ignoreSafeArea 수식어를 사용하지 않으면 safe area는 top & bottom bar를 제외한 영역이 됩니다.
(노란색으로 네모친 부분이 safe area 영역입니다.)
그리고 textField를 선택해서 키보드를 노출시키면 safe area 영역은 그만큼 줄게 됩니다.
(노란색으로 네모 친 부분이 safe area 영역입니다.)
## ignoreSafeArea + SafeAreaRegions.containers
ignoreSafeArea 수식어에 SafeAreaRegions.containers를 인자로 넘기면, top & bottom bar까지 safe area 영역이 확장됩니다.
(노란색으로 네모 친 부분이 safe area 영역입니다.)
대신, 키보드가 노출될 때 키보드 영역만큼 safe area가 줄어드는 건 동일해요.
| 일반 | 키보드가 화면에 보일 때 |
 |
 |
## ignoreSafeArea + SafeAreaRegions.keyboard
ignoreSafeArea 수식어에 SafeAreaRegions.keyboard를 인자로 넘기면, 키보드가 화면에 보여도 safe area 영역이 줄지 않고 그대로 유지됩니다.
(노란색으로 네모 친 부분이 safe area 영역입니다.)
대신, top & bottom bar 영역까지의 safe area 확장은 없습니다.
| 일반 | 키보드가 화면에 보일 때 |
 |
 |
## ignoreSafeArea + SafeAreaRegions.all
ignoreSafeArea 수식어에 SafeAreaRegions.all를 인자로 넘기면, top & bottom bar까지 safe area 영역을 확장시키고 키보드가 화면에 보여도 safe area 영역이 줄지 않게 됩니다.
(SafeAreaRegions.containers와 SafeAreaRegions.keyboard 특징을 서로 합친 거죠.)
| 일반 | 키보드가 화면에 보일 때 |
 |
 |
그동안 무지성으로 ignoreSafeArea() 수식어를 써왔는데 SafeAreaRegions 각각의 특징을 알고 있으면 언젠가 써먹을 일이 있을 것 같다는 생각이 드네요ㅎㅎ
# 참고
- https://developer.apple.com/documentation/swiftui/adding-a-background-to-your-view
- https://developer.apple.com/documentation/swiftui/view/ignoressafearea(_:edges:)
- https://developer.apple.com/documentation/swiftui/safearearegions
- https://developer.apple.com/design/human-interface-guidelines/foundations/layout/
이번 글은 여기서 마무리.
'SwiftUI' 카테고리의 다른 글
| 컨텐츠 영역 높이에 따른 스크롤 가능 여부 설정 (0) | 2023.03.26 |
|---|---|
| frame 수식어를 2번 적용하면? (0) | 2023.03.20 |
| zIndex(_:) (1) | 2023.03.12 |
| mask (0) | 2023.03.03 |
| SwiftUI에서 WKWebView <-> JavaScript 상호작용 (0) | 2023.02.27 |