앱에 로그인해야 하는 경우 제안된 로그인 방법 중 하나 이상을 사용하여 로그인 과정을 제공해야 합니다.
제공된 샘플 코드를 조정하여 이 흐름을 만들 수 있습니다. 이 프로세스에는 다음 단계가 포함됩니다.
- 기본 로그인 방법 및 모든 백업 방법 선택
- 로그인 화면의 콘텐츠 조정
- 시각적 스타일 맞춤설정
샘플 코드는 범용 Android 뮤직 플레이어 (UAMP) 자동차 앱에서 제공됩니다. 이 코드는 다양한 화면 크기에 맞게 조정되도록 설계되었으므로 세로 모드와 가로 모드의 문제를 처리할 필요가 없습니다.
앱에 샘플 코드를 적용할 때 여기 제공된 가이드라인에 따라 로그인 환경이 차량에 최적화된 상태로 유지될 수 있습니다. 사용자가 로그인 환경에 액세스하는 방법을 알아보려면 로그인, 설정, 검색을 방문하세요.
로그인 방법 선택
샘플 코드를 조정하는 첫 번째 단계는 제공할 3가지 로그인 방법을 결정하는 것입니다.
| 로그인 방법 | 작동 방식 |
|---|---|
|
A) Google 로그인 (적극 권장) |
Google 계정 및 비밀번호 입력 |
|
B) 전화 로그인
(앱에서 Google 로그인을 지원하지 않는 경우 백업 옵션 또는 기본 옵션으로 권장됨) |
휴대전화의 자동차 화면에서 PIN 코드 입력 |
|
C) 표준 로그인
(백업 옵션으로 가장 적합) |
앱의 사용자 이름 (또는 이메일)과 비밀번호를 입력합니다. |
앱에서 지원하는 경우 Google 로그인이 기본 옵션으로 표시되어야 하며, 사용자에게 가장 편리합니다. 앱에서 Google 로그인을 지원하지 않는다면 휴대전화 로그인이 기본 옵션으로 가장 적절합니다.
샘플 코드의 로그인 과정에는 세 가지 방법 모두의 화면이 포함되어 있습니다. 지원하는 옵션 (기본 옵션과 지원할 백업 옵션 모두)을 결정하고 나면 샘플 코드에서 남은 모든 옵션을 사용 중지하고 나머지 화면을 맞춤설정하는 데 집중할 수 있습니다.
A) Google 로그인
앱이 Google 로그인을 지원하고 시스템에서 Google 로그인을 사용할 수 있는 경우 이 방법을 로그인 과정의 기본 옵션으로 하는 것이 가장 좋습니다. 사용자가 기존 Google 계정을 확인하기만 하면 되며,
전화 로그인 또는 표준 로그인을 제공하는 경우 랜딩 화면 하단의 텍스트 링크에서 사용할 수 있는 백업 옵션으로 표시되어야 합니다.
Google 로그인 절차
Google 로그인의 경우 백업 옵션도 제공하지 않는 한 방문 페이지만 디자인해야 합니다. 전화 로그인과 표준 로그인에는 해당 옵션의 화면과 흐름이 요약되어 있습니다.
B) 전화 로그인
앱에서 Google 로그인을 지원하지 않는 경우 로그인 과정을 전화 로그인의 기본 옵션으로 사용하는 것이 가장 좋습니다. (휴대전화 로그인은 Google 로그인의 백업 옵션으로 제공할 수도 있습니다.) 휴대전화 로그인을 사용하면 사용자가 사용자 이름이나 비밀번호를 기억할 필요가 없습니다. 대신 제공된 PIN을 입력합니다.
다음 두 가지 방법 중 하나로 전화 로그인을 할 수 있습니다.
- 사용자가 자동차 화면에서 PIN을 확인하고 휴대전화에 입력합니다.
- 사용자가 휴대전화에서 PIN을 조회하여 자동차 화면에 입력합니다.
표준 사용자 이름과 비밀번호도 함께 제공되는 경우 랜딩 화면 하단의 텍스트 링크에서 사용할 수 있는 백업 옵션으로 표시되어야 합니다.
휴대전화 로그인 절차
전화 로그인을 사용하면 두 가지 버전의 방문 페이지 중에서 선택할 수 있습니다. 하나는 휴대전화에 입력할 수 있는 PIN을 표시하는 한 버전이고, 다른 하나는 사용자가 휴대전화에 제공된 PIN을 입력할 수 있는 버전입니다.
방문 페이지 화면은 표준 로그인도 백업 옵션으로 제공하지 않는 한 디자인해야 하는 화면뿐입니다.
C) 표준 로그인
앱에서 표준 로그인을 사용하려면 사용자가 방문 페이지에 사용자 이름 (또는 이메일)을 입력하고 다음 페이지에서 비밀번호를 입력해야 합니다.
표준 로그인은 Google 로그인 또는 휴대전화 로그인의 백업 옵션으로 제공할 수 있습니다. 또는 다른 두 옵션 중 어느 것도 지원되지 않는 경우 기본 로그인 옵션이 될 수 있습니다. 하지만 표준 로그인은 기본 단계로 권장하지 않습니다. 기본 로그인 단계에서 여러 단계를 거치고 사용자 이름과 비밀번호를 기억해야 하기 때문입니다.
사용자가 사용자 이름과 비밀번호를 기억하지 못할 수 있으므로 검색 또는 재설정 옵션을 제공하는 것이 중요합니다. 이러한 옵션은 입력 화면 하단의 텍스트 링크를 통해 제공해야 하므로 사용자 이름과 비밀번호 입력의 기본 작업과 관심을 끌지 않습니다.
표준 로그인 흐름
표준 로그인 흐름은 2개의 화면 (사용자 이름 입력 및 비밀번호 입력)의 시퀀스이며, 다른 2개의 화면으로 선택적으로 이동할 수 있습니다. 4개 화면의 버전이 모두 필요합니다.
화면 콘텐츠 조정
앱에서 지원할 로그인 방법을 결정했다면 로그인 화면에 어떤 화면이 표시될지 알 수 있습니다. 지원하기로 선택한 유형에 따라 1~6개의 화면이 표시될 수 있으며, 이 화면에는 스타일 맞춤설정에서 설명한 대로 콘텐츠와 스타일을 지정해야 합니다.
백업 옵션 없이 Google 로그인 또는 휴대전화 로그인을 선택하면 로그인 화면이 1개 생성됩니다. 반면 다른 두 가지 옵션을 모두 사용하여 Google 로그인을 선택하면 6개의 화면 (Google 로그인용 1개, 휴대전화 로그인용 1개, 표준 로그인용 4개)이 표시됩니다.
이러한 화면의 예는 Google 로그인, 휴대전화 로그인, 표준 로그인 섹션에 나와 있습니다. 샘플 코드로 작업하는 경우 코드에서 만든 이러한 화면의 버전을 수정할 수 있습니다. 샘플 코드를 사용하지 않는 경우에도 다음 예를 모델로 사용해야 합니다.
이러한 화면의 콘텐츠를 다음과 같이 조정해야 합니다.
- 가상의 Aural 앱의 로고를 앱 로고로 교체합니다.
- 앱과 관련 콘텐츠를 참조하도록 텍스트 및 링크 수정
- PIN 표시 로직 조정
로고 교체 및 PIN 표시 로직은 아래에서 더 자세히 설명합니다.
앱 로고 교체
샘플 코드에서 필요하지 않은 화면을 삭제한 다음 나머지 화면에 가상의 Aural 앱의 로고 대신 앱 로고를 표시하는 것이 좋습니다. 이러한 대체는 아래에 설명된 페이지 디자인의 다른 측면에 영향을 미칠 수 있습니다.
로고를 바꾸면 다른 페이지 요소의 색상을 맞춤설정하거나 로고 주변의 여백을 조정하는 등의 기타 미세 조정이 발생할 수 있습니다.
로고에 어울리는 색상 맞춤설정
앱 로고가 주변 페이지 요소와 잘 어울리도록 하려면 앱의 강조 색상을 사용하도록 로그인 코드를 맞춤설정하세요. 스타일 맞춤설정에 관해서는 다음 단계인 스타일 맞춤설정에서 설명합니다.
로고 정리 조정
Aural 로고를 앱 로고로 교체한 다음, Aural 로고와 같은 크기로 조정됩니다. 브랜드 가이드라인을 충족하지 않는 여백이 많은 경우 로고 파일의 로고 가장자리에 공백을 추가할 수 있습니다.
또 다른 방법은 화면의 간격을 조정하는 것입니다. 그러나 이 방법을 사용할 때는 각 레이아웃에 맞게 로고 주위의 간격을 개별적으로 조정해야 합니다. 따라서 로고 파일 내에 여백을 늘리는 가장 쉬운 방법은 로고 파일 내에 공간을 추가하는 것입니다.
PIN 표시 로직 조정
샘플 로그인 흐름은 간단한 RAND 함수를 사용하여 PIN 코드를 무작위로 생성합니다. 더 강력한 비즈니스 로직을 기반으로 PIN 생성 방법을 구현하려면 유니버설 Android 뮤직 플레이어 (UAMP) Automotive 앱의 일부인 PinCodeSignInFragment.kt에서 관련 코드를 수정해야 합니다.
스타일 맞춤설정
로그인 화면의 콘텐츠를 조정한 후 브랜드에 맞게 전역 스타일을 여러 UI에 영향을 주는 UI 요소에 적용할 수 있습니다.
브랜드 스타일 지정을 반영하도록 다음 일부 또는 전체를 맞춤설정할 수 있습니다.
- 입력란 스타일 입력: 채우기, 윤곽선 또는 밑줄
- 버튼 스타일: 모서리가 둥근 직사각형
- 색상: 강조, 버튼 채우기 및 텍스트, 양식 채우기 및 획, 양식 오류
- 서체: 글꼴, 텍스트 크기
다음은 이러한 맞춤설정 옵션의 예입니다. 맞춤설정된 스타일은 대비, 텍스트 및 터치 영역의 최소 크기, 맞춤 화면 가이드라인에 설명된 기타 요구사항을 유지해야 합니다.
입력란 및 버튼
샘플 로그인 흐름은 윤곽선으로 표시된 입력란과 둥근 버튼을 기본 스타일로 사용합니다. 예를 들어 둥근 버튼이 아닌 직사각형 버튼과 같은 다양한 스타일이 브랜드를 더 잘 표현할 수 있다면 이러한 기본 스타일을 변경하세요.
색상
양식과 버튼에 사용되는 강조 색상과 오류 상태 색상을 맞춤설정하면 로그인 과정 전반에서 브랜드를 표현하는 데 도움이 됩니다. 이러한 색상 맞춤설정은 입력란과 버튼, 링크가 충돌하지 않고 앱 로고와 같은 페이지에 잘 표시되도록 하는 것도 중요합니다.
색상을 지정할 때는 인접한 페이지 요소 간의 대비율이 4.5:1 이상이어야 합니다. 색상에 관한 추가 안내와 Android Automotive OS에 사용되는 색상 팔레트에 관한 자세한 내용은 시각적 기초: 색상을 참고하세요.
서체
샘플 로그인 흐름의 서체는 맞춤설정할 수 있지만 가독성에 영향을 미칠 수 있는 변경사항에 주의하세요. 자동차 화면의 텍스트 가독성과 관련된 글꼴, 최소 유형 크기 및 기타 고려사항에 대한 정보는 시각적 토대: 서체를 참고하세요.
로그인 가이드라인
이 섹션의 가이드라인은 Android Automotive OS에서 최적의 사용성을 위한 로그인 작동 방식과 관련이 있습니다. 범용 Android 뮤직 플레이어 (UAMP) 앱에서 제공하는 샘플 로그인 흐름은 대부분의 경우 이 가이드라인을 충족합니다. 계정을 만들 방법은 없습니다. 앱별 로직이 필요하기 때문입니다.
이 섹션에 설명된 맞춤설정 절차를 따랐으며 코드의 작동 방식을 변경하지 않은 경우 로그인 가이드라인은 아래 가이드라인에 따라 정상이어야 합니다. 하지만 맞춤 스타일이 맞춤 화면 가이드라인에 지정된 일반 요구사항을 충족하는지 확인하세요.
이 섹션에서 설명하는 내용 외에도 로그인 화면이나 코드를 크게 수정한 경우 일반적인 맞춤 화면 가이드라인과 아래의 특정 로그인 가이드라인과 관련된 로그인 과정을 확인하세요.
| 요구사항 수준 | 가이드라인 |
|---|---|
| 해야 하는 작업 |
앱 개발자는 다음 단계를 따라야 합니다.
|
| 가능한 작업 |
앱 개발자는 다음을 할 수 있습니다.
|
이유:
일관된 미디어 경험. 하나의 미디어 앱에 사용할 수 있도록 설계된 로그인 화면은 다른 미디어 앱의 로그인 화면과 폭넓게 일관된 환경을 제공해야 합니다.
일관된 디자인과 분위기. 로그인 화면은 Android Automotive OS의 기본 디자인 원칙과 시각적 기반을 지원해야 합니다.