[Tutorial] 04. Map을 표시해보자! (MapKit)

안녕하세요. 벌써 4번째 챕터가 다가왔습니다.

앞에 내용은 어렵지 않으신가요?

 

여러분들은 벌써 SwiftUI에서 각종 View들을 표현하는 법을 배웠습니다.

이번시간에는 Mapkit에서 제공하는 Map을 표시하는 법을 배워봅시다!

https://developer.apple.com/documentation/mapkit/mapkit-for-swiftui

MapKit for SwiftUI | Apple Developer Documentation

MapKit은 말그대로 SwiftUI에서 제공하는 Map 관련 프레임워크인데요.

이 프레임워크를 이용하면 프로젝트에 간단하게 애플 맵을 표시할 수 있습니다!

 

바로 고고혓--

 

---

[완성 화면]

 

QWER의 소속사인 3Y corporation

 

시뮬레이터에 3y corporation(QWER 소속사)의 위치를 표시했습니다!

학동역 사옥에 걸려있는 QWER

여러분들도 저 위치에 찾아가시면 QWER 멤버들의 사진을 관람할 수 있습니다!

실제로 많은 바위게분들이 성지순례를 가신걸로 알고있습니다.. ㅎㅎ

 

아무튼 어떻게 시뮬레이터로 맵을 띄웠는지 알아볼까요?

 

[코드]

import SwiftUI
import MapKit

struct MapView: View {
    var body: some View {
        Map(initialPosition: .region(region))
    }
    
    private var region: MKCoordinateRegion {
        MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 37.513555, longitude: 127.0269511),
            span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
        )
    }
}

#Preview {
    MapView()
}

 

새로운게 보이시나요?

1. import Mapkit

2. Map(initialPosition: )

3. MKCoordinateRegion(center: , span: )

등이 새롭게 보이네요.

 

🔹 주요 요소 해설

1. import SwiftUI + import MapKit

- SwiftUI는 UI를 그리는 프레임워크이고 이번에 새로 추가된 MapKit은 지도(지도 + 렌더링 + 위치 좌표 시스템 등)를 다루는 프레임워크입니다. Map을 화면에 표시하려면 이 두개의 프레임워크가 모두 필요합니다.

 

2. Map(initialPosition: )

- Map( ... ) 은 SwiftUI가 제공하는 지도 뷰입니다.

- initialPosition: .region(region)) : 맵을 처음 렌더링할때 어떤 위치를 중심으로 보여줄지 지정하는 부분입니다.

https://swiftwithmajid.com/2023/11/28/mastering-mapkit-in-swiftui-basics/

Mastering MapKit in SwiftUI. Basics.

- 여기서 region은 아래에서 정의한 MKCoordinateRegion의 값입니다.

즉, "이 MapView가 뜨면 이 좌표 + 범위(region) 중심으로 지도를 보여줘" 라는 의미입니다.

 

 

3. MKCoordinateRegion - 지도에서 보여줄 영역 정의

private var region: MKCoordinateRegion {
        MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 37.513555, longitude: 127.0269511),
            span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
        )
    }

 

- center : 지도의 중심을 정할 좌표(latitude, longitude) - 여기서는 37.513555, 127.0269511로 지정

- span : 지도의 "보이는 범위/ 줌 레벨"을 뜻합니다.

   - latitudeDelta, longitudeDelta 값이 작을수록 줌이 더 당겨진 상태(확대)

 

즉, region은 "이 지도는 여기 중심 + 이 범위만큼 보여줘"라는 맵의 카메라 범위를 정의합니다.

 

 

위를 참고하여 우리는 표시하고자 하는 location의 위도와 경도만 알면 Map을 이용해 표시할 수 있습니다!

 

 

---

 

지금까지 배운것을 합쳐보자!!

우리는 View를 쌓는법을 배우고, 이미지를 만드는 법을 배웠습니다.

이번 시간에는 Map을 배워봤죠?

 

그럼 이 모든걸 합쳐볼까요??

위처럼 상단에는 Map이 표시되고 중간에는 CircleImageView가

아래에는 VStack과 HStack을 이용한 Text로 이루어진 View가 있습니다.

 

이런식으로 여러분들도 만들어볼까요?

import SwiftUI

struct MainView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)
            
            ImageView()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("QWER")
                    .font(.title)
                HStack {
                    Text("3Y CORPORATION")
                        .font(.subheadline)
                    Spacer()
                    Text("강남")
                        .font(.subheadline)
                }
            }
            .padding()
            
            Spacer()
        }
    }
}

 

하나씩 따로 만들었을때는 한 View만 만들었는데, 이렇게 뷰들을 합쳐서 하나의 뷰를 구성하니 이쁘지 않나요?

우리는 벌써 이렇게 멋있는 View를 만드는 법을 배웠습니다!!