Compose의 자동 완성

베타: 이 문서는 자동 완성 API의 베타 버전을 위한 문서입니다. Issue Tracker에서 의견을 제출해 주세요.

비밀번호 관리자와 같은 일부 앱은 사용자가 제공한 데이터로 다른 앱의 구성요소를 채울 수 있습니다. 다른 앱의 구성요소를 채우는 앱을 자동 완성 서비스라고 합니다. 자동 완성 프레임워크는 앱과 자동 완성 서비스 간의 통신을 관리합니다.

사용자 인증 정보 및 양식 작성은 시간이 오래 걸리고 오류가 발생하기 쉬운 작업입니다. 자동 완성을 사용하면 사용자가 필드를 채우는 데 소요되는 시간을 절약하고 사용자 입력 오류를 최소화할 수 있습니다.

코드 몇 줄만 있으면 Compose에서 자동 완성을 구현할 수 있습니다. 이 기능은 사용자에게 다음과 같은 이점을 제공합니다.

사용자 인증 정보 입력

자동 완성 기능을 사용하면 다음과 같은 방법으로 사용자 인증 정보를 입력할 수 있습니다.

• 사용자가 자동 완성 시맨틱이 설정된 입력란을 탭하면 시스템에서 자동 완성 추천을 표시합니다.
• 시스템은 사용자에게 자동 완성 추천을 표시하고 사용자가 입력한 내용을 기반으로 이를 필터링합니다.

사용자 인증 정보 저장

사용자는 다음과 같은 방법으로 자동 완성을 통해 사용자 인증 정보를 저장할 수 있습니다.

• 시스템은 사용자가 자동 완성 사용 설정된 입력란에 새 정보 또는 업데이트된 정보를 입력할 때 정보를 저장하라는 메시지를 표시하는 저장 대화상자를 트리거합니다. 저장은 다음 두 가지 방법으로 할 수 있습니다.
  • 정보를 커밋하여 명시적으로 (예: 버튼 클릭을 통해)
  • 암시적으로, 사용자가 페이지에서 나가면
• 사용자 인증 정보 제공업체에 따라 입력란에 ContentType.NewPassword가 설정된 경우 시스템에서 사용자에게 강력한 비밀번호를 제안할 수 있습니다.

앱에서 자동 완성을 사용하여 사용자의 저장된 데이터 검색을 간소화할 수 있습니다. 자동 완성은 BasicTextField를 통해 텍스트 구성요소와 이 구성요소를 기반으로 하는 모든 Material 텍스트 필드를 지원합니다.

자동완성 설정...

기기 또는 에뮬레이터에서 Autofill API를 사용하려면 먼저 설정에서 자동 완성을 활성화해야 합니다. 여기에서 자동 완성에서 사용자 인증 정보를 저장할 사용자 인증 정보 제공자를 지정할 수 있습니다.

그림 1. 사용자 인증 정보 제공자를 지정하는 방법을 보여주는 설정 페이지

콘텐츠 유형을 사용하여 텍스트 필드에 자동 완성 추가

TextField가 자동 완성 사용 설정되어 있음을 나타내려면 필드에서 허용할 수 있는 유형으로 ContentType 시맨틱을 설정합니다. 이렇게 하면 자동 완성 서비스에 이 특정 입력란과 관련성이 높은 사용자 데이터 유형이 무엇인지 알려줍니다. ContentType.Username를 사용하여 사용자가 사용자 이름으로 채울 수 있는 TextField를 설정합니다.

