이번에는 Swift의 SkeletonView 라이브러리를 사용하여 네트워크 요청 시에 로딩 상태를 표시하는 방법에 대해 알아보겠습니다.

SkeletonView란?

SkeletonView는 iOS 개발을 위한 라이브러리로, 로딩 상태를 시각적으로 표현하기 위해 사용됩니다. 일반적으로 데이터를 불러오거나 처리하는 동안 화면은 비어있거나 로딩 중임을 시각적으로 표현해주는 역할을 합니다.

설치

SkeletonView를 설치하기 위해 CocoaPods를 사용합니다. Podfile에 다음과 같은 명령어를 추가합니다.

pod 'SkeletonView'

설치 후, Terminal에서 pod install 명령어를 실행하여 라이브러리를 다운로드하고 프로젝트에 적용합니다.

사용 방법

SkeletonView를 사용하기 위해서는 먼저 해당 뷰를 SkeletonView로 설정해야 합니다. 예를 들어, 데이터를 표시하는 UITableView가 있다고 가정해보겠습니다.

import SkeletonView

class MyViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // SkeletonView 적용
        tableView.isSkeletonable = true
        tableView.showAnimatedSkeleton()
    }

    func loadData() {
        // 네트워크 요청 로직

        // 데이터 요청이 완료되면 SkeletonView 숨기기
        tableView.hideSkeleton()
    }
}

위의 예제에서는 viewDidLoad() 메소드에서 tableView의 isSkeletonable 속성을 true로 설정하고, showAnimatedSkeleton() 메소드를 호출하여 로딩 중임을 나타냅니다. 그리고 loadData() 메소드에서 데이터 요청이 완료되면 hideSkeleton() 메소드를 호출하여 SkeletonView를 숨깁니다.

커스터마이징

SkeletonView는 다양한 속성을 가지고 있어 개발자가 원하는 스타일로 커스터마이징할 수 있습니다. 예를 들어, SkeletonView의 배경색이 흰색이 아닌 다른 색으로 나타내고 싶다면 다음과 같이 설정할 수 있습니다.

tableView.skeletonBackgroundColor = .gray

또한, SkeletonView로 표현되는 라인의 두께나 간격 등도 다음과 같이 설정할 수 있습니다.

tableView.skeletonLineSpacing = 10
tableView.skeletonCornerRadius = 5

더 많은 커스터마이징 옵션들은 SkeletonView의 공식 문서에서 확인할 수 있습니다.

결론

SkeletonView를 사용하면 네트워크 요청 시에 로딩 상태를 시각적으로 표현할 수 있습니다. SkeletonView의 다양한 커스터마이징 옵션들을 활용하여 원하는 스타일로 로딩 상태를 표현해보세요.

참고 자료

• SkeletonView 공식 문서