인터넷익스플로러가 7 버전 까지 나왔을 때, 파이어폭스는 한창 강세를 보이고 있었다. 파이어폭스의 점유율을 의식하여 부랴부랴 7 버전을 내 놓았으니 말이다.

언제부터인가 IE6를 버리고 파이어폭스를 쓰기 시작했는데, 그 때가 아마 본격적으로 웹개발을 시작하고 얼마 안돼서였을거다. 당시 파이어폭스의 확장기능에 한창 매료 되어서 헤어나올 수가 없었다. 그중 단연 최고는 파이어버그 라는 개발자도구 였다.

원하는 곳의 DOM 구조를 바로 파악할 수 있고, 파일을 변경할 필요 없이 실시간으로 수정하며 적용된 모습을 볼 수 있었다. CSS 수정, 적용이 바로바로 가능했고, 페이지 로딩속도 및 HTTP status 코드는 물론이고, 자바스크립트 디버깅까지 지원하여 이게 없으면 개발이 불가능할 정도였다.

파이어폭스가 버전업데이트가 되어서 파이어버그가 동작하지 않으면 파이어폭스 업데이트를 미룰 정도였다. (나말고도 많은 사람들이 그랬을거다) 1.4 버전인지 1.5 버전까지 사용하고, 요즘엔 잘 사용하지 않고 있어서 어떻게 발전 하였는지 잘 모르겠다. 

파이어폭스에서는 제대로 개발을 할 수 없는 환경으로 터전을 옮기고 나서 IE 에서 돌아가는 여러가지 개발자도구를 찾아서 사용해보았다. 파이어버그에 비하면 턱없이 부족한 툴 들이었지만, 어쩔 수 없이 불편함을 감수하고 사용했다.

그러다가 IE8 버전이 나오고, 새로이 추가된 개발자 도구 라는 것을 보고 커다란 발전에 기쁨의 눈물을 흘렸었다.

Dom 셀렉터, CSS 선택수정, 중단점을 삽입할 수 있는 자바스크립트 디버깅, 콘솔창 추가로 개발환경이 무척이나 편리해졌다. 이는 IE9으로 오면서 더욱 강력해 졌는데, 이에 대해서 소개를 해볼까 한다. (자바스크립트와 콘솔 위주로 감)


콘솔창

인터넷익스플로러를 실행하고 F12 를 누르면 아래와 같은 개발자 도구가 열린다.

2011:04:10 15:10:12


왼쪽 탭에는 HTML, CSS, 콘솔, 스크립트 등등이 있고, 이 선택에 따라서 오른쪽 탭 영역의 UI가 변경된다. 콘솔탭을 선택하면 빈 화면이 덩그러니 나타나는데, 맨 하단에 보면 뭔가를 입력할 수 있는 입력창이 존재한다.

2011:04:10 15:15:54


여긴 자바스크립트나 기타 DOM객체를 직접 입력하여 확인해 볼 수 있는 공간이다. 실제로 사이트가 전부 로드된 상태에서 콘솔창에 관련 객체 이름을 써 넣기만 하면 그에 따른 정보가 출력된다.

2011:04:10 15:18:16


테스트 페이지로 만든 곳의 this 객체 정보를 호출해봤다. 단지 this 라고만 입력했을 뿐인데, 현재 document의 this객체에 대한 정보가 나타난다.

테스트 페이지에 아래와 같은 HTML 태그를 추가했다.
2011:04:10 15:23:53
그리고 콘솔창에서 위 엘리먼트에 대한 객체 정보를 호출해보았다.


표준 HTML DOM method인 getElementById() 를 사용하여 객체를 호출하거나, 그냥 ID 값만을 입력하여 객체에 대한 정보를 확인할 수 있다.

이 콘솔창에서는 다른 콘솔창과 마찬가지로 페이지에 설정된 자바스크립트를 실행시킬 수 있는데, 방법은 매우 간단하다.

2011:04:10 15:36:01

 
위와 같은 자바스크립트 코드를 추가하고, 콘솔창에 함수 이름을 입력하면 바로 실행이 된다.

2011:04:10 15:37:11


