오늘 언젠가부터 '다음'의 지도 서비스 중 길거리 사진을 보여주는 서비스인 '로드뷰'가 네이버 실시간 검색어 10위 안에 자리잡고 있었다. 왜일까?

로드뷰를 클릭해서 '로드뷰' 검색 결과를 보면 뉴스가 가장 상단에 위치해있고 뉴스 내용은 아래와 같다.
로드뷰 사진에 성매매업소가 있는 길거리가 찍혔고, 또 그곳에 서있는 여성들도 찍혔다는 뉴스..-_-;;;


이건뭐......
아마 실제로 로드뷰에서 이 사진을 보려고 엄청나게 많은 사람들이 다음 지도 서비스에 들어가서 로드뷰를 보지 않았을까..
아직 그런 서비스가 있는줄도 몰랐던 수많은 사람들이 이 뉴스들과 네이버의 실시간 검색어 10위 안에 들어가있었던 것으로인해 로드뷰에 대해 알았을것이고 들어가봤을 것이다.

이것이 다음 로드뷰를 광고해주는 기사인 것인지...혹은 다음이 만들어낸 것인지... 알 수가 없다..
예전에 마이크로소프트가 새로운 검색엔진 '빙'이라는 것을 내놓았을 때, 네이버 등 포탈들의 실시간 검색어 1위에 상당시간 자리잡고 있었던 적이 있었는데 이 때 올라간 이유는 '빙'에서 포르노가 검색된다는 뉴스 때문이었다.

이 뉴스로 인해 빙은 처음 등장했음에도 그 당시 엄청난 관심을 받았고, 새로운 서비스의 이름을 알렸으며 나름 검색 결과 중에도 이미지와 동영상 쪽에 새롭게 적용한 UI등을 자연스럽게(?) 홍보 할 수 있었다.

이런것들도 교묘한 광고로 다 계획하에 진행이 되는 것인지...
효과면에 있어서는 단연 그 어떤 광고 못지 않은 것 같다.

저걸 찾아보기 위해 실제 사용자가 취할 액션들....일일이 자세하게 로드뷰는 이런 서비스고 이렇게 이렇게 사용하는 겁니다라고 구지 가르쳐주지 않아도..알아서 열심히들 움직이게 만들어서 다 익히게 만들 수 있는...;;

플레이스트리트에서도 어떤 자극적인 사진을 찍어야 하는건가...-_-;;;
Posted by xiles

댓글을 달아 주세요

이전에 만들었던 4개 포탈(네이버,다음,엠파스,야후) 실시간 검색어 순위를 모아놓은 사이트인 랭코(RANKO)를
오즈폰용 버전으로 만들었습니다. (터치웹폰 및 캔유 오즈폰에서 모두 볼 수 있습니다.)

오즈폰용 사이트: http://xiles.net/ozrank
PC용 사이트: http://xiles.net/ranko
아이팟/아이폰용 사이트: http://xiles.net/ranko/m

아래는 터치웹폰(아르고폰)에서 보이는 화면입니다.
야후는 제대로 보이지가 않아 빼고 3개만 한 화면에 넣었습니다.
사용자 삽입 이미지

Posted by xiles

댓글을 달아 주세요

  1. 푸른하늘이 2008/08/12 14:33  댓글주소  수정/삭제  댓글쓰기

    좋네여~~~ 잘 쓰겠습니다~

최근 포탈 사이트들에서 실시간 검색어는 꽤 큰 영향력을 가지고 있습니다. 조작설을 비롯해서 말들도 많고, 무언가 갑자기 순위들이 팍팍 바뀌기도 합니다.
네이버,다음,야후,엠파스의 실시간 검색어를 한 페이지에서 볼 수 있도록 했는데, 포탈별로 실시간 검색어가 상당히 상이 할 때도 많고, 정말 큰 사건인 경우 4개 포탈이 다 동일한 1위를 보여줄 때도 있고 재밌습니다.

http://xiles.net/ranko 에서 한 페이지 내에 아래 이미지와 같이 4개 포탈의 실시간 검색어를 볼 수 있습니다.

