CarPlay를 통해 앱에서 더 많은 마일리지 획득

♪ ♪

안녕하세요 모두 환영합니다 전 오늘 세션을 진행할 André라고 합니다

Carplay를 통해 스마트하고 안전한 운전이 가능한데요 오늘은 Carplay에서 앱을 작동시키는 법을 알아보겠습니다 지원 앱 유형부터 빠르게 훑은 다음 올해 추가되는 새 앱 타입을 말씀드리고 앱 개발 지원에 이용 가능한 우리의 새로운 툴을 소개하겠습니다 마지막으로 내비게이션 앱의 새로운 주요 기능을 살펴보죠 다른 소리는 그만하고 바로 시작해 보겠습니다!

Carplay는 기본적으로 운전자를 위한 겁니다 운전을 많이 하시는 분들이 앱 구축 시 고려해야 하는 주요 사용자들이죠 그래서 운전 중 관련 사용 사례만 작동해야 합니다 운전 중 하면 안되는 사례는 빼야 하고요 앱에 등록하는 1회 설정이나 조건 읽기와 같은 것들은 운전 전후에 해야 하는 것이니 앱의 CarPlay UI에 있으면 안되겠죠

앱이 CarPlay에 나타나려면 자격이 필요한 점 기억하세요 Apple CarPlay 개발자 웹에서 자격 요청이 가능합니다 이용 가능하게 하고자 하는 앱 유형을 기반으로 해서요 현재 CarPlay에서 지원하는 앱 유형입니다 운전자들이 운전 중 하려는 많은 일들이 포함되어 있죠 하지만 들리는 바에 따르면 다들 원하시는 운전 관련 앱이 훨씬 많은 것 같더라고요 올해 여기에 2가지 유형이 추가됐다는 기쁜 소식을 전합니다 연료 공급과 드라이빙 태스크 유형인데요 곧 자세하게 살펴보기로 하고 먼저 템플릿에 대해 이야기하고 넘어가겠습니다 '템플릿'이란 Carplay 앱이 UI에 나타나는 방식인데요 앱은 데이터를 제공하고 시스템은 앱을 대신에 UI를 자동차 디스플레이에 가져옵니다 이 템플릿 시스템은 앱이 채택하기에 간단하고 앱이 운전 중 적절하게 작동할 수 있도록 하는 등 다양한 이점도 가지고 있습니다 폰트 크기 같은 것들은 걱정 않으셔도 됩니다 UI가 복잡하지 않도록 템플릿이 도와줄테니까요 여러분의 앱 UI는 CarPlay의 다른 앱과 일치할 겁니다 사용자들이 필요할 경우 빠르게 조치하는 게 쉬워지죠 템플릿은 앱의 UI가 Carplay 지원 자동차에서 사용되는 스크린 유형과 입력 장치에 관계 없이 잘 작동할 수 있도록 만들어 줍니다 다양한 구성에서 앱을 테스트하고 싶으실 텐데요 이건 세션 후반에 이야기해보도록 합시다 '대부분의 일이 가능하다'는 정도만 우선 알아두시죠 앱 구축 시 사용할 수 있는 템플릿도 다양합니다 버튼 배열을 보여주는 그리드 템플릿에서부터 테이블을 보여주는 리스트 템플릿까지 개발자와 iOS 사용자로서 친숙하실텐데요 가장 중요한 건 이들이 CarPlay에 나타났을 때 운전 중인 사용자들에게 친숙해야 한다는 점입니다 CarPlay 지원 앱 유형을 좀전에 알아봤었는데요 이 템플릿 중 일부가 특히 그들과 관련이 있습니다 이 차트에서 앱 유형에 따라 어떤 템플릿이 사용 가능할지 확인해 보세요 지금은 눈에 잘 들어오겠지만 걱정 마세요 온라인 개발자 문서에서 정확한 차트 확인이 가능합니다 지금은 앱 유형에 따라 사용 가능한 템플릿이 달라진다는 점만 기억하세요 특정 앱과 연관성이 있고 적절한 템플릿만이 허용됩니다 템플릿에 대해 이야기했으니 다음으로 넘어가서 iOS 16에서 런칭할 새 앱 유형을 살펴 봅시다 먼저 '연료 공급' 유형 앱에 대해 이야기해 보죠

