[swift] NumberMorphView를 사용하여 주식 시장 데이터 시각화 애플리케이션 만들기

소개

안녕하세요! 이번에는 Swift 프로그래밍 언어를 사용하여 주식 시장 데이터를 시각화하는 애플리케이션을 만들어 보겠습니다. 이 애플리케이션에서는 NumberMorphView라는 라이브러리를 사용하여 주식 가격을 부드럽게 애니메이션화하여 표현할 것입니다.

NumberMorphView란?

NumberMorphView는 Swift에서 숫자를 부드럽게 애니메이션화하여 전환하는 뷰입니다. 이 뷰를 사용하면 주식 가격과 같은 실시간 데이터를 부드럽게 변화시킬 수 있습니다. 따라서 이를 활용하여 주식 시장 데이터를 시각화하는 데에 적합합니다.

프로젝트 설정

  1. 프로젝트를 생성하고 Swift 프로젝트로 설정합니다.
  2. NumberMorphView 라이브러리를 프로젝트에 추가합니다. GitHub에서 필요한 파일을 다운로드하거나 CocoaPods를 사용하여 설치할 수 있습니다.

주식 데이터 가져오기

  1. 서버 또는 API를 통해 주식 데이터를 가져옵니다. 이 예제에서는 야후 금융(Yahoo Finance) API를 사용하겠습니다.
  2. API를 호출하여 주식 가격 데이터를 가져오고, JSON 형식으로 변환합니다.
func fetchStockData(completion: @escaping (Result<[String: Any], Error>) -> Void) {
    let url = URL(string: "https://finance.yahoo.com/api/quote/AAPL")!
    let task = URLSession.shared.dataTask(with: url) { (data, _, error) in
        if let error = error {
            completion(.failure(error))
            return
        }
        
        do {
            if let data = data {
                let json = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any]
                completion(.success(json ?? [:]))
            }
        } catch {
            completion(.failure(error))
        }
    }
    task.resume()
}

주식 데이터 시각화하기

  1. NumberMorphView를 이용하여 주식 가격을 표시하는 StockPriceView를 만듭니다. 이 뷰는 부모 뷰에서 제공되는 주식 가격 값을 받아와 표시합니다.
import UIKit
import NumberMorphView

class StockPriceView: UIView {
    
    private let numberMorphView = NumberMorphView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    private func commonInit() {
        numberMorphView.frame = bounds
        numberMorphView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(numberMorphView)
    }
    
    func updatePrice(to price: Double) {
        numberMorphView.animationDuration = 0.5
        numberMorphView.count(from: 0, to: price)
    }
}
  1. fetchStockData 함수를 호출하여 주식 가격 데이터를 가져오고, StockPriceViewupdatePrice(to:) 메서드로 주식 가격을 업데이트합니다.
fetchStockData { result in
    switch result {
    case .success(let json):
        if let price = json["price"] as? Double {
            DispatchQueue.main.async {
                stockPriceView.updatePrice(to: price)
            }
        }
    case .failure(let error):
        print(error)
    }
}
  1. 이제 주식 시장 데이터를 시각화하는 애플리케이션이 완성되었습니다. 주식 가격이 변경될 때마다 NumberMorphView가 애니메이션으로 주식 가격을 부드럽게 전환시킵니다.

결론

이번에는 NumberMorphView를 사용하여 주식 시장 데이터를 시각화하는 애플리케이션을 만들어 보았습니다. NumberMorphView를 활용하면 실시간 데이터를 부드럽게 변화시킬 수 있어 많은 분야에서 유용하게 사용될 수 있습니다. 이를 응용하여 다양한 데이터 시각화 애플리케이션을 개발해보세요!

Reference