여기 콘솔창에서 사용할 수 있는 여러가지 내장함수들이 존재 하는데, 이는 IE8은 물론이고 웹킷, 모질라계열에서도 비슷한 동작을 한다.

 window.console.log  console.log("로깅용 메시지")  로그 : 로깅용 메시지
 window.console.error  console.error("에러 메시지")  
 : 에러 메시지
 window.console.info  console.info("정보 메시지")  
 : 정보 메시지
 window.console.warn  console.warn("경고 메시지")  
 : 경고 메시지
 window.console.dir  console.dir(오브젝트)  오브젝트 내용이 출력
 window.console.assert  console.assert(식, "메시지")  식이 틀릴 경우 메시지가 출력
 window.console.clear  console.clear()  콘솔창의 내용을 모두 삭제함

콘솔창에서 사용할 수 있는 내장함수는 위와 같고, 각각 실행 하였을 때 나타나는 메시지 이다. 실제로 아래와 같은 코드를 작성하여 테스트를 해봤다.

2011:04:10 15:48:00


2011:04:10 15:49:43


결과창을 보면, 우리가 예상한 결과와 동일하게 출력된 모습을 볼 수 있다. console, 또는 window.console 이라고 입력하면 console에 포함된 메소드들이 출력되니 직접 입력해서 확인 해보자.

** 참고로 console.dir 은 IE9 에서 지원하는 신규메소드로 IE8에서 동작하지 않는다. console.dir(object); 로 실행 하며, 객체의 내용을 좀 더 상세하기 표현해 준다.

기존에 alert 과 document.write, iframe 등으로 디버깅을 하던 불편함은 콘솔창을 사용하면 말끔히 해결된다. 초반엔 익숙하지 않기 때문에 어색하겠지만 지속적으로 사용해보면 예전으로 다시 돌아가기 힘들어질 것이다. 

사용하지 않고 있던 사람들이라면 이번 기회에 한번 사용해보자. 이러한 콘솔창은 IE8 이상, 크롬, 사파리, 파이어폭스 에서 기본적으로 지원하고 있다.


2부. IE9으로 디버깅 하기 (2) - 자바스크립트 디버깅

신고
Posted by onionmen

댓글을 달아 주세요

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)

2011:04:09 00:02:30


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

4. 자주 방문하는 사이트


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

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

2011:04:09 00:04:25

 

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


5. 성능

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


6. 아쉬움

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

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

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

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

2011:04:09 00:15:02


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


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

7. 끝


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

신고
Posted by onionmen

댓글을 달아 주세요

  1. Lucas 2011.05.22 09:19 신고  댓글주소  수정/삭제  댓글쓰기

    잘봤습니다. 사이트 고정 이란것도있었네요

IE9의 개발자 테스트 버전이 출시되었습니다. (바로가기링크)

주요이슈로는 HTML5 지원, CSS3 지원, 속도향상, 자바스크립트 엔진 교체 등이 있습니다.


자바스크립트의 엔진을 Webkit SunSpider 로 교체하여 획기적인 웹서핑 속도향상이 예상됩니다. IE8 버전에 비해서 여섯배정도 성능 향상이 있다고 나오는데요, 아마 정식 버전에서는 더 빨라질 것 같습니다. IE8도 이전 버전들에 비해서 정말 많은 렌더링 성능의 향상이 있었던 제품인데, IE9과 IE7, IE6 과는 어느정도 차이가 날까요. 

그 외에도 당연히 지원되야 하는 것들을 지원한다고 광고하고 있습니다. 웹개발자 입장에서는 반갑기도 하면서 또 힘들기도 하네요. 국내에서 IE6만이라도 사라져준다면 감사하겠는데 말이죠.

올해 안에 정식버전이 출시되었으면 좋겠네요.

IE9는 비스타 SP2 이상에서 동작합니다. GPU를 사용하기 때문이라고 하네요.
프리뷰페이지는 크롬에서 모든 데모가 활성화 되고, IE8에서는 일부 데모만 확인할 수 있습니다.
신고
Posted by onionmen

댓글을 달아 주세요

