MapKit의 새로운 기능

♪♪

안녕하세요, 여러분 WWDC에 오신 걸 환영합니다 저는 Eric이고요 Maps 팀의 엔지니어입니다 오늘 제 동료 Yingxiu와 함께 MapKit의 새로운 기능을 알아볼게요

Apple Maps에서 신형 지도와 몰입형 Look Around 경험을 소개한지 3년이 되었습니다

이 2가지는 본래 미국에서 발표됐는데요 그 이후 계속해서 확대되어 이제 캐나다를 비롯한 유럽 국가, 일본 등을 포함합니다

지난 해 차선, 신호등, 자전거 도로를 특징으로 하는 3D City Experience를 도입해 Apple Maps를 발전시켰고 Ferry Building과 같은 3D 랜드마크도 장식했습니다

지도에 디테일을 추가함으로써 전에는 불가능했던 컨텍스트와 정확성을 제공하며 3D 지형 고도를 추가하여 다른 어디에도 없는 현실성을 제공합니다

올해 MapKit에서는 APple Maps에서 여러분의 앱에 최신 혁신을 가져 와 앱 사용자들의 세계 탐험을 확대할 겁니다

오늘은 새로운 MapKit 기능 몇 가지를 보여드리게습니다 먼저, 신형 지도를 채택하고 Map Configuration API를 통해 이용하는 법을 알아 봅시다

그 다음, 앱 콘텐츠와 지도가 자연스럽게 통합되기 위해 오버레이 API에 적용된 다양한 개선점도 살펴볼 거고요

새로운 블랜드 모드 지원에 대해 말씀드리고 이것을 지도 콘텐츠 표현을 더욱 향상시키기 위해 이용할 수 있는 방법에 대해서도 보여드릴게요 다음으로 새로운 Selectable Map Features API를 통해 지도를 더욱 상호 작용적으로 만드는 법을 알아보겠습니다 마지막에는 몰입형 Look Around 경험을 여러분의 앱에 직접 통합해 보겠습니다 오늘 다뤄야 할 내용이 많으니 단단히 준비하시고, 출발하죠 첫 주제는 신형 지도 채택과 Map Configuration API입니다

iOS, macOS, tvOS 앱에서 신형 지도를 채택하는 것은 정말 쉽습니다 앱을 새로운 SDK로 리컴파일하면 되는데요 이용 가능한 경우 3D City Experience 등 신형 Apple 지도에 자동으로 옵트인 될겁니다 단순 리컴파일은 많은 앱에서 필요한 건데요

물론 지도 표현 제어가 더 필요한 상황이 있을지도 모릅니다 iOS 15에서는 지도 구성 시 다양한 MKMapView 프로퍼티로 이루어집니다 그러나 iOS 16에서는 해당 프로퍼티를 권장하지 않고 이를 대체하는 Map Configuration API를 도입할 예정입니다

MKMapConfiguration은 새 API의 중심 클래스입니다 구체적인 서브클래스 3개를 갖춘 추상 베이스 클래스이죠

영상 지도 구성은 위성 스타일 영상 표현을 위해 사용됩니다 하이브리드 지도 구성은 도로 라벨, 관심 지점 등 추가 지도 기능과 함께 영상 기반 지도를 보여주죠

표준 지도 구성은 완전 그래픽 기반 지도 표현에 사용됩니다 이 3가지 지도 구성은 기존 지도 유형과 유사하여 아마 친숙하실 겁니다

베이스 지도 구성 클래스는 elevationStyle 프로퍼티를 지원합니다 평면이거나 사실적일 수 있죠

평면 고도 스타일은 땅이 평평하게 보인다는 겁니다 다리, 육교 등의 도로도 평평해 보이는 거죠 평먼이 기본 고도 스타일입니다

사실적 고도 스타일은 땅 지형이 실제 고도를 재현한 것을 뜻합니다 언덕이나 산 같은 것들을요 도로는 사실적 고도 디테일로 그려집니다

지도 구성 서브클래스를 좀더 살펴볼까요?

영상 지도 구성은 추가적인 지도 구성 없이 위성 영상만 보여주기에 다른 프토퍼티가 필요 없습니다

하이브리드 지도 구성에는 관심 지점 카테고리 필터링과 교통량 제시 여부를 제어하는 프로퍼티가 추가되었습니다

표준 지도 구성은 emphasisStyle 프로퍼티를 지원하고 default이거나 muted 스타일입니다

이름이 암시하듯 없으면 명령되지 않는 디폴트 강조 스타일이죠

