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

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

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

오늘 소개할 스크립트는 윈도우즈에서 아이튠즈로 듣고 있는 곡명을 미투데이 설명문으로 보여주는 매쉬업입니다. 이미 기존에 맥에서 시도되었던 것을 iTunes COM for Windows SDK를 이용한 WSH(Windows Script Host)로 만들어 봤습니다.

사용 방법은 아래의 JScript를 다운받아 아이튠즈가 재생되는 중에 실행하면 됩니다. 실행전에 반드시 에디터 JScript 파일을 열어 첫부분을 자신에 맞게 수정해야합니다. 수정할 부분은 미투데이 사용자 아이디와 사용자 키, 기본 설명문, 이렇게 세부분입니다.

실행이 되면 2분마다 현재 재생중인 음악의 태그 정보를 바탕으로 미투데이의 설명문을 자동으로 변경해줍니다. 아이튠즈를 종료하면 상태를 판단하여 스크립트 프로그램도 종료됩니다. 작업 관리자에 'wscript.exe'라는 이름의 프로세스로 떠있으니 참고하세요.

다운로드: me2DAY with iTunes.zip

아래는 JScript의 소스입니다. 다른 기능을 추가하고 싶은 경우 참고하세요.

Google 이미지 검색에서 얼굴을 검색할 수 있는 기능이 추가되었습니다. 아직 검색 옵션에는 표시되지 않고 약간의 트릭을 사용하면 가능합니다.

이미지 검색의 마지막 쿼리에 '&imgtype=face'를 추가하는 것으로 얼굴만 검색되도록 할 수 있습니다. 다음 화면에서 어떤 식으로 결과가 나타나는지 살펴보겠습니다.

검색어에 제가 좋아하는 '히로스에 료코'를 그냥 검색한 화면입니다.

뒤에 얼굴만을 검색하도록 '&imgtype=face'를 추가하여 검색한 화면입니다.

이미지에서 얼굴 패턴을 찾아낸 뒤 추가적인 태그를 붙여놓은듯 합니다. 더 쉽게 사용하려고 Bookmarklet을 만들어 보았습니다.

Face Search Bookmarklet (오른쪽 버튼으로 북마크에 추가)

웹 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의 경우 속도는 빠르지만 쿼리된 앨리먼트의 개수가 잘못된 경우가 많았습니다.)

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

Project Cartoon 사이트의 글을 번역해 보았습니다. 공감가는 부분이 많으실 겁니다. 직접 가보시면 자신만의 카툰도 만드실 수 있습니다. 아래 그림은 갤러리 페이지에서도 보실 수 있습니다.

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

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

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

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

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

다른 글을 읽다가 확인해 보니 티스토리 초대장이 25개나 추가되어 있더군요.

선착순입니다. 필요하신 분은 메일 주소를 비밀 댓글로 달아 주세요. 메일 주소는 되도록 crowelee [at] gmail.com 형식으로 부탁 드립니다.

추가:
파스텔꿈님의 도움으로 me2day에 가입할 수 있었습니다. 미투 초대장 1개가 기본적으로 있어서 한 분 초대해 드립니다. 미투 초대를 원하시는 분은 이름과 이메일, 오픈아이디를 비밀 댓글로 달아 주세요. 가입할 때 이메일과 오픈아이디가 꼭 필요하니 정확히 적어 주세요.

미투데이 초대는 마감되었습니다.

미투데이 초대장이 무제한 리필되도록 변경되어 미투데이 초대장도 같이 나누어 드립니다.

미투데이 초대를 원하시는 분은 myid.net이나 myopenid.com에서 오픈아이디를 만드신 후, 이름과 이메일, 오픈아이디를 이메일(초대 방식이 이메일만으로 변경되었습니다 ^^;)을 비밀 댓글로 달아 주세요.

정리하면 티스토리 초대장 22장과 미투데이 무제한 초대장 나누어 드립니다.

웹 서핑을 하다보면 스크롤을 해야 할 경우가 많습니다. 예전에는 마우스로 오른쪽의 스크롤 막대를 잡고 움직이거나 '페이지 업(Page Up)' 혹은 '페이지 다운(Page Down)' 키를 사용해야 했습니다만, 요즘은 휠 마우스의 보급으로 인해 이러한 불편이 많이 줄었습니다.

저도 휠 마우스를 사용하고 있습니다만 쇼핑몰이나 이미지 갤러리 등이 아닌 일반 블로그의 글이나 기사를 읽을 때에는 휠을 자주 사용하지 않습니다. 휠을 사용하면 페이지 단위로 스크롤이 되지않아 불편하기 때문입니다. 그렇다고 'Page Up' 이나 'Page Down' 키를 사용하는 것도 좀 귀찮습니다. 마우스와 함께 모두 몸의 오른편에 위치해 있기 때문입니다.

때문에 예전부터 애용하던 '스페이스(Space)' 키를 사용합니다. 왼손으로 누르기에 자연스럽고 키보드의 자판 중 제일 크기 때문에 잘못 누를 염려도 없습니다. 이 키는 다음과 같이 동작합니다.