사용자 삽입 이미지


* 예전에 http://gooum.com 에 만들어 놓았던 것인데, Gooum 을 닫게되면서 옮겨왔습니다.
Posted by xiles

댓글을 달아 주세요

  1. 검류연 2008/07/04 02:12  댓글주소  수정/삭제  댓글쓰기

    오오! 좋은 정보군요!!

  2. joogunking 2008/12/11 11:24  댓글주소  수정/삭제  댓글쓰기

    좋은 사이트를 만드셨네요. 감사합니다.

네이버에서 검색하세요? 아니면 구글? 다음?
최근 와이드 모니터를 많이 사용하는데, 와이드 모니터를 제대로 사용해보세요~

http://gooum.com 에서는 두 개의 검색엔진에서 한번에 검색해서 양쪽에 나누어 볼 수 있습니다.

구글+다음, 구글+네이버, 다음+네이버, 구글+판도라, 구글+플리커 중 선택해서 한 번에 검색으로 두 결과를 바로 한 화면에서 볼 수 있습니다.

사용자 삽입 이미지


검색어를 한번만 치고 바로 양쪽에서 검색이 되어 쉽게 검색결과를 비교해볼수도 있고 다양한 검색 결과를 볼 수 있습니다. 이미지 같은 것을 검색해 보면서 비교해보는 것도 재밌습니다. (현재는 구글+다음, 구글+네이버, 다음+네이버 조합으로 볼 수 있습니다.)

사용자 삽입 이미지


globe로 이미지 검색해 본 결과 (구글 + 다음)
사용자 삽입 이미지

GahooYoogle.com에서 영감을 얻어 우리나라에서 많이 쓰는 다음과 네이버도 이렇게 하면 좋을 것 같아서 한 번 만들어봤습니다. 네이버는 iframe이나 내부 프레임에 못넣도록 되어 있어 우선은 좀 엉성하지만, Naver OpenAPI를 이용해서 구현해놓았습니다.

지금은 창만 나뉘어서 검색해주는 형태이지만, 네이버의 경우 OpenAPI를 사용한 것인만큼 좀 더 나은 검색 결과 레이아웃이나.. 검색하는데 도움이 되는 다른 아이디어들을 적용해볼 생각입니다. 그리고 기타 검색엔진 자체 외에 검색을 효율적으로 할 수 있는 다양한 UI들에 대해 생각해보고 토론할 수 있는 곳으로 만들어보고자 합니다.

gooum.com은 각 검색엔진의 검색결과에 대한 어떤 왜곡도 하지 않고, 단지 한 번 검색에 나누어 한번에 볼 수 있는 프레임을 보여줍니다. 상업적목적으로 이용하는 것이 아니며, 각 검색엔진의 이용에 어떤 영향을 미치고자 하는 것도 아닌 오직 효율적인 검색, 편한 검색을 위해 만들어졌습니다. (어떠한 ActiveX 등도 설치하지 않습니다.)

이제 와이드 모니터 제대로 써먹어보세요~!!

Gooum.com 첫페이지에서는 다음과 네이버의 실시간 검색어를 한 눈에 비교해 볼 수 있습니다. (네이버는 OpenAPI사용해서 구현, 아직 FireFox에서는 제대로 안돌아갑니다.)

사용자 삽입 이미지


사용자 삽입 이미지


사용자 삽입 이미지

Posted by xiles

댓글을 달아 주세요

  1. jukun 2007/06/26 01:18  댓글주소  수정/삭제  댓글쓰기

    검색 해보진 않았지만, 왠지 기똥 찹니다.

  2. 깡양 2007/06/26 03:40  댓글주소  수정/삭제  댓글쓰기

    와우~ 정말 좋네요. 근데 와이드모니터 써야될 것 같아요.
    아무튼 좋은 정보 주셔서 감사합니다~

    • xiles 2007/06/26 09:19  댓글주소  수정/삭제

      아무래도 옆으로 놓다보니 와이드모니터에 좋죠..ㅋ
      예전에도 엠파스에서도 비슷한걸 했었고 GahooYoogle에서도 예~전부터했는데 아무래도 와이드모니터가 점점많이 쓰이는 지금이 이런거 쓰기에 딱인듯싶어서^^

