[swift] Swift SkeletonView 프로필 설정 기능 구현

20 Nov 2023

swift

이번 블로그 포스트에서는 Swift SkeletonView를 사용하여 프로필 설정 기능을 구현하는 방법에 대해 알아보겠습니다.

SkeletonView란?

SkeletonView는 앱의 데이터를 가져오거나 로딩 중일 때 데이터가 표시되는 대신 스켈레톤 형태의 뼈대를 제공하는 라이브러리입니다. 이를 통해 사용자는 앱이 작동 중임을 인식할 수 있고, 로딩 시간을 보다 잘 관리할 수 있습니다.

프로필 설정 기능 구현하기

프로젝트에 SkeletonView 라이브러리를 추가합니다. Cocoapods를 사용한다면 Podfile에 다음을 추가하고 설치합니다.

pod 'SkeletonView'

SkeletonView를 사용할 ViewController에서 import SkeletonView 문을 추가합니다.
프로필 설정 화면의 로딩 중에 스켈레톤 뷰를 보여줄 UIView를 준비합니다.
```
@IBOutlet weak var profileView: UIView!
```

viewDidLoad() 메서드에서 SkeletonView와 관련된 설정을 초기화합니다.

override func viewDidLoad() {
 super.viewDidLoad()
    
 profileView.isSkeletonable = true
}

프로필 설정 데이터를 로딩하기 전에, 프로필 뷰를 스켈레톤 상태로 설정합니다.
```
profileView.showAnimatedGradientSkeleton()
```
프로필 설정 데이터를 가져온 후, 프로필 뷰를 업데이트해주는 메서드를 호출합니다. 이때, 실제 데이터를 프로필 뷰에 반영하고 스켈레톤 뷰를 숨깁니다.
```
func updateProfileViewWithData(data: ProfileData) {
 // 프로필 데이터를 UI에 반영하는 코드
 // ...
    
 // 스켈레톤 뷰를 숨깁니다.
 profileView.hideSkeleton()
}
```
원하는 타이밍에 updateProfileViewWithData(data:) 메서드를 호출하여 프로필 뷰를 업데이트합니다. 이때, 데이터가 로딩 중이라는 시각적인 피드백을 제공하기 위해 해당 메서드를 호출하기 전에 profileView.showSkeleton() 메서드를 호출합니다.

마무리

이렇게 SkeletonView를 사용하여 프로필 설정 기능을 구현할 수 있습니다. SkeletonView를 활용하면 로딩 중에 앱이 작동 중임을 나타내는 시각적인 피드백을 제공할 수 있습니다. 또한, 프로필 설정 화면 같은 경우에는 로딩 시간이 길어질 수 있으므로 SkeletonView를 사용하여 사용자 경험을 향상시킬 수 있습니다.

더 자세한 내용은 SkeletonView 공식 문서를 참고하시기 바랍니다.