차세대 카플레이: 맞춤형 계기판 디자인

차세대 CarPlay는 자동차 제조업체에게 독특하고 통합적이며 일관된 차량 내 경험을 만들기 위한 심층적인 맞춤형 디자인 시스템을 제공합니다.

### 차세대 CarPlay 디자인 시스템
* 🚗 차세대 CarPlay는 자동차 제조업체가 모든 운전자 디스플레이에서 통일되고 일관된 공동 브랜드 경험을 만들 수 있도록 **광범위하게 맞춤 설정**할 수 있는 디자인 시스템을 도입합니다.
* 🎨 이 디자인 시스템은 심층적인 커스터마이징이 가능하여 자동차 제조업체가 자신만의 시각 디자인 철학을 표현하고 차량에 맞는 **아이코닉한 외관**을 만들며 **Apple과 브랜드 모두를 기념**할 수 있습니다.
* 📏 타이포그래피, 게이지 스타일, 색상 및 배경과 같은 구성 요소는 **매우 유연하고 적응력이 뛰어나 다양한 사용자 지정 옵션**을 제공합니다.
* ⚙ 이 시스템은 **게이지의 스타일에 관계없이 논리적이고 일관된 방식**으로 필요한 모든 기능과 특징을 지원합니다.
* 🔢 운전자는 클러스터에서 항상 사용할 수 있고 차량 정보와 iOS 기능을 결합한 **동적 콘텐츠**를 통해 자신의 경험을 맞춤 설정할 수 있습니다.
* 🔍 모듈식 레이아웃 시스템을 통해 자동차 제조업체는 **다양한 유형의 게이지를 다양한 구성**으로 결합하여 더욱 다양한 디자인과 기능을 선택할 수 있습니다.
* 📱 차세대 CarPlay는 **확장된 기능, 긴밀한 통합 및 친숙한 상호 작용 패턴**을 통해 현재의 CarPlay 기능을 뛰어넘는 심층적인 맞춤형 통합 환경을 제공합니다.

Hi there, I’m Ben Crick from the Apple Design Team, and today I get to introduce you to the Next Generation of CarPlay design system. Specifically, we’re going to dive into the extensive customization features that empower automakers, in partnership with our team here, to tailor the look and functionality of CarPlay to each vehicle. That means if you’re a designer in the auto industry, this talk’s for you! If that’s not you but you’re curious, stick around anyway, this’ll be an exciting look into the future of CarPlay. It’s the best of iPhone and the best of your car together in a unified, consistent experience across all of the driver’s displays. One that’s familiar where it matters, yet new, beautiful, and unique to your vehicle. In particular today, we’ll focus on one of the most exciting and expressive new areas: the instrument cluster. In this session you’ll learn how gauge designs are customized for each automaker.

how they support unique
instrument cluster layouts, and how to surface
all kinds of iOS and vehicle content in the driver display, and beyond. Most of all, though,
we hope that you’re inspired to imagine what your own
experience might look like. This session is focused on design, but
for a more technical look under the hood, make sure to check out the companion talk “Meet the Next Generation
of CarPlay Architecture” by my colleague Tanya Kancheva. Before we get into the details,
let’s talk about how we got here. It’s pretty simple, really; cars have changed a lot
since CarPlay first launched. Screens are becoming larger,
and we’re seeing more of them. For example, screens are quickly
replacing the analogue instrument cluster, and it’s not hard to understand why, with all the fantastic new features
and functions today's vehicles have. There’s a ton of exciting and
creative new configurations hitting the road every year. Well, at WWDC in 2022,

we first teased
this Next Generation of CarPlay. It provides content
for all those driver’s screens, for an experience that’s
unified and consistent. Drivers will have
the choice between CarPlay or this experience that is the very
best of your car and your iPhone. And the truth is, the default design for
Next Generation CarPlay in your vehicle will look very different to this
or any other car out there. Introducing the powerful new design system at the heart of
the Next Generation of CarPlay! It’s built from the ground up
to be deeply customizable. It’s designed to adapt
to any vehicle drivetrain, feature set, and configuration. One screen or many, big screens or small,
and any screen in between but most importantly for todays topic, to look beautifully
on-brand, for your brand. It enables you to express your own
visual design philosophy within CarPlay, to create an iconic, individual look tailored to you, your vehicles,
and their unique functions.

