[swift] PKHUD에서의 사용자 통계 정보 시각화 기능 구현 방법

개요

이번 글에서는 PKHUD라이브러리를 사용하여 사용자 통계 정보를 시각화하는 방법에 대해 알아보겠습니다. PKHUD는 iOS에서 간단한 인디케이터 및 알림창을 표시하기위한 라이브러리입니다.

PKHUD 라이브러리 설치

PKHUD를 사용을 시작하기 전에 먼저 Cocoapods를 통해 라이브러리를 설치해야 합니다. Podfile 에 다음과 같이 PKHUD를 추가합니다.

pod 'PKHUD'

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

pod install

설치가 완료되면 .xcworkspace 파일을 열어 프로젝트를 실행합니다.

PKHUD 사용하기

1. HUD 표시하기

import PKHUD

// HUD 표시
HUD.show(.progress)

// HUD 숨기기
HUD.hide()

위의 예제 코드에서는 HUD.show(.progress) 메서드를 호출하여 HUD를 사용자에게 표시하고 있습니다. .progress 파라미터는 인디케이터 스타일로 사용되며, 다른 스타일도 사용할 수 있습니다. 필요에 따라 인디케이터 스타일을 변경하실 수 있습니다.

2. HUD 옵션 설정하기

PKHUD는 다양한 옵션을 설정하여 사용자에게 적합한 UI를 제공할 수 있습니다. 아래는 가장 일반적으로 사용되는 옵션 몇 가지입니다.

// HUD 백그라운드 색상 설정
HUD.backgroundColor = .black

// HUD 텍스트 색상 설정
HUD.foregroundColor = .white

// HUD 텍스트 크기 설정
HUD.allowsInteraction = false

// HUD 디스플레이 시간 설정
HUD.dimsBackground = true

위의 예제에서는 HUD의 배경 색상을 검정색으로, 텍스트 색상을 흰색으로 설정하고 있으며, 상호 작용을 비활성화하고 백그라운드를 어둡게 표시하도록 설정되어 있습니다.

사용자 통계 정보 시각화하기

이제 PKHUD를 사용하여 사용자 통계 정보를 시각화하는 방법에 대해 알아보겠습니다. 예를 들어, 월별 신규 사용자 수를 그래프로 표현하고 싶다고 가정해 봅시다.

import PKHUD
import Charts

class UserStatsViewController: UIViewController {

    @IBOutlet weak var lineChartView: LineChartView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 사용자 통계 정보 로드 및 차트에 데이터 추가
        let dataEntries = loadUserStats()
        setupLineChart(withData: dataEntries)
        
        // HUD 표시
        HUD.show(.progress)
        
        // 2초 후에 HUD 숨기기
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            HUD.hide()
        }
    }
    
    func loadUserStats() -> [ChartDataEntry] {
        // 실제 사용자 통계 정보를 로드하는 로직 구현
        // 예시를 위해 임의의 데이터를 만들어 반환합니다.
        
        let dataEntries = [
            ChartDataEntry(x: 1, y: 100),
            ChartDataEntry(x: 2, y: 150),
            ChartDataEntry(x: 3, y: 200),
            ChartDataEntry(x: 4, y: 300),
            ChartDataEntry(x: 5, y: 250),
        ]
        
        return dataEntries
    }
    
    func setupLineChart(withData dataEntries: [ChartDataEntry]) {
        // 차트 설정
        // 예시로 LineChartView를 사용하지만, 다른 차트도 사용할 수 있습니다.
        
        let lineDataSet = LineChartDataSet(entries: dataEntries, label: "New Users")
        lineDataSet.colors = [.blue]
        
        let lineData = LineChartData(dataSet: lineDataSet)
        lineChartView.data = lineData
    }

}

위의 예제 코드에서는 Charts 라이브러리를 사용하여 실제 사용자 통계 정보를 로드하고 차트에 데이터를 추가하는 방법을 보여주고 있습니다. loadUserStats() 메서드는 통계 정보를 로드하고, setupLineChart(withData:) 메서드는 로드한 데이터를 차트에 추가합니다. 사용자에게 시각화된 통계 정보를 제공하기 전에 HUD를 사용하여 로딩 상태를 표시하고 있습니다.

결론

이번 글에서는 PKHUD라이브러리를 사용하여 사용자 통계 정보를 시각화하는 방법에 대해 알아보았습니다. PKHUD의 간편한 사용법과 다양한 옵션을 설정하여 원하는 UI를 구성할 수 있다는 점이 매우 유용합니다. 향후 프로젝트에서 사용자에게 시각화된 통계 정보를 제공해야한다면 PKHUD를 고려해보세요.

참고 자료