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

SkeletonView란?

SkeletonView는 화면에 아무 내용이 없는 상태, 즉 로딩 중인 상태를 시각적으로 보여주는 뷰입니다. 결제 기능을 구현할 때, 사용자는 결제가 진행되는 동안 로딩 중임을 알 수 있도록 SkeletonView를 활용할 수 있습니다.

결제 기능 구현을 위한 준비 작업

1. SkeletonView 라이브러리를 프로젝트에 추가합니다.
   • CocoaPods를 사용한다면 Podfile에 다음과 같이 추가합니다:

      pod 'SkeletonView'
     

2. SkeletonView를 사용할 뷰에 대해 Skeletonable 프로토콜을 준수하도록 선언합니다.

    import SkeletonView
   
    class PaymentViewController: UIViewController, Skeletonable {
        // ...
    }
   

결제 기능 구현하기

1. 결제 버튼에 SkeletonView를 적용합니다.

    @IBOutlet weak var paymentButton: UIButton!
   
    override func viewDidLoad() {
        super.viewDidLoad()
   
        paymentButton.isSkeletonable = true
        paymentButton.skeletonCornerRadius = 8
    }
   

2. 결제 버튼을 탭할 때, 결제가 진행되는 동안 SkeletonView를 표시하도록 구현합니다.

    @IBAction func paymentButtonTapped(_ sender: UIButton) {
        sender.showAnimatedGradientSkeleton()
           
        // 결제 로직 구현
        // ...
           
        sender.hideSkeleton()
    }
   

결론

Swift SkeletonView를 사용하여 결제 기능을 구현하는 방법에 대해 알아보았습니다. SkeletonView를 활용하여 사용자에게 로딩 중 임을 시각적으로 알려주면서, 좀 더 사용자 친화적인 결제 화면을 제공할 수 있습니다.

참고 자료

• SkeletonView 레퍼런스 문서