미디어 앱

앱 개발자는 미디어 앱에 필요한 핵심 콘텐츠, 아이콘, 사용자 지정 기능을 제공하지만, 자동차 제조업체는 전반적인 시각적 경험을 자유롭게 맞춤 설정할 수 있습니다. 이를 통해 타사 미디어 앱이 차량 내 인포테인먼트 시스템에 자연스럽게 녹아든 것처럼 느껴지도록 할 수 있습니다.

자동차 제조업체가 맞춤 제작할 수 있는 것은 무엇일까요?

앱 바를 구성하세요

앱 바는 구글이 내장된 차량용 미디어 앱의 주요 탐색 및 브랜딩 요소입니다. 사용자는 앱 내에서 현재 위치를 파악하고 검색 및 탐색과 같은 필수 기능에 빠르게 접근할 수 있습니다.

디자인 토큰을 사용하여 앱 바의 모양, 레이아웃 및 기능을 수정함으로써 차량 브랜드에 맞춰 앱 바를 맞춤 설정할 수 있습니다.

해부

미디어 앱 바는 일반적으로 다음과 같은 요소로 구성됩니다.

  • 탐색 아이콘: 일반적으로 이전 화면으로 돌아가는 뒤로 가기 화살표입니다.
  • 앱 브랜딩: 앱의 로고 또는 이름.
  • 탭: "찾아보기" 또는 "검색"과 같은 최상위 범주에 대한 탐색 링크입니다.
  • 액션 아이콘: 검색 아이콘과 같은 상황별 액션 아이콘입니다.

외관을 사용자 지정하세요

디자인 토큰을 사용하여 앱 바가 차량 시스템 테마와 일치하도록 하세요. 토큰을 사용하면 UI 전체에 자동으로 업데이트되는 색상과 서체를 정의할 수 있습니다.

  • 배경: 적절한 서피스 토큰을 사용하여 앱 바의 배경색과 투명도를 설정합니다.
  • 타이포그래피: 앱 제목과 탭 레이블에 브랜드 글꼴과 굵기를 사용하려면 시스템 타이포그래피 토큰에 매핑하세요.
  • 아이콘: 운전 중 가독성을 높이기 위해 내비게이션 및 액션 아이콘의 크기와 색상을 일관되게 사용하십시오.

기능 구성

탭 관리

앱 구조에 따라 앱 바에 표시할 탭을 선택할 수 있습니다. 일반적인 구성은 다음과 같습니다.

  • 기본 탐색: 재생 목록, 아티스트, 앨범 등의 카테고리 탭이 있습니다.
  • 검색 통합: 앱 바에 전용 검색 탭 또는 아이콘을 추가하여 키보드 또는 음성 검색에 빠르게 접근할 수 있도록 합니다.

디스플레이 브랜딩

앱의 로고 또는 브랜딩이 앱 바에 표시되는 방식을 결정하여 통일된 디자인을 유지할 수 있습니다. 다음과 같은 옵션을 선택할 수 있습니다.

  • 로고 표시: 앱 로고를 탐색 아이콘 옆에 배치합니다.
  • 제목을 표시하세요: 로고가 제공되지 않은 경우 앱 이름에 텍스트를 사용하세요.

스타일 탐색 보기

탐색 보기 기능을 통해 사용자는 그리드와 목록을 통해 미디어 콘텐츠를 탐색할 수 있습니다. 자동차 제조업체는 이러한 보기 방식을 맞춤 설정하여 미디어 경험이 차량의 브랜딩 및 시스템 전반의 디자인과 일치하도록 할 수 있습니다.

헤더 사용자 지정

브라우징 헤더는 콘텐츠 계층 구조에서 사용자의 현재 위치에 대한 컨텍스트를 제공합니다. 헤더의 다음 부분을 사용자 지정할 수 있습니다.

  • 위치 및 스타일: 헤더의 세로 배치와 시각적 디자인(높이 및 배경 처리 포함)을 조정합니다.
  • 헤더 요소: 제목 텍스트 스타일 및 보조 아이콘 모양과 같은 특정 구성 요소를 사용자 지정할 수 있습니다.

그리드 및 목록 항목