오늘의 던파 라는게 있습니다.
던전앤파이터 라는 온라인 게임을 하신다면 한번쯤은 들어보셨을 오늘의 던파.

게임에서 이슈가 되는 사항이나, 열혈 유저들이 올린 컨텐츠를 노출시켜 정보를 공유 할 수 있게 만든 메뉴입니다.
게임을 하는 사람들에겐 꽤 유용하고 재미있는 정보 입니다.


저어기 오늘의 던파 라고 보이시나요.

IE8 정식 출시 기념으로 오던을 구독할 수 있게 웹슬라이스를 이용하여 만들어보았습니다.
웹슬라이스를 이용하면 좀 더 쉽게 오던을 즐기실 수 있습니다.

보이시나요. 웹서핑 도중에도 즐겨찾기 처럼 한눈에 확인할 수 있습니다.


덤으로 이벤트도 만들어 보았어요.

IE8의 웹슬라이스를 사용하여 오던과 이벤트를 한눈에 확인해보세요.

[ IE8 에서만 가능합니다. ]

http://ottd.iruis.net/~onionmen/dnf/slices_todaydnf.php
http://ottd.iruis.net/~onionmen/dnf/slices_event.php

위 링크에 접속하시면 여러분도 쉽게 오던과 이벤트를 확인하실 수 있어요.

2008/11/14 - [Review/IT] - [IE8] 엑셀러레이터, 비쥬얼 서치 (1)
2008/08/12 - [Review/IT] - [ IE8 ] 웹슬라이스를 적용한 미투데이 최근 댓글 구독.
2008/08/11 - [Review/IT] - [ IE8 ] 웹슬라이스(webslices) 적용했습니다.



신고
Posted by onionmen

댓글을 달아 주세요

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

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


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

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

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

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

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

'Day by day' 카테고리의 다른 글

함께살기 with XNOTE  (7) 2009.01.18
올해의 컨셉.  (2) 2009.01.03
"개발자 좀 살려주세요." 배너를 달았습니다.  (2) 2008.12.04
무기력하지만, 기쁨충만한.  (2) 2008.10.29
반갑다. New Tistory.  (4) 2008.06.18
2008년 6월까지.  (2) 2008.06.12
Posted by onionmen

댓글을 달아 주세요

  1. 섹시녀 2008.12.07 13:19 신고  댓글주소  수정/삭제  댓글쓰기

    어머~
    저도 이거 깔아봐야겠어요~ 머리빠지면 안되잖아요~!!
    (안까먹으면~!!)

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

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

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


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


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

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

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


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


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


신고
Posted by onionmen

