[HIG] Components - Onscreen keyboards

Onscreen Keyboards

iOS, iPadOS, tvOS에서 시스템은 사용자로부터 데이터를 입력받기 위해 다양한 종류의 onscreen keyboard를 제공한다.

 

Onscreen 키보드는 현재 작업에 최적화된 특정 키 세트를 제공한다.

예를 들어 이메일을 입력 받을 때에는 @와 마침표가 포함될 수 있다.

온스크린 키보드에서는 키보드 단축키를 사용할 수 없다.

 

필요시에 앱에서 원하는 데이터를 입력 가능한 키보드를 커스텀하여 기본 키보드 대신 사용할 수 있다.

또한 커스텀 키보드 앱 확장 프로그램을 만들어서 필요한 사람들이 설치하여 사용할 수 있도록 할 수 있다.

 

Best Practices

사용자가 편집하는 콘텐츠의 유형에 맞게 키보드를 조정하자!

숫자를 입력해야 한다면 숫자 키보드를, 이메일을 입력해야 한다면 이메일 키보드로 설정하자

 

텍스트 입력 영역에 semantic meaning을 지정하면 시스템이 자동으로 예상 입력 유형과 일치하는 키보드를 제공한다.

UIKeyboardType과 UITextContentType에서 다양한 키보드와 입력 유형들을 제공하고 있다.

 

시스템 키보드 종류(출처: https://dpectrum.app/blog/115)

텍스트 입력 경험의 향상을 위해 "Return" 버튼의 텍스트를 바꾸는 것도 고려해볼 수 있다. (위 사진에서는 Next 버튼)

Join, Done 등으로 바꿀 수 있다. (UIReturnKeyType)

 

Custom Input Views

- 앱에서 데이터 입력 작업을 향상시키는 사용자 지정 기능을 제공하려는 경우 Custom Input View를 만들 수 있다.

시스템 제공 키보드 대신 커스텀한 Input View를 넣어 입력 효율을 높일 수 있다. (InputViewController , InputView)

생년월일 텍스트필드의 InputView를 DatePicker로 바꾼 모습

@IBOutlet weak var birthdayTextField: UITextField!
private let datePicker = UIDatePicker()

// 생략
    birthdayTextField.inputView = datePicker

 

- 커스텀 inputView가 앱의 컨텍스트에 잘 어울리는지 확인해야 한다!

데이터 입력을 간단하고 직관적으로 만드는 것 외에도 사용자 지정 입력 보기를 사용하면 어떤 이점이 있는지 사람들이 이해할 수 있어야 한다. 그렇지 않으면 사용자는 앱에서 시스템 키보드를 다시 사용할 수 없는 이유에 대해 의문을 가질 수도 있다.

 

- 사용자가 입력하는 동안 표준 키보드 사운드를 재생한다.

키보드 사운드는 사용자가 시스템 키보드의 키를 탭할 때 익숙한 피드백을 제공하므로 커스텀 inputView에서 키를 탭할 때 동일한 사운드를 기대할 수 있다. (playInputClick)

설정 > 사운드에서 모든 키보드 상호작용에 대해 키보드 클릭 소리를 끌 수 있다. 

 

- 커스텀 Input Accessory View를 제공하는 것 또한 고려해보자

Input Accessory View는 사용자가 작업 중인 데이터와 관련된 앱별 기능을 제공하는 뷰를 화면 키보드 위에 나타날 수 있다.(InputAccessoryView)

현재 작업과 관련이 없는 콘텐츠를 표시하기 위해 InputAccessoryView를 사용하지 말자.

UITextField에 InputAccessoryView로 Toolbar를 넣은 모습

let textField = UITextField()

// 생략
    let toolbar = UIToolbar()
    let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: #selector(done))
    let rightButton = UIBarButtonItem(title: "button", style: .plain, target: nil, action: nil)
    let flexibleSpaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    toolbar.sizeToFit()
    toolbar.setItems([rightButton, flexibleSpaceButton, doneButton], animated: false)
    textField.inputAccessoryView = toolbar

 

 

Custom Keyboards

- 앱 익스텐션을 만들어서 시스템 키보드를 대체시킬 수 있다.

App Extension은 사람들이 시스템의 특정 영역 기능을 확장하기 위해 설치하고 사용할 수 있도록 제공하는 코드이다. (App Extensions)

사용자들이 Settings에서 커스텀 키보드 사용을 활성화하면 Secure TextField와 Phone Number Field를 제외한 앱 내 모든 곳에서 해당 키보드를 사용할 수 있게 된다.

사용자는 여러개의 커스텀 키보드를 활성화하고 언제든 키보드를 전환할 수 있다. (Creating Custom Keyboard)

 

 

- 커스텀 키보드는 새로운 텍스트 입력 방식이나 시스템에서 지원하지 않는 언어로 입력하는 기능 등 고유한 키보드 기능을 시스템 전체에 노출하려는 경우에 유용하다.

사용자가 앱에 있는 동안에만 사용할 수 있는 커스텀 키보드를 제공하고자 할 때는 커스텀 키보드보다 Custom Input View를 사용하는 것을 고려해 보자!

 

 

- 키보드 간에 전환을 명확하고 쉬운 방법으로 제공하자!!

사용자들은 시스템 기본 키보드의 지구본 버튼을 터치하면 다른 키보드로 빠르게 전환된다는 것을 알고 있으며, 다른 키보드에서도 이와 유사한 직관적인 경험을 기대한다.

키보드 전환을 위한 지구본 버튼

 

 

- 시스템에서 제공하는 키보드 기능과 중복되지 않도록 주의하자.

일부 디바이스에서는 커스텀 키보드를 사용하는 경우에도 이모티콘/지구본 버튼(키)과 받아쓰기 버튼이 키보드 아래에 자동으로 표시된다.

우리가 만든 앱은 이러한 버튼에 영향을 줄 수 없으며, 키보드에서 이러한 버튼을 반복하면 혼동을 일으킬 수 있다

 

 

- 앱에서 키보드 튜토리얼을 제공하는 것을 고려해 보자!

사용자들은 시스템 키보드에 익숙하기 때문에 새로운 키보드에 적응하는 데 시간이 걸릴 수 있다.

앱 내에서 사용 방법을 알려주는 방식으로 프로세스를 더 쉽게 진행할 수 있다.

예를 들어, 키보드 활성 방법, 텍스트 입력 중에 키보드 활성 방법, 키보드 사용 후 다시 표준 키보드로 전환 하는 방법 등이 있다.

키보드 자체 내에 도움말 콘텐츠를 표시하지는 말자!

 

 

Platform considerations

• iOS, iPadOS
  • keyboard layout guide를 사용하여 키보드가 우리의 앱의 인터페이스와 통합된 부분처럼 느껴지게 할 수 있다.
  • 키보드 레이아웃 가이드를 사용하면 키보드가 화면에 표시되는 동안 인터페이스의 중요한 부분을 계속 볼 수 있다.
  • iOS Keyboard Layout Guide