익스프롤러가 버전 6에서 버전 7로 업데이트 되었을 때, 외관상 변한것이 하나 있었습니다. 주소창 옆에 붙어있는 검색창 이었죠.
스샷은 IE8
빨간 박스로 쳐놓은, 안에 google 이라고 써있는 창 입니다. 저기에 검색 키워드를 입력하면 google에 직접 접속하지 않아도 자동으로 접속하여 검색이 가능했죠.
IE6일 때에는 주소창으로 가서 -> 검색사이트 주소를 입력하고 -> 검색창에 검색어 입력 -> 결과확인 과 같은 단계를 거쳤습니다. 주소창으로 가는 단축키가 Alt + D 로 매우 편리했기 때문에 서핑중 마우스를 사용하는 불편함 없이 사용했죠.
검색창에 직접 검색어를 입력하게 되면 검색창으로 가서 (Ctlr + E) -> 검색어 입력 -> 결과 확인 의 단계를 거치게 되면서 단계를 하나 줄일 수 있습니다. 여기에서 검색사이트가 모두 로딩될 때 까지를 기다리지 않아도 되고, 몇몇 사이트에선 검색창에 포커스를 가져갈 필요가 없기 때문에 실제 검색결과가 나타나기 까지의 체감 속도는 훨씬 빨랐습니다.
하지만 저도 IE7이 처음 나오고 얼마간은 기존에 쓰던 방식으로 계속 검색을 했죠. 주소창에 google,com 이나 naver.com 등을 쳐서 검색창에 검색어를 입력하는 방식으로요.
큰 필요성을 느끼지 못했거든요. 단축키도 헷갈리고, 잘 안쓰게 되니까 까먹고, 게다가 검색엔진을 변경하려면 마우스 액션을 한번 취해야 했기 때문에 잘 안쓰게 되었던것 같습니다.
이러한 UI는 IE8이 나와도 동일하게 유지 되었습니다. 파이어폭스도 당시 동일한 UI였던 것으로 기억하구요.
그런데 구글에서 출시한 크롬 이라는 브라우저 에서는 이러한 UI를 채택하지 않고, 정말 심플하게 주소창 하나만 달랑 박아 놨습니다. IE6처럼 말이죠.
이게 무슨 시대역행적 UI인가 하고 사용했었는데, 알고보니 크롬에서는 주소창과 검색창을 통합했더군요. 주소를 치면 주소로 이동하고, 도메인 주소가 아니라고 판단되는 뭔가를 입력하면 구글검색으로 바로 이어집니다.
사실 입력창을 두개로 나눠놓은 것보다는 이러한 방식이 사용자들에겐 더욱 편리하게 다가옵니다. 두가지를 기억할 필요가 없기 때문이죠.
여기에 문제는 모든 기본 검색이 google로 되고 있다는 점 입니다. 난 google 검색결과가 맘에 안든다 하는 유저가 분명히 있을거란 말이죠.
그래서 이러한 기본 검색엔진을 변경할 수 있게 해 놓았습니다.
크롬에 보면 스패너 모양의 아이콘을 클릭하여 크롬 옵션창을 엽니다.
별거 없어보이는 옵션창이 열립니다. 여기 중간 하단에 기본 검색엔진 이라는 타이틀이 보이고, google이 기본으로 되어 있습니다. 여기서 설정을 누르면 검색엔진을 변경할 수 있습니다.
검색엔진을 새로 추가할 수도 있고, 변경, 삭제도 가능합니다. 그리고 이런 검색엔진들에 키워드를 입력할 수 있습니다.
이 키워드는 검색에 매우 편리하게 사용할 수 있는 일종의 단축키입니다.
크롬 주소창에 그냥 일반 검색어만 입력할 경우 사용자가 기본검색엔진으로 설정한 곳에서만 검색이 됩니다. 그런데 키워드를 사용하면 여러분야에서 좀 더 쉽게 검색이 가능하죠.
주목해야 할 부분은 키워드에 써진 글자들 입니다. 저는 주로 검색하는 부분을 등록해 두었는데요, 책, 영상, 쇼핑, 스팸 등이 그것 입니다.
크롬 검색창이 입력을 기다리고 있습니다.
여기에 아까 등록해둔 키워드 중 하나인 스팸을 입력하면 빨간박스에 쳐진것 처럼 Tab을 누를 수 있다는 표시로 아이콘이 나타나고 있습니다.
하단에는 자동완성으로 스팸 - google 검색과 missed-call.com 에서 <검색어 입력> 검색이 나타납니다.
여기서 다른건 신경쓸 필요 없이 Tab을 누르면 검색창이 바뀝니다.
Tab을 누르게 되면 주소 입력창이 바뀌고, 하단에 자동완성 되어 있던 부분의 순서가 바뀌었습니다. 이 상태에서 어떤 검색어를 입력하면 바로 missed_call.com 에서의 검색결과를 보여줍니다.
첫번째 type이 text/html 으로 되어 있는 부분은 검색어를 넘겼을 때 실제 검색을 처리하는 부분입니다.
바로 검색창에 검색어를 입력하고, 돋보기 아이콘을 클릭했을 때 실제 검색어를 처리하는 부분이죠.
중요한것은 get 방식으로 넘길 때 인자를 구분하는 &의 값을 & 로 써주셔야 합니다.
그 아래 type이 application 으로 되어 있는 부분은 option 입니다. (제가 지금 IE7 이라서 이미지는 주말이 지나서 추가해야 할 듯 싶습니다.)
이미지와 함께 제공되는 검색어 추천을 사용하고 싶다면 저 부분을 따로 개발하여 넣으면 됩니다. +xml 이라고 되어 있으면 xml 타입으로 개발을 해야 하고, +json 으로 표기를 하면 json 으로 출력되도록 개발하시면 됩니다. 나머지 부분은 굳이 신경쓰지 않으셔도 되고, 한번 보시면 다 아실 내용이라 생각됩니다.
이 XML을 서버에 올려놓고 이제 XML을 추가할 수 있도록 "무엇인가" 를 만들어야 겠지요.
위와 같이 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 입니다.
2009/04/28 19:42 | Tracked from Krang :: 블로그, 웹서비스리뷰, 닥스훈트
반 년 가까이 베타서비스로 담금질 해왔던 인터넷 익스플로러 (Internet explorer) 8 버전이 정식 공개 되었네요. 공개되자마자 버츄얼 PC에 설치해서 사용해 봤는데 이전버전(IE 7)보다 속도는 확실히 나아졌지만 로딩타임 비교 테스트와 언론에서 보여주는, 다른 브라우저보다 현저히 빠른 수준이라는 느낌은 받지 못했습니다. 전 오히려 요즘 이용하고 있는 오페라 10 베타버전의 속도가 놀라울 정도라는 느낌이 들더군요. 특히 인내심 테스트 하기..
댓글을 달아 주세요
릴레이 포스팅 계속해서 기대됩니다.
그럼 즐거운 하루 되세요 ^^
양파는 몸에 너무너무 좋은 식품이죠^^
전 매일 양파를 먹어요. ㅎㅎㅎ
나비오님도 즐거운 하루 되세요 ^^
비밀댓글입니다
: )