Carplay. 아직 면허도 없어서 사용해보진 못했지만🥲,
앱과 차량이 어떻게 상호작용하고, 뷰는 어떻게 그려주는지 궁금하더라구요.
앞으로 기능이 확대되고 저의 미래에 유용하게 쓰일 기술같아 보여 이번 WWDC22의 Carplay관련 세션을 살펴보고자 합니다🤗

WWDC22 영상
Get more mileage out of your app with CarPlay

카플레이는 차에서 아이폰을 안전하고 스마트하게 사용하는 방법입니다.

오늘의 세션은 우리 앱에서 카플레이를 어떻게 가능하게 할 것인지에 대해 이야기 할 것입니다.

아래 순서로 살펴보겠습니다.

• 카플레이를 지원하는 앱에 대한 간략한 소개
• 올해 새롭게 카플레이가 지원되는 앱 타입에 대한 소개
• 카플레이 앱을 개발하는 툴에 대해 소개
• 네비게이션 앱에 특정되는 새로운 중요한 기능에 대해 소개

CarPlay app은..

카플레이 앱을 개발할 때 1순위로 고려해야할 사용자는, 운전 중인 운전자입니다.
따라서 운전에 관련된 태스크만 가능하게 하고, 운전중에 하면 안되는 태스크는 제거해야합니다. 예를 들어 일회성 설정, 앱 회원가입, 약관 읽기 같은 행동은 운전 전이나 운전 후에 하는 것이 좋습니다. 이러한 행동은 카플레이 UI에서는 보여지지 않아야합니다.

카플레이에서 앱을 나타내기 위해서는 자격이 필요합니다. 자격은 앱의 타입에 따라 Apple CarPlay developer 웹사이트에서 신청 가능합니다.

Supported app types

---

기존 카플레이를 지원하는 앱 종류에는 네비게이션, 오디오, 커뮤니케이션, EV 충전, 주차, 빠른 푸드 주문이 있었습니다. 운전자가 운전중에 하고 싶어하는 것들을 도와주는 기능들입니다.

올해 두 가지 종류가 더 추가 되었습니다. Fueling과 Driving task입니다.

새롭게 추가된 두 종류에 대해 자세히 알아보기전에, 먼저 Template에 대해 빠르고 짧게 이야기 해보겠습니다.

Templates

템플릿은 iOS에서 제공하는 UI 템플릿을 말합니다. 앱이 데이터를 제공하면 iOS가 UI를 알아서 그려줍니다. 템플릿은 폰트 사이즈, UI 레이아웃들을 제공하고, 복잡하지 않은 UI를 구성하도록 도와줍니다. 따라서 모든 카플레이 앱의 UI는 일관적이고, 사용자는 빠르게 UI에 적응하여 사용할 수 있습니다.

또한 템플릿은 카플레이를 지원하는 모든 차 종류에서, 스크린의 사이즈나 인풋 디바이스에 무관하게 앱 UI가 잘 작동하게 합니다.

템플릿은 개발자의 수고를 덜어줍니다. 버튼의 배열을 보여주는 그리드 템플릿에서부터 테이블을 보여주는 리스트 템플릿까지 다양한 템플릿 중에 선택할 수 있습니다. 가장 중요한건 모든 카플레이에서 이러한 템플릿이 보여지기 때문에 운전자가 UI에 익숙하다는 장점이 있습니다.

앱의 종류에 따라 사용가능한 템플릿은 위 차트와 같습니다. 위와 똑같은 차트는 developer document online에서 확인할 수 있습니다.

새로 추가된 Carplay app type

---

1. Fueling apps

아마 기억하시듯이, iOS14에서는 EV Charging 앱을 지원하는 앱 타입을 런치했었습니다. 이러한 앱은 EV Charger 위치 검색 뿐만 아니라 사용자가 올바른 Charging station에 연결하고 시작하도록 돕습니다. 이러한 기능이 전기차가 아닌 차에서도 유용할 것이란 얘기를 많이 들었고, 새로운 fueling app을 통해 전기차뿐만아니라 전통적 가솔린 차나 대체 연료 차에서도 위 기능들을 사용할 수 있습니다.