미디어 콘텐츠는 사용자가 효율적으로 탐색할 수 있도록 그리드 또는 목록 형태로 구성됩니다. 가독성과 한눈에 파악하기 쉽도록 레이아웃을 사용자 지정할 수 있습니다.

  • 항목 스타일링: 썸네일의 크기와 모양, 제목 및 부제목의 글꼴을 포함하여 개별 항목의 시각적 모양을 사용자 지정할 수 있습니다.
  • 레이아웃 선택: 표시할 콘텐츠 유형에 따라 그리드 또는 목록 형식 중에서 선택하세요(예: 앨범 아트에는 그리드 형식을, 트랙 이름에는 목록 형식을 사용).
  • 핵심 사항: 사용자가 항목을 선택하거나 강조 표시했을 때 항목이 어떻게 표시되는지 정의합니다.

스타일 재생 레이아웃

재생 화면은 사용자에게 현재 재생 중인 미디어에 대한 제어 기능과 메타데이터를 제공합니다. 자동차 제조업체는 이 화면과 최소화된 제어 막대의 모양을 맞춤 설정하여 차량 브랜드에 부합하는 일관된 사용자 경험을 구현할 수 있습니다.

재생 화면 구조

재생 화면에는 일반적으로 다음과 같은 구성 요소가 포함됩니다.

  • 앨범 아트: 현존하는 미디어를 시각적으로 표현한 것.
  • 메타데이터: 트랙 제목, 아티스트 이름, 앨범 제목 등의 정보.
  • 재생 제어: 재생, 일시 정지, 건너뛰기, 셔플과 같은 필수 동작.
  • 진행률 표시줄: 현재 트랙의 진행 상황을 시각적으로 나타내는 표시기로, 탐색 가능한 썸네일이 포함되는 경우가 많습니다.

사용자 지정 옵션

디자인 토큰을 사용하여 재생 환경의 시각적 스타일을 수정할 수 있습니다.

메인 재생 화면

  • 배경 및 오버레이: 시스템 테마에 맞춰 배경색, 그라데이션 또는 투명도 수준을 사용자 지정할 수 있습니다.
  • 타이포그래피: 시스템 타이포그래피 토큰을 사용하여 트랙 제목과 아티스트 정보에 사용할 글꼴, 크기 및 굵기를 정의합니다.
  • 컨트롤 스타일: 재생 버튼(예: 재생, 일시 정지, 다음)의 모양, 색상 및 아이콘 스타일을 사용자 지정하여 다른 시스템 컨트롤과 일관성을 유지하세요.
  • 진행률 표시줄: 브랜드별 색상을 사용하여 진행률 표시줄의 트랙과 썸(썸)에 스타일을 적용합니다.

최소화된 컨트롤 바(MCB)

최소화된 제어 막대를 통해 사용자는 시스템의 다른 부분을 탐색하면서 미디어를 제어할 수 있습니다. 다음을 사용자 지정할 수 있습니다.

  • 위치 및 레이아웃: MCB가 화면에서 어디에 나타나는지, 그리고 그 안에서 요소들이 어떻게 배치되는지 결정합니다.
  • 요소 표시 여부: 최소화된 상태에서 표시할 컨트롤(예: 재생/일시 정지 또는 건너뛰기)을 선택합니다.
  • 스타일링: 일관된 색상과 둥근 모서리를 적용하여 MCB가 시스템 UI의 자연스러운 일부처럼 보이도록 하세요.

차량 내 검색 기능은 사용자가 차량에서 미디어를 빠르게 찾을 수 있도록 해주는 중요한 기능입니다. 앱 개발자는 검색 콘텐츠를 제공하고, 자동차 제조업체는 키보드와 검색 결과 표시 방식을 포함한 검색 오버레이를 설계해야 합니다.

키보드 디자인

검색 오버레이는 차량의 주행 상태에 따라 다양한 키보드 구성을 사용하여 안전성과 사용 편의성을 보장합니다.

  • 표준 키보드: 차량이 주차되었을 때 표시됩니다. 수동으로 텍스트를 입력할 수 있는 모든 기능을 갖춘 키보드입니다.
  • 주행 최적화 키보드: 차량이 움직일 때 표시됩니다. 이 버전은 일반적으로 음성 입력을 우선시하며, 운전자의 주의 산만을 최소화하기 위해 간소화된 수동 입력이나 제안 기능을 제공할 수 있습니다.

