[swift] Swift SkeletonView 게시물 업로드 기능 구현

소개

이번 블로그에서는 Swift SkeletonView를 사용하여 게시물 업로드 기능을 구현하는 방법에 대해 알아보겠습니다. SkeletonView는 데이터가 로딩되기 전에 사용자에게 로딩 중임을 시각적으로 표시해주는 라이브러리입니다. 이를 이용하여 사용자가 업로드된 게시물의 로딩 상태를 확인할 수 있습니다.

개발 환경

필수 도구 설치

SkeletonView를 사용하기 위해 아래와 같이 Cocoapods를 통해 필요한 라이브러리를 설치해야 합니다.

pod 'SkeletonView'

설치 후, 터미널에서 pod install 명령을 실행하여 라이브러리를 프로젝트에 추가합니다.

게시물 업로드 화면 구성

먼저, 게시물을 업로드하는 화면을 구성해야 합니다. 적절한 UI 요소를 추가하고 편집하여 게시물 업로드 화면을 디자인합니다. 업로드 버튼을 누르면 서버로 데이터를 전송하고, 그 사이에 SkeletonView를 통해 로딩 화면을 보여줄 예정입니다.

SkeletonView 적용

SkeletonView를 사용하기 위해 뷰 컨트롤러에서 아래와 같이 라이브러리를 import 합니다.

import SkeletonView

그리고, 업로드가 시작되면 SkeletonView를 화면에 표시하도록 아래와 같이 코드를 작성합니다.

view.showSkeleton()  

업로드가 끝나면 SkeletonView를 숨기기 위해 아래 코드를 사용합니다.

view.hideSkeleton()  

이렇게 간단한 코드로 SkeletonView를 적용하여 로딩 화면을 만들 수 있습니다.

게시물 업로드 기능 구현

이제 실제로 게시물을 업로드하는 기능을 구현해보겠습니다. 먼저, 필요한 서버 API와 통신하기 위해 URLSession을 사용하여 HTTP 요청을 보냅니다. 업로드 요청이 시작되면 SkeletonView를 표시하고, 요청이 완료되면 SkeletonView를 숨깁니다.

func uploadPost() {
  // 업로드를 시작하기 전에 SkeletonView를 표시
  view.showSkeleton()
  
  // 게시물 업로드에 필요한 데이터를 서버 API에 전송하는 HTTP 요청 작성 및 전송
  
  // 성공적으로 업로드가 완료되면 SkeletonView를 숨김
  view.hideSkeleton()
}

이렇게 코드를 작성하면 게시물 업로드 시에 SkeletonView가 제대로 표시되고, 업로드가 완료되면 SkeletonView가 숨겨집니다.

마치며

이번에는 Swift SkeletonView를 사용하여 게시물 업로드 기능을 구현하는 방법에 대해 알아보았습니다. SkeletonView를 통해 사용자에게 로딩 상태를 시각적으로 표시하는 것은 사용자 경험을 향상시키는 좋은 방법입니다. SkeletonView를 적용하여 앱의 로딩 화면을 개선하는데 도움이 되었기를 바랍니다.

참고 자료