지난 6개월간 저는 운동 기록(training logger) 앱을 사이드 프로젝트로 개발해 왔습니다. 예상하시겠지만, 이런 앱에는 숫자 입력 기능이 필수적입니다.
input 요소의 기본 타입은 text
코드 에디터에서 자동완성 기능으로 input 요소를 작성하면, 기본 타입은 text로 지정됩니다.
<input type="text" />type="number"는 숫자만 입력 가능
타입이 number인 HTML input 요소는 오직 숫자만 입력받습니다. 이 숫자 입력 필드에 문자를 입력해 보세요.
입력되지 않습니다.
type="text"는 문자와 숫자 모두 허용
반면 타입이 text인 input 요소는 문자와 숫자를 모두 받아들입니다. 이 텍스트 입력 필드에 숫자와 문자를 번갈아 입력해 보세요.
정상적으로 작동합니다!
데스크톱에서는 문제가 없다
처음 앱에서 횟수(reps)와 중량(weight) 입력란을 만들 때, 저는 기본값인 text 타입을 number로 바꾸지 않았습니다. 생각조차 하지 않았죠. 데스크톱 컴퓨터에서 테스트할 때는 키보드로 숫자를 입력하기 쉬웠기 때문에 불편함을 전혀 느끼지 못했습니다.
하지만 iPhone 6에서 앱을 테스트하는 순간, 처음부터 올바른 input 타입을 사용해야 하는 이유가 명확해졌습니다.
스마트폰에서 발생하는 문제
input 요소의 타입이 text로 설정된 상태에서 해당 입력 필드를 탭하면, 적어도 아이폰의 경우(안드로이드도 비슷할 것으로 추정됩니다) 일반 자판, 즉 네이티브 키보드가 나타납니다. 마치 누군가에게 문자 메시지를 작성하는 것처럼요.
이 네이티브 키보드에서도 숫자를 입력할 수는 있지만, 먼저 '123' 버튼을 눌러야 합니다. 불필요한 단계가 하나 추가되는 셈입니다.
횟수와 들어올린 중량처럼 숫자만 입력하는 용도의 필드라면, 스마트폰에서 곧바로 숫자 키보드가 뜨는 것이 훨씬 합리적입니다.
해결 방법: type="number" 지정하기
해결 방법은 아주 간단합니다. input 요소가 숫자를 입력받도록 타입만 지정해 주면 됩니다.
<input type="number" />iOS 기기에서의 결과는 다음과 같습니다.
이게 전부입니다! 한 줄의 코드 수정만으로 모바일 사용자의 입력 경험이 크게 개선됩니다.