우선 이 글에서는 PHP 와 AJAX 초보이신 분들을 대상으로 Naver 실시간 검색어를 구현하는 것에 대해 간단히 설명을 하고자 함을 알려드립니다. 다음 실시간 검색어는 등록만 하고 제공되는 코드만 입력하면 되므로 아주 간단!
(바로 올려서 사용가능한 풀 소스 및 페이지를 제공하진 않습니다.)

우선 구현한 모습은 http://gooum.com 에서 볼 수 있습니다.

사용자 삽입 이미지




















다음 실시간 검색어 붙이기

다음은 http://apis.daum.net/register/ajaxapi.daum?t=3 요 페이지에서 등록을 하면 스크립트 코드를 하나 알려주는데 그것을 자신의 페이지에 넣고 싶은 곳에 붙여넣기만 하면 됩니다.
근데 중요한 것은 등록할 때 사용할 자신의 블로그/홈페이지 주소를 적으라고 하는데, 그 때 적은 그 주소에 있는 페이지에서만 사용이 됩니다.

예로.. gooum.com 을 입력하고, 받은 코드를 사용했더니 www.gooum.com 으로 들어오는 경우에는 사용이 안됐습니다. 물론 전혀다른 도메인에서도 사용할 수 없습니다.

그래서 저는 여러번 등록해서 신청해도 되길래 www.gooum.com 용으로 또 등록해서 두 개를 사용해서 처리했습니다.

Naver 실시간 검색어 만들기

우선 네이버의 경우 Naver Open API를 사용해야 하고, 이를 위해서는 http://openapi.naver.com 에서 openapi를 사용하겠다는 등록을 하고 키를 받은 후 이 키를 사용해야 합니다. 이 키는 아래 설명 중 naver_queryrank.php 에서 사용됩니다.

등록을 했다면, 아래와 같이 페이지를 만들면 됩니다.

우선 실시간 검색어를 붙일 페이지에 아래와 같은 자바스크립트 함수를 만듭니다.
몇 초마다 반복해서 순위를 갱신할 수 있도록 해줍니다. 그리고 이 함수를 body의 onload이벤트에 연결합니다. (예: <body onload="updateList()">)

사용자 삽입 이미지








위에서 updateNaverRank() 함수에서는 AJAX를 이용해서 검색어 순위 정보를 얻어와서 페이지에 뿌려주는 역할을 합니다. 실제 정보를 받아온 후 처리는 request.onreadystatechange에 연결된 HandleStateChange 함수에서 처리합니다. 그리고 네이버쪽에 연결해서 정보를 가져오는 것은 naver_queryrank.php 에서 처리하게 됩니다.
사용자 삽입 이미지
















HandleStateChange 부분을 보면, 네이버와 연결해 받아온 xml 정보를 request.responseXML을 통해서 얻어옵니다. 그리고 xml에서 item 태그를 찾은 후 그 노드를 updateNaverRankList()에 넘겨줍니다. 이 함수에서 페이지의 내용을 업데이트 시켜줍니다.
사용자 삽입 이미지

실제로 가장 중요한 부분이라고 할 수 있는 네이버에 연결해서 정보를 받아오는 부분입니다.
위에서 설명한 것 처럼 , naver_queryrank.php 에서 이일을 하고 방식은 아래와 같습니다.
(request 는 XMLHttpRequest 객체)

request                         ---->   naver_queryrank.php  ---->  Naver Open API
HandleStateChange()     <----                                  <----

naver_queryrank.php의 소스는 아래와 같습니다.
처음에 OpenAPI 등록하면서 받은 키는 아래 소스에서 5번째 줄,
GET /search?key=요부분에다가 넣어주면 됩니다&query=nex...
사용자 삽입 이미지

