[swift] Swift SkeletonView 사용자 인터페이스 디자인

Swift SkeletonView는 iOS 앱의 사용자 인터페이스 디자인을 향상시키기 위한 훌륭한 라이브러리입니다. 이 라이브러리를 사용하면 로딩 화면이나 데이터의 도착을 기다리는 동안, 사용자에게 빈 화면 대신에 더 생동감 있는 디자인을 제공할 수 있습니다.

SkeletonView 라이브러리 적용하기

Swift SkeletonView를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 추가해야 합니다. 가장 쉬운 방법은 CocoaPods를 사용하는 것입니다.

# 다음과 같이 Podfile 파일을 생성합니다.
$ pod init

# 파일을 열고 다음 라인을 추가합니다.
pod 'SkeletonView'

# 터미널에서 다음 명령을 실행하여 CocoaPods를 설치합니다.
$ pod install

CocoaPods를 사용하지 않는 경우, 수동으로 프레임워크 파일을 프로젝트에 추가 할 수도 있습니다.

SkeletonView 사용법

SkeletonView 라이브러리를 사용하려면, UIView의 서브클래스에서 isSkeletonable 프로퍼티를 true로 설정해야 합니다.

import UIKit
import SkeletonView

class MyCustomView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.isSkeletonable = true
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.isSkeletonable = true
    }

}

설정이 끝나면, showSkeleton() 호출로 SkeletonView를 활성화하고, hideSkeleton()을 호출하여 SkeletonView를 비활성화할 수 있습니다.

let myView = MyCustomView()
myView.showSkeleton()

// 데이터가 도착하면 skeleton을 hide 해줍니다.
myView.hideSkeleton()

SkeletonView 사용자 정의

SkeletonView는 사용자 각각의 앱에 맞춰서 사용자 정의할 수 있습니다. 기본적으로 흰색 동그라미 모양의 스켈레톤 애니메이션이 제공되지만, 다른 스타일로 변경할 수도 있습니다.

SkeletonAppearance.default.tintColor = .red // 스켈레톤 색상 변경
SkeletonAppearance.default.gradient = SkeletonGradient(baseColor: .red) // 그라디언트 추가
SkeletonAppearance.default.multilineHeight = 20 // 멀티라인 높이 조정

사용자 정의가 완료되면, 앱에 적용하기 위해 해당 프로퍼티들을 설정하는 것만으로도 SkeletonView가 변경된 스타일로 동작합니다.

마무리

Swift SkeletonView는 iOS 앱의 사용자 인터페이스 디자인을 향상시키는 데 사용되는 유용한 라이브러리입니다. 이 글에서는 Swift SkeletonView 라이브러리의 사용법과 사용자 정의 방법을 간단히 알아보았습니다.

더 자세한 내용은 Swift SkeletonView GitHub 저장소에서 확인할 수 있습니다.