뮤티드 강조 스타일은 지도 디테일 대비를 완화하여 상위에 보이고자 하는 추가 그래픽 정보에 더 집중하게 될 수 있습니다 표준 지도 구성에도 관심 지점 필터링과 교통량 제시 여부를 제어하는 프로퍼티가 추가됐죠

이용 가능한 지도 구성 클래스와 프로퍼티는 이상입니다

이 새로운 API는 지원 옵션 조합만 구성할 수 있음을 보장하죠 지도 구성을 아주 세세하게 바꿀 수도 있습니다 기존 API에 대한 엄청난 개선이죠

논의한 것을 정리하기 위해 새로운 지도 구성 클래스와 MKMapType 프로퍼티를 비교해 보았습니다

3D City Experience가 있는 신형 지도에는 호환 가능 하드웨어가 필요합니다 iOS에서는 A12 기반 iPhone, iPad 이상을, macOS에서는 M1 기반 컴퓨터 이상을 필요로 하죠

3D City Experience를 이용할 수 없는 영역에선 지도가 평면 고도 버전의 신형 지도로 자동으로 돌아갑니다

다른 모든 기기에서도 신형 고도로 표현될 거고요

Xcode는 M1 Mac에서 OS 버전만 바꿈으로써 두 경험을 시뮬레이션합니다 두 가지 모두 시도해 보세요 앱이 모든 기기에서 잘 구현되는지 확인하셔야 하니까요!

3D City Experience는 전세계 많은 대도시에서 이용 가능합니다

여기에 지속적으로 새 도시들을 추가 중이니 이 세션 노트에 링크된 기능 이용 가능성 웹사이트에서 3D City Experience 섹션을 확인해 보시기 바랍니다 신형 지도 채택과 새로운 API 사용에 대해서는 여기서 마무리하겠습니다

이제 오버레이로 넘어가죠 MapKit에서는 다양한 스타일링 옵션 오버레이를 지원했는데요 iOS 16에서 우리는 기존 API를 개선하여 오버레이가 지도에 자연스럽게 통합될 수 있도록 만들었습니다 오버레이 레벨에 대해 빠르게 짚고 넘어가 보죠

오버레이는 두 개의 레벨로 렌더링될 수 있습니다 aboveRoads와 aboveLabels로요 Mapkit의 다양한 오버레이 삽입 기능을 사용해 삽입 시간에 렌더링 레벨을 구체화할 수 있습니다

aboveLables는 라벨 등 모든 것 위에 렌더링하죠 라벨은 중요한 컨텍스트 정보를 제공하기 때문에 데이터가 지도와 상호 작용을 전혀 하지 않길 원하는 등 흔하지 않은 경우에만 aboveLevels를 사용하세요 콘텐츠가 지도에 비해 두드러지도록 하는 게 목표라고 하면 뮤티드 앱 강조나 블렌드 모드를 사용하실 겁니다 후자는 이따 이야기할게요

aboveRoads는 오버레이가 도로, 토지 피복, 물줄기 등 지형 위에 나타난다는 뜻입니다 그러나 어느 정도는 라벨, 나무와 빌딩의 아래에 나타날 거예요 잠시 후에 더 알아볼게요 aboveRoads는 iOS 16에서 새 기본 모드입니다 다음으로 iOS 16에 도입한 새 기능 '투명 빌딩'에 대해 이야기해 보겠습니다

오버레이 레벨이 둘 중에 무엇이든지 상관없이 오버레이는 피치 없이 탑뷰에서는 항상 건물 위에 렌더링될 겁니다 여기서 우리는 경사진 지도와 결합한 aboveRoads를 사용하여 경험을 개선했습니다

나무나 건물과 같은 지상 물체는 오버레이 위에 나타날 때 투명한 상태로 자동 렌더링됩니다 오버레이가 완전히 가려지지 않도록 말이죠 알파값은 지도의 피치각에 따라 다양해집니다 이 지도를 피치각 0º로 탑뷰에서 보여주면 지상 물체 충돌이 뷰에서 완전히 사라지고 오버레이가 눈에 모두 보이게 됩니다

투명 건물 또한 반투명 오버레이로 작동하죠 오버레이 알파값은 투명 건물의 알파값과 결합하기 위해 추가될 겁니다 오버레이에 추가된 변화가 하나 더 있는데요 사실적 지형의 지도에 오버레이를 추가할 때 MapKit는 지도를 자동으로 평면 표시로 전환할 겁니다 마지막 오버레이를 제거하면 지도는 자동으로 사실적 지형으로 돌아가죠 이 규칙에서 주목할 만한 예외가 있는데요 바로 MapKit의 Directions API를 통해 오버레이는 자동으로 지형을 따라갑니다 자, 이제 Yingxiu가 이어서 진행하겠습니다 감사합니다, Eric 안녕하세요, Yingxiu입니다 저도 Maps 팀의 엔지니어이고요 저는 새로운 MapKit 기능을 설명한 다음 업데이트된 API를 통해 아름다운 지도 경험을 얼마나 쉽게 만들 수 있는지 보여드릴게요 샘플 앱을 이용할 건데요 샌프란시스코 투어를 위한 스쿠터 렌트 앱입니다

