앱을 시작할 때 보이는 런치 이미지는 사용자에게 앱이 로딩 중임을 알려주는 역할을 합니다. 하지만 기본적인 이미지만 보여주는 것보다 더 흥미로운 효과를 추가할 수 있다면 사용자의 경험을 더욱 향상 시킬 수 있을 것입니다. 이번 블로그 포스트에서는 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.effect
를 nil
로 설정하여 흐려진 효과를 없앤 뒤, completion
클로저에서 launchImageView
를 뷰 계층에서 제거합니다.
이제 앱을 실행시켜보면, 런치 이미지의 배경이 부드럽게 흐려지는 효과를 확인할 수 있을 것입니다.
결론
Swift 앱에서 런치 이미지의 배경을 흐려지는 효과로 꾸미는 방법에 대해 알아보았습니다. 이러한 효과를 추가함으로써, 사용자들은 앱을 로딩하는 동안 보다 흥미로운 경험을 할 수 있을 것입니다.