자동차 제조업체는 시스템 디자인 토큰을 사용하여 키 모양, 배경색, 서체 등 키보드의 시각적 스타일을 차량 브랜드에 맞게 맞춤 설정할 수 있습니다.

사용자가 검색어를 입력하면 결과가 오버레이 형태로 표시됩니다. 이 보기의 다음 부분을 사용자 지정할 수 있습니다.

  • 레이아웃 및 간격: 검색 결과가 그룹화되는 방식과 가독성을 높이기 위해 항목 사이에 제공되는 간격을 정의합니다.
  • 항목 모양: 검색 결과 목록 항목의 스타일을 사용자 지정할 수 있습니다. 여기에는 제목 및 부제목의 글꼴 스타일과 관련 썸네일 크기가 포함됩니다.
  • 빈 화면 및 오류 상태: 검색 결과가 없거나 연결 오류가 발생했을 때 오버레이의 모양을 디자인합니다.

앱 브랜딩 표시

구글이 내장된 차량에서 일관된 미디어 경험을 구현하기 위해 타사 앱 브랜딩이 시스템 UI에 통합되는 방식을 맞춤 설정할 수 있습니다. 이를 통해 사용자는 어떤 앱을 사용하고 있는지 알 수 있으면서도 시각적 표현은 차량의 전체적인 디자인과 일관성을 유지할 수 있습니다.

브랜드 요소

다음과 같은 앱별 요소의 배치 및 통합 방식을 사용자 지정할 수 있습니다.

  • 앱 아이콘: 미디어 서비스의 주요 시각적 식별자입니다.
  • 강조 색상: 앱 개발자가 제공하는 브랜드 고유 색상입니다.
  • 앱 이름: 미디어 서비스의 텍스트 기반 이름입니다.

사용자 지정 옵션

디자인 토큰을 사용하여 이러한 브랜딩 요소가 다양한 미디어 화면에서 어떻게 표시되는지 정의하세요.

아이콘 배치 및 스타일링

미디어 인터페이스 내에서 앱 아이콘이 표시되는 방식을 자유롭게 선택할 수 있습니다.

  • 위치 지정: 앱 아이콘이 콘텐츠 화면의 어느 위치(예: 앱 바 또는 재생 화면)에 표시될지 결정합니다.
  • 크기 및 모양: 시스템 토큰을 사용하여 아이콘의 크기와 모서리 반경을 정의하여 다른 시스템 수준 아이콘과 일치하도록 합니다.

포인트 색상을 통합하세요

앱 강조 색상을 사용하면 차량 UI를 과도하게 꾸미지 않고도 앱 브랜드를 은은하게 드러낼 수 있습니다.

  • 반응형 스타일링: 진행률 표시줄, 활성 탭 표시기 또는 버튼과 같은 UI 구성 요소에 앱의 강조 색상을 적용하는 방법을 선택할 수 있습니다.
  • 색상 정규화: 시스템에서 정의한 색상 변환을 적용하여 앱에서 제공하는 색상이 안전 및 가독성을 위한 대비 요구 사항을 충족하는지 확인합니다.

디자인 모범 사례

  • 시스템 조화 유지: 앱 브랜딩이 주요 운전 작업에 방해가 되거나 차량 시스템 전체 테마와 충돌하지 않도록 하십시오.
  • 가독성을 최우선으로 고려하세요. 앱의 강조 색상을 텍스트나 아이콘에 사용하는 경우, 선택한 배경과의 필요한 대비율을 충족하는지 확인하세요.
  • 일관성 있는 적용: 예측 가능한 사용자 경험을 제공하기 위해 모든 타사 미디어 앱에 브랜딩 규칙을 일관되게 적용하십시오.
  • 시스템 토큰 사용: 향후 시스템 업데이트와의 호환성을 유지하려면 브랜드 맞춤 설정을 제공된 디자인 토큰에 항상 매핑하십시오.