The result won’t just look like Apple, and it also won’t just look like a copy of the built-in system. It’s designed to be a unique celebration of both brands, a special co-branded experience only when your vehicle and iPhone come together, and it reflects a great deal of hard work we’ve done with automakers all over the world to innovate the in-car experience. At the heart of this co-branded experience is the driver display. In this section, we’ll take a closer look at what’s possible and how automakers, in partnership with Apple, can make Next Generation CarPlay instruments your own. Let’s start with Typography. We use our SF family of typefaces for a number of reasons, but foremost among them because they are a special type of font called a variable font. Our variable fonts allow qualities like weight and width, both extended and condensed, as well as the softness of the corners to all exist on a continuous scale, as you’ve just seen.

We’re not limited to the standard “light,” “regular,” or “bold” options of traditional fonts. Instead, any point between any of these qualities can be selected, providing a huge range of stylistic options. We’ve built the rest of the system with the same logic in mind. So when designing your unique instrument cluster, you don’t have to choose from a limited set of pre-determined configurations. For example, here we have something very light and elegant. But what if you’re looking for something a little bolder? Well, as you might expect, along with typography, Next Generation CarPlay allows you to customize the width of elements in the gauge, as well as the softness of the corners. Or sharpness, if you prefer. Hard to argue that this isn’t looking bold and graphic now. Circular gauges let you decide the arc of the gauge too, as well as its start and end points. We’ve used this feature here to extend the gauge into a full circle.

and double down
on its geometric silhouette, as well as adjusting the position
of the fuel gauge to accommodate. Of course, you can choose
the color of the gauges too. This blue, for example, nicely
softens the impact of that bold gauge and helps with overall hierarchy. Let’s add another color into
the fuel gauge for a little more variety. Of course, you’re not just
limited to flat colors either. Gradients are a fantastic way
to add nuance and dimension. And if you wanted to
really hero that gradient, we can simply expand the width
of the stroke all the way to the center. Not too bad; we’re getting somewhere now. But let’s move the type
into our secondary position so that we can see the gradient even more. We’ve arrived at something
both contemporary and elegant, with a little bit of an homage
to a classic gauge needle. But what if you actually
want an analog needle? Well, we have that option too.

And while we’re speaking of iconic gauge cluster elements, what design system would be complete without tick marks? The number of ticks, their length, style, and their position are all customizable. You can even have multiple sets of ticks if you’re looking to create something really technical. For now, let’s go with something more classic for the ticks and add some numbers as well, to complete the look. Hopefully, this has given you a sense of the simple mechanics behind the gauge styling system, and a taste of the flexibility and creativity they enable. And that’s really just scratching the surface, when you start layering these techniques, almost anything’s possible. Of course, this is all in service of creating that beautiful co-branded experience, and while we’ve had a blast in the Apple Design Studio here developing and testing the system, the best part is when we get to work together with you to create something that’s new and exciting for both of us.

The Next Generation of CarPlay is not
just limited to circular gauges either: we have a host of other components too,
with even more styles on their way. As you’ve seen, this system is
deeply customizable and adaptable. It enables a wide range of gauge styles
from traditional to modern, a highly flexible typography system, geometries for different line
treatments and tick choices, a palette of colors to reflect
your brand, and much more. Next, let’s take a look
at some of the functions that your unique
gauge style is capable of. We’ve worked hard to ensure that
no matter the style of the gauge, it will support all the functionality
and features you need in a way that's logical and consistent. To demonstrate how our gauges
adapt their functions to different styles, we’re going to show a side-by-side here
as we talk about a few common functions. On the left, we have a minimalist,
linear-style gauge in light mode.

