이번에는 SkeletonView를 사용하여 로그인 기능을 구현하는 방법에 대해 알아보겠습니다.

1. SkeletonView 설치

SkeletonView는 Cocoapods를 통해 설치할 수 있습니다. Podfile에 다음과 같이 추가해주세요.

pod 'SkeletonView'

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

2. SkeletonView 사용 준비

SkeletonView를 사용하려면 먼저 사용할 View를 확장해야 합니다. 예를 들어, 사용자가 입력하는 TextField를 SkeletonView로 구현하고 싶다면 다음과 같이 TextField를 확장합니다.

import UIKit
import SkeletonView

extension UITextField {
    func showSkeleton() {
        self.isSkeletonable = true
        self.showAnimatedGradientSkeleton()
    }
    
    func hideSkeleton() {
        self.hideSkeleton()
    }
}

3. 로그인 화면 구현

이제 준비가 끝났으니, 실제로 로그인 기능을 구현해보겠습니다. 먼저, 로그인 버튼을 누르는 액션 메서드를 작성합니다.

@IBAction func loginButtonTapped(_ sender: UIButton) {
    usernameTextField.showSkeleton()
    passwordTextField.showSkeleton()
    
    // 네트워크 요청 등 로그인 과정을 진행
    
    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
        self.usernameTextField.hideSkeleton()
        self.passwordTextField.hideSkeleton()
    }
}

위의 코드에서는 로그인 버튼을 누르면 UITextField인 usernameTextField과 passwordTextField에 SkeletonView를 보여주고, 2초 뒤에 SkeletonView를 숨기는 로직을 구현하였습니다. 실제로는 네트워크 요청 등 로그인 과정을 진행하고, 해당 작업이 완료된 후 SkeletonView를 숨기는 것이 좋습니다.

4. 실행해보기

이제 프로젝트를 빌드하고 앱을 실행해보면 로그인 버튼을 누르면 usernameTextField과 passwordTextField에 SkeletonView가 보여집니다. 로그인 과정이 진행되는 동안 SkeletonView가 표시되며, 작업이 완료되면 SkeletonView가 사라집니다.

마무리

위의 예제를 통해 SkeletonView를 사용하여 로그인 기능을 구현하는 방법에 대해 알아보았습니다. SkeletonView는 로딩이나 비동기 작업 등의 일시적인 대기 시간에 유용하게 사용할 수 있습니다. 추가적으로 사용자가 입력한 내용을 검증하는 등의 기능도 구현할 수 있으니 참고해보세요.

참고 자료

• SkeletonView 라이브러리 GitHub
• SkeletonView 공식 문서