테이블 뷰의 열을 보시다시피 이 앱에는 다양한 기능이 있습니다 'Operating Area'에서는 렌트하는 곳을 확인할 수 있고 'Ride'에서는 금문교를 거치는 투어 경로로 안내합니다 'Explore'에서는 사용자에게 샌프란시스코 시내의 상호 작용적 지도로 바다 근처 명소 탐험에 사용할 수 있습니다 'Highlights'는 꼭 가야 하는 곳을 가까이서 보여주고요 이번 세션 동안 이 기능들을 구현하거나 업그레이드하겠습니다 시작해 보죠!

먼저, 신형 지도 채택이 얼마나 쉬운지 Operating Area 기능을 통해 보여드리겠습니다 그 다음으로 오버레이 개선 사항을 보여드릴게요 이미 Xcode에서 프로젝트는 열어두었고요 이걸 iOS 16 SDK로 컴파일링하여 어떻게 되는지 보겠습니다

됐네요! 이미 신형 지도에 옵트인되어 있네요 지도 뷰의 디테일이 굉장히 풍부합니다 아름다운 조명도 있고 지형에 언덕 그림자 효과도 있네요 확대해 보니까 건물, 나무...

랜드마크도 있네요

이제 운영 지역 시각화를 위해 폴리곤 오버레이를 추가할게요

폴리곤 데이터는 이미 준비해 놓았는데요 뷰가 로드되면 우선 지역과 카메나 영역을 설정하고 올바른 영역이 보이는지 확인하겠습니다

자, 그럼 오버레이를 추가해 볼게요

만들고 확인해 봅시다!

폴리곤 오버레이는 내려다보면 불투명한데요 확대해서 피치를 적용하면 건물들이 나타나기 시작합니다 피치를 더 적용할 수록 투명도도 높아지죠 이 효과는 aboveRoads 오버레이 레벨에서만 가능합니다 투명 건물과 나무를 보고 싶으시다면 올바른 오버레이 레벨을 선택하세요

괜찮아 보이지만 피치 적용이 안된 상태에서도 지도를 보고 싶은데요 코드로 돌아가서 반투명으로 만들어 봅시다

알파값을 0.8로 바꿀게요

이제 투명 오버레이로 바뀌었고 피치가 적용되지 않아도 도로와 건물이 보입니다 지도를 확대해 피치를 적용하면 여전히 투명도는 높아지네요 좋습니다! 이게 폴리곤 오버레이에 대한 개선점입니다 다음으로 사실적 지형을 통합하는 방법과 고도 경로를 추가하는 방법을 보여드릴게요 금문교를 지나는 투어를 제공하는 Ride 기능에서 해볼게요

지도 뷰 구성부터 시작해 보도록 하죠 코드에서 고도 스타일도 변경할 수 있는데요 아니면 오른쪽에 Interface Builder 인스펙터 창을 열어도 되고요

여기 이용 가능한 지도 뷰 구성 설정이고요 고도는 사실적 스타일로 할게요

다음으로 경로를 만져 보죠

사용자들이 Show Route 스위치를 켜면 경로가 보이게 하고 싶은데요 카메라도 경로에 초점을 맞춰 움직일 겁니다

금문교를 거치는 경로를 보여주기 위해서 프레지디오 공원 입구를 시작점으로 하고 배터리 스펜서를 끝점으로 하겠습니다

지도 뷰가 로드되면 시작지와 목적지를 표시하고자 주석을 만들 건데요

좌표와 타이틀을 설정하고 주석 배열에 덧붙이시면 지도 뷰에 추가됩니다

이제 경로 폴리라인을 살펴 보겠습니다

보통의 오버레이는 지도를 평면화하겠지만 MapKit의 Directions API를 통해 반환된 폴리라인은 사실적 지형을 보존할 겁니다

이 액션 함수에서는 일단 스위치가 켜지면 위에서 정의된 좌표로 위치 표시를 할 겁니다

그 다음 출발지와 목표지가 있는 지시 요청을 만듭니다 마지막으로 지시를 요청합니다

페치 실행이 성공할 경우 경로 폴리라인을 오버레이로 추가하시면 됩니다