TextField(
    value = textFieldValue.value,
    onValueChange = {textFieldValue.value = it},
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

ContentType 시맨틱을 설정하면 사용자는 기기의 사용자 인증 정보 제공업체에 이미 저장된 자동 완성 정보에 액세스할 수 있습니다. 예를 들어 사용자가 노트북의 Chrome 브라우저를 통해 앱에 이미 로그인했으며 사용자 인증 정보 제공업체를 통해 비밀번호를 저장한 경우 사용자 인증 정보가 자동 완성을 통해 제공됩니다.

여러 유형의 자동 완성 입력란 추가

경우에 따라 TextField가 두 개 이상의 ContentType를 가져야 할 수 있습니다. 예를 들어 로그인 입력란은 이메일 주소 또는 사용자 이름을 허용할 수 있습니다. + 연산자를 사용하여 TextField에 여러 콘텐츠 유형을 추가할 수 있습니다.

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

자동 완성으로 저장할 수 있는 모든 데이터 유형은 ContentType 참조를 참고하세요.

자동 완성으로 데이터 채우기

TextField에 ContentType를 추가하면 사용자가 사용자 인증 정보를 입력할 수 있도록 하기 위해 별도로 취해야 할 조치는 없습니다.

사용자가 자동 완성 사용 설정된 입력란을 클릭하면 저장된 관련 데이터가 있는 경우 키보드 위의 툴바에 사용자 인증 정보를 입력하라는 메시지가 표시되는 칩이 표시됩니다.

그림 2. 저장된 사용자 인증 정보를 보여주는 텍스트 툴바의 칩

탐색을 통한 자동 완성으로 데이터 저장

Compose는 사용자가 페이지에서 이동할 때를 자동으로 판단하고 입력된 사용자 인증 정보를 커밋합니다. 입력란에 자동 완성이 사용 설정되면 추가 코드 없이 사용자가 페이지에서 나가면 사용자 인증 정보가 자동으로 저장됩니다.

자동 완성으로 데이터를 명시적으로 저장

자동 완성을 사용하여 텍스트 필드를 통해 새 사용자 인증 정보를 명시적으로 저장하려면 자동 완성 관리자가 자동 완성 컨텍스트를 커밋 (또는 취소)해야 합니다. 그러면 로컬 자동 완성 관리자가 필요할 때마다 자동 완성 프레임워크와 통신합니다. 사용자가 입력한 사용자 인증 정보를 삭제하려면 AutofillManager.cancel을 호출하여 저장하지 않고 대기 중인 데이터를 삭제합니다.

다음 스니펫은 버튼을 사용하여 자동 완성으로 데이터를 명시적으로 저장하는 방법을 보여줍니다.

1. 다음과 같은 방법으로 검색할 수 있는 자동 완성 관리자를 보유할 로컬 변수를 만듭니다.

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. TextField(s)에서 Modifier.semantics를 통해 원하는 콘텐츠 유형을 추가합니다.

   val autofillManager = LocalAutofillManager.current
   
   Column {
       TextField(
           value = textFieldValue.value,
           onValueChange = { textFieldValue.value = it },
           modifier = Modifier.semantics { contentType = ContentType.NewUsername }
       )
   
       Spacer(modifier = Modifier.height(16.dp))
   
       TextField(
           value = textFieldValue.value,
           onValueChange = { textFieldValue.value = it },
           modifier = Modifier.semantics { contentType = ContentType.NewPassword }
       )
   }
   AutofillSnippets.kt

3. 버튼 클릭을 통해 필요에 따라 자동 완성 컨텍스트를 커밋합니다.

   val autofillManager = LocalAutofillManager.current
   
   Column {
       TextField(
           value = textFieldValue.value,
           onValueChange = { textFieldValue.value = it },
           modifier = Modifier.semantics { contentType = ContentType.NewUsername },
       )
   
       Spacer(modifier = Modifier.height(16.dp))
   
       TextField(
           value = textFieldValue.value,
           onValueChange = { textFieldValue.value = it },
           modifier = Modifier.semantics { contentType = ContentType.NewPassword },
       )
   
       // Submit button
       Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
   }
   AutofillSnippets.kt

커밋은 사용자가 화면에서 벗어날 때마다 호출됩니다. 제출 버튼이 탐색에 연결된 경우 커밋을 호출할 필요가 없습니다. 그래도 제출을 클릭하여 저장 대화상자를 트리거하려면 여기에 커밋을 추가합니다.

사용자가 버튼을 클릭하면 선택한 사용자 인증 정보 제공업체에 사용자 인증 정보를 저장하라는 메시지가 표시된 하단 시트가 표시됩니다.

그림 3. 사용자에게 비밀번호를 저장하라는 메시지를 표시하는 하단 시트

강력한 비밀번호 추천을 통해 자동 완성으로 데이터 저장

사용자 인증 정보 제공업체에 따라 NewUsername 및 NewPassword 콘텐츠 유형을 사용하는 경우 키보드에 강력한 비밀번호 추천 버튼이 표시될 수 있습니다. 이 버튼을 클릭하면 사용자 인증 정보를 저장할 수 있는 하단 시트가 표시됩니다. 사용자가 이 환경을 이용할 수 있도록 하려면 다른 작업을 구현할 필요가 없습니다.

그림 4. 키보드 툴바의 안전한 비밀번호 추천 칩

그림 5. 사용자에게 안전한 비밀번호를 사용하라는 메시지를 표시하는 하단 시트

문제 해결

'저장' 사용자 여정을 호출할 때 '나중에'를 두 번 이상 클릭하면 사용자 인증 정보 제공업체에서 더 이상 하단 시트를 표시하지 않을 수 있습니다. 이 기능을 다시 사용 설정하고 다시 표시하려면 '비밀번호 저장'을 차단한 특정 앱을 삭제해야 합니다.

그림 6.사용자에게 비밀번호 저장을 요청하는 하단 시트

자동 완성 추가 맞춤설정

일반적인 자동 완성 사용자 여정에서 자동 완성 지원 구성요소가 사용자 인증 정보로 채워지면 색상이 변경되고 강조 표시되어 자동 완성이 완료되었음을 사용자에게 알립니다.

이 강조 표시 색상을 맞춤설정하려면 CompositionLocal를 사용하고 원하는 색상을 제공합니다.

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

기본 자동 완성 강조 표시 색상은 Color(0x4dffeb3b)로 정의됩니다.