iOS 14에서 EV 충전 앱을 지원하기 시작했었는데요 이 앱은 EV 충전소를 찾을 수 있을 뿐만 아니라 적절한 충전소 연결하기 시동 걸기 등 훨씬 많은 기능을 가지고 있습니다 많은 개발자들이 이런 유형의 기능은 EV 뿐 아니라 다른 자동차에도 좋을 것이라고 하더군요 기존의 휘발유 자동차나 대체 연료 자동차 상관 없이 이 기능으로 연료 앱에서의 지원이 가능해질 겁니다 많은 사용자가 특정 위치를 찾아가려고 내비게이션 앱을 사용한다는 점을 고려하면 연료 앱은 CarPlay UI에서 단순 위치 찾기를 넘어 더 많은 기능을 선사할 겁니다 가장 좋은 예로는 주유 펌프 작동이 있겠네요 다음은 '드라이빙 태스크' 앱입니다 이건 새로운 CarPlay 앱 유형인데요 다양한 종류의 단순한 앱을 작동할 수 있게 디자인됐습니다 이 앱들의 주요 목적은 주행 중에 할 수 있는 일과 주행 자체를 도와주는 일을 가능케하려는 것이라는 점을 꼭 기억하세요

이 유형에 들어가는 앱으로는 자동차 액세서리 컨트롤 앱 주행 및 도로 상태 정보를 제공하는 앱 주행 시작과 끝의 태스크를 도와주는 것이 포함됩니다 구체적인 예시를 좀더 살펴볼까요?

다음은 사용자들에게 중요 도로 정보를 알려주는 도로 상태 앱입니다 CPPointOfInterestTemplate을 사용해 구축됐는데요 이 앱 사용자들은 운전 중이라는 점을 기억하세요 따라서 사용자 위치 가까이에 중요 항목으로 구성된 간결한 항목을 제공해야 합니다 주행 전 총 경로를 계획하는 사용자들을 도우려는 앱이 아니라는 말이죠

다음은 사용자가 위치 선정 시 보이는 화면입니다 텍스트 여백은 정보를 한 눈에 볼 수 있도록 의도적으로 제한했기에 간결한 언어를 사용해야 합니다

다음은 액세서리 컨트롤을 위해 디자인된 앱인데요 예시에 있는 건 Trailer Controller 앱입니다 이 앱에서는 CPInformationTemplate를 통해 사용자가 선택 가능한 버튼과 연결된 액세서리의 기본 정보를 제시하고 있습니다 이 스크린이 앱 UI 전체를 보여준다는 점을 기억하세요 다른 스크린은 없습니다! 물론 이 앱에는 페어링된 액세서리 관리 등 다른 기능도 다양하게 존재하지만 주행에 필요하지 않은 기능은 CarPlay UI에서는 포함되지 않습니다 사용자는 비주행 시 iPhone에서 주요 UI를 사용해 드라이빙 태스크 이외의 것들을 할 수가 있습니다

마지막으로 CPGridTemplate을 사용한 사례를 살펴 볼까요? 버튼 2개만 존재하는 초간단 앱인데 이게 끝입니다! 개인용 주행 거리든 사업용 주행 거리든 사용자들은 주행 거리를 추적할 수 있습니다 드라이빙 태스크 앱의 완벽한 유형입니다 중요하지 않은 다른 일을 하게 하지 않고 주행 중 해야 할 단순한 일만 가능케 하니까요 단순 명료하죠 이 스타일이 다양한 앱 유형에 맞다는 걸 보여드리기 위해 거의 동일한 UI를 가진 Express Lane이라는 앱인데요 고속도로 요금 트랜스폰더로 CPGridTemplate을 사용한 앱입니다 차에 동승자가 몇 명인지 사용자가 선택할 수 있죠 이전 UI 예시와 동일한 목표를 달성합니다 이것도 완벽한 드라이빙 태스크 앱이죠

