[iOS/Swift] Safe Area를 색칠하는 방법

노치 디자인의 Safe Area를 색칠하는 여러 가지 방법

---

 

 

위의 이미지처럼 상단과 하단 Safe Area의 색을 다르게 설정해야 하는 상황이 생겼다.

 

우선 내가 먼저 알고 있었던 Safe Area에 색깔을 설정하는 방법은,

최상단 View의 Background Color를 설정해주는 방법 밖에는 없었다.

그런데 이 방식으로는 상/하단의 영역을 분리해서 칠하는 건 할 수 없는 것으로 확인했다.

 

그래서 Safe Area coloring, only bottom 등의 키워드로 구글링을 해보았다.

그 결과 예제나 라이브러리를 알게 되긴 했지만, 내가 정확히 원하는 예제를 얻어내는 데에는 실패했다.

 

사실 아주 단순한 방법이 있었는데, 그 방법을 바로 떠올리지를 못해서 며칠 동안 삽질을 했다.

(돌고 돌아 원하는 기능을 구현해 내기는 했다.)

 

그래도 언젠가는 필요한 순간이 오면 이 글을 보고 제대로 써먹어볼 수 있기를 바라며,

알게 된 방법들을 이 글에 정리해보기로 했다.

---

커스텀 코드 추가하기

let myView = UIView()

func configureCustomView() {
    var bomttomSafeAreaInsets: CGFloat = 0.0
    let scenes = UIApplication.shared.connectedScenes
    let windowScene = scenes.first as? UIWindowScene
    if let hasWindowScene = windowScene {
        bomttomSafeAreaInsets = hasWindowScene.windows.first?.safeAreaInsets.bottom ?? 0
    }
    
    // bomttomSafeAreaInsets 변수에는 하단 Safe Area의 크기가 할당된다.
    
    self.myView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(self.myView)
    
    self.myView.backgroundColor = .yellow

    NSLayoutConstraint.activate([
        self.myView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        self.myView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        self.myView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        self.myView.heightAnchor.constraint(equalToConstant: bomttomSafeAreaInsets)
    ])

}

(스택오버플로우에서 찾아낸 코드였는데, 글의 링크를 메모해놓는 것을 깜빡했다. ㅜㅜ)

 

이 방식은 Programmatically 하게 해결한 방식이다.

기기의 Bottom Safe Area의 크기를 받아온 뒤, 선언해놓은 UIView를 addSubview()로 추가해서

다음과 같이 화면에 View를 추가해주는 방법이다.

 

 

---

오픈소스 라이브러리 활용

 

1번 방식을 매번 화면마다 추가해주는 것으로 해결할 수도 있긴 하겠다.

하지만 나는 좀 번거롭다고 느꼈다.

그래서 공식적으로 이런 기능을 지원해주는 API가 있지 않을까? 하는 생각이 있었다.

(상/하단의 Safe Area 배경색을 다르게 해준 앱들이 정말 많기 때문이다.)

 

그래서 Swift 개발자 분들이 많이 모여있는 오픈 카톡방에 질문을 올렸는데,

운이 좋게도 이 기능을 쉽게 사용할 수 있도록 라이브러리를 직접 만드신 분이 계셨다.

그래서 그 분께서 정말 감사하게도 github 링크를 따로 공유해주셨다.

 

https://github.com/WallabyStuff/SafeAreaBrush

GitHub - WallabyStuff/SafeAreaBrush

 

 

CocoaPods와 SPM 두 가지 방식을 지원하고 있으므로, 편한 방법으로 사용할 수 있다.

의존성을 추가하고 나면 다음과 같이 간단한 코드로 Safe Area를 색칠할 수 있다.

import SafeAreaBrush

override func viewDidLoad() {
    ...
    
    fillSafeArea(position: .bottom, color: .yellow)
}

결과물은 1번의 캡처 화면과 동일하다.

화면이 가로로 돌아갔을때의 대응도 편하게 할 수 있어서, 1번 방법을 쓰는 것보단 훨씬 장점이 많을 것 같다.

 

능력자..!

---

Interface Builder에서 직접 view를 추가하기.

 

위의 라이브러리를 사용해서 내 프로젝트에 적용해보려고 했으나, 한 가지 문제가 있었다.

 

나는 간단한 채팅 화면을 만들고 있었고,

아래처럼 UITextView를 감싸고 있는 UIView 아래의 색을 동일하게 맞춰주는것이 목표였다.

 

 

 

 

그런데 1번의 커스텀 코드를 추가하는 방식이나, 라이브러리 방식 모두 같은 문제가 발생했다.

TextView를 터치하면 키보드가 올라왔다가, 다시 내려갈 때 애니메이션이 어색하게 되어버리는 것이었다.

 

키보드가 내려갈 때, Background View와 Safe Area 영역에 추가해준 View가 떨어져 있어서

굉장히 어색해 보이는 것이었다.

 

 

 

 

 

 

결국 Interface Builder에서 직접 UIView를 추가해서, Auto layout으로 위치와 사이즈를 잡아서 해결을 했다.

Safe Area 영역에 UIView를 집어넣고, 캡처한 화면처럼 Constraints를 잡아주어서 해결했다.

 

(색깔은 viewDidLoad에서 다시 설정해주었다.)