양파맨의 겨울나기

개발자, 그러니까 정확하게 이야기 하자면 웹브라우져에서 보여지는 것들을 만드는 사람들을 살려달라고 하는 캠페인 배너를 달았습니다.

정확하게 이야기 하자면 인터넷 익스플로러(IE) 6버전 이하를 사용중인 사람에게 IE7 이상의 버전으로 업그레이드를 해달라고 부탁 하는 캠페인 입니다.


제 블로그의 방문객 중 절반을 훨씬 넘는 분들이 IE6를 사용하고 있습니다. 그럼에도 요즘은 스킨을 수정 할 때 IE6를 전혀 고려하지 않고 있습니다. 테스트 환경도 마땅찮고 IE6까지 고려하려면 손이 너무나도 많이 가기 때문이죠. 아 물론, 요즘 브라우저 통계를 보고는 이런 생각을 고쳐먹게 되었지만 말입니다.

사실 저희 회사에서도 개발자 중에 IE6를 사용하는 분들이 조금 있습니다. IE7 버전으로 업그레이드를 권하고는 있지만 그래도 강요할 수는 없는 노릇이고, 또 가끔 빠르게 테스트를 해야 할 때 유용하기 때문에 적극적으로 권고하고 있지는 않습니다.

어쨋든 IE6 버전에 가볍기는 합니다만, 보안도 그만큼 가볍습니다.

뭐 개발자를 살려달라고 자신의 시스템에 억지로 어떠한 소프트웨어를 설치하라는 말은 아니지만, IE6를 사용하다보면 본인이 원치않는 더욱 많은 소프트웨어가 본인도 모르게 설치될지 모르는 일이니 조심하세요. 라고 말하는것은 조금 협박같이 들리기 때문에 저는 그냥 저희좀 도와달라고 이렇게 말하겠습니다.

평소에 오십가닥씩 빠지던 머리카락이 요즘은 이백삼십가닥씩 빠지는 느낌입니다. 장가만 갈 수 있게 도와주세요.

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

지하철의 시간표가 궁금할 때가 있습니다. 약속시간을 맞추기 위해서라든지, 뭐 각각의 이유가 있겠죠. 좀 전에 위젯팩토리에 대한 글을 쓰면서(2008/11/24 - [Review/IT] - 예쁜, 재미있는, 유익한 위젯을 만나자 - 위젯팩토리) 지하철 시간표 검색 이라는 위젯을 제안한 바 있습니다.

내가 한번 만들어 볼까 라는 생각에 WZDAPI를 사용하여 시도하다가 (어려움 때문에)잠시 보류하고, 좀 더 쉬운 검색창에서 검색하기를 만들어 보았습니다.

subway <-- 클릭 해보시면 아래 이미지와 같은 화면이 나타납니다.


그러면 아무런 반응이 없는데, 브라우저의 검색창을 눌러보면 아래 사진과 같은 메뉴를 발견하실 수 있습니다.


여기서 subway timetable 을 선택 한 후 검색창에 다음과 같이 입력합니다.

노선번호 공백 역이름 (ex) 8 문정

그리고 엔터를 치시면 타임테이블이 검색되어 나옵니다.


어때요, 참 쉽죠? 타임테이블은 서울메트로 에서 가져왔고 현재 제가 만든 검색창은 8호선까지 지원합니다. 추후에 분당선 및 다른 노선도를 추가해볼께요.


유용하게 사용하셨으면 좋겠네요. (문제의 소지가 있어서 조만간 사라질지도 모릅니다.)
아래 링크를 방문하여 검색창을 설치하세요. ^^

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

IE8 beta2 세미나가 지난 9월 건국대 새천년 기념관에서 열렸었습니다.

세미나 이전에 IE8용 웹슬라이스 관련 게시물을 작성한적이 있었습니다. 세미나 후에 제 블로그에 IE8과 웹슬라이스로 검색하여 들어오시는 분이 꽤 되었던걸 보면 이슈가 되긴 했었나 봅니다.

[관련글]
2008/08/12 - [Etc..] - [ IE8 ] 웹슬라이스를 적용한 미투데이 최근 댓글 구독.
2008/08/11 - [Etc..] - [ IE8 ] 웹슬라이스(webslices) 적용했습니다.

세미나에선 총 3가지의 기능을 소개했었는데, 그 중 하나가 이전에 소개드린 웹슬라이스고, 나머지 둘이 엑셀러레이터와 비쥬얼서치 입니다.

음, IE8이 선행되어야 한다는 단점 때문에 아직까지는 많은 분들이 이용하지 않고, 그만큼 관심도 상대적으로 적지만 사용자층이 두터워 진다면 재미있는 것들이 많이 나올 것으로 예상됩니다.