마지막으로 실제로 페이지를 업데이트하는 updateNaverRankList() 함수에서는
아래와 같이 필요한 노드의 텍스트를 얻어와서 원하는 부분의 내용을 Javascript를 사용해서 바꾸어주면 됩니다. (K는 키워드, S는 순위증감, V는 순위증감 정도를 나타냅니다.)
i는 0~9까지 돌아가면서 처리하면 됩니다. (1위부터 10위까지)
사용자 삽입 이미지







K, S, V를 가지고,
미리 만들어놓은 페이지에 내용을 업데이트 해주면 됩니다.
예) getElementById("rank1").innerHTML = K ;

네이버 Open API 문서를 참고하면, 각 주제별 실시간 검색어를 얻어 오 수도 있습니다.
아래는 네이버 OpenAPI 문서에서 실시간 검색어 부분 내용을 캡쳐해온 것입니다.
더 자세한 내용은 http://openapi.naver.com 에서 보세요~

사용자 삽입 이미지


사용자 삽입 이미지


사용자 삽입 이미지
Posted by xiles

댓글을 달아 주세요

  1. 가림토 2007/06/27 10:53  댓글주소  수정/삭제  댓글쓰기

    네이버 검색순위는 클릭이 되지 않군요.. 이부분 수정 가능한가요?

  2. 가림토 2007/06/27 11:30  댓글주소  수정/삭제  댓글쓰기

    그럼 Gooum 에도 수정해주세요~ ^^ 다른건 다 괜찮은데 그부분이 쪼금~!!

  3. rocksea 2007/07/23 16:58  댓글주소  수정/삭제  댓글쓰기

    저도 지금 님께서 올려주신 자료를토대로 한번해보았는데 문제가 두번째 파일의
    request = GetRequestObject(); 객채가 필요합니다 라고나오네요...

    그리고 제가 완전 생초짜라 마지막부분도 보면 실시간검색어가 출력 되는부분에 뭘 어떤식으로해야될지도

    모르겠네요 ㅠㅠ 설명좀 부탁드려도될까요??

    shimsonms1004@hotmail.com 혹시몰라 이메일주소도 남깁니다.

    구경잘하고갑니다.^^

    • xiles 2007/07/23 22:06  댓글주소  수정/삭제

      GetRequestObject함수는 기본적으로 있는 것이 아니라 만들어서 사용하는건데 위에 본문에는 포함하지 않았었던 것입니다.

      본문 처음에 언급했듯이 기본적으로 AJAX에 대해서 강좌를 우선 좀 보신 후에 해보셔야 좀 이해가 가실겁니다~

      GetRequestObject함수는 아래와 같습니다.
      function GetRequestObject()
      {
      var req = null;
      if (typeof XMLHttpRequest != "undefined")
      req = new XMLHttpRequest();
      if (!req && typeof ActiveXObject != "undefined")
      {
      try
      {
      req=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e)
      {
      try
      {
      req=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e2)
      {
      try {
      req=new ActiveXObject("Msxml2.XMLHTTP.4.0");
      }
      catch (e3)
      {
      req=null;
      }
      }
      }
      }
      if(!req && window.createRequest)
      req = window.createRequest();

      if (!req)
      alert("Request Object instantiation failed!");//this.DebugMessage("Request Object Instantiation failed.");

      return req;
      }


      그리고 마지막에 출력되는 부분도 AJAX 기본 강좌를 조금 보시면 어떻게 처리해야 할 지 알 수 있으실 겁니다..
      생초짜시라면 바로 이걸 보시기보다는 AJAX 기본 강좌를 한 번 본 후에..다시 이걸 만들어보세요..

      성공하시길 빕니다~~^^;

  4. 올림푸스 2007/09/29 03:08  댓글주소  수정/삭제  댓글쓰기

    정말 죄송한 부탁이지만... 염치없이 부탁드립니다. 초보라서 어떻게 하는지..잘모르겠습니다. naver_rank.php를 mmmjjj1234@naver.com < 이 메일로 좀 보내주시면 안될까요? 저 파일만 어떻게 한번 연구 해보고 싶습니다.ㅠㅠ