이번 포스트에서는 Swift 프레임워크인 SkeletonView의 유용한 팁과 트릭을 알아보겠습니다. SkeletonView는 사용자가 데이터가 로드되기 전에 빈 화면을 보는 대신 로딩 중인 표시 모습을 제공하는 데 사용됩니다. 이를 통해 앱의 사용자 경험을 향상시킬 수 있습니다.
SkeletonView를 사용하는 기본적인 방법은 다음과 같습니다.
- SkeletonView를 프로젝트에 추가합니다.
pod 'SkeletonView'
- 사용할 뷰에 SkeletonView를 적용합니다.
import SkeletonView
// SkeletonView 적용
myView.isSkeletonable = true
myView.showSkeleton()
이제 SkeletonView의 유용한 팁과 트릭을 알아보겠습니다.
1. 커스텀 SkeletonView 스타일링
SkeletonView의 기본 스타일은 회색 배경에 번쩍이는 애니메이션입니다. 그러나 직접 스타일링하여 앱의 디자인에 맞출 수도 있습니다. 다음과 같은 방법으로 커스텀 스타일을 적용할 수 있습니다.
// SkeletonView 스타일링
myView.skeletonBackgroundColor = .white
myView.skeletonAnimation = .solid
위의 코드에서는 배경색을 흰색으로 설정하고, 애니메이션을 번쩍이는 대신 일정한 색상으로 유지하도록 설정했습니다.
2. 텍스트의 SkeletonView
텍스트를 로딩 중인 상태로 보여주기 위해 SkeletonView를 사용할 수 있습니다. 다음과 같은 방법으로 텍스트에 SkeletonView를 적용할 수 있습니다.
// 텍스트에 SkeletonView 적용
label.numberOfLines = 3
label.lineBreakMode = .byWordWrapping
label.skeletonCornerRadius = 8
label.linesCornerRadius = 4
label.showSkeleton()
위의 코드에서는 label에 SkeletonView를 적용하고, 텍스트가 여러 줄로 표시되도록 설정했습니다. 또한, SkeletonView의 모서리를 둥글게 처리하여 좀 더 부드러운 모습을 구현했습니다.
3. TableView에서 SkeletonView 사용하기
TableView에서 SkeletonView를 사용하면 데이터 로딩 중에도 사용자에게 피드백을 제공할 수 있습니다. 다음과 같은 방법으로 TableView에 SkeletonView를 적용할 수 있습니다.
// TableView에 SkeletonView 적용
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 120
tableView.showSkeleton()
위의 코드에서는 TableView의 각 행마다 SkeletonView가 보여지도록 설정했습니다. Dynamic Cell Height를 사용하기 위해 rowHeight와 estimatedRowHeight를 설정하였습니다.
SkeletonView를 사용하면 앱의 사용자 경험을 향상시킬 수 있다는 것을 알아보았습니다. 위에서 소개한 팁과 트릭을 사용하여 보다 유려한 SkeletonView를 구현해보세요.
[참고자료]
- SkeletonView GitHub 저장소: 링크