[swift] Swift SkeletonView 관련 개발 도구

20 Nov 2023

swift

안녕하세요! 이번 글에서는 Swift 프로젝트에서 SkeletonView를 구현하기 위한 몇 가지 유용한 개발 도구를 소개하려고 합니다. SkeletonView는 애플리케이션 로딩 시 잠시 동안 보여주는 로딩 인디케이터를 말합니다. 사용자에게 로딩 상태를 시각적으로 보여줌으로써 UX를 향상시킬 수 있습니다.

1. SkeletonView 라이브러리

SkeletonView 라이브러리는 애플리케이션에 쉽게 SkeletonView를 추가할 수 있도록 도와주는 라이브러리입니다. SkeletonView는 UIView, UILabel, UIImageView 및 UIButton과 같은 주요 UI 요소에서 사용할 수 있습니다.

import SkeletonView

// View에서 SkeletonView를 사용하기 위해
view.showSkeleton()

// SkeletonView가 표시되어 있는 동안 애플리케이션 로딩을 시뮬레이션하기 위해
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
    view.hideSkeleton()
}

GitHub: SkeletonView

2. NVActivityIndicatorView

NVActivityIndicatorView는 SkeletonView를 구현할 때 유용한 또 다른 라이브러리입니다. 이 라이브러리를 사용하면 색상, 크기 및 모양으로 맞춤 설정할 수 있는 다양한 로딩 인디케이터를 사용할 수 있습니다.

import NVActivityIndicatorView

let activityIndicatorView = NVActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 50, height: 50), type: .circleStrokeSpin, color: .red, padding: nil)
view.addSubview(activityIndicatorView)

activityIndicatorView.startAnimating()

// 애플리케이션 로딩이 완료되면 인디케이터를 숨김
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
    activityIndicatorView.stopAnimating()
    activityIndicatorView.removeFromSuperview()
}

GitHub: NVActivityIndicatorView

3. Lottie

Lottie는 애프리케이션에 다양한 애니메이션을 적용할 수 있는 라이브러리입니다. SkeletonView에 애니메이션을 추가하여 더욱 동적이고 흥미로운 로딩화면을 만들 수 있습니다.

import Lottie

let animationView = AnimationView(name: "loading")
animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
view.addSubview(animationView)

animationView.loopMode = .loop
animationView.play()

// 애플리케이션 로딩이 완료되면 애니메이션을 중지
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
    animationView.stop()
    animationView.removeFromSuperview()
}

GitHub: Lottie

결론

SkeletonView를 사용하여 UI 요소의 로딩 상태를 시각적으로 표현하면 사용자가 애플리케이션의 반응성을 더 느낄 수 있습니다. SkeletonView라이브러리를 사용하면 손쉽게 구현할 수 있을 뿐만 아니라, NVActivityIndicatorView와 Lottie와 함께 사용하면 더욱 강력한 로딩화면을 만들 수 있습니다.

이상으로 Swift에서 SkeletonView 개발을 위한 몇 가지 유용한 도구를 소개해드렸습니다. 적절한 라이브러리를 선택하여 개발을 진행해보세요!