'비쥬얼서치'에 해당되는 글 2건

  1. 2011.04.05 이왕 써야 한다면 IE9 1
  2. 2008.11.14 [ IE8 ] 엑셀러레이터, 비쥬얼 서치 (1) 36
728x90

IE9이 출시 되었습니다. 물론 꽤 오래전에 출시되었죠. 베타버전부터 사용중 이었고, 정식버전이 출시되기를 꽤 기다렸습니다. 기다렸던만큼 출시된 정식버전 IE9은 꽤 높은 완성도가 높았습니다.

기존에 있었지만 부각되지 않았던 기능들, 그리고 새롭게 추가된 기능들을 위주로 하여 IE9을 알아보겠습니다.

1. 주소창 검색


IE8에서 IE9으로 넘어오게 되면서 전반적인 UI가 변경되어 매우 심플해졌는데요, 가장 크게 변경된 부분은 주소창과 검색창의 통합입니다.


IE8의 주소창과 검색창



기존에는 웹사이트 주소를 입력하는 주소창과 검색을 담당하는 검색창이 분리되어 있었습니다. 기존에 검색창은 검색제안이나 비주얼서치 등의 새로운 기술을 내놓음에도 불구하고 접근성의 문제로 자주 쓰이지 않았죠.

주소창 검색에서 검색어 제안을 사용하는 모습


 

이번 주소/검색창의 통합으로 검색제안이나 비주얼서치 등이 좀 더 부각되었으면 하는 바람입니다.
(링크 비주얼서치/검색제안 보러가기)

부가기능 갤러리에 가보시면 검색과 관련된 좀 더 많은 애드온들을 찾아 볼 수 있습니다. 한번 찾아가셔서 기존에 추가 되어 있는 Bing 이외에 구글이나 네이버등을 추가하여 좀 더 편리한 주소창 검색을 이용해보세요.
(링크 부가기능 갤러리 보러가기)

2. 사이트 고정 (1)

IE9은 아쉽게도 윈도우 XP 이하 에서는 제공되지 않습니다. 윈도우 비스타 SP1 이상에서 설치하여 사용할 수 있는데, 윈도우7을 사용중이라면 IE9과의 시너지 효과가 매우 커집니다.

IE9 에서는 사이트 고정이라는 새로운 기능을 내놓았는데요, 사이트를 주소표시줄에 고정시켜놓고, 필요할 때 마우스 원클릭으로 접속 할 수 있도록 하는 기능입니다.

사이트 고정으로 시작표시줄에 등록된 모습



윈도우7 시작표시줄에 joinsmsn 사이트를 고정시켰습니다. 파비콘이 아이콘이 되어 원클릭 접속이 가능합니다. 이는 기존에 사이트바로가기와 크게 다른 점은 없는데요, 나중에 설명드릴 사이트 점프 기능에서 차이점이 드러납니다.

사이트고정 기능으로 사이트에 접속하게 되면, 위 이미지에서 보이시는 것과 같이 이 창은 joinsmsn 을 위한 사이트 입니다. 라고 파비콘으로 표시를 해줍니다. 좀 더 깔끔한 모습을 원하신다면 파비콘의 크기를 64*64 사이즈로 변경해주세요.

고정방법은 여러가지가 있지만 가장 간단한건 고정시키고 싶은 사이트에 접속 한 뒤 그 사이트가 열려있는 탭을 작업표시줄로 잡아끄는 것 입니다.

탭을 끌어서 시작표시줄에 놓는 모습




작업표시줄에 등록이 되면 사이트의 파비콘이 아이콘이 되며, 사이트 접속시 고정된 사이트임을 알려주게 됩니다.

시작표시줄에 등록된 모습



2. 사이트 고정 (2)

사이트를 고정하게 되면 보너스 기능을 하나 더 사용할 수 있습니다. 이건 웹사이트에서 지원을 해 주어야 하는 내용이지만, 지원만 된다면 서비스를 좀 더 편리하게 사용할 수 있습니다. 바로 점프리스트 기능입니다.