댓글을 달아 주세요

  1. 2008.11.27 10:03  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. Favicon of http://ozhey.tistory.com BlogIcon 로로롱 2008.11.27 10:23 신고  댓글주소  수정/삭제  댓글쓰기

    힝 ㅠ 저는 서브웨이가 클릭 안되여;;

  3. 섹시녀 2008.11.28 16:33 신고  댓글주소  수정/삭제  댓글쓰기

    양파맨님 눈먼자들의 도시 영화 같이 보자고 하니까 벌써 가셨네요..
    섹시녀는 슬픕니다..ㅠㅠㅠㅠㅠ

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. 이전 댓글 더보기
  2. 와 신기해 2009.05.19 09:56 신고  댓글주소  수정/삭제  댓글쓰기

    좋은내용이내요 .. 이거있으면 검색 엄청 편리할듯 ㅋㅋ 아이템도 쉽게찾고

  3. 무헌~ 솔히야? 2009.05.19 16:03 신고  댓글주소  수정/삭제  댓글쓰기

    나 컴맹 ? ㅎㄷㄷ ;;

  4. 나도 컴맹.... 2009.05.19 16:45 신고  댓글주소  수정/삭제  댓글쓰기

    인가;; 무슨얘기인지 하나도 모르겠네염. 명색이 컴공과인데

  5. 네오플은 내용 알까? 2009.05.19 17:02 신고  댓글주소  수정/삭제  댓글쓰기

    네오플은 내용을 알고 오던을 띄운 걸까여 ???

  6. 이분이 네오플 직원 2009.05.19 17:15 신고  댓글주소  수정/삭제  댓글쓰기

    이분이 네오플직원인데 내용알까는 뭔 개소리인가여

  7. 미네르바 2009.05.19 17:46 신고  댓글주소  수정/삭제  댓글쓰기

    전 간이드북이있습니다 ㅎㅎ

  8. 바보들의 행진이구만 2009.05.19 18:23 신고  댓글주소  수정/삭제  댓글쓰기

    바보님들 .. 두뇌가 병X면 손발이 고생한다더니
    http://ottd.iruis.net/~onionmen/dnf/
    클어가서 툴바추가하세요

  9. 로드-나이트 2009.05.19 18:39 신고  댓글주소  수정/삭제  댓글쓰기

    어차피 홈피에서 게임접속하는 게임인데 던파에서는 별로 필요없는 기능같네요
    좋은 정보임에는 분명하지만...오던의 기준은 참...난해하군요

  10. 유고 걸 2009.05.19 19:12 신고  댓글주소  수정/삭제  댓글쓰기

    뭘까?

  11. BlogIcon 지나가는하천민 2009.05.19 20:45 신고  댓글주소  수정/삭제  댓글쓰기

    풉.길가던하천민도이해함ㅋ
    님들뭐임ㅋ

  12. 1234 2009.05.19 21:46 신고  댓글주소  수정/삭제  댓글쓰기

    결국 스크롤은 엄청난 속도로 내려오기 시작하는데..

  13. 2009.05.19 22:55  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  14. Favicon of http://blog.naver.com/qlsngood BlogIcon Ziskad 2009.05.19 23:01 신고  댓글주소  수정/삭제  댓글쓰기

    ㅇㅅ ㅇ 음침님 블로그에서 본 그 양파맨님인거같군여?!
    위에 있는 식을 어디로 보내야하는지 잘 모르갰내욥 ㅠㅠ

  15. 네츠아이 2009.05.19 23:44 신고  댓글주소  수정/삭제  댓글쓰기

    음...페이지에 오류가 있습니다 뜨는데...어찌해야함 ㅠㅠ
    비주얼 서치만 안됨 ㅠ

  16. Ruid 2009.05.20 16:47 신고  댓글주소  수정/삭제  댓글쓰기

    이거 해논거 없애는 방법은 없나요

  17. =ㅅ= 2009.05.20 17:01 신고  댓글주소  수정/삭제  댓글쓰기

    어떤게 쓰는거야.............

  18. 이글 쓴사람 폅신 2009.05.22 18:51 신고  댓글주소  수정/삭제  댓글쓰기

    이딴게 왜 오던인지 모르겠네 ...

  19. 이해안되냐? 2009.05.23 19:22 신고  댓글주소  수정/삭제  댓글쓰기

    IE8 하루만 써보면 뭔얘긴지 다 안다.

  20. ㅋㅋ 2009.05.23 21:29 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋ 오던 추카

  21. Favicon of http://www.runpapa.com BlogIcon car 2011.06.21 06:33 신고  댓글주소  수정/삭제  댓글쓰기

    이거 해논거 없애는 방법은 없나요

블로그에 웹슬라이스를 적용했었습니다.

그리고 제가 자주 사용하는 웹서비스 미투데이(링크)에도 이 기능을 적용 할 수 있을 것 같아 시험삼아 만들어 봤습니다.

아이디만 알면 그사람의 최근 덧글을 가져올 수 있는 일종의 가젯입니다.
이용하시려면 IE8을 설치하시거나, 아니면 일전에 소개해드린 파이어폭스의 확장기능인 Webchunks (다운로드링크) 를 설치하셔야 합니다.

웹슬라이스를 적용하기 위해 HTML을 파싱하는 simple HTML DOM parser(링크) 를 사용했습니다.


DOM parser를 이용해 Comment To Me의 내용만 추출했습니다.

사용자 삽입 이미지

이 곳에 webslices 를 적용시킬 div 태그만 넣으면 끝날 줄 알았는데, 아니더군요. -_-;

