[swift] Mapbox를 활용한 실시간 날씨 정보 제공 애플리케이션 개발 방법

29 Nov 2023

swift

이번 글에서는 Swift와 Mapbox를 사용하여 실시간 날씨 정보를 제공하는 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

1. Mapbox 계정 생성

Mapbox를 사용하기 위해서는 먼저 Mapbox 홈페이지에서 계정을 생성해야 합니다. 계정을 생성한 후 로그인하여 다음 단계로 진행합니다.

2. 프로젝트 설정

Xcode를 열고 새로운 프로젝트를 생성합니다. 프로젝트 설정에서 Linked Frameworks and Libraries에 Mapbox.framework를 추가합니다.

3. Mapbox SDK 설치

Mapbox SDK를 설치하기 위해 CocoaPods를 사용합니다. Podfile을 열고 다음 라인을 추가합니다:

pod 'Mapbox-iOS-SDK', '~> 4.0'

터미널에서 pod install 명령어를 실행하여 SDK를 설치합니다.

4. Mapbox 지도 표시

애플리케이션에서 Mapbox 지도를 표시하기 위해 MGLMapView를 사용합니다. ViewController에 다음 코드를 추가합니다:

import Mapbox

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    let mapView = MGLMapView(frame: view.bounds)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    mapView.styleURL = MGLStyle.streetsStyleURL
    view.addSubview(mapView)
  }
  
}

위 코드는 viewDidLoad() 메서드 내에서 지도를 초기화하고 현재 스타일을 지정하여 화면에 표시합니다.

5. OpenWeatherMap API 연동

실시간 날씨 정보를 제공하기 위해 OpenWeatherMap API를 활용합니다. 먼저 OpenWeatherMap 홈페이지에서 계정을 생성하고 API 키를 발급받습니다.

API 키를 받은 후, ViewController에서 viewDidLoad() 메서드에 다음 코드를 추가합니다:

let apiKey = "YOUR_API_KEY"
let city = "Seoul"
let apiUrl = "http://api.openweathermap.org/data/2.5/weather?q=\(city)&appid=\(apiKey)"

guard let url = URL(string: apiUrl) else {
  // URL 변환 실패
  return
}

let session = URLSession.shared
let task = session.dataTask(with: url, completionHandler: { data, response, error in
  if let error = error {
    // Error 처리
    print("Error: \(error.localizedDescription)")
    return
  }
  
  guard let httpResponse = response as? HTTPURLResponse, (200...299).contains(httpResponse.statusCode) else {
    // HTTP Response 처리
    print("Invalid response")
    return
  }
  
  guard let data = data else {
    // 데이터 처리
    print("No data received")
    return
  }
  
  // 데이터 파싱
  // ...
})

task.resume()

위 코드는 OpenWeatherMap API의 URL을 생성하고 해당 URL에서 데이터를 받아와 처리하는 부분입니다.

6. 실시간 날씨 정보 표시

받아온 날씨 정보를 화면에 표시하기 위해 ViewController에 UI 컴포넌트를 추가합니다. 예를 들어, UILabel을 사용하여 현재 온도를 표시할 수 있습니다.

let temperatureLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
temperatureLabel.center = view.center
temperatureLabel.textAlignment = .center
view.addSubview(temperatureLabel)

이어서 데이터 파싱 부분에서 받아온 온도를 표시하도록 코드를 수정합니다:

// 데이터 파싱
do {
  let json = try JSONSerialization.jsonObject(with: data, options: [])
  if let jsonDict = json as? [String: Any], let main = jsonDict["main"] as? [String: Any], let temperature = main["temp"] as? Double {
    DispatchQueue.main.async {
      let celsius = temperature - 273.15
      temperatureLabel.text = "\(celsius)°C"
    }
  }
} catch {
  // JSON 파싱 오류 처리
  print("JSON parsing error: \(error)")
}

위 코드는 받아온 JSON 데이터를 파싱하여 현재 온도를 표시하는 부분입니다. 파싱한 데이터 중에서 필요한 정보를 추출하여 UILabel에 표시합니다.

이제 앱을 실행하면 Mapbox 지도가 표시되고 다음과 같이 실시간 날씨 정보가 표시될 것입니다:

Weather App Screenshot

이상으로 Swift와 Mapbox를 활용하여 실시간 날씨 정보를 제공하는 애플리케이션 개발 방법을 알아보았습니다. 더 자세한 내용은 Mapbox iOS SDK 문서와 OpenWeatherMap API 문서를 참고하시기 바랍니다.

목차