이번 포스트에서는 Swift SkeletonView를 사용하여 채팅 기능을 구현하는 방법을 알아보겠습니다. SkeletonView는 데이터 로딩 중에 화면을 일시적으로 대체하고 로딩 상태를 시각적으로 표시하는 라이브러리입니다. 이를 사용하여 채팅 앱에서 메시지 불러오기 등의 프로세스 중에 유저 인터페이스를 유지하고 로딩 상태를 보여줄 수 있습니다.
SkeletonView 설치하기
먼저, 프로젝트에 SkeletonView를 설치해야 합니다. Cocoapods를 사용한다면, Podfile에 아래와 같이 SkeletonView를 추가합니다.
pod 'SkeletonView'
그리고 터미널에서 프로젝트 폴더로 이동하여 pod install 명령어를 실행합니다. 이렇게하면 SkeletonView가 프로젝트에 추가되고 사용할 준비가 됩니다.
채팅 화면 구현하기
채팅 화면에서는 대화 내용을 보여주는 테이블 뷰를 사용합니다. SkeletonView를 사용하여 로딩 상태를 보여주기 위해 먼저 테이블 뷰의 셀을 커스텀하고 SkeletonView를 적용해야 합니다.
1. 테이블 뷰 셀 커스텀하기
테이블 뷰에 사용할 셀을 커스텀하여 SkeletonView를 적용합니다. 커스텀 셀을 만들기 위해 UITableViewCell을 상속하는 ChatTableViewCell 클래스를 만들고, 이 클래스에 SkeletonView를 적용합니다.
import SkeletonView
class ChatTableViewCell: UITableViewCell {
@IBOutlet weak var messageLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// SkeletonView 설정
self.isSkeletonable = true
self.contentView.showAnimatedGradientSkeleton()
}
override func prepareForReuse() {
// 셀 재사용 시 SkeletonView를 초기화합니다.
self.contentView.hideSkeleton()
}
// 셀 내용을 설정하는 메서드
func configureCell(message: String) {
self.messageLabel.text = message
self.contentView.hideSkeleton()
}
}
2. 테이블 뷰 데이터 소스 설정하기
채팅 화면에서 로딩 상태를 보여주기 위해 테이블 뷰의 데이터 소스를 설정해야 합니다. 로딩 중인 상태에서는 SkeletonView를 사용하여 셀을 표시하고, 데이터를 불러오면 실제 데이터로 갱신합니다.
class ChatViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
var messages = [String]()
var isLoading = false
override func viewDidLoad() {
super.viewDidLoad()
// 테이블 뷰 설정
self.tableView.dataSource = self
self.tableView.register(UINib(nibName: "ChatTableViewCell", bundle: nil), forCellReuseIdentifier: "ChatTableViewCell")
// 데이터 불러오기 시작
self.loadMessages()
}
// 데이터 불러오기 메서드
func loadMessages() {
if isLoading {
return
}
isLoading = true
// 로딩 중 상태로 테이블 뷰를 갱신합니다.
self.tableView.reloadData()
// 예를 들어 네트워크 요청을 통해 채팅 데이터를 받아온 후,
// 데이터를 messages 배열에 저장하고 테이블 뷰를 갱신합니다.
// 데이터 로딩이 완료되었으므로 로딩 상태를 false로 설정합니다.
isLoading = false
self.tableView.reloadData()
}
}
extension ChatViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// 로딩 중인 상태라면 SkeletonView로 표시되는 셀의 개수를 반환합니다.
if isLoading {
return 10
}
// 데이터를 로딩한 후 실제 데이터의 개수를 반환합니다.
return messages.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "ChatTableViewCell", for: indexPath) as! ChatTableViewCell
// 테이블 뷰 셀에 데이터를 설정합니다.
if isLoading {
// 로딩 중인 상태에서는 SkeletonView로 셀을 표시합니다.
cell.configureCell(message: "")
} else {
// 데이터를 불러왔다면 실제 데이터로 셀을 갱신합니다.
let message = messages[indexPath.row]
cell.configureCell(message: message)
}
return cell
}
}
위의 코드에서 loadMessages() 메서드는 예시로 작성된 것입니다. 실제로는 채팅 데이터를 불러오는 로직을 작성해야합니다.
마무리
이렇게 SkeletonView를 사용하여 채팅 앱에서 셀 로딩 상태를 시각적으로 표시하는 방법을 알아보았습니다. SkeletonView는 사용하기 쉽고 유용한 라이브러리이므로, 앱의 로딩 상태를 사용자에게 더 잘 전달하기 위해 활용할 수 있습니다.