고성능 MapKit JS 소개

안녕하세요 저는 Tim Chien입니다 Apple의 MapKit 팀에서 엔지니어로 일하고 있으며 MapKit JS를 담당하고 있죠 오늘은 MapKit JS를 웹 응용 프로그램과 통합할 때 최상의 경험을 제공하는 데 사용할 수 있는 흥미롭고 새로운 몇 가지 기능에 대해 이야기하겠습니다 2018년에 MapKit JS를 출시한 이후 저희는 매년 새로운 기능을 추가하기 위해 끊임없이 노력했습니다 그 결과 MapKit JS는 Apple의 웹 서비스에 없어서는 안 되는 부분이 되었으며 icloud.com의 나의 찾기 서버 DuckDuckGo 같은 타사 웹 사이트 그리스의 부동산 검색 웹 사이트와 같은 여러 웹 사이트에 통합되어 있습니다 이 웹 사이트에서 MapKit JS를 활용하여 지도 기능을 현지화하고 있는 걸 보실 수 있습니다 MapKit JS는 간단한 포함 및 초기화를 통해 모든 웹 응용 프로그램에 아주 쉽게 도입할 수 있습니다 하지만 저희는 응용 프로그램의 성능을 최적화하는 방식으로 MapKit JS를 도입하는 유연성을 제공하고자 합니다 따라서 올해부터는 성능으로 눈을 돌려 어떻게 하면 페이지가 더 빠르게 반응하고 더 빠르게 로드되고 개발자가 더 세심하게 제어할 수 있는 방식으로 개발자가 필요한 기능만 적재적소에 포함하도록 설계하였습니다 오늘, 이 일을 해낼 세 가지 새로운 기능을 소개해 드리게 되어 기쁩니다 차례로 말씀드리자면 고성능 MapKit JS 로딩을 위한 새로운 마크업 요청 시 추가 MapKit JS 라이브러리를 로드하는 기능 마지막으로 응용 프로그램이 원하는 앱 기능에 신호를 보내서 사용자에게 표시되도록 하는 새로운 방법입니다 이제 이 새로운 기능들이 웹 응용 프로그램을 어떻게 개선할 수 있는지 보여 드리겠습니다 동료 해적을 위한 대화형 여행 지도를 만든다고 상상해 보죠 여러분은 MapKit JS의 기본 구현을 도입했습니다 하지만 형편없는 해적선 Wi-Fi로 이 페이지를 보려 하면 로드되는 데 너무 오래 걸리고 지도가 표시되기까지 너무 오래 기다려야 해서 동료 선원들이 짜증을 냅니다 선원들의 폭동을 막기 위해 여러분은 새로운 고성능 MapKit JS 로딩 마크업을 사용할 수 있습니다 이 마크업은 확장된 마크업을 위한 기본 구현을 웹 앱을 조정하기 위해 사용할 추가 속성으로 바꿉니다 먼저, MapKit JS는 이제 새로운 JavaScript 번들인 market.core.js를 제공하는데 여기에는 시작하는 데 필요한 최소한의 코드만 포함되어 있습니다 다음으로, MapKit JS에 저희가 필요로 하는 기능의 하위 집합을 알리고자 합니다 여기에서는 대화형 지도를 표시하기 위한 최소 기능 집합인 지도 라이브러리만 지정합니다 async 속성을 사용하여 MapKit JS에서 페이지 로드를 차단하지 않도록 방지하고 로드가 완료되면 데이터 콜백 속성에서 지정한 콜백을 호출할 것입니다 MapKit JS는 더 이상 페이지가 로드되는 것을 막지 않으므로 웹 앱은 인터페이스를 처음으로 평가하기 전에 준비도를 확고히 해야 합니다 예를 들어, 이것은 MapKit JS가 준비되었을 때 MapKit 인터페이스로 리졸브되는 async 함수입니다 언제나 그렇듯이 MapKit JS는 로드되자마자 글로벌 윈도우 대상체에서 사용할 수 있습니다 MapKit 대상체가 정의되지 않았다면 MapKit JS가 아직 로드되지 않은 것입니다 초기 라이브러리가 로드되었는지도 확인하고 싶은데요 데이터 라이브러리의 속성을 사용하여 마크업의 지도 라이브러리를 요청했던 걸 떠올려 보세요 두 테스트 중 하나에 실패하는 경우 이는 데이터 콜백 속성을 사용한 콜백 집합이 호출되지 않았음을 의미합니다 여기에서는 콜백을 async 함수에 대한 프로미스로 변환하고 프로미스를 리졸브한 직후에 콜백을 정리합니다 이를 통해 이 기능이 반환될 때 MapKit JS가 시작할 준비가 되어 있도록 했습니다 이제 구문으로 돌아가죠 고성능 마크업에는 다른 유용한 속성들이 있습니다 브라우저가 MapKit JS CDN으로 들어오는 모든 요청에 대해 단일 HTTP/2 연결을 사용하도록 허용하는 crossorigin 속성이 그 중 하나죠 저희는 또한 MapKit JS가 스스로 초기화할 기회가 있으면 즉시 이를 실행하기를 원합니다 마크업에 초기 토큰을 설정하여 이를 달성할 수 있습니다 이를 종합하여 페이지가 더 빨리 로드되게 할 수 있지만 아직 남은 것이 있습니다