스페이스(Space) = 페이지 업(Page Down)
시프트(Shift)+스페이스(Space) = 페이지 다운(Page Up)

IE와 Firefox에서 모두 동작합니다. (Opera나 Safari, 다른 OS에서는 확인해 보지 못했습니다.) 메모장이나 다른 편집기에서는 동작하지 않으니 '혹시나..'하고 테스트해 보지는 마세요.

IDE 등을 사용해 개발하시는 분들이라면 다 아실만한 코드 인사이트라는 기능이 있습니다. 코드 템플릿으로 불리기도 하는 이 기능은 네이버 검색창의 검색어 추천 기능과 상당히 유사한 기능입니다. 이러한 코드 인사이트를 이용하면 첫머리 몇 글자만 입력한 후, 코드 인사이트에서 추천해 주는 템플릿을 선택하여 철자가 틀리는 일 없이 정확하고 빠른 코딩이 가능합니다. 검색어 추천 기능도 동일한 아이디어를 통해 나온 기능이라고 봅니다. 이를 통칭하여 자동완성으로 부르도록 하겠습니다.

이러한 자동완성 기능은 특정한 편집기 혹은 정해진 입력부에서만 사용되는 것이 일반적입니다. 이러한 것을 바탕화면을 포함한 모든 프로그램에 적용시킬 수 있었으면 하는 바램을 만족시켜주는 프로그램이 있어 소개드립니다.

바로 LetMeType입니다. ZDNet에서는 사용하기에 쉽고, 수고를 덜어주며, 깔끔한 인터페이스와 다양한 옵션을 가졌다고 말하고 있습니다. GPL 방식으로 소스코드와 함께 공개되어 있습니다.

위와 같이 메모장 같은 글자를 입력할 수 있는 모든 곳에서 자동완성 기능이 동작하게 됩니다. 지정된 글자수(기본 2자)를 타이핑하면 자동완성 툴팁이 뜨게 됩니다. 떠 있는 추천 단어를 1~4의 숫자키를 이용해 선택하면 됩니다.

이 프로그램이 가지는 장점은 사용자가 입력한 모든 단어가 자동으로 축적되는데 있습니다. 일일이 자동완성 단어를 등록해 놓을 필요가 없습니다. 일정 시간동안 쌓은 데이터를 이용하여 빈도에 따라 추천 단어를 보여줍니다. 이렇게 쌓인 데이터는 별도의 파일로 저장할 수 있고, 특정 텍스트 파일을 데이터로 가져올 수도 있습니다. 각각의 파일들을 통합하는 기능까지 무엇 하나 빠지지 않습니다.

설정할 수 있는 항목 또한 다양합니다. 자동완성 기능이 나타나거나 없어지는 타이밍과 최소 글자수, 대소문자 변환 및 빈도에 따른 설정 등이 가능합니다. 암호 등 다른 사람이 보지 않아야 할 중요한 단어는 제외할 단어 목록에 넣어 놓으면 됩니다. 또한 이 프로그램이 동작하는 다른 프로그램 목록을 등록할 수도 있습니다.

About 창에서는 자신이 타이핑한 글자와 추천 히트수 등의 간단한 통계 정보가 표시됩니다.

단 하나 아쉬운 점은 한글이 지원되지 않는 것 같습니다. 설정에 따라 사용할 수 있을 것 같은데 방법을 모르겠습니다. 혹시 아시는 분은 댓글에 남겨주세요. 설정을 통해 지원이 된다면 추후 업데이트 하도록 하겠습니다.

플톡의 친구 리스트를 이용하여 친구들의 최신 톡을 구독할 수 있는 파이프(Yahoo! Pipes)를 만들었습니다. PlayTalk Friends Feed라는 파이프 페이지로 가셔서 최대 목록과 플톡 아이디를 넣어 사용하시면 됩니다.

파이프를 이용해 피드를 티스토리에 다는 방법이 있으니 참고하세요.

맑은 고딕이라는 글꼴을 적용한 후 예쁘기는 한데 흐릿해서 못보겠다는 분들이 보입니다. 이 글은 이러한 분들만을 위해 작성합니다.

먼제 흐릿하게 보이는 현상이 무엇인지는 시시콜콜 블로그의 글을 보시면 알 수 있습니다. 아래는 위에 소개한 포스트에 나오는 이미지입니다.

저의 설정 환경에서는 아래와 같이 보입니다. 한국어판이 아니기 때문에 셀에 표시되는 내용을 비교해 보셔야 합니다.

어느 정도의 차이는 있겠지만 흐릿한 정도가 완화되어 있는 것을 보실 수 있습니다. (물론 비트맵 글꼴과의 선명도 비교는 무리입니다.)

맑은 고딕은 영문의 Segoe UI와는 다르게 글자의 굵기가 얇습니다. 일정 크기 이상이 되면 문제가 없지만 10포인트 근처에서는 흐릿해지는 것을 어쩔 수 없습니다. 이것을 보완할 수 있는 방법이 ClearType Tuner를 이용하는 것입니다.

