[swift] Swift 앱에서 런치 이미지의 배경이 흐려지는 효과 구현하기

앱을 시작할 때 보이는 런치 이미지는 사용자에게 앱이 로딩 중임을 알려주는 역할을 합니다. 하지만 기본적인 이미지만 보여주는 것보다 더 흥미로운 효과를 추가할 수 있다면 사용자의 경험을 더욱 향상 시킬 수 있을 것입니다. 이번 블로그 포스트에서는 Swift 앱에서 런치 이미지의 배경이 부드럽게 흐려지는 효과를 구현하는 방법을 알아보겠습니다.

단계 1: 블러 효과를 적용할 UIImageView 추가

먼저, 블러 효과를 적용할 UIImageView를 추가합니다. 이 이미지 뷰는 런치 이미지를 표시하는 역할을 할 것입니다. Interface Builder를 사용한다면, 이미지 뷰를 추가하고 Autolayout 제약을 적용합니다. 코드로 직접 추가한다면, 다음과 같이 작성할 수 있습니다:

let launchImageView = UIImageView(frame: self.view.bounds)
launchImageView.image = UIImage(named: "launchImage")
self.view.addSubview(launchImageView)

단계 2: 블러 효과를 적용할 UIVisualEffectView 추가

이제 블러 효과를 적용할 UIVisualEffectView를 추가합니다. UIVisualEffectView는 먼저 흐려지지 않은 상태로 추가한 후, 애니메이션을 통해 흐려지는 효과를 구현할 것입니다. 코드로 다음과 같이 작성할 수 있습니다:

let blurEffect = UIBlurEffect(style: .regular)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = launchImageView.bounds
launchImageView.addSubview(blurView)

단계 3: 애니메이션으로 블러 효과 적용

마지막으로, 앱이 로딩되면 런치 이미지의 배경이 부드럽게 흐려지는 애니메이션을 적용해야 합니다. 이를 위해 UIView.animate(withDuration:animations:) 메서드를 사용할 수 있습니다. 다음과 같이 코드를 작성해보세요:

UIView.animate(withDuration: 0.5, animations: {
    blurView.effect = nil
}) { (completed) in
    launchImageView.removeFromSuperview()
}

애니메이션의 duration은 애니메이션의 속도를 조절하는 데 사용됩니다. 여기서는 0.5초로 설정되었습니다. animations 클로저에서 blurView.effectnil로 설정하여 흐려진 효과를 없앤 뒤, completion 클로저에서 launchImageView를 뷰 계층에서 제거합니다.

이제 앱을 실행시켜보면, 런치 이미지의 배경이 부드럽게 흐려지는 효과를 확인할 수 있을 것입니다.

결론

Swift 앱에서 런치 이미지의 배경을 흐려지는 효과로 꾸미는 방법에 대해 알아보았습니다. 이러한 효과를 추가함으로써, 사용자들은 앱을 로딩하는 동안 보다 흥미로운 경험을 할 수 있을 것입니다.