[swift] Swift SkeletonView 텍스트 구성

20 Nov 2023

swift

개요

이 문서는 SkeletonView를 사용하여 Swift로 텍스트 구성을 만드는 방법에 대해 설명합니다.

SkeletonView는 데이터가 로드되기 전에 로딩 중임을 시각적으로 나타내기 위해 사용되는 라이브러리입니다. 이를 통해 사용자는 빈 화면이 아닌 로딩 중인 화면을 볼 수 있습니다.

SkeletonView 설치

SkeletonView는 Swift Package Manager, CocoaPods 또는 Carthage를 통해 설치할 수 있습니다.

Swift Package Manager를 사용하는 경우, Package.swift 파일에 아래와 같이 의존성을 추가합니다.

dependencies: [
    .package(url: "https://github.com/Juanpe/SkeletonView.git", from: "1.0.0")
]

CocoaPods를 사용하는 경우, Podfile에 아래와 같이 추가합니다.

pod 'SkeletonView', '~> 1.0.0'

Carthage를 사용하는 경우, Cartfile에 아래와 같이 추가합니다.

github "Juanpe/SkeletonView" ~> 1.0.0

구현

SkeletonView를 프로젝트에 추가하기 위해 다음 줄을 해당 파일의 상단에 추가합니다.
```
import SkeletonView
```

텍스트가 보여질 뷰를 생성합니다.

let titleLabel = UILabel()
titleLabel.numberOfLines = 0
titleLabel.textColor = .black
self.view.addSubview(titleLabel)

SkeletonView로 텍스트를 구성할 뷰를 지정합니다.
```
titleLabel.isSkeletonable = true
```

텍스트를 업데이트하는 함수를 작성합니다.

func updateText() {
 titleLabel.text = "로딩 중"
 titleLabel.showSkeleton()
 titleLabel.linesCornerRadius = 10 // 텍스트 테두리를 둥글게 만듦
 DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
     self.titleLabel.hideSkeleton()
     self.titleLabel.text = "실제 텍스트"
 }
}

텍스트 업데이트를 원하는 곳에서 updateText() 함수를 호출합니다. SkeletonView가 화면에 나타나고 나서 2초 후에 실제 텍스트로 교체됩니다.

결론

Swift SkeletonView를 사용하여 텍스트 구성을 만드는 방법에 대해 알아보았습니다. 이를 통해 로딩 중인 상태를 시각적으로 나타내고 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다. 추가적으로 SkeletonView를 사용하여 다른 요소들도 구성할 수 있으니 자유롭게 활용해보세요.