이 페이지에서는 설정 마법사(SUW)의 흐름을 만들고, 설명문을 작성하고, 필수 및 선택 단계를 포함하는 방법을 설명합니다.
다음 화면들을 사용자 지정할 수 있습니다:
| 제한된 사용자 지정: 콘텐츠 모달 | 필수 맞춤 설정: Google에서 제공하는 템플릿 |
|---|---|
| 구글 서비스 약관 구글 로그인 구글 제미니 구글 플레이 | 환영 화면 언어 선택 연결 및 Wi-Fi 설정 프로필 생성 (프로필 이름) 요약 화면 블루투스 장치 설정 프로필 보호(프로필 잠금 설정) 로딩 화면 |
콘텐츠 모델을 맞춤 설정하세요
콘텐츠 모달 또는 AppStyledView UI 구성 요소에는 Google 로그인 모듈 및 Google 서비스 동의를 포함한 Google 고유 화면이 포함되어 있습니다. 사용자가 자동차 제조업체가 아닌 Google과 상호 작용하고 있음을 명확히 이해할 수 있도록 모달 구성 요소는 제한적인 사용자 지정만 지원합니다.
완벽한 통합을 위해 다음 사항들을 사용자 지정할 수 있습니다.
내비게이션 바: 내비게이션 바는 모달 창 상단 또는 측면에 배치할 수 있습니다. 또한 내비게이션 아이콘(이미지, 크기, 색상, 위치), 배경(이미지, 투명도, 색상), 너비 또는 높이(배치에 따라 다름)를 사용자 지정할 수 있습니다.
모달 설정: Google 화면에서 가로 레이아웃으로 표시되려면 콘텐츠 영역의 너비가 1224dp보다 커야 합니다. 그 외에는 모달의 너비, 높이, 화면 내 위치, 모서리 둥글기, 테두리 스타일을 사용자 지정할 수 있습니다. 모달 주변에 충분한 여백을 확보할 수 없는 경우에는 전체 화면 오버레이를 사용하는 것이 좋습니다.
모달 배경: 이미지 또는 색상, 투명도.
콘텐츠 모달 사용자 지정 예시
설정 과정의 일부로 Google에서 제공하는 템플릿을 사용할 수 있습니다. 이 옵션을 선택하는 경우, UI 스타일이 혼합되지 않도록 화면을 사용자 지정해야 합니다.
그림 3과 그림 4는 콘텐츠 모달 사용자 지정의 예시입니다.
Google에서 제공하는 화면을 맞춤 설정하세요
설정 과정의 일부로 Google에서 제공하는 템플릿을 사용할 수 있습니다. 이 옵션을 선택하는 경우, UI 스타일이 혼합되지 않도록 화면을 사용자 지정해야 합니다.
몰입형 보기와 비몰입형 보기의 차이점
SuW를 표시하는 방법에는 두 가지 옵션이 있습니다.
몰입형 보기: 이 보기에서는 상태 표시줄 및 시스템 UI와 같은 필수적이지 않은 기능이 숨겨집니다. 몰입형 보기를 사용하여 방해 요소를 최소화하세요.
비몰입형 보기: 이 보기에서는 사용자가 상태 표시줄과 같은 시스템 기능을 볼 수 있습니다. 시스템 UI를 표시하는 것이 필수적인 경우에만 비몰입형 보기를 사용하십시오. 이 보기를 사용하는 경우, 사용자가 설정 환경에서 벗어나게 할 수 있는 작업은 피하십시오.
가로 레이아웃 사용자 지정
가로 모드에서 사용자 지정 가능한 요소는 다음과 같습니다.
레이아웃 및 배경
- 탐색 모음: 탐색 모음에는 뒤로 가기 버튼이 있습니다. 모음의 레이아웃과 배경, 탐색 아이콘(이미지, 크기, 색상, 위치), 배경(이미지, 투명도, 색상) 및 너비를 사용자 지정할 수 있습니다.
- 액션 바: 액션 바는 페이지 하단에 고정된 컨테이너로, 기본적으로 투명한 콜투액션 버튼을 포함합니다. 액션 바의 높이와 패딩, 배경 이미지, 투명도 및 색상을 사용자 지정할 수 있습니다.
- 페이지 레이아웃: 열 비율 및 페이지 여백.
- 페이지 배경: 배경색 또는 이미지.
구성 요소
- 메인 이미지: 이미지, 크기 및 배치.
- 드롭다운 메뉴: 글꼴(글꼴 종류, 크기, 색상), 아이콘(이미지, 크기, 색상) 및 구분선.
- 버튼: 글꼴(종류, 크기, 색상), 배경(이미지, 투명도, 색상), 버튼 크기(너비, 높이), 배치, 여백, 둥근 모서리(기본 및 보조 동작에 대한 스타일 지정, 그리고 버튼 상태별 차별화).
- 페이지 헤더: 글꼴(글꼴 종류, 크기, 색상), 제목 및 부제목 배치, 문자열, 페이지 아이콘(아이콘 포함 여부, 아이콘 이미지, 크기, 색상).
- 목록: 글꼴(글꼴 종류, 크기, 색상), 아이콘(이미지, 크기, 색상, Google 아이콘은 사용자 지정 불가), 배치, 여백, 목록 항목 높이, 구분선. 문자열을 변경하려면 Google에 문의하여 승인을 받아야 합니다.
로딩 화면
- 애니메이션: (불확정) 또는 이미지, 크기, 배치.
- 문자열: 글꼴(종류, 크기 및 색상), 배치 및 문자열.
맞춤형 가로 레이아웃 예시
환영 화면이나 요약 화면을 맞춤 설정하는 한 가지 방법은 Google에서 제공하는 템플릿을 사용하는 것입니다.
세로 모드 사용자 지정
세로 모드에서 사용자 지정 가능한 요소는 다음과 같습니다.
레이아웃 및 배경
- 탐색 모음: 탐색 모음에는 뒤로 가기 버튼이 있습니다. 모음의 레이아웃과 배경, 탐색 아이콘(이미지, 크기, 색상, 위치), 배경(이미지, 투명도, 색상) 및 너비를 사용자 지정할 수 있습니다.
- 액션 바: 액션 바는 페이지 하단에 고정된 컨테이너로, 기본적으로 투명한 콜투액션 버튼을 포함합니다. 액션 바의 높이와 패딩, 배경 이미지, 투명도 및 색상을 사용자 지정할 수 있습니다.
- 페이지 레이아웃: 페이지 여백.
- 페이지 배경: 배경색 또는 이미지.
구성 요소
- 메인 이미지: 이미지, 크기, 배치.
- 드롭다운 메뉴: 글꼴(글꼴 종류, 크기, 색상), 아이콘(이미지, 크기, 색상), 구분선.
- 버튼: 글꼴(종류, 크기, 색상), 배경(이미지, 투명도, 색상), 버튼 크기(너비, 높이), 배치, 여백, 모서리 둥글게 처리. 기본 동작과 보조 동작, 그리고 버튼 상태에 따라 스타일을 다르게 적용해야 합니다.
- 페이지 헤더: 글꼴(글꼴 종류, 크기, 색상), 제목 및 부제목 배치, 문자열, 페이지 아이콘(아이콘 포함 여부, 아이콘 이미지, 크기 및 색상).
- 목록: 글꼴(글꼴 종류, 크기, 색상), 아이콘(이미지, 크기, 색상, Google 아이콘은 사용자 지정 불가), 배치, 여백, 목록 항목 높이, 구분선. 문자열을 변경하려면 Google에 문의하여 승인을 받아야 합니다.
로딩 화면
- 애니메이션: 애니메이션(불확정) 또는 이미지, 크기, 배치.
- 문자열: 글꼴(종류, 크기, 색상), 배치, 문자열.
샘플 맞춤형 세로 레이아웃