정리하자면, 드라이빙 태스크 앱을 디자인 할 때 사용자가 주행 중 필요로 하는 최소 기능만 제공하고 몇 초만에 할 수 있는 일만 가능하게 하는 단일 스크린 앱을 만들어야 한다는 겁니다 복잡하거나 흔하지 않은 사용 사례 허용은 피해야겠죠 피해야 할 예시는 최초 설정이나 상세 구성입니다 마지막으로 차와 관련되더라도 주행 중 필요없는 기능은 앱에 추가해서는 안됩니다 전부 다 포함하려 하지 마세요 이상 '드라이빙 태스크' 앱에 관련된 내용이었습니다 이제 CarPlay 앱을 테스트할 수 있는 방법을 알아봅시다 다양한 테스트 방법을 검토하고 'CarPlay Simulator'라는 새로운 툴을 소개해드릴게요 개발자로서 CarPlay 작동 앱을 테스트를 위해 자유자재로 자유자재로 사용할 수 있는 툴이 몇 가지 있습니다 'Xcode Simulator'에는 Carplay 창이 탑재되어 있고요 이미 이 다른 앱에 대해 이걸 사용하고 계신다면 CarPlay UI 테스트도 신속하게 가능합니다 다음으로 iPhone을 CarPlay 작동 차량이나 애프터마켓 헤드 유닛에 연결해 iPhone에서도 앱 테스트가 가능합니다 최근까지 iPhone에서 앱을 테스트하려면 이 방법이 유일했는데요 저희가 3번째 옵션을 새로 만들었습니다 바로 'CarPlay Simulator'인데요 좀 더 자세히 살펴볼까요? 자, 이건 뭘까요? 이 시뮬레이터는 CarPlay 환경을 복제한 독립형 Mac 앱입니다 Apple 개발자 웹사이트에서 'Additional Tools for Xcode' 패키지를 다운로드하고 앱을 실행한 다음 케이블을 이용해 iPhone을 Mac에 연결하세요 그러면 iPhone에서 CarPlay가 시작되고 실제 자동차에 연결된 것과 동일하게 실행됩니다 이게 왜 대단한 일이고 왜 사용해야 하는 앱일까요? 우선 장점이 많은데요

CarPlay Simulator를 사용할 때 CarPlay가 실제 차에서와 동일하게 iPhone에서도 실행됩니다 즉, 주차 공간을 찾으려고 왔다 갔다하거나 애프터마켓 헤드 유닛을 따로 구매할 필요 없이 휴대 전화만으로 앱 테스트가 가능하다는 것이죠 휴대 전화가 Mac에 연결되어 있기 때문에 CarPlay Simulator 사용 시 Mac에서 다른 개발자 툴도 동시에 사용할 수 있다는 게 또다른 큰 장점입니다 Xcode에서 디버깅하거나 Instruments에서 성능 조절이 가능하죠 iPhone에서도 앱이 작동하고 있기 때문에 iPhone 기능 보완도 가능해 iOS 측면에서도 좋습니다 어떤 경우 CarPlay 시스템이나 CarPlay Simulator가 없으면 이제 테스트가 불가하죠

이걸 가장 잘 보여주는 사례는 내비게이션 앱의 음성 명령과 FM 라디오 같은 자동차 본연의 음원을 조합하는 겁니다 이렇게 하면 책상에 앉아서 편하게 앱 테스트가 가능하죠

마지막으로 중요한 것은 디스플레이 크기 등 구성이 다양한 자동차에서도 CarPlay Simulator를 사용할 수 있다는 겁니다 실행 중인 CarPlay Simulator의 모습은 어떨까요? 바로 이렇습니다 연결된 iPhone에서의 CarPlay 디스플레이는 다양한 제어 기능과 함께 앱에 제대로 나타납니다 이것들이 무슨 일을 하는지 자세히 볼까요? 스크린 하단에 있는 버튼은 다양한 하드 키와 노브 제어를 시뮬레이션합니다

