SkeletonView는 앱 화면에서 데이터를 로딩 중인 상태를 보여줄 때 사용되는 기술입니다. 이를 통해 사용자는 로딩 중인 데이터가 있음을 알 수 있으며, 기다리는 동안에도 앱이 활동 중임을 인식할 수 있습니다.

이번 예제에서는 Swift를 사용하여 SkeletonView 애니메이션을 구현하는 방법을 알아보겠습니다.

1. SkeletonView 라이브러리 설치

우선, SkeletonView 라이브러리를 프로젝트에 설치해야 합니다. CocoaPods를 사용하는 경우, Podfile에 다음과 같이 추가합니다:

pod 'SkeletonView'

그리고 터미널에서 다음 명령어를 실행하여 라이브러리를 설치합니다:

pod install

2. SkeletonView 사용하기

SkeletonView를 사용하여 로딩 중인 상태를 표시하려는 뷰에서 다음과 같이 구현합니다:

import SkeletonView

class ViewController: UIViewController {
    
    @IBOutlet weak var loadingView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // SkeletonView 설정
        loadingView.isSkeletonable = true
        loadingView.showSkeleton()
        
        // 데이터 로딩
        loadData()
    }
    
    func loadData() {
        // 데이터 로딩 후 SkeletonView 숨기기
        // 예를 들어, 네트워크 요청 등을 수행한 후에 호출될 수 있습니다.
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.loadingView.hideSkeleton()
        }
    }
}

위의 예제에서는 loadingView라는 UIView를 SkeletonView로 설정하고, showSkeleton() 메서드를 호출하여 로딩 상태를 표시합니다. loadData() 메서드 내에서 데이터를 로딩한 후, hideSkeleton() 메서드를 호출하여 SkeletonView를 숨깁니다.

이렇게 구현하면 로딩 중인 상태를 가진 뷰를 SkeletonView로 표시할 수 있습니다.

3. 사용자 정의 설정

SkeletonView는 다양한 사용자 정의 설정을 제공합니다. 예를 들어, 텍스트 색상, 배경 색상 및 애니메이션 속도 등을 변경할 수 있습니다.

loadingView.skeletonCornerRadius = 10
loadingView.skeletonBackgroundColor = UIColor.gray
loadingView.skeletonAnimation = "pulse"

위의 예는 뷰의 모서리를 둥글게 만들고, 배경 색상을 회색으로 설정하고, 액티비티 인디케이터 애니메이션 대신 펄스 애니메이션을 사용하는 방법을 보여줍니다.

더 많은 사용자 정의 설정에 대해서는 SkeletonView 공식 문서를 참조하세요.

결론

이제 SkeletonView를 사용하여 Swift 앱에서 로딩 중인 상태를 시각적으로 표시하는 애니메이션을 구현하는 방법을 알게 되었습니다. SkeletonView는 사용자에게 로딩 중임을 알리는데 효과적인 방법이며, 사용자 경험을 향상시킬 수 있습니다.

• SkeletonView GitHub 레포지토리
• SkeletonView 공식 문서