and on the right, we have a more technical
circular style, shown here in dark mode. In our system, the Speedometer
is always paired with a fuel gauge, or state of charge gauge,
like we have here, depending on the type of powertrain. Ok, let’s start our drive. If the driver activates cruise control, the target speed is marked
on the gauge with a dot, and the set speed shows
as text adjacent to that dot. For vehicles with adaptive cruise control, when the vehicle is not
traveling at the target speed. For example, if the car ahead slows down, a line is drawn between
the current speed and the target speed to provide a glanceable representation
that the adaptive cruise control system will return to the target speed
when it can. The color of the cruise control UI
changes based on state, and is customizable to suit
the color scheme of the gauge style. There is also support for speed limiter,
which shows as a simple line,

in contrast to the cruise control dot. It also takes on a different color. Near the current speed readout, we like
to reserve a space for road signage, as well as alternate units
for speed, should they be required. Of course, we also support
all the states you would expect, like low remaining charge or fuel,
in orange and critical in red. The point at which these states
show up is defined by you. Beyond the speedometer, the Next Generation of CarPlay has support for secondary gauges for any type
of powertrain you might like to display, like these tachometers
for a combustion engine, paired here with a secondary gauge
for engine coolant temperature, and complete with options for the
various markings and states you’d expect, like current gear for manual drive modes, redline, and arrows
for recommended gear changes. If your vehicle is electric,
the same is true for power meters. We retain common elements like
drive mode and transmission state. But we have affordances
for EV unique things like boost.

as well as regenerative breaking. We even have hybrid gauges
for automakers that wish to show both a power meter
and a tachometer at the same time. In these examples, the electric component is emphasized
by the thicker part of the gauge, with the combustion shown in parallel
in a more compact format. In circular gauges, you can even swap out
the transmission state for an image, should you prefer to showcase
your brand, or a particular trim level. So there you have it, once you've customized your gauge style, you can be sure that it will
work in all the ways you expect. Whether it’s cruise control, speed limiter, or road
signage in the speedometer drive mode, transmission state,
or redline in the tachometer, boost and regenerative breaking
in a power meter, hybrids of both combustion and electric, and secondary gauges
like engine coolant temperature. In fact, there’s even more than
we have time to share today.

We’re excited to continue expanding the functionality in Next Generation CarPlay to ensure that it supports anything you need. Now that we have a gauge style picked out, it’s time to build a layout by combining a few different types of gauges. Of course, there are a few requirements when it comes to building a layout; current speed and fuel level, for example, are mandatory. But as we touched on a moment ago, other gauges like a power meter or a tachometer are completely voluntary. If they feel appropriate, we have all the options we’ve just discussed and more. But if something less instrumentation-focused is more fitting in your vehicle or configuration, that works too. It’s all thanks to our modular layout system. Let’s take a look. Each gauge is constructed as a self-contained, modular component. These components form the basis of the layout system. They are resizable so you can fine-tune them to your preference.

or to best fit your particular
hardware size and shape. The real fun though is in
assembling different types of gauges into different configurations. This brings a whole other layer of
customization to the instrument cluster. For example, by combining this circular center
gauge with some minimal linear gauges, we can create something
simple and sleek like this. Or, we can create an entirely different
impression by swapping those components for these information-rich,
multi-gauge options. Here we’ve also added
tick marks to our gauge style to add to the technical feel. This modularity also means
you can layout information in whatever position makes sense
for your brand, hardware configuration, feature set, or ergonomic preference. And on top of all this or underneath it, to be more accurate, you can also add
your own custom wallpapers not just to the cluster,
but across every display. Wallpapers are a great way
to show off those big panoramic displays and to add even more of your unique flavor
to Next Generation CarPlay.

They’re also a great way to compliment
your unique gauge and layout choices. For example, pairing this landscape
with this technical, linear gauge style evokes adventure and off-roading. Speaking of displays, as we’ve mentioned,
we know they come in all shapes and sizes. Let’s look at this design
in a wider format to show how our components flex to adapt. These linear gauges, in particular, feel
well-suited to wide, slim driver displays. What about a more irregular screen? Well, one of our previous gauge layouts
would lend itself well to this shape, especially with a little fine-tuning of the component sizes, but perhaps you're looking for something
less instrumentation-focused. If you want to maximize
the impact of maps, ADAS, or just media, we have compact options
for layout and instrumentation too. And that’s the basics of laying out
a co-branded instrument cluster. Highly modular,
for even more choice in design and in the functionality
you want to surface.