페이스북을 사이트 고정시켜놓고, 아이콘에서 오른쪽 버튼 혹은 왼쪽클릭 후 잡고 끌면 위와 같은 메뉴가 나타납니다. 페이스북 같은 경우는 뉴스나 메시지, 이벤트 등의 메뉴로 바로 갈 수 있고, 트위터나 위 이미지의 joinsmsn 에서도 기능을 제공하고 있습니다. 

IE8에서 웹슬라이스 라는 기능을 제공했었습니다. 신기능이지만 잘 사용하지 않는 기능중 하나죠. 개인적으로 이 기능도 웹슬라이스의 뒤를 따르지 않을까 걱정도 되지만 이런 기능들이 잘 활성화 되면 좀 더 웹을 편리하게 사용할 수 있을 텐데 말이죠. 기능의 활성화를 빌어봅니다.

조만간 사이트에 점프리스트 추가 하기를 포스팅 할 예정입니다. (매우 간단합니다.)

3. 보안 강화


MS에서 IE8 출시부터 강조했던 것이 하나 있는데, 바로 보안입니다. IE8 에서는 XSS필터, ClickJacking방지, 탭색변경, 스마트주소표시줄, 스마트스크린 등의 보안 기능을 대거 추가 하였고, 내부적으로 메모리 보호에 강화된 점을 내세웠죠. IE9 에서도 물론 보안 강화를 갖고 나왔습니다. 이미 IE8에서 웬만한건 추가 했기 때문에 특별한 것은 없고, 눈에 띄는 거라면 추적방지 기능과 엑티브액스 필터링 정도 입니다.

추적방지기능 :
제 3사 쿠키 라는 것이 있습니다. 예를 들어서

1. 어떤 검색서비스에 접속했습니다.
2. 그 곳에 B라는 회사가 광고를 하고 있었습니다.
3. B라는 회사에서 임의로 광고에 쿠키를 삽입하였습니다.
4. 쿠키를 통해서 제가 검색서비스에서 활동하는 내역을 추적할 수 있도록 하였습니다.


여기서 B라는 회사가 광고속에 삽입한 쿠키가 제 3사 쿠키입니다. (** 쿠키는 웹상에서 활동하는 정보를 갖고 있을 수 있는 일종의 임시파일 입니다.)

이러한 제 3사 쿠키의 활동을 막는 것이 추적방지기능 입니다. 이 추적방지 기능은 IE8에도 제3사쿠키방지 라는 옵션으로 제공되던 보안서비스이지만, 이를 좀 더 강화 했습니다.