지도 라이브러리만 요청했기 때문에 해적선과 보물을 지도에 다시 놓을 수 있으려면 주석 라이브러리를 로드해야 합니다 바로 이 때 두 번째 최적화가 도움이 됩니다 새로운 방법은 해당 MapKit 다운로드에 대해서만 제공됩니다 요청 시 추가 라이브러리를 비동기적으로 로드하고 로드한 라이브러리가 다른 것을 요구하는 경우 이를 자동으로 처리합니다 실례는 다음과 같습니다 MapKit 다운로드 방법을 간단히 호출하여 주석 라이브러리를 로드합니다 로드 이벤트에 대해 리스너를 추가한 다음 주석이 호출되면 해당 주석을 추가합니다 물론 주석 외에 다른 것도 로드할 수 있습니다 예를 들어 서비스는 검색 또는 geocoder 같은 모든 서비스 API를 포함합니다 전체 지도는 MapKit 지도 클래스에서 사용 가능한 모든 기능을 로드합니다 여기에는 기본 지도 오버레이, 주석, 사용자 위치 디스플레이가 포함됩니다 그리고 GeoJSON은 GeoJSON 임포터를 로드합니다

이제 로딩 환경이 좋아졌네요 하지만 이보다 더 나은 환경을 만들 수 있습니다 오늘 여러분에게 소개할 세 번째 기능은 우선화된 지도 시작 기능입니다 새로운 로드 우선 순위 속성을 사용하면 MapKit JS가 관심 지점을 더 빠르게 표시하도록 지시하여 바다를 누비는 해적들에게 유리함을 제공합니다 로드 우선 순위를 설정할 때는 사용자에게 필요한 최상의 경험에 맞춰야 합니다 세 가지 로드 우선 순위 옵션을 사용할 수 있습니다 관심 지점은 MapKit 지도가 지도 레이블과 관심 지점을 더 빠르게, 심지어 주석 전에 표시하도록 지시합니다 반면에 토지 피복은 단순히 토지 피복, 도로 및 국경을 서비스합니다 이러한 옵션은 시작 중에 회전 또는 뷰포트의 정확한 지도 영역과 같은 일부 지도 동작을 방해하므로 로드 우선 순위를 없음으로 설정하여 완전히 끌 수 있습니다 실례는 다음과 같습니다 지도 제작기 옵션에서 로드 우선 순위를 사용하여 원하는 우선 순위를 간단하게 지정합니다 MapKit 지도에 관심 지점을 먼저 표시하도록 요청합니다

이제 로딩 환경이 훨씬 더 좋아졌습니다 오늘은 응용 프로그램의 지도 로드 환경을 개선하도록 설계된 새로운 기능 세 가지를 소개해 드렸습니다 전반적인 사용자 경험을 원활하게 유지하고 손상시키지 않으면서 MapKit JS를 통합할 수 있습니다 기존 응용 프로그램에 이러한 새 기능을 점진적으로 마음껏 도입해 보세요 각 기능에 저마다의 이점이 있으니까요 아래에 나와 있는 자세한 문서와 Maps Server API 세션을 확인하시기 바랍니다 여러분이 이 새로운 기능을 활용하시는 모습을 보게 되길 기대합니다 감사합니다