앱을 실행할 때 데이터를 불러오는 동안 사용자에게 로딩 화면을 보여준다면 좋은 사용자 경험을 제공할 수 있다고 생각합니다. 이번 기사에서는 Swift로 SkeletonView를 이용한 로딩 화면을 만드는 방법에 대해 알아보겠습니다.

SkeletonView란?

SkeletonView는 로딩 중인 상태를 표시하기 위해 뼈대 형태의 UI를 제공하는 라이브러리입니다. 이 라이브러리를 사용하면 앱이 로딩 중일 때 사용자에게 동적이고 시각적으로 흥미로운 화면을 제공할 수 있습니다.

설치 방법

CocoaPods를 사용하여 SkeletonView를 설치합니다. Podfile에 다음과 같이 추가해주세요.

pod 'SkeletonView'

그리고 아래의 명령어를 실행하여 라이브러리를 다운로드 합니다.

$ pod install

사용 방법

1. SkeletonView를 import 합니다.

import SkeletonView

1. 로딩 화면을 적용하고 싶은 뷰에 SkeletonView를 적용합니다.

yourView.isSkeletonable = true

1. 로딩 중일 때 보여주고 싶은 스타일을 설정합니다.

yourView.showSkeleton()

1. 데이터를 로딩한 후 로딩 화면을 숨깁니다.

yourView.hideSkeleton()

예제 코드

다음은 실제 예제 코드입니다. tableView가 로딩 중일 때 SkeletonView를 적용하는 방법을 보여줍니다.

import UIKit
import SkeletonView

class ViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.isSkeletonable = true
        tableView.showSkeleton()
        
        // 데이터 로딩
        loadData()
    }
    
    func loadData() {
        // 데이터를 비동기적으로 로딩한 후 tableView.reloadData()를 호출하여 로딩 화면을 숨깁니다.
        
        // 예시로 3초 후에 로딩 완료된다고 가정합니다.
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            self.tableView.hideSkeleton()
            self.tableView.reloadData()
        }
    }
}

위의 예제 코드에서는 viewDidLoad() 메서드에서 tableView에 SkeletonView를 적용하고 loadData() 메서드에서 비동기적으로 데이터를 로딩합니다. 데이터 로딩 후 tableView.reloadData()를 호출하여 로딩 화면을 숨깁니다.

마무리

SkeletonView를 사용하여 로딩 화면을 만들면 앱이 데이터를 불러오는 동안 사용자에게 사라지지 않는 화면을 보여줄 수 있습니다. 이를 통해 사용자는 앱이 계속 동작하고 있다는 느낌을 받을 수 있으며 더 나은 사용자 경험을 제공할 수 있습니다.

• SkeletonView GitHub 페이지
• [CocoaPods](https://cocoapods.org/

위의 링크를 참고하여 더 자세한 내용을 확인해보세요.