좋아요 컴파일해서 어떤지 한 번 보죠!

주석이 자동으로 업그레이드되어 그라디언트가 적용된 게 보이실텐데요 올바른 고도에서 자연스럽게 나타납니다 Show route 스위치를 켜면 카메라에 피치가 적용되겠죠 그럼 뷰가 더 괜찮아 보일 겁니다

보시다시피 경로가 고도 지형을 따라가죠 이 기능은 복잡한 교차로에서 길을 찾을 때 도움이 됩니다 다리를 가로지르는 길을 따라가기도 하네요 경로가 아주 미묘하게 다리 기둥을 따라가고 있죠

마지막으로 지도에 피치가 적용되면 경로가 앞에 서 있는 나무를 통과하는 게 보이실 겁니다 나무가 있는 곳에서는 경로 색상도 바래지죠 축소하면 어떻게 되는지 봅시다

이 부분은 터널을 지나는데요 그래서 투명해지죠 ElevationRealisticStyle과 고도 경로 라인 기능은 A12 기반 iOS 기기에서 지원됩니다 이전 버전의 기기에서 동일한 앱을 실행하면 자동으로 2D 지도의 2D 경로가 나타날 겁니다 고도 경로 라인 추가하기 정말 쉽죠? 여기까지 하고, 다시 Eric이 계속하겠습니다 고마워요, Yingxiu! 금문교를 지나는 스쿠터 라이드라니 정말 놀랍네요! 여기까지 MapKit 오버레이의 새로운 기능을 보여드렸는데요

다음으로, '블렌드 모드'를 알아보죠 이 API는 오버레이 제어 기능이 향상됐으며 새로운 창의적 가능성을 모두 열어 줍니다

많은 분들께서 이미 사진 편집 앱이나 Apple의 CoreGraphics API를 통해 블렌드 모드를 잘 알고 계실 거라 생각합니다 블렌드 실행 동안 블렌드 모드에서 구체화된 일련의 방정식에 이어 두 개의 그래픽 계층이 결합되는데요 MapKit 컨텍스트에서의 블렌드 모드 사용법 사례를 함께 살펴 보도록 하죠

이 시나리오에서는 샌프란시스코에 위치한 프레시디오 공원의 영역을 지도의 중앙에 강조하고 싶은데요 먼저 공원 모양에 따라 자르고 지도 전체 영역을 포괄하는 오버레이를 만들어 보겠습니다

블렌드 모드 사용은 아직입니다 평범한 오버레이인데요 큰 사각형 도넛 모양이네요 다음으로 회색으로 채운 혼합 블렌드 모드를 오버레이에 할당하겠습니다 이러게 하면 지도의 공원 밖 영역의 채도는 감소합니다 다음으로 이 오버레이를 복사해 어두운 회색으로 채운 하드 라이트 블렌드 모드를 오버레이에 할당하겠습니다

그러면 공원 주변 영역이 어두워지는 효과가 있죠 괜찮아 보이네요 다른 오버레이도 추가하겠습니다 이번에는 공원 모양의 오버레이를 추가하고 노란색으로 채운 채도 블렌드 모드를 할당하겠습니다 제가 원하던 효과가 정확히 나오지 않았습니다 색이 너무 밝거든요 다시 시도해 보죠 회색으로 채운 컬러 번 블렌드 모드를 적용해 볼게요

좀 더 미묘해졌네요 완벽합니다! 이제 코드를 살펴볼까요?

우리가 봤던 효과들을 가능하게 하기 위해서 blendMode라는 프로퍼티를 MKOverlayRenderer에 추가했습니다! 여기서는 필요한 블렌드 모드를 오버레이 렌더러에 설정합니다 됐네요! 전에 말씀드렸듯 블렌드 모드는 정렬에 따라 달라집니다 스택 하단의 오버레이는 지도와 블렌드됩니다 끝에서 두 번째 오버레이는 이전의 블렌드 실행 결과 등과 블렌드되고요 MapKit에서 오버레이 정렬은 삽입 시간에 결정됩니다 MKMapView의 다양한 오버레이 삽입 함수를 사용해 절대 위치나 상대 위치로 사용할 수 있죠

MapKit은 광범위한 블렌드 모드를 지원합니다 오늘 모든 걸 다 다룰 순 없지만 한 번 시도해 보세요 이상, 블렌드 모드에 대한 내용이었습니다 보셨다시피 블렌드 모드는 지도 스타일리을 제어하기 위한 강력한 툴입니다 콘텐츠 강조를 위해 지도를 덜 강조하거나, 지리적 영역 강조를 위해서 등 다양한 목적으로 사용할 수 있습니다

