입력 유형에 따른 모바일 키보드 형태

모바일에서는 입력 유형에 따라 키보드가 다르게 나타나고 있습니다. 혹시 알고 계셨나요?

그 이유는 모바일에서는 문자, 숫자, 특수기호를 하나의 키보드에서 입력이 불가능하기 때문이죠. 

 

그럼 오늘은 입력 유형에 따른 키보드 형태를 정리해보겠습니다. 알아두시면 모바일 UI 기획서를 작성하실 때 도움이 되실 거에요.  

 

제 휴대폰인 삼성 갤럭시20 FE로 캡처하여 정리했습니다. 아이폰과는 형태가 다를 거에요. 참고부탁드립니다. 

 

기본 키보드

• <input type ="text">
• 문자 입력에 최적화되어 있어 가장 많이 보는 키보드 형태

이메일 키보드

• <input type ="email">
• 이메일을 빠르게 입력할 수 있게 하는 키보드로 [@]과 [.] 그리고 [.com]이 포함되어 있음

비밀번호 키보드

• <input type ="password">
• 비밀번호를 입력할 때 사용되는 키보드로 실시간 숨김 표시[*]를 제공 

전화 키보드

• <input type ="tel">
• 전화번호를 빠르게 입력할 수 있게 하는 키보드로 [*]과 [#]이 포함되어 제공됨

숫자 키보드

• <input type ="number">
• 숫자를 빠르게 입력할 수 있게 하는 키보드로 숫자만 표시됨

이외에도 제가 캡처를 못했지만, 다양한 종류의 입력 유형이 있으며 그에 따른 키보드 형태도 다양합니다. 참고자료에 링크를 클릭해서 들어가보셔도 좋을 것 같습니다. 

• <input type="url">  URL 입력 키보드 

 

 

참고자료

- 모바일 입력 유형 :  http://mobileinputtypes.com/