터치스크린 차량에서의 시뮬레이션을 위해 창을 직접 클릭할 수도 있습니다

창 최상단에는 빠른 제어 기능이 있는데요 이 버튼으로 오디오 앱의 콘텐츠 항목을 축소하는 등 주행 중인 차가 CarPlay에게 스크린의 특정 콘텐츠를 제한해 달라고 요청하는 것을 시뮬레이션할 수 있습니다

다음 2개의 버튼으로는 UI와 지도의 밝기 모드 요청 상황을 시뮬레이션 할 수 있습니다

마지막 버튼으로는 iPhone과 CarPlay 연결을 끊거나 재연결하는 것을 빠르게 시뮬레이션할 수 있죠 iPhone은 여전히 Mac과 연결되어 있으므로 이 버튼은 Xcode를 사용하여 CarPlay 재연결 시나리오를 디버깅할 때 쓸 수 있죠

제가 지나친 이 첫 번째 버튼은 뭘까요? 더 많은 고급 기능이 있는 또다른 창을 띄워줍니다 이미 예상하셨을까요? 그 고급 기능들이 뭔지 한 번 살펴 보죠

General 탭에서는 메인 디플레이 크기를 변경하실 수 있습니다 앱 UI가 템플릿으로만 구성되어 있다면 다양한 차에서 UI가 어떤 모습으로 나타날지 다양한 크기 시험이 가능하죠 하지만 말씀드렸다시피 작동에는 문제가 전혀 없습니다 그러나 내비게이션 앱일 경우 지도가 잘 그려지는지 확인하기 위해 다양한 크기와 영상비도 확인하는 것이 특히 중요합니다 앱 테스트용 디스플레이 크기는 다음을 추천합니다 Cluster Display 탭을 살펴 볼까요? 보시다시피 계기판의 디스플레이를 시뮬레이션 할 수 있습니다 작동하려면 이 박스를 체크하고 세션을 다시 시작하시면 됩니다 그럼 두 번째 창이 주요 디스플레이와 함께 계기판에 나타납니다 다시 강조하면 내비게이션 앱과 가장 관련성이 있습니다 계기판 디스플레이는 자동차의 뷰 필드에 운전자를 위한 지도 등을 보여주죠 계기판에 대해서는 잠시 후에 이야기할게요 CarPlay Simulator 앱은 여기까지 살펴 보겠습니다 저희가 찾은 유용성을 여러분도 즐겨보시길 바랍니다 계기판에 라이브 지도가 그려지는 걸 보고 왔는데요 내비게이션 앱은 어떨까요? 앱에서 계기판 지원을 어떻게 추가하고 테스트할 수 있죠? 한 번 알아 봅시다 CarPlay 대시보드에 내비게이션 앱이 나타나게 하는 API를 iOS 13에 추가했었는데요 이를 위해 지원 선언하고 요구 델리게이트를 구현하고자 Info.plist를 편집했었습니다 델리게이트는 대시보드에 나타나고 사라지는 시점을 앱에 알리고 내비게이션 앱에 UIWindow를 전달합니다 굉장히 쉽죠 이미 해보셨다면 좋은 소식입니다 계기판 추가 지원도 정확히 동일한 패턴을 따르기에 똑같이 쉬울 겁니다 테스트 앱 Space Roads에서 어떻게 했는지 살펴 보시죠 계기판 내비게이션 씬 지원을 선언하기 위해 우선 Info.plist를 수정했습니다 다음으로 요구된 Scene Session Role을 추가했죠 CPTemplateApplicationInstrumentCluster Scene은 그 다음에 구현했습니다 CPInstrumentClusterControllerDelegate도요 두 가지 모두 콘텐츠가 나타난 창을 보여주고 계기판이 켜지고 꺼질 때 알려줄 겁니다 계기판 뷰에 설명하게 나타날 거고요 이렇게 하면 자동차 계기판에 지도를 라이브로 나타나게 할 수 있습니다 대시보드 지원 구현과도 비슷하긴 하지만 계기판 지원에서는 몇 가지 더 고려하셔야 합니다 먼저, 계기판에서는 지도 확대, 축소가 가능한데요 CPInstrumentClusterControllerDelegates를 사용해 이걸 구현하는 것은 여러분의 마음입니다 이와 비슷하게 나침판이나 속도가 포함된다면 일치하는 델리게이트는 그게 언제 나와야 할지 앱에게 말해줄 거고요 마지막으로 계기판 뷰는 자동차 계기판의 다른 요소들로 인해 부분적으로 가려질 수 있습니다 물론 iOS는 최고 메커니즘으로 안전 영역과 같은 것들을 처리할 수 있습니다 안전 영역 변화 시 알기 위해 뷰 컨트롤러에서 viewSafeAreaInsetsDidChange를 변경할 수 있습니다 클러스터 뷰에서 safeAreaLayoutGuide르 중요 콘텐츠를 확실히 눈에 보이게 해줄 수도 있고요 가령 사용자 위치를 보여주는 파란 경로선이 있다면 주요 부분이 안전 영역에 포함된다는 걸 보장하실 수 있을 겁니다 CarPlay 앱 구축의 새로운 기능을 알아보았는데요 앱을 테스트할 수 있는 툴도 살펴 보았습니다 한 번 직접 작업해 보죠 먼저 Mac에서 CarPlay Simulator부터 실행하죠 앱은 실행 중입니다 이제 iPhone에 연결할게요