Incredibly flexible, so no matter the hardware size, shape, or configuration, it always feels at home. And last but not least, support for beautiful custom backgrounds across all displays. At a high level, that covers the majority of the design system for automakers. It empowers you, in partnership with our team here, to develop a beautiful co-branded experience that celebrates both brands. One that’s unique to you and your feature set, and totally at home in your configuration. But we also know how important it is for drivers to customize their experience. So to complete our look at the instrument cluster today, let’s talk about some of the choices drivers have to surface content in the cluster and beyond, along with some opportunities that this presents for you. No matter the layout or design you land on, the system will always have a reserved space for what we call dynamic content. Some layouts can be configured to feature this content at all times.

as a permanent part of their design. Looking at the two designs
on the left here, the layout on top features a regular-sized
content area for its middle component: a trip computer. The bottom, by contrast, uses
a large content component to hero the map, paired with compact instrumentation. Others, though, might prefer to utilize
the full display for instrumentation, but even then, dynamic content can be
stacked behind non-critical gauge elements so the user can have an immersive,
instrument-focused experience without sacrificing access
to useful content options. Whatever position
the dynamic content area ends up in, it’s always easy
for the driver to interact with. They simply flip through the different
options using your steering wheel controls. This should be a pretty familiar
pattern for most drivers today. The dynamic content area also
serves as the default location for notifications and pop-ups. We support a variety
of notification formats, from the basic text and symbol, including
interactive and dismissible variations.

to rich overlays that feature multiple states, including image assets of your vehicle. If your particular system needs to show two notifications at the same time, Next Generation CarPlay can support that too. And dynamic content is not just limited to the driver display. Drivers can choose from favorites like Maps and Now Playing, as well as all new vehicle information like trip computer, tire pressure, and your advanced driver assistance systems. For content that includes a visual of the vehicle, like on the top left, Next Generation CarPlay supports your imagery. Your vehicle rendered how you like it. You can also reflect different attributes if you want, like color, or trim level. It’s up to you and the detail you want to show. Cluster content will focus on the core driving experience, but center and passenger displays present an exciting space for more diverse content. You can imagine the ways these collections could expand in the future with even more apps and categories.

We’re eager to work with you
to explore what’s possible, including ways to surface
your own unique content. That’s dynamic content, a simple but powerful feature that surfaces so much
of the things drivers love. It’s always available in the cluster, regardless of the chosen
layout or gauge style. It combines the best features and content
from the vehicle with favorites from iOS. And it ensures there’s always a clear
space for notifications and pop-ups. We can’t wait to see this exciting feature
and how it'll evolve in your cars. Taken all together, this system allows you to
create a deeply customized, integrated experience for your vehicles, and an delightful co-branded experience for those people
who love both our products. It goes far beyond what you can do
with CarPlay today. A deeply customizable design system. A flexible layout system that can
adapt to your hardware configuration and design preferences. Backgrounds and color theming
across every driver display.

Dynamic content that combines vehicle info
with fan-favorite CarPlay features. And so much more than we can cover today, like the new native climate app
that you can see on the center screen here, as well as terrestrial radio with hard key
integration for everything, of course. There’s also automaker settings for
effortlessly folding all your features in, and automaker apps that
ensure you can elegantly surface your unique experiences and interfaces and update them as easily
as updating your app today. And that’s a look at The Next
Generation of CarPlay’s design system. And don’t forget,
for more on the technical side, check out the companion talk
by my colleague Tanya Kancheva, where you can get
a proper look under the hood. The next generation of CarPlay is the best
of iPhone and the best of your brand together in a beautiful,
unified, consistent experience. Unique to your brand,
totally at home in your vehicle.

with all the benefits
of expanded features, deep integration, and
familiar interaction patterns. To learn more about supporting
the Next Generation of CarPlay, enroll in the Apple MFi program. We hope it’s been
an informative and inspiring session, and look forward to talking with you soon.

WWDC24: Say hello to the next generation of CarPlay design system | Apple