다음으로 'Selectable Map Features'입니다! 정말 필요했던 기능이라 보여드리게 되어서 너무나 기쁩니다

앱에서 MapKit를 사용하고 계시다면 도시 위치, 관심 지점, 물리적 물체를 보여주기 위해 주석을 이용하게 되실 텐데요

POI 필터링을 사용하지 않으신다면 이미 Apple이 제공하는 유사 주석을 포함하는 지도에 그 주석들을 배치하시는 걸겁니다 지금까지 사용자들은 제공된 주석과만 상호 작용이 가능했는데요 iOS 16에서는 이게 바뀌었습니다 Selectable Map Features API를 사용하시면 사용자들이 지도에서 옵션을 선택할 수 있게 해줍니다

여기에는 상점, 레스토랑, 랜드마크 등의 관심 지점과 도시, 주와 같은 지역, 산맥, 호수 등 물리적 특징이 모두 포함됩니다

앱에서 이 API를 채택하시려면 몇 가지 간단한 단계만 거치시면 됩니다 먼저, 어떤 특징 유형을 선택할 수 있을지 구성하세요 보신 바와 같이 3가지 유형이 있었죠? 모든 기능이 앱의 컨텍스트와 상호 작용할 수 있다는 건 말이 안되겠죠 관심 지점 기능에서는 선택 가능한 관심 지점을 제한하기 위해 기존 필터 API를 사용하실 수도 있습니다

다음으로, MKMapView 델리게이트 콜백을 구현해 선택 이벤트를 처리하세요 뭘 선택하든 자유롭게 이벤트를 처리할 수 있습니다 선택 특징이 나타나는 방식도 제어하고 싶으실텐데요 아니면 선정 이벤트에 맞는 추가 UI를 보여주고 싶으실 겁니다

다음으로, 앱 사용자 인터페이스에서 추가 장소 정보를 요청하여 보여주고 싶으실텐데요 지도 특징에 포함된 정보는 스크린에서 보이는 것에 제한됩니다

사용자에게 선택 장소에 대한 컨텍스트를 더 주고 싶다면 추가 정보를 요청해야 할 겁니다 새로운 API에서 이 모든 단계를 함께 살펴 보죠

어떤 지도 특징을 선택 가능하게 해야 할지 구성하는 것부터 시작하죠 새로운 selectableMapFeatures 프로퍼티를 사용해서요

관심 지점, 지역, 물리적 특징 조합을 선택하실 수 있습니다 선택 가능 지도 특징을 구성하여 사용자가 그들 중 하나를 탭하였다면 선택 행위를 커스터마이징하게 해주는 새로운 델리게이트 콜백을 받기 시작할 겁니다 최초 콜백은 새로운 didSelect 주석 콜백입니다 이 콜백은 곧 다루게 될 새 요청 API를 사용하여 지도 항목에 대해 추가 데이터를 요청할 수 있는 좋은 기회죠

두 번째 콜백은 기존의 주석 콜백 뷰일 겁니다 선택 상태에 나타날 뷰를 여기서 커스터마이징할 수 있죠 기존의 API이기는 하지만 우리는 여기에 '지도 특징 주석'이라는 새로운 주석 클래스 유형을 추가했습니다 이 클래스는 사용자가 지도 특징을 선택할 때 주석에 대한 뷰로 통과될 겁니다

이 주석에는 여러 가지 프로퍼티가 있습니다 지도 특징이 관심 지점인지 지역인지, 물리적 특징인지 확인하기 위해 featureType 프로퍼티를 검사할 수 있습니다

지도 특징이 관심 지점일 경우 pointOfInterestCategory 프로퍼티는 어떤 카테고리인지 알려줄 것이고 iconStyle 프로퍼티는 배경색, 아이콘 이미지 등 아이콘에 대한 추가 정보를 획득할 수 있게 해줄 겁니다

주석 콜백에 대한 뷰를 사용해 주석 뷰 커스터마이징 방법을 살펴 보도록 하겠습니다

Maps 앱과 동일한 선택 스타일을 원하시면 여러분께서 하실 일은 nil을 반환하는 겁니다

커스터마이징을 원하신다면 주석에 했던 것과 동일한 방식으로 주석 뷰를 반환하실 수 있죠

MarkerAnnotationView가 가장 좋은 옵션입니다 Maps 앱과 동일한 풍선 스타일 모양과 그라디언트 처리를 제공할 겁니다 그리고 원하는 색상이나 아이콘을 고르실 수도 있죠

이 예시에서는 Maps 특징의 아이콘 스타일에서 얻은 동일한 이미지를 사용하고 앱 틴트 컬러 매치를 위해 색만 바꿔주도록 하겠습니다

