[html] 더 나은 사용자 입력을 위한 inputmode 속성

0. 들어가기에 앞서…

• 모바일 디바이스 사용자가 늘어나면서, 웹 사이트에서 모바일 입력 폼을 사용하는 경우가 많아졌다.
• 하지만 용도에 맞지 않는 가상 키보드를 제공하는 경우가 있어, 사용성에 부정적인 영향을 주곤 한다.
• 예를 들어 전화번호 입력창을 클릭했는데 문자 키보드가 떠서, 사용자가 키보드 탭을 전환해야하는 수고가 발생한다.
• 이때, inputmode 속성을 사용하면 입력 폼에 적합한 가상 키보드를 사용자에게 제공할 수 있다!
• 이번시간에는 가상 키보드 모드를 지정할 수 있는 inputmode(공식문서 링크)에 알아보았다.

1. inputmode이란?

1) inputmode는 무엇일까?

• inputmode는 브라우저가 어떤 키보드를 표시할지 지정할 수 있는 속성이다.
• 기본값은 inputmode=”text”이며, 총 8가지 값을 제공하는데 각 값을 살펴보자.

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

(1) none

• 가상 키보드를 제공하고 싶지 않을 때 지정한다.
• 만약 페이지에서 자체 키보드를 구현한 경우 이 속성을 사용해 가상키보드를 숨길 수 있다.

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

• 아래 playground는 inputmode를 none로 설정한 예시이다.

See the Pen inputmode="none" by KumJungMin (@kumjungmin) on CodePen.

• 만약 모바일 환경에서 playground의 입력폼을 클릭하면, 하단 이미지와 같이 가상 키보드가 뜨지 않는 걸 볼 수 있다.
  

  

(2) text(기본값)

• 사용자의 locale(사용되는 언어, 지역 설정 등)에 따라 가상키보드를 제공한다.
• 기본값이므로 별도로 지정하지 않아도 된다.

<input />
<textarea></textarea>

• playground에 있는 입력창을 클릭시 기본 키보드가 뜨는 걸 확인할 수 있다.

See the Pen inputmode="text" by KumJungMin (@kumjungmin) on CodePen.

• 하단 이미지는 모바일 환경에서 입력폼을 클릭했을 때 기본 키보드가 뜬 모습이다.

(3) decimal

• (.) 혹은 (,) 을 제공하는 숫자형 키보드 모드이다.
• 사용자의 장치에 따라 (-)를 제공하거나 제공하지 않을 수 있다.(IOS는 (-)를 제공하지 않음ㅠ)

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

• playground에 있는 입력창을 클릭하면 숫자 키보드가 뜨는 걸 볼 수 있다.

See the Pen inputmode="decimal" by KumJungMin (@kumjungmin) on CodePen.

• 하단 이미지는 모바일 환경에서 입력폼을 클릭했을 때 .키가 있는 숫자 키보드가 뜬 모습이다.

(4) numeric

• 숫자형 키보드 모드로 소숫점을 제공하지 않는다.
• 사용자의 장치에 따라 (-)를 제공하거나 제공하지 않을 수 있다.(IOS는 (-) 제공하지 않음ㅠ)

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

• playground에 있는 입력창을 클릭하면 소숫점이 없는 숫자 키보드가 뜨는 걸 볼 수 있다.

See the Pen inputmode="numeric" by KumJungMin (@kumjungmin) on CodePen.

• 하단 이미지는 모바일 환경에서 입력폼을 클릭했을 때 숫자 키보드가 뜬 모습이다.

(5) tel

• 전화번호 키보드 모드이다.
• 숫자(0~9), 별표(*), 해시(#)키를 제공한다.
• <input>에서 inputmode이 tel인 경우, type을 tel로 같이 설정해줘야 한다.

<input type="tel" inputmode="tel" />
<textarea inputmode="tel"></textarea>

• playground의 입력창을 클릭하면 숫자, 별표, 해시키가 있는 숫자 키보드가 뜨는 걸 확인할 수 있다.

See the Pen inputmode="tel" by KumJungMin (@kumjungmin) on CodePen.

• 하단 이미지는 모바일 환경에서 입력폼을 클릭했을 때 숫자, 별표, 해시키가 있는 숫자 키보드가 뜬 모습이다.

(6) search

• 검색 입력창에 최적화된 키보드를 제공한다.
• 한 예시로 엔터키가 ‘검색’아이콘이나 명칭이 변경되어 보여질 수도 있다.
• <input>에서 inputmode이 search인 경우, type을 search로 같이 설정해줘야 한다.

<input type="search" inputmode="search" />
<textarea inputmode="search"></textarea>

• playground의 입력창을 클릭하면 일반 텍스트 키보드지만 엔터키의 명칭이 다른 걸 볼 수 있다.

See the Pen inputmode="search" by KumJungMin (@kumjungmin) on CodePen.

• 하단 이미지는 모바일 환경에서 입력폼을 클릭했을 때, 일반 키보드지만 엔터키의 명칭이 다른 키보드가 뜬 모습이다.

(7) email

• 이메일 입력에 최적화된 키보드를 제공한다.
• (@) 키를 제공하며, <input>에서 inputmode이 email인 경우, type을 email로 설정해야 한다.

<input type="email" inputmode="email" />
<textarea inputmode="email"></textarea>

• playground의 입력창을 클릭하면 일반 텍스트 키보드에 @키가 있는 걸 확인할 수 있다.

See the Pen inputmode="email" by KumJungMin (@kumjungmin) on CodePen.

• 하단 이미지는 모바일 환경에서 입력폼을 클릭했을 때, 일반 텍스트 키보드에 @키가 있는 키보드가 뜬 모습이다.

(8) url

• 주소 입력에 최적화된 키보드를 제공한다.
• (/) 키를 제공하며 세션 히스트로 접근 기능에 키보드에서 제공되기도 한다.
• <input>에서 inputmode이 url인 경우, type을 url로 설정해줘야 한다.

<input type="url" inputmode="url" />
<textarea inputmode="url"></textarea>

• playground의 입력창을 클릭하면 일반 텍스트 키보드에 /키가 있는 걸 확인할 수 있다.

See the Pen inputmode="url" by KumJungMin (@kumjungmin) on CodePen.

• 하단 이미지는 모바일 환경에서 입력폼을 클릭했을 때, 일반 텍스트 키보드에 /키가 있는 키보드가 뜬 모습이다.

2) inputmode와 type 속성의 차이

❓ 그런데 inputmode를 보니 type 속성이랑 유사한 기능을 하는 거 같은데 차이점이 무엇일까?

• type은 입력 필드의 값의 타입을 지정하지만, inputmode는 가상 키보드의 레이아웃을 지정할 때 쓴다.
• type은 inputmode처럼 키보드 레이아웃을 결정할 수 없다.
• 예를 들어, type이 number인 입력 필드는 숫자만 입력할 수 있지만, 키보드 레이아웃은 기기의 지역 설정에 따라 다를 수 있는 것이다.

3. 마치며…

• 이번 시간에는 가상 키모드를 설정할 수 있는 inputmode에 알아보았다.
• inputmode는 HTML의 속성 중 하나로, 모바일 기기에서 폼 작성 시 가상 키보드를 제공하여 사용자의 편의성을 높여줄 수 있다.
• 단, iOS에서는 inputmode가 decimal, numeric인 경우 마이너스를 제공하지 않아,
• 가상의 마이너스 버튼을 추가하거나, 커스텀 키보드를 만드는 등 별도의 처리가 필요하다는 단점이 있다.