사용자 삽입 이미지

링크부분에 http://me2day.net 이라는 부분이 빠져있어서 /eyedamping 이라는 Mr.면도날드님의 아이디만 링크로 연결되어 있었습니다. 그래서 클릭해도 제대로된 링크로 갈 수 없었습니다.

그래서 저 HTML을 다시 파싱하여 링크를 넣었습니다.
사용자 삽입 이미지

사용자 삽입 이미지

제대로 된 링크가 잡혔고, 웹슬라이스를 적용시킬 태그 몇개를 더 넣어주어 완성하였습니다.

사용자 삽입 이미지

파이어폭스에서 모습


사용자 삽입 이미지

IE8에서의 활용 모습

완성!

사용자 삽입 이미지

여기 이렇게 아이디만 바꿔서 webslices 로 등록하면 됩니다!

사용자 삽입 이미지


별도의 OpenAPI를 사용하지 않고도 HTML 포함 41줄 코딩하여 간단하게 최근댓글을 불러올 수 있게 되었어요.
간단한 CSS도 적용해서 좀 더 예쁘게 만들 수도 있어요.

어떄요. 참 쉽죠?



덧1. FF는 클릭 즉시 읽어오기 때문에 덧글 내용을 바로바로 확인할 수 있는데, IE8의 경우는 15분의 수집시간이 있어서 내용을 바로바로 확인할 수 없어서 아쉽습니다!

덧2. PHP5를 지원하고 allow_url_fopen 옵션이 On 으로 되어있는 웹서버가 없어서 외부서버에서 돌릴 수가 없네요. ㅠㅠ

덧3. 조금의 수고를 들여서 RSS로도 만들수 있겠네요.

