웹 프로그래밍을 하다보면 키보드 이벤트를 처리할일이 자주 발생합니다. 하지만 이작업이 쉽지는 않습니다. 특히 단축키를 처리할때는 키의조합(ctr – space등)이나 키의 순서 조합(a->c->f 등)이 필요할 경우는 만만치 않죠. 이럴경우 손쉽게 키보드 이벤트를 처리하는 자바스크립트 라이브러리가 있습니다. 바로 keymaster와 Mousetrap입니다.
이 두 라이브러리는 서로 닮은점이 많습니다. 약간의 기능상 차이도 있구요. 어느것을 사용할지는 개발자여러분의 몫인데 이번 글에서는 대표적인 특징을 중심으로 서로 비교하여 여러분의 결정을 돕도록 하겠습니다.
어떻게 사용하는가?
사용법은 두 라이브러리 모두 동일합니다. 각 해당 웹페이지에서 keymaster.js(keymaster-min.js) 또는 mousetrap-min.js를 다운로드받아서 아래와 같이 페이지에 링크를 해주면 됩니다.
//keymster <script src="keymaster.min.js"></script> //Mousetrap <script src="mousetrap.min.js"></script>
keymastar는 약 2kb, Mousetrap은 1.5kb정도의 용량이니까 사용하는데 큰 부담은 없습니다.
키보드 처리 하는 방법은?
먼저 기본 처리 방법은 다음과 같습니다. 기존 자바스크립트에서 사용하는 방식과는 달리 키보드에 해당하는 문자를 그대로 사용하면 됩니다.
//keymster
key('a', function(){ alert('you pressed a!') });
//Mousetrap
Mousetrap.bind('x', function() { highlight(3); }, 'keyup');
조합키의 처리는 모두 + 기호를 사용하면 됩니다. 단 여러개의 단축키는 쉼표로 구분합니다.
//keymster
key('ctrl+r', function(){ alert('stopped reload!'); return false });
key('⌘+r, ctrl+r', function(){ });
//Mousetrap
Mousetrap.bind('command+shift+k', function(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
highlight([6, 7, 8, 9]);
});
Mousetrap.bind(['command+k', 'ctrl+k'], function(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
highlight([11, 12, 13, 14]);
});
코드를 보면 아시겠지만 매우 직관적이고 쉽게 단축키나 기보트 이벤트를 처리할수가 있습니다.
다음은 필터기능인데 두라이브러리 모두 textarea, input, select 태그에서는 이벤트처리가 되지않도록 기본값으로 막고 있습니다. 이것을 조정하려면 가각 다른 방식을 사용하여야 합니다.
먼저 keymaster는 기정의된 함(key.filter)를 덮어써서 재정의하면 됩니다
function filter(event){
var tagName = (event.target || event.srcElement).tagName;
return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
}
Mousetrap은 태그의 class속성값을 mousetrap으로 할당해주면 됩니다.
<textarea name="message" class="mousetrap"></textarea>
서로 다른점은?
먼저 keymaster는 scope기능을 제공합니다. 특정 스코프에 단축키조합을 정의하고 이를 필요시 선택적으로 사용하는 것입니다. 웹페이지내에서 특정한 경우에 단축키 조합을 바꾸어 사용하게 할때 필요한 기능입니다. 사용법은 정의한 스코프를 key.setScope 함수로 선택하여 사용하면 됩니다.
// define shortcuts with a scope
key('o, enter', 'issues', function(){ /* do something */ });
key('o, enter', 'files', function(){ /* do something else */ });
// set the scope (only 'all' and 'issues' shortcuts will be honored)
key.setScope('issues'); // default scope is 'all'
Mousetrap은 두가지 추가 기능을 제공합니다.
먼저 키의 순서를 단축키로 정의할수 있습니다. *와 a를 누르면 특정 기능을 실행하게 하는 경우인데 gmail의 단축키에도 사용되고 있는 방식입니다. 사용법은 스페이스로 분리하여 정의하면 됩니다.
Mousetrap.bind('* a', _selectAll, 'keydown');
또하나는 특정키 이벤트를 트리거 할수 있습니다. 사용법은 다음과 같습니다.
Mousetrap.trigger('esc');
무엇을 선택할까?
이상 두 라이브러리의 주요 기능을 살펴 보았습니다. 앞서도 이야기하였지만 선택은 어떤 페이지와 기능을 개발하느냐에 달렸습니다. 각각 서로가 가지고 있지 않은 특징을 가지고 있어 어느 하나가 정답이라 할수 없기 때문입니다. 하지만 웹페이지 특히 웹앱을 만들때 단축키 처리를 고민하지 않아도 된다는 것에서는 두라이브러리 모두 아주 좋은 방법을 제공하고 있다고 생각합니다. 결국 선택은 여러분이 몫이라는 겁니다 ㅎㅎ
한가지 keymaster는 현재 업데이트가 계속 이루어 지지 않고 있다는 것을 참고 하시기 바랍니다.
글쓴이 : 김인석 (김인석 님이 작성한 다른 글 보기)