모두 커스텀하고 싶으시다면 본인이 만든 주석 뷰 서브클래스를 제공하실 수 있습니다 선택 특징에 대한 비주얼 정보를 검색하려면 보셨다시피 특징 주석을 사용하실 수 있는데요 이 주석을 새로운 MKMapItemRequest API에 통과시켜 선택 특징에 대한 지도 항목을 검색하실 수도 있습니다

이 지도 항목에는 주소, 이름, 전화 번호, URL과 같은 장소에 대한 추가 메타데이터가 포함되어 있습니다

사용자가 MapKit에서 이용할 수 없는 메타데이터를 추가로 원할 경우 Maps 앱을 이길 수 있는 함수도 제공하죠

이제, 다시 Yingxiu가 이어가보겠습니다 감사해요, Eric

Eric이 Selectable Map Features를 쭉 보여주셨는데요 저는 이걸 쉽게 이용 가능한 방법을 보여드리겠습니다

그러려면 Explore 기능을 구현해야 합니다 사용자가 바다 근처의 좋은 장소들을 탐험할 수 있게 해주고 싶습니다 POI에서 탭하면 주석이 나타날 겁니다 탭 지역에 카메라 애니메이션을 작동하고 바닥부터 인포 카드를 보여줄 겁니다

먼저, 지도에서 관심 지점을 필터링하고 투어와 관련 없는 카테고리를 제거합시다

코드에 필터를 적용하는 것 외에도 Interface Builder 창에 적용할 수 있습니다 지도 뷰를 선택하고 오른쪽 인스펙터 창로 가세요

'Exclusion' 필터를 선택할 겁니다

이제 원하지 않는 카테고리를 선택합니다 공항이나 자동차 렌탈하는 곳, 병원, 세탁소 같은 곳이요

이제 지도 뷰에는 원하는 관심 지점만 나타날 겁니다

API 작동하기 굉장히 간단하죠? 여기서 해야 할 건 필요한 선택 가능 특징의 옵션 세트를 구체화하는 겁니다

이 샘플 앱의 범위 내에서 관심 지점을 사용할게요 하지만 기억하세요 물리적 특징과 지역도 지원됩니다

기존 델리게이트 메소드인 mapView viewForAnnotation을 사용해 특징 주석에 대한 뷰를 만들 수 있는데요

지금은 nil이 반환될 거고요

MapKit에서 제공하는 디폴트 그라디언트 주석은 이후에 돌아와 커스터마이징하겠습니다

만약 주석이 'Selected' 상태라면 새로운 델리게이트 메소드인 mapView didSelectAnnotation을 통해 정보를 알게 될 겁니다

카메라 애니메이션을 수행하고 선택 특징을 확대하기 위해 이 함수를 사용하겠습니다

먼저, 주석을 특징 주석으로 만들고 이것과 함께 지도 항목을 요청합니다

이것은 특징 주석과 함께 추가 장소 정보를 페치하는 새로운 API입니다

요청해 봅시다

일단 페치 실행이 성공하면 지도 항목을 움직이게 할 겁니다

카메라 애니메이션이 완료되면 특징 항목에서 세부 내용을 얻거 인포 카드에 보여줄 겁니다

컴파일하고 어떻게 되는지 볼까요?

바다 근처의 좋은 장소들을 함께 확인해 봅시다

그라디언트 주석이 나타나네요 카메라는 탭 위치로 움직이고요 인포 카드가 나타납니다 박물관이네요 URL도 있고요 관심 있다면 확인해 볼 수 있죠 주소도 나와 있네요

랜드마크라면 이 아름다운 아이코노그래피가 나타날 겁니다

이제 코드로 돌아가서 선택 상태에 대한 주석을 커스터마이징해보죠

nil 대신에 Marker Annotation View를 만들어 봅시다 먼저 주석을 특징 주석으로 만들 겁니다 커스터마이징에 특정 데이터를 사용할 수 있도록요

보라 계열로 주석을 염색해 보죠 기업 아이덴티티와 일치하니까요

주석 글리프도 커스터마이징이 가능합니다

SelectedGlyphImage는 Selected 상태의 주석을 위한 거고요

GlyphImage는 더 작습니다 Unselected 상태인 주석에 대한 글리프죠

Unselected에서 Selected 상태로 자연스럽게 전환되도록 이들을 동일 글리프에 할당할 것을 권장합니다

이제 특징 주석에서 얻은 아이콘 스타일 이미지를 사용하죠

MKIconStyle은 iOS 16의 새로운 클래스입니다 선택 POI의 아이코노그래피와 컬러 인포를 가집니다 컴파일해서 어떻게 나타나는지 보죠