덧4. 소켓통신을 이용해서 외부에서 접근할 수 있도록 만들었습니다.
주소 : http://ottd.iruis.net/~onionmen/?me2id=
me2id 다음에 자신의 미투데이 주소를 넣으세요.
(예: http://ottd.iruis.net/~onionmen/?me2id=3rdtype)

신고
Posted by onionmen

댓글을 달아 주세요

  1. Favicon of http://www.hwanny.net BlogIcon Noel 2008.08.12 13:09 신고  댓글주소  수정/삭제  댓글쓰기

    "참 쉽죠?" 라는 말이 밥 로스가 문득 생각나는군요 ^^;

  2. Favicon of http://icehit3.tistory.com BlogIcon 파초 2008.08.12 14:40 신고  댓글주소  수정/삭제  댓글쓰기

    재밋어 보이긴 한데, ie 8을 설치해야 된다는 얘기에 귀차니즘이 도지는군요 ^^;

    • Favicon of http://onionmen.kr BlogIcon onionmen 2008.08.12 14:49 신고  댓글주소  수정/삭제

      IE8 말고도 파이어폭스 사용하신다면 확장기능 설치로 사용 가능합니다. 파폭 사용 안하신다면 어쩔수 없지만요. ㅎ 언젠가 IE8 정식버전이 나온다면 한번 사용해보세요. ^^

  3. Favicon of http://pys.i21c.net BlogIcon 박영식 2008.08.12 16:38 신고  댓글주소  수정/삭제  댓글쓰기

    좋아요 좋아요.

  4. Favicon of http://marketings.co.kr BlogIcon 마케팅스 2008.09.07 00:24 신고  댓글주소  수정/삭제  댓글쓰기

    와, 하지만 역시 8 버전이 선행되어야 한다는 ,.., 웹슬라이스를 보고 웨슬리스나입스가 생각나는건 웨일까 ,,. 웨 ..

    • Favicon of http://onionmen.kr BlogIcon onionmen 2008.09.17 23:43 신고  댓글주소  수정/삭제

      ㅎㅎ 안녕하세요 넷물고기님. 제가 답글이 많이 늦었네요 ^^;;

      오늘 IE8 Beta2 세미나에 다녀왔습니다.
      참 많이 좋아졌더군요. 이참에 IE8한번 설치해보심이 ^^

      웹슬라이스와 웨슬리스나입스 ㅋㅋ 비슷하네요. ㅎㅎ

  5. Favicon of http://echoya.com/ BlogIcon 에코 2008.09.10 23:25 신고  댓글주소  수정/삭제  댓글쓰기

    님하, 언제쯤 쉬워지나요?ㅋㅋ

webslice 라고 적어놨는데, webslices 군요. 제목 수정했습니다.


언젠가 uxfactory 에서 글을 보고 내 블로그에도 적용시켜 봐야지 했는데, 오늘 회사에서 시간이 잠시 비어 적용해 봤습니다.

IE8에 도입된 새로운 기능 중 하나인 웹슬라이스를 사용할 수 있도록 적용해봤습니다.
어려운 기술이 들어가는 것은 아니고 단지 HTML 태그 두세개만 추가해주면 쉽게 적용 가능하네요.

다음 URL을 가보시면 쉽게 적용시킬 수 있을 것 같습니다.

링크

간단히 요약하자면 다음과 같은 태그를 적용시키고자 하는 부분에 넣어주시면 됩니다.

<div class=”hslice” id=”1”>
  <p class=”entry-title”>item - $66.00</p>
  <div class=”entry-content”>high bidder:buyer1
     적용시킬 태그를 이곳에 넣어주세요.
  </div>
</div>

div나 p 와 같은 태그는 신경안쓰셔도 되고, class 부분에 들어가는 이름만 적용하시면 될 듯 합니다.
그에 맞는 CSS도 함께 적용시켜주시면 한층 이쁘겠죠?

현재 IE8 베타1에서 이 기능을 사용하실 수 있고, FF3에서는  Webchunks (다운로드링크) 라는 이름의 확장기능을 통해 사용하실 수 있습니다. 이 확장기능은 IE8 beta1이 공개되자마자 다음날 바로 FF용 확장기능으로 나와 사람들의 입에 오르내린적이 있습니다. 현재 FF 3.0.1에서 사용가능한 버전은 webchunks 0.13 버전입니다. 위 링크에서 받으세요.

IE8과 부가기능을 설치한 FF 사용자가 제 블로그 사이드바의 최근 댓글에 마우스를 올리시면 손쉽게 추가하실 수 있습니다.

사용자 삽입 이미지

파이어폭스에서의 이미지


사용자 삽입 이미지

요건 IE8에서의 모습.

재미로 적용시켜 봤는데, 추후에 IE8이 보급될 경우 많은 확장성이 있겠네요. ^^

IE의 경우에는 즐겨찾기의 빠른연결에 등록이 가능한데, FF의 경우는 빠른연결 하단에 또다른 Bar 가 생기는점이 아쉽습니다.

그리고 IE는 아직 버그인지 이름을 수정해도 반영이 되지 않는군요. 조만간 Beta2나 정식버전이 나오면 수정될 부분인것 같습니다.

신고
Posted by onionmen

댓글을 달아 주세요

  1. Favicon of http://dbjang.tistory.com BlogIcon dbjang 2008.08.22 20:32 신고  댓글주소  수정/삭제  댓글쓰기

    아이콘을 누르면 옆으로 프레임처럼 나타나는건가요??
    내가 정확히 이해를 잘 못하는 듯.. ^^;;;;;

    • Favicon of http://onionmen.kr BlogIcon onionmen 2008.08.24 01:31 신고  댓글주소  수정/삭제

      아이고, 안녕하세요 란♡님. 오랜만입니다.
      제 글에 설명이 부족했나봅니다.
      아이콘을 누르면 프레임처럼 나타나는건 아니고, 즐겨찾기처럼 등록이 됩니다.

      익스플로러(또는 FF)의 주소표시줄 아래에 등록이 됩니다. 그리고 그걸 클릭하시면 별도의 창이 뜨지 않고 바로 그부분에 대한 업데이트된 내용을 확인하실 수 있는거죠.

      자세한 내용은 이곳(http://joongs.net/15)을 참고하시면 될 것 같아요 ^^

이전버튼 1 이전버튼

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

달력

 « |  » 2017.12
          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

최근에 올라온 글

Yesterday135
Today57
Total1,624,981

티스토리 툴바