Hello and welcome to the official Apple Developer YouTube channel.

Apple Developer

차세대 CarPlay는 자동차 제조업체가 각 차량에 맞게 CarPlay의 모양과 기능을 조정할 수 있도록 광범위한 사용자 지정 기능을 제공합니다.

여기에는 게이지 디자인 사용자 지정, 고유한 계기판 레이아웃 지원, 운전자 디스플레이에 iOS 및 차량 콘텐츠를 표시하는 기능이 포함됩니다.

새로운 디자인 시스템은 심도 있는 사용자 지정이 가능하도록 제작되어 자동차 제조업체가 시각적 디자인 철학을 표현하고 차량과 iPhone 간의 협업을 반영하는 독특한 공동 브랜드 경험을 만들 수 있습니다.

차세대 CarPlay의 사용자 지정 가능한 게이지 스타일링

차세대 카플레이는 타이포그래피, 게이지 폭, 모서리 부드러움, 색상, 그라데이션 및 획 폭 등 게이지 스타일링을 위한 다양한 사용자 지정 옵션을 제공합니다.

이 시스템을 사용하면 전통적인 게이지 스타일부터 현대적인 게이지 스타일, 유연한 타이포그래피, 다양한 선 처리 및 사용자 지정 색상 팔레트를 만들 수 있습니다.

게이지는 선택한 스타일에 관계없이 논리적이고 일관된 방식으로 필요한 모든 기능과 특징을 지원하도록 설계되었습니다.

차량용 게이지에는 크루즈 컨트롤, 속도 제한기, 도로 표지판, 다양한 파워트레인 지원 등 다양한 기능이 포함되어 있습니다.

또한 차세대 CarPlay는 내연기관, 전기차, 하이브리드용 보조 게이지를 제공하며, 표시 및 상태를 사용자 지정할 수 있는 옵션도 제공합니다.

게이지를 개인화하여 브랜드 이미지 또는 특정 트림 레벨을 표시할 수 있으며, 다양한 유형의 차량에 맞는 다양한 기능을 제공합니다.

차세대 카플레이는 현재 속도 및 연료 잔량과 같은 필수 게이지와 파워미터 또는 회전 속도계와 같은 자발적 옵션을 포함하여 사용자 지정 가능한 게이지 레이아웃을 허용하도록 기능을 확장하고 있습니다.

모듈식 레이아웃 시스템을 통해 다양한 유형의 게이지를 조합할 수 있어 설계 및 사용자 지정에 유연성을 제공합니다.

또한 이 시스템은 사용자 지정 배경 화면을 추가할 수 있으며 다양한 디스플레이 모양과 크기에 맞게 조정할 수 있어 다양한 사용자 취향과 차량 구성에 맞출 수 있습니다.

차세대 카플레이: 유연하고 사용자 정의 가능한 디자인 시스템

차세대 카플레이는 하드웨어 구성의 유연성을 제공하며 모든 디스플레이에서 사용자 지정 배경을 지원합니다.

운전자가 쉽게 상호 작용할 수 있는 동적 콘텐츠를 포함하여 계기판의 콘텐츠를 표시할 수 있는 선택권을 제공합니다.

또한 이 시스템은 다양한 알림 형식을 지원하며 차량 이미지 및 다양한 주행 정보를 포함한 다양한 콘텐츠 옵션 중에서 운전자가 선택할 수 있습니다.

또한 향후 센터 및 조수석 디스플레이의 콘텐츠를 확장할 수 있는 기회를 제공합니다.

차세대 CarPlay: 통합된 맞춤형 경험

클러스터의 동적 콘텐츠는 차량 정보와 CarPlay 즐겨찾기를 결합하여 운전자에게 독특하고 강력한 기능을 제공합니다.

새로운 CarPlay 디자인 시스템은 유연한 레이아웃, 색상 테마 및 기본 앱을 제공하여 현재 CarPlay의 기능을 뛰어넘습니다.

자동차 제조업체는 고유한 경험과 인터페이스를 손쉽게 통합하여 운전자에게 확장된 기능과 친숙한 상호 작용 패턴을 제공할 수 있습니다.