요즘 웹 어플리케이션이 등장하면서 단축키를 지원하는 서비스들이 늘고 있습니다. 역시 그 시작은 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로 다음 이벤트로 전달하지 않습니다.

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

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

웹 2.0 시대에 접어들면서 Ajax를 이용하면서 다양한 사용자 인터페이스 방식이 제안되고, 실제 쓰이고 있습니다. 이제는 웹 페이지에서의 드래그&드랍 방식을 이용한 사이트를 쉽게 볼 수 있습니다.

이러한 UX의 높은 품질 뒤에는 다양한 자바 스크립트 라이브러리들의 도움이 컷을 것으로 생각됩니다. 제가 처음 접한 라이브러리는 Prototype 이었습니다. 아직까지도 주력으로 사용하고 있고, 이 라이브러리로 인해 개발 시간을 절반 이하로 줄일 수 있었습니다.

이러한 라이브러리들은 대체적으로 CSS Query를 이용하여 앨리먼트를 선택할 수 있는 기능을 제공해줍니다. CSS Query라는것은 CSS Selector 문법으로 태그들을 선택하고 조작하기위해 만들어진 자바 스크립트 기능을 의미합니다. XML 기반 문서를 다루는 데에도 유용하기 때문에 다른 프로그래밍 언어에서 차용하기도 합니다. Ajax로 페이지를 동적으로 조작할 때 특히 유용하게 사용됩니다.

MooTools 사이트에 있는 SlickSpeed Selectors Test 도구를 이용하면, 앞서 설명한 CSS Query의 성능을 각 자바 스크립트 라이브러리별로 비교할 수 있습니다. 비교 대상은 Porotype, jQuery, MooTools, Ext JS, cssQuery, dojo.query입니다.

아래 표에는 현재 PC에 설치되어 있는 브라우져별로 모든 쿼리를 하는데 걸린 시간을 정리해 보았습니다. Safari, Firefox, IE 순서로 성능 차이가 발생하는군요.

Prototype과 MooTools, dojo.query의 성능이 대체적으로 좋게 나왔습니다. 신뢰성은 각각의 셀렉터별로 틀리기는 하지만 성능이 좋은 라이브러리가 품질 또한 좋았습니다. (Ext JS의 경우 속도는 빠르지만 쿼리된 앨리먼트의 개수가 잘못된 경우가 많았습니다.)

여러분은 어떤 라이브러리를 사용하고 계신가요?

예전에 플톡을 티스토리에 달아보자라는 포스트를 작성한 적이 있습니다. 그 때는 야후 파이프의 JSON 서비스를 알지 못해서 John Resig의RSS to JSON Convertor를 이용한 방법을 설명했었습니다.

이 포스트에서는 일반적인 RSS 피드를 야후 파이프를 경유시켜 자바스크립트를 이용한 위젯을 만드는 방법을 설명 드리겠습니다.

먼저 야후 파이프에서 RSS 파이프를 생성하거나 기존에 생성되어 있는 파이프를 선택합니다. 여기에서는  제가 생성한 파이프 모듈을 이용하겠습니다. 이 모듈은 Pipes: PlayTalk Entry Feed 페이지에서 테스트해 볼 수 있습니다. 위쪽에는 최대 피드 크기를 넣고, 아래에는 자신의 플톡 아이디를 입력하면 됩니다. 파이프를 실행하면 제일 아래쪽 도구에 RSS와 JSON 출력이 있습니다. 이 JSON 출력을 자바스크립트로 받아 처리하면 됩니다.

자바스크립트의 처리는 Prototype 라이브러리를 이용합니다.

위 소스를 원하는 위치에 넣으시면 됩니다. 태그 부분의 마크업과 스타일 시트 부분은 스킨에 맞게 변경하시면 좋습니다. 단 DIV 태그의 pipes-widget 아이디와 UL은 구조는 지켜주셔야 합니다. 플톡 초기화시 코드를 끼워 넣은 이후 부분의 표시가 지연되는 문제가 생길 때에는 interval 값을 조정하시면 됩니다. 기본 1000으로 되어있어서 1초 후에 피드를 긁어오게 됩니다.

이올라스(Eolas)테크놀로지와 캘리포니아대학 등이 보유한 특허를 침해했다며 낸 소송에 MS가 패하면서 플러그인 객체를 활성화 하기 위해 사용자가 직접 활성화 시켜 주어야 하는 패치가 적용되었습니다. 이를 피하기 위해서 사용하는 방법이 외부 스크립트 파일을 이용하여 객체를 구성해 주는 방법입니다.

이번 글에서는 Object 객체를 쉽게 링크하기 위한 스크립트와 사용 방법을 적어볼까 합니다. 먼저 object.js의 소스입니다.

위 코드에 따르면 el, attr, prop를 인자로 건네 주어야 합니다. el은 해당 Object가 문서 내에서 위치할 엘리먼트를 지칭하고, attr은 OBJECT 태그의 속성, Prop는 OBJECT 태그 내부의 파라미터를 말합니다.

위 함수를 이용한 샘플 코드는 다음과 같습니다.