네비게이션 앱에서도 장소(여기선 주유소를 말하는 것 같음)를 찾는 것이 가능하기 때문에, fueling app에서는 단순 장소 검색 외 기능들을 제공하세요. “가스 펌프를 작동시키는 것”과 같은 것이 fueling app만이 제공할 수 있는 기능의 좋은 예가 되겠습니다.

2. Driving task apps

Driving task app은 넓은 범위의 간단할 태스크를 제공하는 앱 타입입니다. 잊지 말아야할 것은 이러한 앱의 주요 목적은 운전중에 필요한 일을 지원하도록 디자인되어야 한다는 것입니다. 운전중에 해내어야할 태스크가 아닌 운전을 돕는 태스크여야합니다.

Examples

• 자동차 부품 조작
• 드라이빙 또는 도로 관련 상태와 정보 제공
• 운전의 시작과 끝에 해아할 일

이 같은 예시의 구체적 사례를 보겠습니다.

첫번째, 중요한 도로 정보를 보여주는 road status app입니다. CPPointOfInterestTemplate을 사용했습니다. 사용자가 이 앱을 운전중에 사용하기 때문에, 아주 중요하고 짧은 정보를 운전석 가까이 제공하는 것이 중요합니다. 그리고 옆의 지도를 가리면 안되기 때문에 앱의 공간은 제약이 있고, 따라서 간결한 언어를 선택해야합니다.

두번째, 차의 accessory를 컨트롤하는 앱입니다. 위 경우엔 trail controller(추적 제어기)입니다.

CPInformationTemplate을 사용해 연결된 부품의 기본 정보를 제공하고, 사용자에게 액션을 받을 수 있는 버튼을 제공합니다. 이 예시에서 중요한 것은, 위 스크린이 앱의 전부라는 것입니다. 연결된 부품을 관리하기 위한 더 많은 기능이 들어갈 수 있지만, 운전중에 필요한 기능이 아니라면 카플레이 UI에서 제외시키는 것이 좋습니다. 비주행 작업은 차량 밖으로 나갈 때 아이폰을 이용하도록 합니다.

마지막으로, CPGridTemplated을 이용한 두개의 버튼만 있는 매우 간단한 앱입니다.

두가지 버튼을 이용해 개인 혹은 비지니스 마일을 추적할 수 있습니다. 새로운 Driving task 앱 타입에 딱 맞는 앱이라 할 수 있겟네요. 운전중에 필요한 일이고, 매우 간단한 작업이기 때문입니다.

위와 거의 동일한 UI의 다른 앱입니다. express lane toll transponder app인데, 차에 몇명의 동승자가 있는지 선택할 수 있습니다.

정리

✅

• 싱글 스크린의 최소한의 기능을 고려할 것
• 몇초안에 끝낼 수 있는 태스크를 타겟으로 할 것

❌

• 복잡하고 드문 사용 사례는 넣지 말 것
• 차와 관련된 일이라도 운전중에 필요한 것이 아니라면 넣지 말 것

CarPlay Simulator

---

카플레이 앱을 테스트할 수 있는 새로운 도구가 나왔습니다. 바로 Carplay Simulator!

먼저 기존 테스트 툴의 차이점을 설명할게요.

• Xcode Simulator
  • 카플레이 윈도우를 내장하고 있음
  • Xcode Simulator를 사용하던 분들이라면 빠르게 테스트 가능
• 실기기를 카플레이 가능 차량 또는 aftermarket head unit에 연결해서 테스트
  (Aftermarket head unit : 부품시장에서 구할 수 있는 헤드 유닛)
  • Carplay simulator 출시 전 실제 카플레이 UI를 테스트 할 수 있던 유일한 방법

CarPlay Simulator

카플레이 환경을 똑같이 만들어둔 Mac app입니다. 애플 개발자 사이트의 “Additional Tools for Xcode”에서 다운로드 합니다. 앱을 실행하고 케이블을 이용해 맥에 연결해서 테스트합니다. 그럼 실제 차에 연결된 것과 똑같이 실행됩니다.

