요즘 웹 어플리케이션이 등장하면서 단축키를 지원하는 서비스들이 늘고 있습니다. 역시 그 시작은 GMail이라고 할 수 있습니다. 국내에서도 대표적으로 라이프팟(Lifepod)과 스프링노트(SpringNote)에서 사용하고 있습니다. 물론 웹사이트의 단축키는 오히려 화가 되는 것을 염두에 두어야 할 것입니다.

쓸데없는 이야기는 그만하고 단축키를 쉽게 구현하기 위한 자바스크립트 코드를 소개할까 합니다.

웹에서 단축키를 구현하기 위해서는 윈도우의 이벤트를 받아 키 코드를 검사한 후 해당 코드에 따라 적절히 분기하여 그에 맞는 함수를 호출해 주는 방식으로 작성하여야 합니다. 하지만 이러한 방법 대신에 사용자 친화적인 코드를 이용하여 누구나 쉽게 사용할 수 있는 라이브러리를 소개합니다.

관련 내용 및 코드 다운로드: Handling Keyboard Shortcuts in JavaScript

아래의 예제와 같이 코드를 작성하면 "Ctrl+Shift+X" 키를 눌러 "Hi there!"라는 메시지를 표시할 수 있습니다.

shortcut 함수는 다음과 같이 3개의 인자를 받고 있습니다.

shortcut과 callback 이외에 opt라는 인자가 옵션으로 존재합니다.

• type (String)
  키 이벤트의 종류를 적습니다. 기본값은 'keydown'으로 키가 눌려졌을 때 실행됩니다. 가능한 값은 'keydown', 'keyup', 'keypress' 입니다.
• target (DOM Element)
  키 이벤트를 감시할 페이지의 엘리먼트 객체입니다. 기본값은 document로 문서의 모든 키 반응을 감시합니다.
• propagate (Boolean)
  키 이벤트로 함수를 호출한 후 추가적인 이벤트가 등록되어 있을 때 계속적으로 호출할지를 정해줍니다. 기본값은 false로 다음 이벤트로 전달하지 않습니다.

모든 인자를 기본값으로 호출하면 다음과 같이 됩니다.

지원되는 단축키 목록 및 자세한 내용은 위의 관련 페이지 링크를 참고하세요.

IE7에서의 탭 관련 단축키 목록입니다. 탭 단축 기능을 이용하면 웹 서핑이 더욱 즐거워 집니다. 특히 마우스 중간 버튼은 탭을 열거나 닫기에 정말 편리하니 꼭 기억해 두세요.