숫자 입력을 위한 핀패드(PIN Pad)를 만들어봤습니다.

관련지식
javascript, jquery, pinpad, keypad

요즘 스마트폰에서 금융권앱/쇼핑몰앱 등을 이용하다보면 영문이나 숫자를 입력하는 가상 키패드를 쉽게 볼수 있습니다. 그러한 가상키패드는 주로 보안을 목적으로 사용되지만, 숫자만 입력하거나 고정된 형태의 입력값을 받을때도 제법 유용합니다.
예를들어 은행 창구에서 직원이 계좌비밀번호를 입력하라고 할때 사용하는 기기를 핀패드라고 합니다. 만약 핀패드가 아니라 키보드를 주면서 입력하라고 하면 무엇을 눌러야 할지 곤란할수도 있을것 같네요.

최근 웹화면에서 숫자만 입력하는 필드가 필요했는데 금액이 아니어서 <input type="number"> 태그만으로는 처리가 좀 애매했습니다. 그래서 가상키패드를 좀 찾아봤는데 스마트폰에서 사용하기엔 디자인이 만족스럽지 않았습니다.(손으로 터치 해야 하는데 키패드 사이즈가 너무 작은…) Framework7에서 제공하는 키패드는 상당히 만족스러웠습니다. 데스크탑용으로도 쓸수 있고 스마트폰 용에도 적합한 인라인 숫자패드도 있었으니까요. 데모
하지만 Framework7에 종속적이고 공통 CSS가 개발중인 웹페이지의 CSS에 충돌되는 부분이 너무 많아서 쓸수가 없겠더군요. 그래서 그냥 만들었습니다.

다운로드 : https://github.com/sub0709/pinpad
참고 : 현재 JQuery 종속성있음

기본 기능

사용법은 간단합니다. 적용하고 싶은 인풋 필드가 있다면 해당 태그의 셀렉터만 적어주면 됩니다.

<input type="text" id="pin1" />
<script>
new pinpad({
  ref : {
    el : '#pin1'
  }
});
</script>

PC처럼 큰 화면에선 아래와 같이 보일것입니다.

버튼 수정

삭제/입력완료 버튼이 영어로 보여서는 모양새가 영 보기 안좋죠. letterReplace를 이용하여 다른 모양으로 대체할수 이습니다. keypads로 버튼의 순서도 재정의 가능하고 버튼의 높이height도 수정할수 있습니다.

new pinpad({
  ref : {
    el : '#pin2'
  },
  height : 45,
  keypads : [ 4, 3, 6, 0, 8, 9, 'done', '.', 'del'],
  letterReplace : {
    'del' : '<i class="fa fa-long-arrow-left" data-toggle="tooltip" title="fa fa-long-arrow-left"></i>',
    'done' : '<i class="fa fa-check" data-toggle="tooltip" title="fa fa-check"></i>',
    4 : '<i class="fa fa-foursquare" data-toggle="tooltip" title="" data-original-title="fa fa-foursquare"></i>'
  },
});

포맷팅

format 을 정의하여 입력값을 포맷팅해서 보여줄수 있습니다. 입력중인 사용자에게 참고용으로 매우 좋죠. useFormat 속성을 지정하면 화면에 보이는 값 그대로 입력필드에 전달해줍니다.

new pinpad({
  ref : {
    el : '#pin3',
    useFormat : true
  },
  format : '**/**'
});

만약 핸드폰번호를 입력한다면 format값에 ‘***-****-****‘ 을 적어주면 됩니다.

스킨 변경

핀패드는 기본 스킨외에 gray, blue 스킨이 있습니다. 디자인을 모르는 제가 마음대로 만들어서 예쁘진 않지만 그나마 덜 못난거를 고르시면 됩니다. skin 값에 원하는 스킨을 적으시면 됩니다. 그리고 계좌번호 같이 고정된 길이의 비밀번호는 입력완료 버튼을 사용할 필요없이 숫자 네자리를 입력받자마자 자동으로 적용되길 원할수 있습니다. passcode를 설정하면 화면에서 숫자가 보이지 않습니다. maxLength로 입력값 길이를 제한하고, immediate를 true로 하면 됩니다.

new pinpad({
  ref : {
    el : '#pin4'
  },
  skin : 'gray',
  passcode : true,
  immediate : true,
  maxLength : 4,
  desc : '숫자4자리를 입력하세요',
  letterReplace : {
    'del' : '<',
    'done' : 'V'
  }
});

독립 실행

입력필드 요소에 연결하지 않고 수동으로 처리할수도 있습니다. 버튼을 클릭했을때 실행하거나, 화면에 입력폼은 없고 로직에 의해서만 핀패드를 실행하는 경우죠.
핀패드를 생성하고 show() 함수를 호출하면 됩니다. 입력된 값은 oncomplete 함수를 정의하면 받을수 있습니다.

var pin5 = new pinpad({
  oncomplete : function(value) {
    alert(value);
  },
  passcode : true
});
pin5.show();

배열변경

기본적으로는 3열 핀패드를 제공하지만 4열, 5열 핀패드까지 동작합니다. mode값을 x4 또는 x5로 지정하면 됩니다.

new pinpad({
  ref : {
    el : '#pin6'
  },
  skin : 'blue',
  mode : 'x4'
});

만약 보안키패드처럼 랜덤한 공간에 공백 버튼을 두고 싶다면 setRandomSpaceCount 속성으로 필요한 공백버튼의 개수를 지정하면 됩니다. 공백버튼의 개수에 따라 키패도 높이가 더 높아지겠죠. 앞에 소개한 height 속성으로 버튼 높이를 적절히 줄이면 좋습니다.

new pinpad({
  ref : {
    el : '#pin7'
  },
  skin : 'gray',
  mode : 'x5',
  setRandomSpaceCount : 8
});

개선과제

지금 당장 중요한 부분이 아니라서 그냥 넘겼지만 개선해야 할 부분들이 좀 있습니다. 일단 사용하면서 조금씩 보완해야 할것 같습니다. (누가 대신 해주시면 좋겠네요 ㅎㅎ)

• JQuery 의존성 제거
• Cancel 버튼 추가
• 보안 기능 강화
• 포맷팅 기능 강화
• 퍼블리싱 개선