[swift] Swift로 애니메이션을 이용한 로딩 화면 구현하기

07 Dec 2023

swift

로딩 화면은 사용자에게 작업이 진행 중이며 시간이 걸릴 수 있다는 정보를 제공하는데 유용합니다. 이번 튜토리얼에서는 Swift를 사용하여 애니메이션을 이용한 로딩 화면을 구현하는 방법을 알아보겠습니다.

필요한 준비물

로딩 화면을 구현하기 위해 다음과 같은 준비물이 필요합니다:

Xcode와 Swift 설치
Assets에 사용할 로딩 이미지

프로젝트 생성

처음으로, Xcode를 열고 새로운 iOS 프로젝트를 생성합니다. “Single View App” 템플릿을 선택하고 프로젝트 이름과 디렉토리를 설정합니다.

이미지 추가

로딩 화면에 사용할 이미지 파일을 프로젝트에 추가합니다. Assets.xcassets 파일을 선택한 뒤, “+” 버튼을 클릭하여 이미지 세트를 추가합니다. 선택한 이미지 세트에 로딩 이미지를 드래그 앤 드롭으로 추가합니다.

뷰 컨트롤러 설정

로딩 화면을 표시할 뷰 컨트롤러를 추가합니다. 먼저, Main.storyboard 파일을 열고 “View Controller”를 추가합니다. 이 뷰 컨트롤러를 “Initial View Controller”로 설정합니다.

이미지 뷰 추가

로딩 이미지를 표시할 이미지 뷰를 추가합니다. 뷰 컨트롤러에 “Image View”를 추가한 뒤, 이미지 뷰의 사이즈와 위치를 조정합니다. 이미지 뷰의 이미지 속성을 추가한 이미지로 설정합니다.

애니메이션 추가

로딩 화면에 애니메이션 효과를 추가해보겠습니다. 뷰 컨트롤러의 viewDidAppear 메서드를 오버라이드하여 애니메이션 코드를 추가합니다.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    UIView.animate(withDuration: 0.8, delay: 0, options: [.curveEaseOut, .repeat, .autoreverse], animations: {
        self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat.pi)
    }, completion: nil)
}

위의 코드는 이미지 뷰를 회전시키는 애니메이션을 설정한 것입니다. animate(withDuration:delay:options:animations:completion:) 메서드를 사용하여 애니메이션을 구성하고, CGAffineTransform(rotationAngle:) 메서드를 사용하여 이미지 뷰를 회전시킵니다.

앱 실행

이제 앱을 실행하고 로딩 화면이 제대로 표시되는지 확인해보세요. 로딩 이미지가 회전하며 애니메이션이 적용되어야 합니다.

결론

Swift를 사용하여 애니메이션을 이용한 로딩 화면을 구현하는 방법에 대해 알아보았습니다. 이 방법을 활용해서 사용자 경험을 향상시키고 앱의 로딩 상태를 시각적으로 알려줄 수 있습니다. 이제 여러분들은 이 기술을 사용하여 앱을 개선하고 더 나은 사용자 인터페이스를 제공할 수 있습니다.