SwiftUI에서 지도 표시하기
Map으로 지도와 주석을 표시합니다.
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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 위치 권한 요청하기
- 사용자 위치 가져오기
- SwiftUI에서 지도 표시하기
- 지오코딩과 지역