로고

SwiftUI에서 지도 뷰 사용하기: 위치 기반 서비스 구현

작성일 :

SwiftUI에서 지도 뷰 사용하기: 위치 기반 서비스 구현하기

개요

SwiftUI는 애플의 새로운 UI 프레임워크로, iOS 개발을 더욱 간편하게 만들어주는 도구입니다. 이 글에서는 SwiftUI를 사용해 위치 기반 서비스를 구현하는 방법에 대해 설명합니다. 구체적으로는 지도 뷰를 추가하고, 사용자 위치 정보를 요청하며, 실시간으로 방향을 제공하는 방법을 다룹니다. 여러 단계로 나누어 자세히 설명하므로, 초심자도 쉽게 따라할 수 있습니다.

초기 설정

프로젝트를 생성한 뒤, 위치 기반 서비스를 사용하기 위해 먼저 CoreLocation과 MapKit 프레임워크를 임포트해야 합니다.

swift
import SwiftUI
import MapKit
import CoreLocation

또한 위치 기반 서비스를 사용하려면 애플리케이션의 Info.plist 파일에 위치 서비스 사용 권한 요청을 추가해야 합니다. 다음 키를 추가하세요:

  • NSLocationWhenInUseUsageDescription: 앱이 사용 중일 때 위치 정보 접근 권한을 요청합니다.
xml
<key>NSLocationWhenInUseUsageDescription</key>
<string>사용자 위치 정보를 사용하여 지도를 표시합니다.</string>

기본 지도 뷰 추가하기

가장 먼저, 기본적인 지도 뷰를 SwiftUI에서 어떻게 추가하는지 알아보겠습니다. SwiftUI는 Map이라는 뷰를 제공합니다. 이 뷰를 사용해 기본 지도를 띄울 수 있습니다.

swift
struct ContentView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
    )

    var body: some View {
        Map(coordinateRegion: $region)
            .edgesIgnoringSafeArea(.all)
    }
}

이 코드에서 region은 지도의 중앙 위치와 확대 수준을 정의합니다. Map 뷰는 이 지역(region)을 중심으로 지도를 표시하게 됩니다.

사용자 위치 요청하기

사용자의 현재 위치를 지도에 표시하려면, CoreLocation의 CLLocationManager를 사용해야 합니다. 이를 위해 먼저 위치 매니저를 설정하여 사용자의 위치를 받는 방법을 구현해야 합니다.

swift
class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private var locationManager = CLLocationManager()
    @Published var location: CLLocation? = nil

    override init() {
        super.init()
        self.locationManager.delegate = self
        self.locationManager.requestWhenInUseAuthorization()
        self.locationManager.startUpdatingLocation()
    }

    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        if let location = locations.last {
            self.location = location
        }
    }

    func locationManager(_ manager: CLLocationManager, didFailWithError error: Error) {
        print("Failed to find user's location: \(error.localizedDescription)")
    }
}

위 코드에서 LocationManager 클래스는 CLLocationManagerDelegate 프로토콜을 준수하여 위치 업데이트 및 오류를 처리합니다. 이제 이 위치 매니저를 SwiftUI 뷰와 결합할 차례입니다.

swift
struct ContentView: View {
    @ObservedObject var locationManager = LocationManager()
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
    )

    var body: some View {
        VStack {
            if let userLocation = locationManager.location {
                let userCoordinate = userLocation.coordinate
                Map(coordinateRegion: $region, showsUserLocation: true)
                    .onAppear {
                        region = MKCoordinateRegion(
                            center: userCoordinate,
                            span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
                        )
                    }
            } else {
                Text("사용자 위치를 찾고 있습니다...")
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

이제 locationManager 객체는 사용자 위치를 추적하고, 위치가 업데이트될 때마다 사용자 위치를 중앙으로 하는 지도를 재설정합니다.

실시간 방향 제공하기

실시간으로 방향을 제공하려면 사용자의 움직임에 따라 지도의 중심을 업데이트해야 합니다. CLLocationManager에서 위치 업데이트가 발생할 때마다 지도의 중심을 변경하면 됩니다.

swift
struct ContentView: View {
    @ObservedObject var locationManager = LocationManager()
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
    )

    var body: some View {
        Map(coordinateRegion: $region, showsUserLocation: true)
            .onReceive(locationManager.$location) { location in
                if let location = location {
                    region.center = location.coordinate
                }
            }
            .edgesIgnoringSafeArea(.all)
    }
}

이 코드에서는 locationManager가 새로운 위치를 받을 때마다 region.center를 업데이트하여 사용자의 변경된 위치를 반영합니다.

결론

SwiftUI를 사용해 지도 뷰를 추가하고 위치 기반 서비스를 구현하는 방법에 대해 알아보았습니다. 기본적인 지도 뷰 추가부터 실시간으로 사용자 위치를 추적하는 방법까지 다뤘습니다. 이 글을 통해 위치 기반 서비스의 기본 개념을 이해하고, SwiftUI에서 이를 구현하는 방법을 익히길 바랍니다.