Jetpack Compose: 사용자 입력 경험을 향상시키는 KeyboardOptions & Actions

다음 버튼이 안 눌리거나, 키보드가 원하는 대로 안 뜬다면? keyboardOptions와 keyboardActions를 정확히 이해하고 적용하면 이런 문제를 깔끔하게 해결할 수 있다.

Jetpack Compose의 TextField를 사용할 때 keyboardOptions와 keyboardActions는 사용자 입력 경험을 개선하고, 입력 흐름을 제어하는 데 필수적인 역할을 한다. 이 두 속성은 특히 사용자 입력이 많은 화면에서 입력 효율성과 편의성을 높이는 데 중요하다.

1. KeyboardOptions

개념

keyboardOptions는 키보드의 레이아웃 타입, IME 액션 버튼의 종류, 자동 대문자화 여부, 키보드 언어 설정 등을 지정할 수 있는 설정이다.

필요성

• 숫자만 입력받고 싶을 때 숫자 키보드를 띄우거나,
• 이메일 입력 시 이메일에 최적화된 키보드를 띄우는 등
  입력 목적에 맞는 키보드를 띄움으로써 UX를 향상시킬 수 있다.

주요 속성

• keyboardType: 키보드 레이아웃을 설정
  • 예: KeyboardType.Text, KeyboardType.Number, KeyboardType.Email 등
• imeAction: 키보드 오른쪽 아래의 버튼 동작을 지정
  • 예: ImeAction.Done, ImeAction.Next, ImeAction.Search, ImeAction.Send 등사용 예시
  • TextField( value = email, onValueChange = { email = it }, keyboardOptions = KeyboardOptions( keyboardType = KeyboardType.Email, imeAction = ImeAction.Next ) )

2. KeyboardActions

개념

keyboardActions는 사용자가 키보드의 IME 액션 버튼(예: 완료, 다음 등)을 눌렀을 때 수행할 동작을 지정한다.

필요성

• "다음"을 눌렀을 때 포커스를 다음 입력창으로 이동하거나,
• "완료"를 눌렀을 때 입력을 마무리하고 키보드를 내리는 등의 처리가 가능하다.

주요 메서드

• onNext: ImeAction.Next가 눌렸을 때 실행될 콜백
• onDone: ImeAction.Done이 눌렸을 때 실행될 콜백
• 그 외: onGo, onSearch, onSend 등

사용 예시

val focusManager = LocalFocusManager.currentTextField(
    value = email,
    onValueChange = { email = it },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Email,
        imeAction = ImeAction.Next
    ),
    keyboardActions = KeyboardActions(
        onNext = {
            focusManager.moveFocus(FocusDirection.Down)
        }
    )
)

마무리

• keyboardOptions는 어떤 키보드를 보여줄지와 키보드의 동작 버튼을 지정하는 역할
• keyboardActions는 키보드 동작 버튼이 눌렸을 때 수행할 행동을 지정

이 두 가지를 적절히 활용하면 Jetpack Compose 앱에서 훨씬 더 매끄럽고 직관적인 입력 경험을 제공할 수 있다.