2022. 7. 11. 07:50ㆍUX Engineer 이야기
들어가며
혹시 모바일에서 서비스에 회원가입을 한다던가, 무언가 내용을 입력할 때에 특수문자 키보드로 바꾸었다가, 다시 영문으로 바꾸었다가..
상황에 맞지 않는 키보드가 나와서 번거로운 적 있으신가요?
의미 있는 HTML을 사용하여 사용자에게 더욱 편리한 UX를 제공할 수 있어요.
입력과 관련하여 어떻게 하면 좋을지 알아볼까요?
none
가상 키보드를 사용하지 않아요. 키보드를 직접 구현할 때에 사용해요.
<input inputmode="none" />text (default)
기본값으로 제공되고, type 속성에 따라 제공되는 가상 키보드가 표시돼요.
<input inputmode="text" />
decimal
소수점(.)을 제공하는 숫자형 키보드를 보여줘요.
<input inputmode="decimal" />
numeric
숫자형 키보드를 보여줘요. decimal 모드의 키보드와 약간 차이가 있어요.
<input inputmode="numeric" />
tel
전화번호를 입력하는 키보드가 나타나요. 저는 iPhone을 사용하는데요. 나의 전화번호를 입력하기 편하도록 자동 완성도 나오네요.
<input inputmode="tel" />
search
검색에 적당한 키보드가 나타나요. 기본 형태의 키보드와 차이점을 발견하셨나요? return 버튼이 go 버튼으로 바뀌었어요.
<input inputmode="search" />
기본 키보드에서 @ . 키가 더 나타났어요. 이메일을 입력하기 더욱 편리하게 말이죠! 전화번호 키보드와 같이 나의 이메일을 입력하기 편하도록 자동 완성도 나오네요.
<input inputmode="email" />
url
기본 키보드에서 . / .com 와 같은 키가 더 많이 나와요. 기본 키보드보다 url을 입력하기 편해졌어요.
<input inputmode="url" />
Sample
아래에 codepen에서 작성해놓은 샘플을 가져왔어요.
모바일 기기에서 지금 포스트를 보시면서 아래 샘플 페이지의 input에 포커스 해봐요.
위의 이미지들처럼 상황에 맞는 가상 키보드가 나타날 거예요.
Tip 하나 더.
MFA(다단계 인증)를 빌드하는 경우, 자동 완성 특성을 추가해 줍니다.
이렇게 하면 iOS가 들어오는 SMS에서 보안 코드를 가져오고 입력을 자동으로 채울 수 있어요.
<input autocomplete="“one-time-code”" />
마치며
굳이 복잡하게 자바스크립트로 구현하지 않아도 의미에 맞는 HTML을 사용함으로써
입력 상황에 맞는 키보드를 제공하고 좋은 사용자 경험(UX)을 간단하게 제공할 수 있게 되었어요.
회원가입 또는 개인 정보 수정 등의 화면들에서 많이 활용할 수 있을 거예요. 🤗
이 글은 pxd XE Group Blog에서도 보실 수 있습니다.