ClearType Tuner는 마이크로 소프트의 홈페이지에서 받을 수 있습니다. 또는 ActiveX를 이용하는 튜닝 페이지에서 온라인상으로 할 수 있습니다. 튜닝 단계에서 중요한 포인트는 마지막 단계인 아래 페이지입니다.

제일 처음에 있는 제일 굵은 스타일을 선택하게되면 흐릿한 정도를 최대한 완화할 수 있습니다. 흐릿함 때문에 맑은 고딕을 포기하셨던 분들에게 도움이 되었기를 바랍니다.

구글에서 구글스럽지 않게 개인화 페이지에 테마를 선택할 수 있도록 하는 기능이 추가되었습니다. 'Select theme'라는 이름으로 추가되었으며 아직 한국 구글에는 나타나지 않습니다.

선택할 수 있는 테마는 이미지에서 보이듯이 6개와 기본 페이지로 총 7가지입니다. 전체 배경 이미지와 위젯의 박스 스타일이 변경됩니다. 드디어 디자이너를 고용하기 시작한건 아닐까요? 아래는 개인화 페이지에 테마를 적용한 스크린샷입니다.

추가로 위 테마는 적용 후 사용자의 위치를 설정해야합니다. 시간대에 따라 다양한 색상으로 변경되는 듯 합니다. 서울로 설정하였더니 지금은 오후의 느낌이 나는군요. 아주 재미있는 기능입니다.

PlayTalk이 테터툴즈 플러그인 형식으로 나온 것을 보고, 티스토리에도 붙여보면 어떨까 해서 만들어 보았습니다. 아래처럼 표시됩니다. (제 플톡이 없어서 사월군님것으로 테스트 하였습니다.)

스킨 편집 상태에서 아래의 소스를 원하는 위치에 붙여 넣고, id 값과 size, length 변수만 변경하면 됩니다. 소스 수정을 통하여 사이트바와 동일한 디자인으로 변경할 수도 있습니다. 소스는 아래에 있습니다. 잘 사용하세요.

연세대학교에서 일요일날 있었던 매쉬업 캠프에 다녀왔습니다. 토요일의 자바 개발자 컨퍼런스에 이어 일요일까지 즐거운 시간을 보냈던 것 같습니다. 기념품들에 관해서는 포스트 제일 아래쪽에 소개되어 있습니다.

장소는 상남경영원 2층이었습니다. 좀 늦었던 터라 걱정을 했었는데 다행이 모든 분들이 오지 않아 약간의 지연 때문에 제때에 도착할 수 있었습니다. 60여분의 캠프 참가자 분들과 행사 진행하시는 분들, 맨토 분들까지 모이니 제법 분위기가 났던 것 같습니다.

진행 내용은 이미 소개가 되어 많이들 아실 것 같습니다. 오전은 네이버와 다음의 Open API에 대해 설명을 들었고, 점심 후에 6개의 지정 과제들과 개별 과제별로 맨토 분들과 실습할 수 있는 시간이 주어졌습니다. 전체적인 진행은 다음의 석찬님이 해주셨습니다. JCO에 이어 이틀 연속 뵙게 되었습니다. 서글서글하셨던 느낌이 아직까지 남아있습니다. 오전 세션에서는 기존에 공개된 Open API들을 사용하는 방법들을 소개하였습니다. 네이버에서는 새로운 API인 지역과 이미지, 동영상 검색을 공개하였습니다. 늘어나는 장난감을 보는 개발자로서는 그저 즐거울 뿐입니다.

점심으로 뷔페를 든든히 먹고난 후 각각 흥미있는 주제별로 흩어져서 과제 수행을 하게 되었습니다. 맵쪽으로 갈까 하다가 맥용 대쉬보드 위젯쪽을 갔습니다. 꿈에서도 나타났던 맥북 실물을 보려는 목적이었습니다. 맥북도 구경하고, Dashcode도 구경하고 재미있었습니다. 오후 5시에는 작성한 과제물을 발표하신 시간이 있었습니다. 열정을 가지신 분들이 모여서 그런지 재미있는 시도가 많았습니다.

우리나라에서 처음 있었던 매쉬업 주제의 행사였고, 저도 처음 간 캠프여서 그런지 끝나고 난 후 좀 아쉬웠습니다. 전체적으로 실습이 주가되는 캠프였었는데 노트북도 없이 갔었기 때문이 더 그랬는지도 모르겠습니다. 과제 작성 때 받았던 지름신을 따라 맥북을 사야 하나 생각중입니다.

붐이 일기 시작하면 불타오르는 국내 현실에서 매쉬업 분위기가 Open Web을 활성화 시키는 계기가 되었으면 하는 바램입니다. 애초에 목적(?)이었던 레어 아이템 습득물들은 아래에 있습니다.

근래에 읽은 "웹 2.0"에 관한 책 세권이 있습니다. "웹 진화론", "웹 2.0 경제학", "정유진의 웹 2.0 기획론"이 그것입니다. 나열한 순서대로 읽어 나가라는 듯 각각의 내용이 연결되고 서로를 보완해 주는 느낌입니다.

웹에 대한 새로운 패러다임이 트랜드 뿐일 것이라는 편견을 가