자, CarPlay가 실행되고 있네요 이 시뮬레이터로 어떻게 앱을 테스트하는지 볼까요? 앱들은 주로 템플릿 기반이지만 앱 화면이 두 밝기 모드에서 잘 작동하는지 확인하기 위해 사용할 수 있죠 Express Lane 앱을 실행해 볼게요

툴바에 있는 버튼을 사용하여 라이트 모드와 다크 모드를 왔다갔다 할 수 있습니다 두 스타일에서 다양한 아트워크를 제공하죠 아주 좋아 보이네요 이제 내비케이션 테스트 앱 Space Roads로 넘어가죠

다양한 스크린 크기의 지도를 그려보기 위해 주요 구성 패널을 이용해 보겠습니다

마지막으로 계기판 지원을 테스트하기 위해서 계기판 디스플레이를 작동시킬게요

됐네요 아주 좋습니다! CarPlay Simulator에서 앱은 다 테스트했으니 실제 자동차에서도 잘 작동할 것 같네요 한 번 확인해 보죠! 여긴 제 차 안이고 보시다시피 iPhone과 차가 연결됐고 CarPlay를 실행 중이죠

먼저, Trailer Controller 앱을 실행해 보겠습니다 그리고 노브로 작동되는 차에서 템플릿이 앱 작동을 신경쓰는지 보여드릴게요

이 차에는 터치스크린과 노브 컨트롤러가 있습니다 주행 중에는 대부분 노브 컨트롤러를 선호하죠 그래서 앱 작동이 노브로 잘 이뤄져야 합니다 보시다시피 앱에서 모든 버튼을 누를 수 있고 여기서 가장 좋은 점은 따로 할 게 없다는 겁니다 템플릿이 알아서 다 해주니까요!

다음으로 내비게이션 앱 Space Roads로 넘어가죠 앱을 실행할게요 길 안내로 들어가서... 'Go' 버튼을 누릅니다 짠! 앱이 센터 콘솔과 계기판에서 모두 라이브 지도 뷰를 보여주고 있네요 운전자 바로 앞에 보여서 정말 좋습니다 이 앱을 사용하시는 운전자 분들도 좋아하실 거예요 제가 준비한 세션은 여기까지입니다 추가 정보는 https://developer.apple.com/CarPlay의 Carplay 개발자 포털을 참고하세요 감사합니다 즐거운 운전 하세요!