앱을 실행할 때 로딩 화면이 나타나면 사용자는 앱이 동작하는 동안 지연되었을 수도 있음을 인지합니다. iOS 앱에서 기본 로딩 화면은 정적인 이미지가 표시되는 것이 일반적이지만, 애니메이션 효과를 추가하여 사용자 경험을 더욱 향상시킬 수 있습니다. 이번 블로그에서는 iOS 앱 로딩 화면에 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

프레임 애니메이션 사용

가장 간단한 애니메이션 효과를 추가하는 방법은 프레임 애니메이션을 사용하는 것입니다. 프레임 애니메이션은 일련의 이미지를 연속적으로 표시함으로써 움직이는 효과를 만드는 기술입니다.

다음은 UIImageView를 사용하여 간단한 프레임 애니메이션을 추가하는 예제 코드입니다.

import UIKit

class LoadingViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        var imageArray: [UIImage] = []

        for i in 1...10 {
            if let image = UIImage(named: "loading-\(i)") {
                imageArray.append(image)
            }
        }

        imageView.animationImages = imageArray
        imageView.animationDuration = 1.0
        imageView.startAnimating()
    }
}

위의 예제에서, “loading-1”부터 “loading-10”까지의 이미지를 순차적으로 표시하여 로딩 애니메이션을 만들었습니다.

Lottie 사용

Lottie는 Airbnb에서 개발한 오픈 소스 라이브러리로, Bodymovin 플러그인을 사용하여 After Effects에서 만든 애니메이션을 iOS 앱에 쉽게 통합할 수 있습니다.

먼저, Lottie를 프로젝트에 추가해야 합니다. CocoaPods를 사용한다면 다음과 같이 Podfile에 추가할 수 있습니다.

pod 'lottie-ios'

프레임 애니메이션 대신 Lottie를 이용하면 더 높은 품질의 애니메이션을 쉽게 추가할 수 있습니다.

import UIKit
import Lottie

class LoadingViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let animationView = AnimationView(name: "loadingAnimation")
        animationView.frame = view.bounds
        animationView.contentMode = .scaleAspectFit
        view.addSubview(animationView)

        animationView.play()
    }
}

Lottie를 사용하면 JSON 형식의 애니메이션 파일을 로드하여 애니메이션을 표시할 수 있습니다.

결론

로딩 화면에 애니메이션 효과를 추가함으로써 iOS 앱의 사용자 경험을 향상시킬 수 있습니다. 프레임 애니메이션이나 Lottie를 사용하여 다양한 애니메이션을 손쉽게 추가할 수 있으니, 여러 옵션을 고려해보고 프로젝트에 적합한 방법을 선택해보세요.

참고 자료: Lottie GitHub

이상으로 iOS 앱 로딩 화면의 애니메이션 효과에 대해 알아보았습니다. 부족한 부분이 있거나 추가할 내용이 있다면 친절히 알려주시기 바랍니다.