실제 테스트 장면👇 (영상 후반부에 나옴)

장점

• 실제 차량과 똑같이 작동 (주차장을 오갈 필요 없음)
• 다른 개발 툴과 함께 사용 가능
• 아이폰의 모든 기능에 접근 가능

(일부 시나리오는 실제 카플레이 시스템이나 현재 카플레이 시뮬레이터 없이는 테스트할 수 없습니다)

• 차량의 다양한 설정을 테스트 가능 (예. 다양한 디스플레이 사이즈)

시뮬레이터가 어떻게 생겼는지 살펴보겠습니다.

스크린 하단에는 차에 있는 hard key와 Knob control이 재현되어있습니다.

터치 스크린 차량은 클릭으로 터치를 재현할 수도 있습니다.

스크린 상단에는 몇가지 빠른 컨트롤이 있습니다.

limit UI button 을 사용하면 움직이는 차량이 카플레이 화면의 특정 콘텐츠를 제한하도록 요청 되는 상황을 시뮬레이션 할 수 있습니다. 예를 들어, 오디오 앱의 목록 내용을 줄입니다.

Dark UI , Dark Map 은 UI의 라이트 혹은 다크 모드를 보여줍니다.

Connected 는 카플레이에 폰을 연결해제, 재연결 상황을 재현합니다.

이 버튼을 사용할 땐 폰이 맥에 연결되어 있으므로, Xcode를 이용해 앱에서 카플레이 재연결시나리오를 디버깅할 수 있습니다.

Configure 버튼은 더 고급 기능과 함께 secondary 스크린을 띄웁니다.

메인 카플레이 디스플레이의 사이즈를 선택 가능합니다. 여러 차종에서 디스플레이가 정상적으로 보여지는지 테스트 할 수 있습니다.
아래는 네비게이션 앱에서 추천하는 테스트 디스플레이 사이즈입니다.

카플레이 시뮬레이터에서는 Instrument Cluster(계기판) 디스플레이도 테스트 할 수 있습니다. 계기판은 특히 네비게이션 앱과 찰떡으로 활용할 수 있습니다.

계기판에서 Map 디스플레이 가능

---

차량 계기판에서 맵 디스플레이가 가능해졌습니다!

앱에서 계기판 지원을 추가하는 방법입니다.

iOS13에서 네비게이션앱이 카플레이 대시보드에서 보여지도록하는 API를 추가했었잖아요, 그 사용 방법과 유사합니다.

앱의 info.plist에 instrumentClusterNavigationScene을 선언하고, 요구되는 SceneSessionRole을 추가합니다.

그리고 CPTemplateApplicationInstrumentCluster Scene delegate 와CPInstrumentClusterControllerDelegate 를 구현합니다.

컨텐츠를 그릴 수 있는 Window를 제공하고, 계기판이 시작하고 끝나는 타이밍을 알려주며 계기판 뷰가 보여질 수 있도록 합니다. 이게 끝입니다

계기판 뷰에선 좀 더 고려할 사항이 몇가지가 있습니다.

• 계기판은 사용자 맵을 줌인, 줌아웃하는 것을 허용하는데, 이에 대응해서 CPInstrumentClusterControllerDelegate 를 구현해야합니다.
• 앱이 나침반이나 속도제한을 포함할 때, 언제 이것들을 그릴지 말지를 앱에게 알려주어야합니다.
• 차량의 다른 계기판 요소에 의해 계기판 뷰가 가려질 수 있습니다. 이때는 viewSafeAreaInsetsDidChange 를 오버라이딩해서 safe area가 변경되었을 때 중요한 컨텐츠가 계기판에서 보여질 수 있도록 보장할 수 있습니다.

🛞 카플레이 실행 모습

운전자 편의와 안전, 개발의 편의를 위해 탬플릿을 통해 일관된 UI를 구현한다는 점이 인상깊었네요✨

카플레이... 저도 빨리 사용해보고 싶네요. 화이팅😊