[UIVisualEffectView] UIBlurEffect로 블러 효과를 적용해보자

최근 나다 개발에 한창 빠져있는 나 (지금은 맥북이 잠깐 내 손을 벗어난 상태지만.. 흑..)

이번 프로젝트에서는 아래 화면처럼 탭바를 직접 커스텀해서 사용을 했는데, 이 커스텀 탭바 안에 많은 챌린지 요소가 있어서 하나씩 블로그에서도 다뤄보려고 한다.

오늘은 그 챌린지 요소 중 첫 번째로, 블러 효과를 적용해 주는 방법에 대해서 알아보겠다.

처음 구현해준 커스텀 탭바에는 투명도가 들어있었기 때문에, 뒤의 글자까지 탭바에 비치게 되는 문제가 있었다.

이럴 때 활용해 줄 수 있는 것이 바로 블러 처리다.
블러란 투명도와는 다르게, 화면에 흐림 처리를 추가해줘서 뒤의 내용을 가려주는 것을 말한다.
아래 사진을 보면, 블러를 적용했을 때와 아닐 때의 차이가 두드러지게 보이는 것을 확인할 수 있다.

왼쪽이 블러를 적용해주기 전, 오른쪽이 불러를 적용해준 후

블러를 적용하기 위해서는 UIBlurEffect와 UIVisualEffectView 이 두 가지에 대한 이해가 필요하다.

Apple 공식문서를 참조해보면,

UIBlurEffect는 UIVisualEffect를 상속받아 흐림 효과를 적용해주는 개체이고,
UIVisualEffectView는 UIView를 상속받아 Visual Effect를 구현하는 객체라는 것을 아래에서 확인할 수 있었다.

즉, UIView -> UIVisualEffectView -> UIVisualEffect 순으로 상속 관계가 이루어지는 것이었다.

아하!

그럼 UIVisualEffectView를 하나 만들어주고, 이 View에 대한 Visual Effect로 UIBlurEffect를 적용하면 블러 효과가 적용된 뷰를 만들 수 있겠다는 생각이 들게 된다!

나는 UIView에서 메서드 호출만으로 단순하게 사용하기 위해 아래와 같은 Extension을 만들어서 사용했다.

나 같은 경우에는 파라미터로 style과 radius 값을 받아 적용할 BlurEffect의 스타일 종류와, 모서리의 둥글기를 정할 수 있게 했다.
이 Extension 코드 부분은 직접 BlurEffect를 사용할 여러분이 필요에 맞게 수정해서 사용하면 되겠다.

extension UIView {
    func setBlurView(style: UIBlurEffect.Style, radius: CGFloat) {
        let blurEffect = UIBlurEffect(style: style)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        self.addSubview(blurEffectView)
        self.sendSubviewToBack(blurEffectView)  // 흐림 뷰를 가장 상단에 위치하지 않도록 한다
        
        // 모서리 radius 값 주기
        blurEffectView.layer.cornerRadius = radius
        blurEffectView.clipsToBounds = true

        blurEffectView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
}

블러 효과 style별로 차이가 어떻게 나는지 한번 비교도 해볼까?

가장 위에가 일반 이미지일 때 나와야 하는 색상,
두 번째가 그리고 블러를 적용하지 않고 투명도(alpha값)만 0.5로 주었을 때 나오는 색상,
그리고 세 번째는 .light 블러 스타일, 마지막은 .dark 블러 스타일을 적용했을 때 어떠한 색상으로 흐림처리가 되는지를 볼 수 있겠다.

Blur가 아닐 때, 흐림도 적용시, 블러 효과 적용시를 구분하는 화면

.light와 .dark 스타일 외에도 아래 애플 개발자 공식문서에서는 다양한 스타일이 있으니, 여러 스타일을 활용해서 본인만의 블러 효과를 만들어내면 되겠다!
오늘은 여기까지✌🏻

UIBlurEffect.Style | Apple Developer Documentation