SkeletonView는 로딩 중인 콘텐츠를 시각적으로 나타내기 위한 라이브러리입니다. 기존의 인디케이터나 로딩 스피너 대신에 SkeletonView가 이를 대체하여 사용자에게 로딩 중임을 알리는 역할을 합니다.

SkeletonView는 기본적으로 Placeholder 형태의 그림자와 텍스트를 생성합니다. 하지만 이러한 기본 모양을 변경하고 싶을 때가 있을 수 있습니다. 이번 블로그 포스트에서는 Swift SkeletonView의 모양을 변경하는 방법에 대해 소개하겠습니다.

SkeletonView 모양 변경 방법

SkeletonView의 모양을 변경하기 위해 SkeletonConfig 구조체를 사용할 수 있습니다. SkeletonConfig 구조체를 통해 Placeholder 및 색상, 애니메이션 등을 커스터마이징할 수 있습니다.

import SkeletonView

// SkeletonView 모양 변경
SkeletonConfig.main.backgroundColor = .systemBackground
SkeletonConfig.main.multilineHeight = 20
SkeletonConfig.main.multilineSpacing = 8
SkeletonConfig.main.isPowered = false

위의 예시 코드에서는 SkeletonConfig.main에 접근하여 설정을 변경하고 있습니다. backgroundColor 속성을 사용하여 배경 색상을 변경하거나, multilineHeight와 multilineSpacing를 사용하여 다중 행 Placeholder의 높이와 간격을 조정할 수 있습니다. 또한 isPowered 속성을 사용하여 “Powered by Skeleton” 메시지를 표시하지 않도록 설정할 수도 있습니다.

SkeletonView 사용 예시

위의 설정을 적용하여 SkeletonView를 사용하는 예시 코드를 확인해보겠습니다.

import UIKit
import SkeletonView

class ViewController: UIViewController {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var descriptionLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // SkeletonView 적용
        titleLabel.showAnimatedGradientSkeleton()
        imageView.showAnimatedSkeleton()
        descriptionLabel.showAnimatedGradientSkeleton()
    }

    func loadData() {
        // 데이터 로딩 완료 후 실제 데이터로 업데이트
        titleLabel.text = "제목"
        imageView.image = UIImage(named: "image")
        descriptionLabel.text = "설명"
        // SkeletonView 해제
        titleLabel.hideSkeleton()
        imageView.hideSkeleton()
        descriptionLabel.hideSkeleton()
    }
}

위의 예시 코드에서는 showAnimatedGradientSkeleton() 메서드를 호출하여 SkeletonView를 적용하고, hideSkeleton() 메서드를 호출하여 SkeletonView를 해제하는 방식으로 사용하고 있습니다. 실제 데이터 로딩이 완료되면 SkeletonView를 제거하고 데이터로 업데이트합니다.

위의 예시 코드를 실행해보면 SkeletonView의 모양이 이전에 설정한대로 변경되는 것을 확인할 수 있습니다.

결론

이번 블로그 포스트에서는 Swift SkeletonView를 사용하여 로딩 중인 콘텐츠를 시각적으로 나타내는 방법에 대해 알아보았습니다. SkeletonConfig 구조체를 사용하여 SkeletonView의 모양을 변경하고, showAnimatedGradientSkeleton() 및 hideSkeleton() 메서드를 사용하여 SkeletonView를 적용하고 해제할 수 있습니다. SkeletonView를 활용하여 사용자에게 로딩 중임을 시각적으로 알리고, 높은 사용자 경험을 제공할 수 있습니다.

더 자세한 내용을 원하시면 SkeletonView GitHub 저장소를 참고하시기 바랍니다.