[swift] Mapbox를 이용한 실시간 위치 기반 여행 일정 관리 서비스 개발 방법

29 Nov 2023

swift

서비스 소개

이번 글에서는 실시간 위치 기반 여행 일정 관리 서비스를 개발하는 방법에 대해 알아보겠습니다. 이 서비스는 사용자의 현재 위치를 실시간으로 추적하고, 여행 일정을 관리하고 공유할 수 있는 기능을 제공합니다. Mapbox는 지도 및 위치 기반 서비스를 제공하는 플랫폼으로, 이를 이용하여 우리의 여행 일정 관리 서비스를 개발해 볼 것입니다.

개발 환경 설정

먼저, Mapbox를 사용하기 위해서는 개발 환경을 설정해야 합니다.

Mapbox 계정 생성: https://www.mapbox.com/ 에서 계정을 생성합니다.
Mapbox SDK 설치: Swift 프로젝트에 Mapbox SDK를 추가합니다. Cocoapods를 사용하는 경우, Podfile에 다음과 같이 추가합니다:
```
pod 'Mapbox-iOS-SDK'
```
그리고 터미널에서 pod install 명령을 실행하여 라이브러리를 다운로드 및 설치합니다.

실시간 위치 추적

Mapbox SDK를 사용하여 실시간 위치를 추적하는 기능을 개발해보겠습니다.

Mapbox 인증 설정: AppDelegate.swift 파일에서 Mapbox SDK에 대한 인증 정보를 설정합니다.

import Mapbox

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    MGLAccountManager.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN"
    return true
}

YOUR_MAPBOX_ACCESS_TOKEN 부분에는 Mapbox에서 발급받은 액세스 토큰을 입력합니다.

지도 뷰 추가 및 현재 위치 추적: ViewController에 MGLMapView를 추가하고, 현재 위치를 표시하는 코드를 작성합니다.

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {

    var mapView: MGLMapView!

    override func viewDidLoad() {
        super.viewDidLoad()
           
        mapView = MGLMapView(frame: view.bounds)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.delegate = self
        mapView.showsUserLocation = true
           
        view.addSubview(mapView)
    }

    // 현재 위치 업데이트 시 호출되는 delegate 메서드
    func mapView(_ mapView: MGLMapView, didUpdate userLocation: MGLUserLocation?) {
        // 현재 위치가 업데이트되면 이 부분이 호출됩니다.
        guard let location = userLocation?.coordinate else { return }
           
        // 위치를 기준으로 지도를 이동시킵니다.
        mapView.setCenter(location, animated: true)
    }
}

이제 실행하면 지도 위에 사용자의 현재 위치가 표시됩니다.

여행 일정 관리 기능 추가

이제 여행 일정을 관리할 수 있는 기능을 추가해보겠습니다.

일정 모델 클래스 생성: TravelEvent.swift 파일을 생성하고, 다음과 같이 일정에 대한 정보를 담고 있는 TravelEvent 클래스를 작성합니다.
```
import Foundation

struct TravelEvent {
    let title: String
    let location: CLLocationCoordinate2D
    let startTime: Date
    let endTime: Date
}
```
CLLocationCoordinate2D는 Mapbox에서 사용되는 위도와 경도 값을 저장하는 구조체입니다.

일정 추가 및 표시 기능 구현: ViewController에 다음과 같이 일정을 추가하고 지도에 마커로 표시하는 기능을 구현합니다.

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {

    // ...
    var travelEvents: [TravelEvent] = []

    // 일정을 추가하는 메서드
    func addEvent(title: String, location: CLLocationCoordinate2D, startTime: Date, endTime: Date) {
        let newEvent = TravelEvent(title: title, location: location, startTime: startTime, endTime: endTime)
        travelEvents.append(newEvent)
           
        // 지도에 마커로 일정을 표시합니다.
        let marker = MGLPointAnnotation()
        marker.coordinate = location
        marker.title = title
        mapView.addAnnotation(marker)
    }

    // 마커를 표시하기 위한 delegate 메서드
    func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        guard annotation is MGLPointAnnotation else { return nil }
           
        let reuseIdentifier = "marker"
           
        // 이미지로 마커를 사용하려면 이미지 파일을 프로젝트에 추가한 후 다음과 같이 사용합니다.
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseIdentifier)
        if annotationView == nil {
            annotationView = MGLAnnotationView(reuseIdentifier: reuseIdentifier)
            annotationView?.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
            annotationView?.backgroundColor = .blue
            annotationView?.layer.cornerRadius = (annotationView?.frame.width ?? 0) / 2
            annotationView?.layer.borderWidth = 2
            annotationView?.layer.borderColor = UIColor.white.cgColor
        }
           
        return annotationView
    }
}

이제 addEvent 메서드를 호출하면 일정이 추가되고, 지도에 해당 일정을 마커로 표시할 수 있습니다.

결론

이렇게 Mapbox를 이용하여 실시간 위치 기반 여행 일정 관리 서비스를 개발하는 방법에 대해 알아보았습니다. Mapbox를 사용하면 지도 관련 기능을 쉽게 구현할 수 있으며, 사용자의 현재 위치 추적 및 일정 관리 기능을 간편하게 추가할 수 있습니다. 추가적으로 서비스에 필요한 기능들을 더욱 발전시켜 나갈 수 있을 것입니다.