웹슬라이스에 이어서 나머지 두개 기능도 한번 만들어봐야지 생각했었는데, 이제야 시도를 해 보았습니다.
막상 해보고 나니 큰 어려움 없이 적용할 수 있었습니다. 아니 큰 어려움도 아닙니다. 정말 쉽더군요. 

비쥬얼 서치에 적용하면 검색어 추천에, 사진자료까지 딱인듯한 아이템이라 바로 적용해보았습니다.  
위 검색창에 검색어를 입력하러 가지 않아도, 쉽게 검색을 할 수 있도록 만들어보겠습니다.

바로 익스플로러의 검색어 창에 검색 공급자를 등록하는 것인데요, 이게 생각보다 그리 어렵지 않습니다.


우선 XML 을 만들어야 하는데, 틀은 다음과 같습니다.

 

 여기서 중요한 부분은 붉은색으로 표시되어 있는 Url 입니다.

첫번째 type이 text/html 으로 되어 있는 부분은 검색어를 넘겼을 때 실제 검색을 처리하는 부분입니다.
바로 검색창에 검색어를 입력하고, 돋보기 아이콘을 클릭했을 때 실제 검색어를 처리하는 부분이죠.

중요한것은 get 방식으로 넘길 때 인자를 구분하는 &의 값을 &amp; 로 써주셔야 합니다.
그 아래 type이 application 으로 되어 있는 부분은 option 입니다. (제가 지금 IE7 이라서 이미지는 주말이 지나서 추가해야 할 듯 싶습니다.)

이미지와 함께 제공되는 검색어 추천을 사용하고 싶다면 저 부분을 따로 개발하여 넣으면 됩니다. +xml 이라고 되어 있으면 xml 타입으로 개발을 해야 하고, +json 으로 표기를 하면 json 으로 출력되도록 개발하시면 됩니다. 나머지 부분은 굳이 신경쓰지 않으셔도 되고, 한번 보시면 다 아실 내용이라 생각됩니다.

이 XML을 서버에 올려놓고 이제 XML을 추가할 수 있도록 "무엇인가" 를 만들어야 겠지요.

뭐 이 "무엇인가" 를 만드는 것은 일도 아닙니다.

<a href="#" onclick="window.external.AddSearchProvider('http://ottd.iruis.net/~onionmen/dnf_item_search.xml')">Add Search Provider Example</a>

위와 같이 window.external.AddSearchProvider() 라는 프로퍼티에 xml위치에 해당하는 인자값 하나만 넣어주면 완성이고, 이 링크를 클릭하면 검색공급자 등록을 할 수 있습니다.

위와 같은 메시지가 뜨면, 공급자 추가를 선택하여 검색공급자를 등록할 수 있습니다.

이제 검색공급자가 추가된 것을 확인하실 수 있습니다.

공급자를 DNF item 으로 변경하고, 검색어를 입력하면 이제 검색된 내용을 볼 수 있게 됩니다.

어때요, 참 쉽죠?

이건 단순한 검색공급자 를 만드는 것이었고, 이제 핵심기능인 비쥬얼서치를 살펴볼까요?

이것또한 별것 없습니다.

<Url type="application/x-suggestions+xml" template="http://ottd.iruis.net/~onionmen/dic_test.xml" /> 
이 부분 기억 하시나요. 여기 들어있는 dic_test.xml 이라는 부분이 바로 비쥬얼서치에 사용될 부분입니다. 지금은 예제로 간단한 xml을 만들었는데, 이부분은 프로그래밍이 들어가야 하는 부분입니다. 검색어에 의해서 관련된 xml이 생성되도록 해야 하지요.

아래 xml은 역전 이라는 검색어를 입력하면 그와 관련된 추천검색어와 비쥬얼서치의 모습을 보여주는 xml 입니다.

위와 같이 xml을 작성하여 서버에 업로드 하면, 이제 단순한 검색창에서 벗어나 한눈에 검색결과를 볼 수 있게 됩니다.


어때요. 참 쉽죠?

던파 관련 자료는 아래 링크에서 찾으실 수 있습니다.
http://ottd.iruis.net/~onionmen/dnf/


한번 재미있는 분야에 응용해보아요~~~ ^^

자주가는 me2day 의 검색창을 만들어봤습니다.
me2day 계정이 있으신분은 아래 링크로 가셔서 테스트 해보세요.

http://ottd.iruis.net/~onionmen/me2/test.php?me2id=자신의 미투 url 뒷자리
(ex : http://ottd.iruis.net/~onionmen/me2/test.php?me2id=sumanpark )

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.