됐습니다! 이제 우리 기업색과 맞는 주석을 가지게 됐네요 하지만 아이코노그래피는 동일합니다

선택 가능 앱 특징을 가능하게 하고 앱에서 주석을 커스터마이징하는 방법은 여기까지입니다! 이제 다시 Eric에게 넘길게요 고마워요, Yingxiu! 보셨다시피, Selectable Map Features API는 사용자가 상호 작용을 새로운 방식으로 하게 해줍니다 MapFeatureAnnotation 클래스는 MapView 델리게이트 콜백과 결합하여 선택 모습과 느낌을 커스터마이징할 수 있게 하죠 반면 MapItemRequest는 기능을 지도 항목에 녹일 수 있게 해주어 선택 지도 특징에 대한 추가 정보 액세스를 가능케 하죠 이제 Look Around에 대해 이야기해 봅시다!

Maps 앱은 iOS 13에서 Look Around를 도입했는데요 모두가 정말 좋아했습니다 장소의 실제 느낌을 느끼고 싶으시다면 사용해 보세요 Look Around 영상의 디테일은 엄청납니다 3D 모델이 다른 지도에는 없는 현실감을 주거든요

Look Around는 이 도시와 국가들을 포함한 전세계에서 이용 가능합니다

새 지역에 대한 지원을 지속해서 추가 중이니 세션 노트에 링크된 기능 이용 가능성 웹사이트에서 Look Around 섹션을 확인해 보시길 바랍니다 iOS 16과 함께 MapKit에 Look Around를 가져올 겁니다 이걸 채택하기 위해선 3단계만 거치면 됩니다

먼저, 데이터가 요구 지역에서 이용 가능한지 확인하셔야 해요 타겟 지역에서 이용 가능하다고 하더라도 도시에 모든 지역이 나타나는 건 아닙니다 그러니 Look Around 영상을 항상 이용할 수는 없을 수도 있죠 Look Around 데이터가 이용 가능한 것을 확인하면 해당 데이터를 Look Around View Controller나 Look Around Snapshotter로 보내셔야 합니다

마지막으로, Look Around 데이터가 이용 가능하다면 앱 UI를 업데이트하여 Look Around 미리 보기를 보여주세요 그럼 이 새 API로 3단계를 함께 진행해 보죠

Look Around 미리 보기를 보여주기 첫 단계는 데이터 이용 가능성을 확인하는 겁니다 이를 위해 Look Around Scene Request를 만들어야 하죠 iOS 16에 도입할 새로운 클래스입니다 새 인스턴스는 좌표나 지도 항목과 초기화할 수 있습니다

다음으로, scene 프로퍼티를 가져와야 합니다 선택적 비동기 프로퍼티인데요 데이터가 이용 가능하다면 scene 인스턴스로 돌아가겠죠 이용 가능하지 않다면 nil로 돌아갈 거고요 요청에 문제가 있다면 오류가 던져질 겁니다

Look Around Scene은 프로퍼티가 없는 불투명한 객체인데요 요청 지역에 대한 Look Around 영상의 이용 가능성을 보장하는 토큰으로 작용합니다

Look Around 씬의 상호 작용적 미리보기를 위해 scene을 초기화 매개 변수로서 Look Around View Controller로 통과시키시거나 기존 인스턴스의 scene 프로퍼티를 read write scene 프로퍼티로 할당하죠 만약 필요한 게 정적 이미지라면 scene을 초기 매개 변수로서 Look Around View Snapshotter 인스턴스로 통과시키고 결국 snapshot async 프로퍼티를 불러올 수도 있습니다

Look Around 뷰 컨트롤러는 이미지의 정적 미리보기를 더 작게 포함시키기 위해 쉽게 디자인됐습니다 따라서 사용자들은 탭함으로써 풀스크린 상호작용 세션에 들어갈 수 있죠

이제 이 모든 걸 얼마나 쉽게 이용할 수 있는지 Yingxiu가 다시 한 번 보여줄 겁니다 감사합니다, Eric Eric은 MapKit에 추가될 몰입형 경험 지원을 보여주셨는데요 이걸 얼마나 간단하게 샘플 앱에 통합 가능한지 보여드리도록 하겠습니다 이걸 위해 마지막 Highlights 기능으로 넘어가죠 꼭 가야 하는 장소는 실제적인 뷰로 나타나는데요

우리에게는 이미 스크린 상단의 세그먼트 컨트롤 바에 샌프란시스코 랜드마크 이름 몇 개가 있습니다

