Swift Academy · 강의

SwiftUI에서 지도 표시하기

Map으로 지도와 주석을 표시합니다.

레슨 3/413개 단계

SwiftUI에서 지도 표시하기은(는) CoddyKit의 무료 Swift Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Swift Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

SwiftUI 지도 뷰

SwiftUI는 UIKit 없이 대화형 지도를 표시할 수 있는 네이티브 Map 뷰를 MapKit에서 제공합니다. MapKit을 가져오고 뷰 계층에 Map을 배치하세요. iOS 17부터는 현대적인 선언형 API를 사용합니다.

import SwiftUI
import MapKit

struct BasicMap: View {
    var body: some View {
        Map()
    }
}

좌표 영역

영역은 MKCoordinateRegion으로 표현되며, 중심 좌표와 범위(표시되는 위도 및 경도의 크기)로 구성됩니다. 범위가 작을수록 더 가까이 확대됩니다.

let region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 41.008, longitude: 28.978),
    span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)

위치로 카메라 제어하기

최신 Map은 MapCameraPosition에 대한 바인딩을 받습니다. 영역이나 사각형에서 시작하거나 콘텐츠에 맞춰 자동으로 프레임을 설정할 수 있습니다. .region(...)을 사용하여 명시적인 영역을 지정하세요.

struct CityMap: View {
    @State private var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: .init(latitude: 41.008, longitude: 28.978),
            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )
    )
    var body: some View {
        Map(position: $position)
    }
}

마커 추가하기

Marker는 제목과 함께 좌표에 표준 말풍선 핀을 표시합니다. 마커는 Map의 후행 클로저(지도 콘텐츠 빌더) 안에 배치하세요.

Map {
    Marker("Hagia Sophia",
           coordinate: .init(latitude: 41.0086, longitude: 28.9802))
}

마커 사용자 지정하기

마커에는 카테고리를 나타내기 위한 systemImage와 tint를 지정할 수 있습니다. 이를 통해 지도에서 마커를 시각적으로 구분할 수 있습니다.

Map {
    Marker("Cafe", systemImage: "cup.and.saucer.fill",
           coordinate: cafeCoord)
        .tint(.brown)
}

사용자 지정 뷰로 어노테이션 표시하기

핀만으로 충분하지 않을 때는 Annotation을 사용하여 좌표에 원하는 SwiftUI 뷰를 표시할 수 있습니다. 제목과 콘텐츠 클로저를 제공하세요.

Map {
    Annotation("Office", coordinate: officeCoord) {
        Image(systemName: "building.2.fill")
            .padding(6)
            .background(.blue, in: Circle())
            .foregroundStyle(.white)
    }
}

데이터로 여러 핀 표시하기

지도 콘텐츠 빌더 안에서 ForEach를 사용하여 모델을 반복 처리하면 여러 마커를 표시할 수 있습니다. 각 항목은 좌표를 제공합니다.

struct Place: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

Map {
    ForEach(places) { place in
        Marker(place.name, coordinate: place.coordinate)
    }
}

사용자 위치 표시하기

지도 콘텐츠에 UserAnnotation()을 추가하여 익숙한 파란색 점을 표시하세요. 이를 사용하려면 위치 권한이 부여되어 있어야 합니다. 직접 만든 마커와 함께 사용할 수도 있습니다.

Map {
    UserAnnotation()
    ForEach(places) { p in
        Marker(p.name, coordinate: p.coordinate)
    }
}

지도 제어 기능

.mapControls 수정자를 사용하여 나침반, 사용자 위치 버튼, 축척 뷰와 같은 표준 제어 기능을 추가하세요. 이러한 기능은 자동으로 표시되며 지도 스타일을 따릅니다.

Map { UserAnnotation() }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
    }

지도 스타일

.mapStyle 수정자를 사용하여 표준, 이미지(위성), 하이브리드 렌더링 사이를 전환하세요. 사실적인 고도와 관심 지점 표시를 전환할 수도 있습니다.

Map()
    .mapStyle(.hybrid(elevation: .realistic))

카메라 변경에 반응하기

.onMapCameraChange 수정자는 표시되는 영역이 변경될 때(예: 사용자가 지도를 이동한 후) 이를 알려 줍니다. 새로 표시된 영역의 데이터를 가져오는 데 사용하세요.

Map(position: $position)
    .onMapCameraChange { context in
        let center = context.region.center
        print("Now centered at:", center.latitude, center.longitude)
    }

빠른 확인: SwiftUI 지도

MapKit과 SwiftUI에 관한 지식을 확인해 보세요.

복습: SwiftUI에서 지도 표시하기

이제 대화형 지도를 만들 수 있습니다.

  • MapCameraPosition 바인딩과 함께 최신 Map을 사용합니다.
  • Marker를 표시하거나 사용자 지정 Annotation 뷰를 렌더링하고, ForEach로 데이터를 반복 처리합니다.
  • UserAnnotation()으로 파란색 점을 표시하고 .mapControls를 추가합니다.
  • 지도의 스타일을 지정하고 .onMapCameraChange로 카메라 변경에 반응합니다.
무료로 시작

AI 튜터와 함께 Swift을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
122
레슨
409

자주 묻는 질문

“SwiftUI에서 지도 표시하기” 강의는 무료인가요?

네 — “SwiftUI에서 지도 표시하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Swift Academy 강의 전체를 잠금 해제할 수 있습니다. Swift Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“SwiftUI에서 지도 표시하기”에서 뭘 배우나요?

Map으로 지도와 주석을 표시합니다. 브라우저에서 직접 실행하는 실습 코드로 Swift Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Swift Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Swift Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“SwiftUI에서 지도 표시하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Swift Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Swift Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 위치 권한 요청하기
  2. 사용자 위치 가져오기
  3. SwiftUI에서 지도 표시하기
  4. 지오코딩과 지역
← Swift Academy(으)로 돌아가기