아래 링크에 접속하여 외부 사이트에서 제공되는 블랙리스트 사이트를 IE9에 추가할 수 있습니다.
(링크 http://iegallery.com/kr/trackingprotectionlists/default.aspx)



의외로 제3사쿠키를 활용하는 사이트들이 많이 있습니다. 스스로도 개인정보 보호에 힘써주세요.

4. 자주 방문하는 사이트


about:blank 라는 문구가 낯이 익으신 분들은 저처럼 성격이 좀 급하신 분들 아닐까 합니다. 웹사이트의 시작페이지로 about:blank 를 넣으면 브라우저가 실행됨과 동시에 빈페이지가 뜨기 때문에 조금이나마 쾌적한 인터넷 환경을 만들 수 있습니다.

IE9 에서는 about:Tabs 라는 시작페이지를 공식적으로 지원하기 시작했습니다. 브라우저를 실행하면 방문했던 페이지들을 빈도수 별로 리스트업하여 보여줍니다.


 

어떤 브라우저 툴바에서도 비슷한 기능을 지원하는 것으로 알고 있는데요, IE9 에서는 자체적으로 지원하니 더이상 툴바에 의존하지 않아도 됩니다.


5. 성능

빠릅니다. 많이 빨라졌습니다. IE9 사용하시다가 IE8 이하 버전으로 못돌아갑니다. 자바스크립트 성능 향상이니, 뭐니 어려운 말 하지 않겠습니다. 설치하셔도 후회하지 않으실 겁니다. 은행권이나, 기타 대형 포털들에서도 무리없이 사용 가능하니, 망설이고 계시다면 한번 설치해보시는게 어떨까요.


6. 아쉬움

A. 확장기능
- IE9이 아무리 빨리지고, 보안성이 향상 되어도, 절대 안쓰는 사람들이 있습니다. 그 사람들이 꼽는 가장 큰 이유는 아무래도 확장기능 이 아닐까 합니다. 얼마 없기도 없을뿐더러 그나마도 찾기가 매우 어렵습니다. 윈도우모바일6.5 이하버전의 스마트폰을 사용하는 기분입니다.

아, 확장기능이 있기는 합니다. 다만 그 이름이 액티브엑스 라는게 문제지만요.

B. 부가기능
- 웹슬라이스나, 검색제안 등이 활성화가 안되는 것이 많이 아쉽습니다. 사용하기 어려운 것도 아니고, 만들기 어려운 것도 아닌데 의외로 많은 분들이 모르고, 쓰지 않습니다. 무엇이 문제일까요. 개발자스러운 접근방식? 검색제안 같은 것은 주소창과 검색창이 합쳐진 지금은 조금 기대가 됩니다만 웹슬라이스는 도무지 답이 없네요.

C. HTML5
- IE9의 특징 중 하나로 꼽는 것이 웹표준지원, HTML5의 지원 입니다. 하지만 이 지원 수준을 보면 참담합니다. 



다른건 봐야 머리만 아프니, 점수만 공개합니다. 일반 사용자야 브라우저를 사용하는데 HTML5 지원 미지원 여부가 뭐 그리 큰 차이겠냐만 개발자들에게는 참담합니다. 지원되지 않는 것들은 어떤 방식으로 구현을 해야 할지, 고민부터 앞섭니다. 


타 브라우저에 비해서 업데이트도 쉽지 않은데 말이죠.

7. 끝


분명 크롬이나 파이어폭스, 사파리 등에 비해서 떨어지는 부분도 많고, 이미 다른 브라우저들에서는 기본적으로 제공되고 있었던 기능들도 많이 있습니다. 하지만 국내 환경에서 IE 시리즈는 분명 버릴 수가 없는 존재입니다. 그렇다면 그 중에서 가장 나은 IE9을 선택해 보는 것은 어떨까요.

Posted by onionmen
728x90

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

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

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

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

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

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

딱이죠?

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

여기 검색어를 입력해보세요.


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


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

 

<?xml version="1.0" encoding="euc-kr"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
    <ShortName>DNF item</ShortName> 
    <Description>DNF item search</Description> 
        <Url type="text/html" template="http://www.d-fighter.com/?GO=dictionary|item&amp;clickSV=dnf&amp;search_text={searchTerms}" /> 
        <Url type="application/x-suggestions+xml" template="http://ottd.iruis.net/~onionmen/dic_test.xml" /> 
    <Language>ko-kr</Language> 
    <OutputEncoding>euc-kr</OutputEncoding> 
    <InputEncoding>euc-kr</InputEncoding>
</OpenSearchDescription> 

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

Type

   

Text/html

Request

검색어를 입력했을 때 실제 처리하는 부분

Application/x-suggestions+xml (+json)

optional

검색어 제안등의 부가기능을 제공

첫번째 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 version="1.0" encoding="euc-kr"?>
<SearchSuggestion version="2.0" xmlns="http://opensearch.org/searchsuggest2">
  <Query>역전</Query>
  <Section>
    <Item>
      <Text>역전</Text>
      <Url>http://www.d-fighter.com/?GO=dictionary|item&amp;clickSV=dnf&amp;search_text=역전</Url>
    </Item>
    <Separator title="Finding in DNF" />
    <Item>
      <Text>역전의 월록</Text>
      <Description>거너용 무기</Description>
      <Url>http://www.d-fighter.com/?GO=dictionary|item&amp;TO=&amp;clickSV=dnf&amp;mode=view&amp;search_text=역전&amp;se=&amp;category=&amp;position=1&amp;it_no=31107</Url>
      <Image source="http://img.d-fighter.com/img/item_img/revolver/00037.png" width="28" height="28" />
    </Item>
  </Section>
</SearchSuggestion>


위와 같이 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 )
Posted by onionmen
이전버튼 1 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2024.3
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday
Today
Total