[iOS] Blur Effect in iOS

Blur Effect in iOS

 

아이폰을 사용하다 보면 심심치 않게 Blur 효과를 확인하실 수 있습니다.

이번에는 Blur 효과 적용방법에 대해 간단히 알아보도록 하겠습니다.

 

Setting

---

앱의 배경화면으로 이용할 이미지 Asset을 프로젝트에 넣어준 뒤 아래와 같이 기본 셋팅을 진행합니다.

// 이미지 생성
private let imageView: UIImageView = {
    let imageView = UIImageView(image: UIImage(named: "background"))
    imageView.contentmode = .scaleAspectFill
    imageView.clipsToBounds = true
    return imageView
}()


override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(imageView)  // 메인 뷰에 이미지 뷰 넣기
    imageView.frame = view.bounds
}

Asset으로 저장해놓은 이미지를 가져와서 view의 크기와 동일하게 셋팅합니다.

본격적으로 Blur 효과를 적용하기 위한 기능을 구현해보도록 하겠습니다.

 

UIVisualEffectView & UIBlurEffect

---

Blur 효과를 적용하기 위해 필요한 핵심 클래스는 UIVisualEffectView 입니다.

설명에 적혀있듯 시각적 효과를 구현해내기 위해 이용되는 클래스입니다!

시각적 효과를 View에 적용하도록 도와주며 기본적으로 UIBlurEffect 효과와 UIVibrancyEffect를 제공합니다.

이번에는 UIBlurEffect를 사용하여 Blur 효과를 적용해 볼 것이며 Blur의 정도는 alpha 프로퍼티를 통해 조정합니다.

View에 적용할 수 있는 Blur Effect의 종류도 21개나 됩니다..!

(종류가 궁금한다면 여기 를 참고해주세요!)

이번 글에서는 사용자 UI 스타일에 따라 조정되는 regular 스타일을 적용해보도록 하겠습니다.

 

Blur Effect & Animation 적용

---

이제 직접 Blur 효과를 적용해봅니다!

우리는 앞서 UIBlurEffect 를 사용하기 위해서는 UIVisualEffectView 클래스의 도움이 필요하다는 것을 확인하였습니다.

UIVisualEffectView의 인스턴스를 생성 시 UIBlurEffect를 인자로 전달하여 생성한 뒤, 이를 애니메이션을 통해 효과를 적용시키는 함수를 작성하겠습니다.

private func makeBlurEffect(targetImage: UIImageView) {
    let blurEffect = UIBlurEffect(style: .regular)                      // regular 타입의 Blur Effect
    let visualEffectView = UIVisualEffectView(effect: blurEffect)       // UIVisualEffectView 객체 생성
    visualEffectView.alpha = 0
    visualEffectView.frame = imageView.bounds
    view.addSubview(visualEffectView)

    // MainThread job
    DispatchQueue.main.asyncAfter(deadline: .now()+2) {
        UIView.animation(withDuration: 1) {
            visualEffectView.alpha = 1
        }
    }
}

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(imageView)
    imageView.frame = view.bounds
    imageBlurEffect(targetView: imageView)
}

위와 같이 간단히 imageBlurEffect(targetView:) 함수를 정의하였습니다.

해당 함수가 호출된 이후 2초 뒤에 Blur 효과가 적용되는 코드입니다.

 

이제 작성한 코드를 실행시켜서 결과를 확인해보도록 하겠습니다.

 

 

위와 같이 예상했던 대로 Blur가 적용됩니다!

 

오늘은 간단히 Blur 효과를 적용하는 방법에 대해 살펴보았습니다.

 

Blur 효과를 적절한 상황에 사용한다면 사용자 관점에서도 보다 직관적인 경험을 할 수 있을 것 같습니다.