[swift] Swift SkeletonView 앱 내 검색 기능 구현

20 Nov 2023

swift

Swift SkeletonView는 좀더 사용자에게 미리보기를 제공하기 위해 로딩 상태에서 화면에 그림자 형태로 나타내는 기능입니다. 이번 블로그에서는 Swift SkeletonView를 사용하여 앱 내에서 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

1. SkeletonView 라이브러리 추가하기

우선 프로젝트에 SkeletonView 라이브러리를 추가해야 합니다. Cocoapods를 사용하는 경우 Podfile에 다음과 같이 추가합니다.

pod 'SkeletonView'

그리고 터미널에서 pod install 명령어를 실행하여 라이브러리를 설치합니다.

2. 검색 화면 구성하기

검색 화면은 일반적으로 키워드를 입력받는 UITextField와 검색 버튼으로 구성됩니다. 따라서 빈 화면에서 UITextField와 UIButton을 추가합니다. 또한, 검색 결과를 표시할 UITableView도 추가해 줍니다.

class SearchViewController: UIViewController {
    @IBOutlet weak var searchTextField: UITextField!
    @IBOutlet weak var searchButton: UIButton!
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 필요한 초기 설정을 진행합니다.
    }
    
    // 다른 필요한 메소드들을 추가합니다.
}

3. SkeletonView 설정하기

먼저, SkeletonView를 활성화 시키기 위해 UITableView 객체에 다음과 같이 확장을 추가합니다.

extension UITableView {
    func showSkeleton() {
        // SkeletonView 활성화 코드 작성
    }
    
    func hideSkeleton() {
        // SkeletonView 비활성화 코드 작성
    }
}

이제 검색 버튼을 클릭했을 때 검색 결과를 가져오기 전에 UITableView에 SkeletonView를 보여주는 로직을 추가합니다.

@IBAction func searchButtonTapped(_ sender: UIButton) {
    tableView.showSkeleton()
    
    // 검색 결과를 가져오는 로직을 구현합니다.
}

또한, 검색 결과가 도착하여 UITableView를 갱신할 때에도 SkeletonView를 숨기는 로직을 추가합니다.

func updateSearchResults(with results: [SearchResult]) {
    tableView.hideSkeleton()
    
    // 검색 결과를 갱신하는 로직을 구현합니다.
}

4. 실제 검색 기능 구현하기

이제 실제로 검색 기능을 구현해 보겠습니다. 예를 들어, 사용자가 특정 키워드를 입력하고 검색 버튼을 클릭하면, 네트워크 요청을 통해 검색 결과를 가져온 후, updateSearchResults 메소드를 통해 화면을 갱신해야 할 것입니다.

@IBAction func searchButtonTapped(_ sender: UIButton) {
    tableView.showSkeleton()
    
    let keyword = searchTextField.text ?? ""
    
    NetworkManager.search(keyword: keyword) { results, error in
        if let results = results {
            self.updateSearchResults(with: results)
        } else if let error = error {
            // 에러 처리 로직을 추가합니다.
        }
    }
}

네트워크 요청의 결과로 updateSearchResults 메소드가 호출되어 화면이 갱신됩니다. 이 때, 검색 결과가 없는 경우에는 빈 화면을 보여주는 대신에 적절한 실패 상태 메시지를 표시해 주는 것이 좋습니다.

5. 마무리

이제 Swift SkeletonView를 사용하여 앱 내에서 검색 기능을 구현하는 방법을 알아보았습니다. SkeletonView를 활용하면 사용자에게 로딩 상태를 시각적으로 보여줄 수 있어 좋은 사용자 경험을 제공할 수 있습니다.

더 자세한 내용은 SkeletonView GitHub 페이지를 참고해 주세요.