[swift] Swift SkeletonView 주문 기능 구현

20 Nov 2023

swift

이번 글에서는 Swift SkeletonView 라이브러리를 사용하여 주문 기능을 구현하는 방법에 대해 알아보겠습니다.

SkeletonView란?

SkeletonView는 사용자에게 데이터가 로딩 중임을 알려주기 위해 뼈대 형태의 뷰로 표시하는 기능을 제공하는 라이브러리입니다. 데이터가 로딩되는 동안 SkeletonView가 보여지고, 로딩이 완료되면 실제 데이터로 대체됩니다.

주문 기능 구현 절차

SkeletonView 라이브러리 설치하기
주문 화면에 SkeletonView 적용하기
주문 로딩 중 상태 처리하기
주문 로딩이 완료되면 실제 데이터로 대체하기

이제 각 단계를 자세히 살펴보겠습니다.

1. SkeletonView 라이브러리 설치하기

SkeletonView 라이브러리를 사용하기 위해 CocoaPods를 사용하여 프로젝트에 라이브러리를 추가합니다. Podfile에 다음과 같이 추가합니다.

pod 'SkeletonView'

설치를 완료한 후에는 프로젝트를 다시 빌드합니다.

2. 주문 화면에 SkeletonView 적용하기

SkeletonView는 주로 UITableView와 UICollectionView와 같은 리스트 형식의 뷰에 적용됩니다. 주문 화면에 주문 목록을 표시할 UITableView가 있다고 가정합니다.

먼저, UITableView에 SkeletonView를 적용하기 위해 다음 코드를 작성합니다.

import SkeletonView

class OrderViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // SkeletonView 활성화
        tableView.isSkeletonable = true
        
        // SkeletonView의 스타일 설정
        tableView.skeletonCornerRadius = 10
        tableView.skeletonColor = .lightGray
        tableView.linesCornerRadius = 5
        tableView.linesColor = .gray
    }

    // ...
}

3. 주문 로딩 중 상태 처리하기

주문 데이터가 로딩 중인 동안에는 SkeletonView를 표시해야 합니다. 주문 데이터를 가져오는 API 호출 이전에 SkeletonView를 활성화하고, API 호출이 완료되면 SkeletonView를 비활성화하는 코드를 작성해야 합니다.

extension OrderViewController: UITableViewDataSource, UITableViewDelegate {

    // ...

    func fetchData() {
        // SkeletonView 활성화
        tableView.showAnimatedGradientSkeleton()
        
        // 주문 데이터를 가져오는 API 호출
        APIManager.shared.fetchOrders { [weak self] result in
            // API 호출이 완료되면 SkeletonView 비활성화
            self?.tableView.hideSkeleton(reloadDataAfter: true)
            
            switch result {
            case .success(let orders):
                // 주문 데이터 처리
                // ...
            case .failure(let error):
                // 에러 처리
                // ...
            }
        }
    }

    // ...
}

4. 주문 로딩이 완료되면 실제 데이터로 대체하기

주문 데이터 로딩이 완료될 경우, SkeletonView 대신 실제 데이터가 표시되어야 합니다. 따라서, API 호출 성공 시 TableView를 reload하면 됩니다.

extension OrderViewController: UITableViewDataSource, UITableViewDelegate {

    // ...

    func fetchData() {
        // ...

        APIManager.shared.fetchOrders { [weak self] result in
            // ...
            
            switch result {
            case .success(let orders):
                // 주문 데이터 처리
                self?.orders = orders
                self?.tableView.reloadData()
            case .failure(let error):
                // ...
            }
        }
    }
    
    // ...
}

결론

이렇게 Swift SkeletonView를 사용하여 주문 기능 구현을 완료할 수 있습니다. SkeletonView를 사용하면 사용자에게 데이터 로딩 중임을 시각적으로 표현하여 사용자 경험을 향상시킬 수 있습니다.

더 자세한 내용과 라이브러리 사용 방법은 SkeletonView 공식 문서를 참고하시기 바랍니다.