input 태그의 inputmode 속성 : 가상 키보드 타입 지정하기

모바일 환경에서 특정 값을 입력해야 하는 상황이 있다고 하자.

 

예를 들어 회원가입을 한다고 가정했을 때, 각 input 별로 작성해야 하는 데이터가 차이가 있을 것이다.

아이디나 비밀번호의 경우 문자 형식의 데이터가 입력되어야 하고,

전화번호를 입력하거나 생년월일을 입력하는 경우 숫자 형식의 데이터가 입력되어야 한다.

 

이런 상황에서 해당 input을 누르면 가상 키보드가 등장하게 되는데,

문자 입력이 필요한 상황이라면 글자 입력 자판을,

숫자 입력이 필요한 상황이라면 숫자 입력 자판을 띄워서

사용자가 조금 더 편하게 사용할 수 있도록 설정할 수 있게 해주는 것이 오늘 알아볼 inputmode 속성이다.

 

---

 

inputmode

input 태그에는 여러가지 속성이 있다.

대표적으로 type이라던지 placeholder라던지 다양한 속성을 통해 input 태그를 다양하게 활용할 수 있는데

inputmode라는 속성은 가상 키보드의 모양을 명시적으로 설정하는 속성이다.

 

<input inputmode="text" />
<textarea inputmode="text" />

앞에서는 input 태그에 대한 얘기만 했지만, 사실 입력 필드의 영역은 textarea도 있어서

모든 입력 필드에서 사용 가능한 속성이라고 할 수 있겠다.

 

inputmode의 기본값은 text인데, 모바일 환경에서 입력 필드를 선택하면

글자를 입력할 수 있는 가상 키보드가 나오게 된다.

 

그 외의 값으로는 none / tel / url / email / numeric / decimal / search 가 있는데

가볍게 어떤 특징을 가지고 있는지 살펴보자.

 

none

위의 박스는 inputmode에 none을 설정한 input 태그다.

none은 가상 키보드를 표시하지 않는 값이라, 사실 이 값은 거의 사용하지 않을 것으로 생각이 된다.

 

tel

tel의 경우는 전화번호 입력이 가능한 가상 키보드를 표시한다.

이 경우는 숫자 키보드와 함께 * 과 #이 포함되어 있다.

 

url

url의 경우는 문자 가상 키보드가 나오게 되는데,

특징으로는 일반적인 도메인 이름에 필요한 www. 이나 .com 과 같은 키가 포함된다.

 

email

email의 경우 url과 마찬가지로 문자 가상 키보드가 나오는데

이메일 입력에 필요한 @ 나 . 과 같이 빠른 도움을 줄 수 있는 키가 포함되어진다.

 

numeric

numeric의 경우 숫자 입력이 가능한 가상 키보드가 나오게 되는데

tel과 다르게 * 과 #이 없는 가상 키보드가 등장하게 된다.

 

decimal

decimal의 경우 numeric과 같이 숫자 입력이 가능한 가상 키보드가 나오게 되는데

현재 지역의 형식 구분자를 표시해야 한다고 한다.

 

search

search의 경우 문자 가상 키보드가 나오게 되고 검색에 최적화된 형태로 구현이 되어 나온다고 한다.

 

728x90

type vs inputmode

그런데 여기서 다뤄봐야 할 내용이 있다.

input의 속성 중 type이라는 속성을 통해 input 태그가 입력받을 수 있는 값을 설정하는 부분이 있다.

예를 들어 type을 number로 설정하게 되면 해당 input은 숫자만 입력받을 수 있는 상태가 된다.

 

codingEverybody의 블로그 글에서도 inputmode를 설명하면서도

type에 특정 값을 설정하는 방법을 더 추천하고 있는데

type="numer"와 inputmode="numeric"을 예로 들어 차이점을 알아보도록 하자. 

 

type="number"

먼저 type="number"의 경우 사용자에게 숫자만 입력하도록 제한을 한다.

그래서 type="number"로 input 태그를 설정하면 화살표 증감 버튼이 나오게 되고,

오로지 숫자만 입력을 할 수 있게 된다.

물론 소수점이나 음수를 표시할 수 있는 문자까지는 허용이 된다.

 

inputmode="numeric"

inputmode="numeric"은 숫자 키패드를 띄우지만 실제 입력 값의 형식에 대한 제한은 없다.

그래서 숫자 외에도 다른 문자를 마음껏 입력할 수 있게 된다.

 

정리해 보면 type을 사용하는 것이 더 엄격하게 데이터 검사를 할 수 있기 때문에 권장하는 것으로 생각되고,

inputmode의 경우는 사용자 경험을 개선하기 위해 도와주는 속성이라고 할 수 있겠다.

그러나 이렇게 속성을 적용했다고 하더라도 디바이스의 환경이나 

브라우저의 환경에 따라서 다르게 동작할 수 있기 때문에 그 환경에 맞춰서 또 다른 적용을 해줘야 한다..

 

---

 

포스팅 작성에 참고한 감사한 글들

- MDN : inputmode

- coding everybody : HTML inputmode 속성

- Gicomong님 블로그 : 더 나은 사용자 입력을 위한 inputmode 속성