사용자가 이들 중 하나를 탭하면 탭 지역에 대해 카메라 애니메이션을 수행하고 싶은데요

하단 좌측에 풀스크린으로 확대할 수 있는 Look Around 미리 보기도 보여주려고요 해봅시다!

먼저, 미리 보기를 위해 컨테이너 뷰를 추가합니다

Size 인스펙터 창으로 가보죠

포지션과 사이즈를 부여하겠습니다

처음에는 미리보기를 숨기고 싶은데요 Attirbutes 창을 열어 Hidden에 체크합시다

다음으로 Look Around 뷰 컨트롤러를 만들어야겠죠

이걸 컨테이너 뷰에 포함시킵니다

다른 세그와 같죠 여기에 식별자를 부여해야 합니다

식별자 이름은 'presentLook AroundEmbedded'라고 부르죠

그 다음 코드로 불러오겠습니다

이름은 'preview'로 하죠 가시성은 나중에 올리자고요

Look Around 뷰 컨트롤러는 이미 선언되어 있는데요 prepare 함수에서 인스턴스를 찾아야 합니다

세그 식별자가 매치된 걸 확인하세요

다음으로 segment control 함수에서 랜드마크 이름으로 로컬 서치를 만들 겁니다

요청이 성공하면 다음의 카메라 애니메이션과 Look Around 씬 불러오기에서 사용될 지도 항목을 얻게 됩니다

카메라 애니메이션에 대해 먼저 새로운 API에서 카메라를 만들어야 합니다

이렇게 만들면 됩니다 뷰 사이즈에 대해 mapView.frame.size를 사용하고 allowpitch는 참으로 설정합시다

이를 통해 랜드마크에 피치 뷰가 적용되고 다른 장소들에는 탑뷰가 적용될 겁니다

새로운 카메라를 할당하세요 됐습니다

일단 카메라 애니메이션이 완료되면 Look Around 미리 보기가 나타나겠죠

먼저, Look Around 데이터가 이 지도 항목에 대해 이용 가능한지 확인해야 합니다 그래서 Look Around 씬 요청 클래스를 사용해야 합니다 요청을 만든 후에 지도 항목에 통과시키죠

다음으로 요청을 수행합시다

씬 요청이 성공하면 씬을 Look AroundViewController에 할당합니다 오류는 없지만 nil을 얻게 된다면 데이터가 요청 위치에서 이용할 수 없다는 뜻입니다

마지막으로, 미리 보기를 꼭 확인하세요

앱에서 어떻게 보이는지 볼까요?

페리 빌딩을 볼까요?

해봅시다 페리 빌딩은 랜드마크입니다 히어로 앵글로 멋지게 큐레이팅된 카메라 프레이밍과 Look Around 미리 보기가 나타나네요 드래곤 게이트도 한 번 확인해 볼까요?

여긴 랜드마크는 아닙니다 그래서 탑뷰로 보이죠

풀스크린으로 들어가기 위해 미리 보기를 탭하죠

상호 작용적인 뷰네요 둘러볼 수도 있습니다

Look Around 풀스크린 뷰의 상점 아이콘과 라벨도 정말 예쁘네요

몰입형 Look Around 경험을 앱에 추가하는 건 이렇게나 쉽습니다 여기까집니다 Eric이 이어갈게요 고마워요, Yingxiu! Look Around에 대한 Interface Builder 지원은 이걸 쉽게 만들어줬습니다 오늘 신형 지도 자동 채택과 새로운 Map Configuration API 오버레이의 새로운 행위 및 개발 내용부터 Selectable Map Features Look Around 지원과 같은 새 기능까지 정말 많은 내용을 다뤘는데요 앱의 지도 경험을 다음 단계로 향상시키기 위해 사용할 수 있는 게 참 많았죠 이걸로 여러분들이 뭘 하실지 기대됩니다 마무리하기 전에 몇 가지 말씀드리죠

여러분의 피드백은 우리가 다음에 뭘 집중해야 할지 알려줍니다 그러니 Feedback Assistant를 통해 우리에게 버그 리포트와 앱에서 가장 도움이 된 기능을 알려 주시기 바랍니다

또, 오늘 논의한 것들을 통합하기 위해 기존 샘플 다수를 업데이트했습니다 그것도 확인해 보세요

마지막으로, 새 REST API를 발표했는데요 여러분도 보고싶으실 겁니다 지오코딩, ETA 측정에 대한 공통 호출을 서버로 이동시키려는 분들께 유용할 것이라고 생각합니다

자세한 내용은 다음의 세션을 확인해 주세요

Maps 팀을 대표하여 감사하다는 말씀 드립니다 즐거운 WWDC 되세요!