alogblog's MTy plugins!: webSSearchy, 네이버, 구글, 야후 검색 웹서비스 이용 플러그인

Go to English entry

webSSearchy는 블로거가 직접 선정한 검색 쿼리, AJAX 기법과 네이버, 구글, 야후 등 각종 검색 웹서비스를 이용해서, 해당 글을 접한 방문자가 그 글의 주제/기술 등과 관련해 검색을 해 좀더 알아보고자 할 때, 한번의 클릭으로 쉽게 결과를 알아보도록 도와주는 무버블타입 블로그용 플러그인입니다. 현재는 야후, 구글, 네이버에 대한 웹서비스를 이용할 수 있으면, 무버블타입 자체의 검색 CGI(mt-search.cgi)를 RSS 형태로 반환하게 변형해서 이 또한 이용할 수 있게 해주는 CGI까지 네개가 제공됩니다.

여기서 그 적용 모습을 볼 수 있습니다.
* 이 글에 붙인 webSSearchy 결과 링크의 일부는 각 서비스의 다양한 타겟 결과를 보여주기 위해, 이 글의 주제와 상관없는 링크도 예시적으로 포함하고 있습니다.
Web 2.0과 네이버 OpenAPI (이 플러그인을 만드는 동안 생각한 이런 저런 생각을 로깅한 글입니다.)

실제 엔트리 작성시에 적용하는 모습은 소위 태그를 붙이는(Tagging) 것과 유사해 보입니다. 또 결과 모습도 비슷해 보입니다. 하지만 그 성질은 정 반대입니다. 태그는 기본적으로 블로거 자신을 위해서 붙입니다. 태그는 내부적으로는 간편한 카테고리의 성격을 가집니다. 즉 자신의 글에 대해 관리 목적상 즉석에서 분류를 하는 것입니다. 외부적으로는 태그 관련 메타 사이트에 관련된 주제로 자신의 글을 등록해서, 가능한 많은 블로거들의 방문을 유도하는 목적도 가집니다. 물론 이에 대해서 "태그 공간 생성에 이바지"나 "다른 블로거에 쉽게 글을 제공하는 것"이라는 의미를 부여할 순 있지만, 그것은 목적이라기 보단 결과 측면의 의미가 강합니다.

반면 webSSearchy에 의한 검색 쿼리 링크 삽입은 블로거 자신이 아닌, 오로지 해당 글의 방문자 편의를 위해 제공되는 것이라 할 것입니다. 둘다 해당 글과 관련된 "키워드" 선정이라는 면이 공통되 보이지만, 그 "키워드"의 성격도 적어도 이론적으로는 정 반대로 봅니다. 태그로 선정되는 키워드는 기본적으로 "관리"의 성격이 있기 때문에, 고정적인 기존의 "카테고리"보다는 유연하지만, 여전히 짧고 기억하기 좋고 많은 이들이 두루 사용할 가능성이 커야 한다는 묵시적 제한을 가지고 선정됩니다. 즉, 태그로 지정할 "키워드"가 복잡하고 한정어가 많이 붙을 수록, "태그"로서의 가치가 떨어진다고 할 수 있습니다. 블로그 엔트리 관리적인 측면에서도 너무 지엽적인 태그의 생성이요, 마찬가지로 외부적으로도 보통의 블로거들의 태그와 쉽게 결합되기 어렵게 되기 때문입니다.

하지만 이 검색 쿼리로서의 "키워드"는 방문자가 이글의 주제/기술과 관련해 더 검색할 경우를 가정한 비교적 서술적이고 상세한 키워드의 조합이 될 가능성이 큽니다. 그런 의미에서 이는 방문자의 이익을 위해 제공하는 일종의 "간접 웹서비스"라는 개념이 강합니다. 야후, 구글, 네이버 등의 웹서비스를 받아 소비하는 최종 소비자로 존재하는 것이 아니라, 웹서비스 개념에 무관한 일반 블로그 방문자에게 글의 내용과 관련해 대신 웹서비스를 받아서 다시 제공하는 중간 웹서비스입니다.

webSSearchy에 의한 검색 결과의 제시는 어떤 면에서는 자신의 블로그로 어렵게(?) 찾아온 방문객을 다른 사이트로 쉬 보내는 결과를 줄 가능성이 큽니다. 그것은 방문자가 여분의 클릭을 통해 어떤 쿼리에 대한 결과를 보길 원하는 적극적인 행동을 취했기 때문에 더 그러합니다. 방문객을 모아서 내 블로그의 구석 구섯으로 보내기 보다는, 다른 사이트로 보내는 역할을 결과적으로 하게 됩니다. 당장엔 적어도 블로그 주인의 입장에서는 꽤 불유쾌한 플러그인입니다.

반대로 방문자의 입장에서는 조금 다를 것입니다. 어떤 글을 읽고 해당 주제에 대해 좀더 다가가고 싶은 일말의 마음과 막상 관련된 키워드를 통해 검색 엔진에서 결과 목록을 한번 훑어 보기라고 하고자 하는 마음 사이에 하나의 threshold가 있다고 가정한다면 그 threshold가 바로 적절한 키워드 선정과 실제 검색 수행 작업에 드는 공일 것입니다. 쥐꼬리보다 적은 것이지만, 현실적으로는 분명 하나의 threshold로 작용하고 있다고 생각합니다. 이 플로그인 혹은 이 메카니즘이 그 작은 벽을 조금이라도 낮추는데 일조를 할 수 있길 기대합니다.

Screenshots

먼저 엔트리 작성시에 원하는 검색 쿼리를 한 줄에 하나씩 입력합니다.

쿼리 하나를 마우스로 드래그한 후, 옆의 선택 메뉴에서 적용하고자 하는 API 서비스와 그 서비스가 제공하는 하위 검색(타겟이라고 부르겠습니다) 부분을 선택한 후, 엔트리를 저장합니다.

Requirement

Movable Type 3.2
Perl's Encode, CGI, XML::Simple, LWP::UserAgent, DB_File, SOAP::Lite 모듈
Google API 키 ( 여기서 받습니다 http://www.google.com/apis/ )
Naver API 키도 받습니다. (http://openapi.naver.com/)

Installation

아래 설치 절차가 꽤 길어 보입니다. 이 플러그인은 결과적으로는 간단한 링크만 나타나지만, 내부적으로는 크게 세 부분으로 구성되어 있는 약간 복잡한 놈입니다. 무버블타입의 메뉴 구성과 태그 처리 부분, 구글/네이버/야후/MT의 CGI들, AJAX 기능을 구현한 자바스크립트와 CSS 부분이 그것입니다. 플러그인은 크게, 말그대로 간편하게 풀기만 하면 바로 작동하는 것과 이 플러그인처럼 비교적 상세한 조정을 해줘야 하는 것으로 나눌 수 있습니다. 이 플러그인은 내부적인 작동만을 도와주는 것이 아니라, 실제 결과 페이지의 디자인에까지 영향을 미치는 것이므로, 가능하면 사용자가 많은 커스터마이징을 할 수 있게 끔 개발을 했습니다. 한번 설치하면 끝이 아니라, 차후에라도 다양한 옵션과 유연한 디자인 변경이 가능하도록 하다보니, 처음 설치시에도 당연히 과정이 길어집니다. 다만 결코 어렵거나 복잡한 것은 없다 봅니다. 일단 기본 설치 과정만 끝내면 이후의 커스터마이징 과정 등은 몰라도 사용에 전혀 지장이 없습니다. 느긋한 마음으로 커피 한잔 마시면서 차근히 따라 가시면 될거라 봅니다.

1.
압축 파일을 받아서 (mt 홈) 폴더 밑에서 $ tar xvfz webSSearchy-3.2.01.tar.gz 같은 명령으로 풉니다.
(mt 홈)/mt-config.cgi에 AltTemplate search_rss search_rss.tmpl 을 추가합니다.

2.
(mt 홈)/webSSearchy/ 폴더를 적당한 다른 곳으로 옮겨도 좋습니다. 이 글에서는 이 폴더를 웹 루트 폴더로 옮겼다고 가정합니다.

3.
webSSearchy/*.cgi's 파일들에 실행 권한이 주어졌나 확인합니다. 그런 후 브라우저에서 http:/ / your_domain/webSSearchy/check.cgi 주소로 체크 CGI를 열어 봅니다. 이 CGI는 이 플러그인이 필요로하는 펄 모듈이 시스템에 설치되어 있나와 폴더에 파일을 만들 수 있나 체크합니다. 결과에 따라 적절한 대응을 하십시요.

4.
MT의 Individual Entry Archive 템플릿을 열고 아래 태그를 적절한 위치에 삽입합니다. 여기서 적절한 위치한 당연히 webSSearchy 검색 링크가 나타날 곳이겠죠. 여기서 주어진 태그 조합은 하나의 일례입니다. 차후에 원하는 대로 얼마든지 변경하실 수 있습니다.

<MTIfWebSSearchy>
<h3 id="webSSearchy-header">webSSearchy</h3>
<div class="webSSearchyLinks">
<MTWebSSearchys><MTWebSSearchyLink></MTWebSSearchys>
</div>
<div id="webSSearchyResult<$MTEntryID$>" class="webSSearchyResult"></div>
</MTIfWebSSearchy>

또 <head> 부분에 아래 두 줄을 삽입하고 저장합니다. 이때 당연히 webSSearchy/ 폴더의 경로를 맞춰 줘야 겠죠.

5.
webSSearchy/google.cgi 파일을 엽니다. 많은 세부적인 설정을 할 수 있지만, 일단은$apiKey 와 $wsdl 변수에 대해 자신의 환경에 맞는 값으로 세팅을 합니다.

6.
webSSearchy/mt.cgi 파일을 열고, $service_alias 와 $mt_search_url 변수도 자신에 맞게 바꿔 줍니다. MT에서도 자체적으로 검색 CGI가 있는건 아실겁니다. 이 검색은 일반적인 HTML 페이지로 결과를 보여주죠. 이 mt.cgi는 그것을 RSS 포맷으로 반환하도록 한 후, 그 결과를 이용해 다른 여타 웹서비스랑 같이 표시해주기 위한 것입니다.

7.
webSSearchy/webSSearchy.js 파일도 열어서CGIbaseURL, progressingImage 두 변수를 또 적절히 바꿔 줍니다. 각각의 변수가 어떤 의미인지는 해당 파일의 설명을 참조하세요.

8.
webSSearchy/webSSearchy.css 파일은 앞선 템플릿 구조하에 적용되는 CSS입니다. 각각의 서비스 링크에 해당 파비콘 이미지를 배경으로 사용하도록 디자인했는데, 그중 자신의 MT 블로그에 해당하는 파비콘의 주소를 맞춰 줘야 겠죠.

9.
(mt 홈)/plugins/alogblog/webSSearchy.pl 파일을 열고 service_alias 부분에서 alogblog이라고 되어 있는 부분을 자신의 별칭으로 바꿉니다. alogblog이 좋으시면 걍 쓰시구요. 지금 단계에선 이것들이 각각 정확이 어떤 의민가 잘 모르실겁니다. 그냥 설명대로 대충 작동시켜놓고 링크 두세번 클릭하면서 결과보고... 이러면 감이 올겁니다.

10.
이제 대충 끝난거 같은데요? 테스트 엔트리를 하나 열고 위의 스크린샷에 나와 있는 식으로 한줄에 하나의 쿼리를 넣고 오른쪽에서 원하는 서비스/타겟을 선택한 후, 저장합니다. 그리고 결과 페이지에서 링크가 작동하나 확인합니다. 한번에 되면 당장 로또부터 사시구요. ㅎㅎㅎ 안되면 다시 차근히 따져보면 됩니다. 여기까지 따라하는데 머리가 찌끈하시면 아래 내용은 안보셔도 됩니다. 걍 형식적(?)으로 적어두는 세부 내용이니까요.

webSSearchy 태그

이 플러그인은 여덟 개의 MT 태그를 새로 만들어 줍니다. 이 태그들은 모두 엔트리 문맥(context) 내에서만 작동합니다. 즉, <MTEntries>[[ 여기!!! ]]</MTEntries>, 혹은 Individual Archive Entry 템플릿 내에서 사용합니다.

<MTIfWebSSearchy> : 조건 태그로서 해당 엔트리가 검색 쿼리를 가지고 있으면 태그 내의 내용을 표시하는 방식입니다. 따라서 태그로 디자인시 이 태그로 감싸줘야 겠죠.
<MTWebSSearchys> : 하나의 엔트리는 복수 개의 쿼리를 가질 수 있는데, 이때 그 하나 각각을 루프를 돌면서 처리하는 태그입니다. <MTEntries>와 같은 개념입니다.
<$MTWebSSearchyService$> : 서비스 네임을 나타냅니다. 여기서 서비스 네임이란 'naver', 'yahoo', 'google' 같은 이름입니다.
<$MTWebSSearchyServiceAlias$> : 서비스의 별명을 나타냅니다. 앞선 서비스 네임은 영문 소문자로 구성되며 프로그램 내부적으로 고정된 값인 반면, 이 Alias는 그것에 대한 별명입니다. 가령 'naver'에 'Naver' 혹은 '네이버' 같은 식으로 별명을 주는 겁니다. 원래 목적은 Localization을 위한 목적입니다. 실질적으로는 서비스 네임은 CSS의 id, class 지정에 사용할 수 있고, 별명은 text/value 등 사용자에게 가시적으로 보이는 목적입니다.
<$MTWebSSearchyTarget$> : 하나의 서비스, 즉 네이버, 구글, 야후 등의 웹서비스는 각기 다른 하위 검색을 가집니다. 가령 네이버는 '지식, 문서, 웹, 도서 등', 야후는 '이미지, 비디오, 여행 등'... 이것을 타겟이라고 칭합니다. 당연히 이 값도 앞선 서비스 네임처럼 고정적인 값입니다.
<$MTWebSSearchyTargetAlias$> : 타겟에 대한 별명입니다. 서비스/타겟 각각의 별명은 해당 CGI 프로그램과 메인 플러그인 프로그램인 webSSearchy.pl에서 동시에 지정해주면 됩니다.
<$MTWebSSearchyQuery$> : 검색 쿼리 자체의 값입니다.
<$MTWebSSearchyLink$> : <a href="#" onClick="...">..</a> 식으로 미리 만들어진 검색 링크를 표시해 줍니다.

예제 1

만약 엔트리에, "What is Web 2.0?" 이라는 쿼리로 구글에서 검색, "Sharapova"라는 쿼리로 야후에서 이미지 검색을 해주는 webSSearchy 링크를 박는다고 가정합니다. 그럼 먼저 엔트리 작성창의 "Queries for webSSearchy" 박스에 한줄에 하나씩 위 쿼리를 입력한 후, 오른쪽의 선택창에서 원하는 각각의 서비스/타겟을 선택합니다. 그럼 아래와 같은 모습으로 나타날 것입니다.
google.search.What is Web 2.0?
yahoo.image.Sharapova
타자가 더 빠르시고 각각의 서비스/타겟에 대한 이름을 외운다면 걍 손으로 바로 입력해도 되겠죠. 한 줄에 각각 "서비스 네임(콤마)타겟 네임(콤마)쿼리" 식입니다.

그리고 템플릿에 아래와 같은 식으로 태그를 만들었다고 가정하면,

그럼 그 결과는 아래처럼 나타나겠죠. 이 자체만으로는 그리 쓸모없는 예제군요.

     <div>
        <p class="google">Google</p>
        <p class="search">Search</p>
      <p>What is Web 2.0?</p>

        <p class="yahoo">Yahoo</p>
        <p class="image">Image</p>
        <p>Sharapova</p>

    </div>

예제 2

앞선 설치 과정에선 <MTWebSSearchyLink> 태그를 사용했었습니다. 이 태그는 좀 간편하게 태그를 꾸밀 수 있도록 마련한 유틸리티 태그입니다. 이 태그는 아래와 같은 다른 태그의 조합과 정확히 같은 결과입니다.

<a href='#' class='webSSearchy <$MTWebSSearchyService$>' onClick='return new WebSSearchy("<$MTWebSSearchyService$>",this.innerHTML, <$MTEntryID$>).request()'><$MTWebSSearchyTargetAlias$>::<$MTWebSSearchyQuery$></a>

즉 <MTWebSSearchyLink> 태그 대신에 위 태그 조합을 사용해도 된다는 거죠. 그럼 실제 그 결과는,

<a href='#' class='webSSearchy google' onClick='return new WebSSearchy("google",this.innerHTML, 123).request()'>Search::What is Web 2.0?</a>

위처럼 나타날 것입니다. 여기서 중요한 것은 방문자가 검색 링크를 클릭했을 경우, onClick="..." 부분을 실행하게 해줘야 한다는 것입니다. 만약 디폴트처럼 <a> 태그가 아니라 <input>, <button> 등을 사용하고자 할 경우에는 바로 위의 태그 조합을 잘 응용해서 onClick하도록 꾸며주면 됩니다. 이때 위 자바스크립트 객체(WebSSearchy)의 인자는 위처럼, ('서비스 네임', '타겟 별명::쿼리', 엔트리 ID)가 최종적으로 넘어가도록 해야 한다는 것입니다.

Customization

검색 결과 템플릿

앞선 MT 태그, 템플릿은 검색 링크 버튼을 나타내기 위한 것입니다. 고로 이것은 정적인 의미를 가집니다. 여기서 말하는 검색 결과를 나타내기 위한 템플릿이라는 것은, 각각의 서비스에 해당하는 CGI가 복수 개의 검색 결과를 어떤 모양으로 전달할 것이냐는 것을 정하는 것입니다.

예를 들어 "블로그"라는 쿼리로 구글 검색을 지정하면 10개의 검색 결과가 넘어오는데, 구글은 주소/제목/설명 이렇게 대략 세개의 필드만으로 결과 하나를 꾸며서 줍니다. "블로그"라고 야후의 뉴스 검색을 지정하면 마찬가지로 디폴트로 10개의 검색 결과를 받지만, 그 하나의 검색 결과에는 야후/뉴스 검색 특유의 NewsSource라는 이름의 필드가 포함됩니다. 즉 각각의 서비스/타겟 별로 다 다른 결과 필드를 갖는다고 생각해도 됩니다. 이럴때 복수개의 결과 필드(이것을 내부적으로 vocabulary라고 부릅니다) 중에 어떤 놈을 골라서 화면에 어떤 디자인으로 나타낼 것인가...하는 것은 순전히 여러분 마음입니다.

<a href="주소" title="설명">제목</a>, 이런식을 원할 수도 있을 것이고,
<a href="주소">제목</a>설명, 이런 식을 원할 수도 있을 것이고, 만약 그것이 야후/뉴스 결과라면,
<a href="주소" title="뉴스 소스">제목</a>설명, 머 이런 식도 가능하겠죠. 또 그 복수개의 각각 항목을 <li>...</li>로 감싼 목록 형태로 반환할 것이냐, 단순히 <p>...</p>로 감싸서 보낼 것이냐... 머 이런것, 혹은 그 각각에 class, id 속성을 적절히 주는 것 등등이 모두 각각의 CGI에 나와 있는 템플릿에서 설정해 줄 수 있는 것입니다.

이 템플릿에는 하나의 룰이 있는데, 그것은 해당 타겟이 제공하는 vocabulary 이름을 모두 대문자로 표시한 후, 앞뒤로 두개씩의 언더바를 붙여서 템플릿에서 표시한다는 것입니다.template_header와 template_footer에는 각각 __TARGET__, __TARGETALIAS__, __SERVICE__, __SERVICEALIAS, __QUERY__를 사용할 수 있습니다. 결국 원한다고 하면, 서비스 별로, 각 서비스의 타겟 별로 각기 다른 결과 CSS 디자인도 할 수 있게 되는 것입니다. 본문 템플릿에는 특별히 __EVENODD__라는 놈이 마련되어 있습니다. 복수개의 결과를 짝/홀 수에 따라 "even", "odd"라는 문자열을 반환합니다..

별명(Alias)

앞서도 약간 설명했듯이 서비스 네임('google', 'yahoo', 'naver'), 타겟 네임('search', 'image', 'news', 등)은 변경이 불가합니다. 프로그램 혹은 웹서비스 규약 자체적으로 고정된 값이기 때문입니다. 특별히 서비스 네임은 그것의 CGI 파일 이름으로도 사용됩니다. 대신 그 각각에 대해 별명(alias)를 정해서 사용할 수 있습니다.

만약 디폴트로 정해진 이름을 바꿔서 사용하고자 한다면, 해당 CGI와 메인 플러그인(plugins/alogblog/webSSearchy.pl) 프로그램 양쪽에서 다 같이 같은 값으로 맞춰 줘야 합니다. 혹 MT의 동적 퍼블리싱을 사용하는 경우에는 php/plugins/init.alogblog-webSSearchy.php 파일에서 입니다.

결과 캐싱

검색 웹서비스는 그 성격상 같은 쿼리에 대한 한 서비스의 결과 목록이 하루 혹은 며칠 사이에는 큰 변화가 없다고 기본적으로 봅니다. 물론 실시간 검색 순위 같은 특수한 경우는 예외겠죠. 따라서 "블로그"라는 검색 쿼리를 매번 클릭할 때마다 웹서비스에 요구할 필요가 적습니다. 웹서비스 측도 귀찮을 테구(같은거 자꾸 물어보니까 ㅎㅎ) 블로그 서버쪽도 귀찮죠. 사실은 그 이유보다는, 속도의 문제 때문에 캐싱 기법을 도입할 수 밖에 없습니다. 물론 그 속도라는 것이 그리~ 늦다고 말할 순 없지만, 상쾌할 정도로 빠르진 않습니다. 아무리 AJAX 기법을 통해 비동기화로 처리한다지만, 그것 자체가 딜레이 감을 감쇄시켜주진 못합니다. 특히나 구글의 경우 쓸데없이 SOAP같은 덩치큰 베이스 프로토콜을 사용해서 그런지 어쩐지 반응속도가 제일(그것도 꽤 많이) 느립니다. 그래서 아이러니하게 캐싱의 최대 수혜자는 구글입니다.

기본적으로 각 웹서비스 CGI에서 이 캐싱에 대한 설정을 변경할 수 있습니다. 기본은 3일간 캐싱합니다. 즉 지금 "블로그"라는 쿼리로 검색 링크를 누르면, 먼저 캐시에 해당 쿼리 결과가 있나 봅니다. 있는데 그 결과가 3일 이전의 것이면 그것을 바로 보여주고, 3일이 지난 결과면 지우고 새로 웹서비스를 받아 보여주는 식입니다. 물론 3일이라는 값은 걍 정한 겁니다. 야휴/뉴스 검색의 경우 그 성질상 하루로 되어 있습니다. 이처럼 그 서비스/타겟의 성격에 따라 cache_life를 적절히 변경해 줍니다. cache_max_size 는 하나의 서비스에 대해 최대 몇개의 쿼리 결과를 보관할 것인가를 정합니다. 기본 300개 입니다. 일정 시간이 지난후 캐시 파일의 크기를 살펴보고 너무 크거나 작으면 적절히 캐시 레코드 수를 조절해 주면 좋을 것입니다.

기타

각 웹서비스 API는 그 외에도 다양한 쿼리 패러미터를 가집니다. 예를 들어 결과 갯수나 정렬 방법 등이 그것인데요, 이런 것도 각 서비스에 해당하는 CGI에서 조절가능합니다.

Example

네이버를 예로 들면요,

webSSearchy/naver.cgi를 열어 보시면, "my %naver_vocabulary = (.." 이 부분이 있습니다. 책(book) 관련한 검색결과를 다르게 꾸미고 싶으시다면, 일단 네이버 API는 책 결과에 대해 어떤 필드(field) 결과를 주는지 알아야할것입니다. 이게 바로 naver_vocabulary입니다. 이 변수의 book 항목을 보시면, basic 항목(title', 'link', 'description'), 'image', 'author', 'price', 'discount', 'publisher', 'pubdate', 'isbn' 의 단어장(?)을 네이버는 책 검색결과의 필드로 주는 것을 알수 있습니다. 이제 이 정보를 알았으니 HTML 태그를 바꿔 적용해봐야겠죠?

그건 그 위의 세 변수
$naver_template_header(머리), %naver_template(본문), $naver_template_footer(꼬리) 에 의해 결정됩니다.

1, 먼저 디폴트의 책 관련 본문 템플릿을 보면,
'book' => '<li><a href="__LINK__" title="__DESCRIPTION__"><img src="__IMAGE__" alt="" /></a></li>',
이렇게 되어 있네요.
__LINK__는 결과 필드의 'link'를 나타냅니다. 저 부분을 원하는 HTML태그로 마음대로 디자인할 수 있습니다. 만약 책 결과에서 가격정보를 표시하고 싶다면, 짐작으로 그건 'price' 필드일테니 실제 템플릿에서는 __PRICE__(언더바 두개) 로 삽입하면 됩니다.

그리고 본문 필드에는 짝수 결과에는 문자열 "even", 홀수 결과에는 "odd"라는 문자를 반환해주는 __EVENODD__ 라는 추가 태그(?)를 사용할 수 있습니다.

2. 그리고 머리/꼬리 부분도 원하는 대로 디자인할 수 있는데요,
이 부분에서 사용할 수 있는 태그는 __TARGET__, __TARGETALIAS__, __SERVICE__, __SERVICEALIAS__, __QUERY__ 등이 있습니다.

이제 <ul><li /><li />...</ul>구조가 아닌, 그냥 <p>구조로 결과를 디자인하고 싶다면,

my $naver_template_header = '<div class=\"__TARGET__\">';
my %naver_template = (
'book' => '<p class="__EVENODD__"><a href="__LINK__" title="가격 : __PRICE__원 , 설명 : __DESCRIPTION__"><img src="__IMAGE__" alt="__TITLE__" /></a>저자 : __AUTHOR__</p>',
my $naver_template_footer = '</div>';

식으로 마음대로 표현 할 수 있습니다. 이런 템플릿을 적용했을때 그 결과는,
<div class="book">
<p><a class="odd" href=".." title="가격 : 1000원, 설명 : ..."><img src="..." .. /><a>저자 : xxx</p>
...(반복)
</div>
가 될 것입니다.

3. CSS 구조도 이것을 따르겠죠?
만약 네이버 결과의 책 결과에만 좀더 다른 CSS 를 적용하고 싶다면, 위 템플릿을 쓴다는 가정하에서
webSSearchy/webSSearchy.css에 div.book {...} 식으로 적용하면 될것입니다.

Troubleshooting

일단 앞의 Installation 과정을 따른 결과, 출력한 엔트리에 webSSearchy 링크가 나타나야 합니다. 이게 안나타 났다면, 설치과정에서 아마 경로 설정 등에서 실수가 있었을 가능성이 큽니다.

링크가 나타났는데, 그 링크를 클릭하니까 빨간색 진행 막대가 나타나긴 하는데, 검색결과가 안나타나고 어느 정도 시간이 지난후 "Timeouted, Try again" 이런 메시지가 나타나는 경우가 있습니다. 예를 들어 설명하겠습니다. 만약 Naver 검색을 부르는 링크를 클릭했다면, http://자신의 도메인/.../webSSearchy/naver.cgi를 부르게 됩니다. 따라서 2가지 실수의 가능성이 존재하는데요, 첫째는 앞서 설치한 webSSearch/ 폴더의 경로를 webSSearch.js 파일의 CGIbaseURL 변수에서 설정을 잘못해서, 실제 존재하지 않는 경로의 cgi를 콜하고 결과를 무한정 기다리는 경우입니다. 둘째는, 제대로 naver.cgi를 콜했는데(이 콜은 webSSearch.js에서 합니다) 순전히 CGI내에서 어떤 에러로 결과를 리턴하지 못하기 때문에, 설정된 timeout 시간동안 결과를 못받아서 저런 메시지가 나타나는 것입니다. 아마 이 문제가 가장 빈번하지 않을까 생각됩니다. 이하 이 경우 에러를 잡는 방법을 설명합니다.

먼저 webSSearchy/naver.cgi를 naver.cgi.org 등으로 백업을 하나 해둡니다.
브라우저에서 http://자신의 도메인/webSSearchy경로/naver.cgi 주소를 열어봅니다. IE에서는 "text/javascript"라는 헤더를 이해못해서 다운로드 창이 뜰겁니다. 파이어폭스/모질라/오페라 등의 브라우저가 있다면, 여기서 테스트하고, 만약 IE 뿐인데 굳이 위 현대 브라우저가 싫다면, naver.cgi의 맨 밑부분에서 text/javascript 부분을 text/plain 정도로 바꿔준후 계속 테스트하면 됩니다.

naver.cgi를 브라우저로 주소를 입력하고 열면 아마 'Naver의 API 종류가 잘못 지정..' 이런 화면으로 나타날 것입니다. 원래 이 CGI는 인자로 서비스 타겟과 쿼리를 받아야 네이버한테 서비스를 질의할 수 있기 때문입니다. 그래서 강제로 프로그램 내에서 임의의 값을 입력해놓고 테스트하겠습니다. 107라인 근처에서,

    $eid = $cgi->param('eid');
    my $tq = $cgi->param('targetquery');
$tq = '책::AJAX';    # <---- 이런 식으로 삽입.
    $tq_to_return = $tq;

위처럼 한줄의 $tq 변수에 '타겟::쿼리'를 입력합니다. 이때 반드시 이 CGI 파일은 UTF-8 인코딩으로 저장해야 합니다. 그런 후, 다시 브라우저에서 naver.cgi를 열어보면, 어떤 에러가 나타날 가능성이 있습니다. 주로 필요한 모듈이 설치되어 있지 않거나, 설치되어 있는데, 경로를 못찾아서 없는 것으로 인식해서 생기는 문제가 대부분일 것입니다. 예를 들어 결과 페이지에서 'LWP::UserAgent 모듈을 찾을 수 없습니다.'라는 메시지가 나타나면 이 모듈에서 문제가 생긴것을 알 수 있습니다. 이 CGI가 사용하는 모듈은 MT를 설치하면 mt/extlib 밑에 존재하는 것들이 대부분입니다. 따라서 naver.cgi의 11라인에서 주석처리 되어 있는 #use lib '/...../mt/extlib'; 부분의 주석을 지우고, 자신의 mt/extlb까지의 절대 경로를 입력한후 다시 해봅니다. 이 후에도 없다고 나오는 모듈은 설치가 되어 있지 않거나, 문제가 있는 설치일 가능성이 크므로, 웹호스팅측에 문의를 하셔야 합니다.

그외 이런 테스트 와중에 Perl문법에 어긋나게 잘못 수정한 경우 Internal Server Error페이지가 보일 수 있습니다. 이 경우에는 텔넷상에서 $ perl naver.cgi 식으로 실행하시면 에러가 있는 라인 등을 보여주니, 찾아서 수정하면 됩니다.

Notes

이 페이지의 아래에서도 그렇고, 위의 Individual Entry Archive에 넣으라고 제시된 기본 템플릿에서도 그렇고, 모두 <h3>webSSearchy</h3>로 헤더가 표시되어 있습니다. 이건 하나의 예일 뿐입니다. 저는 제가 만든거니까 일부러 webSSearchy라고 썼습니다. 실제 사용하시는 분들은 이 플러그인을 사용해서 겉으로 드러나는 모든 부분을 자신이 원하는 대로 바꿀 수 있습니다. 예를 들어, 책에 관련된 블로그라고 한다면, "관련된 주제의 책, 웹에서 더 검색해보기" 혹은 "책 더 찾아 볼깝슈?" 등 얼마든지 주제에 맞게 바꾸실 수 있습니다. 혹 이 플러그인을 사용하면 webSSearchy라는 표시를 해야하는것 아닌가 해서, 그냥 사용하시는 일이 있으실까보 적습니다.
현재로는 네이버/구글/야후/MT에 대한 CGI가 제공됩니다만, 약간의 지식만 있는 개발자라면 다른 웹서비스에 대한 CGI도 쉽게 만들 수 있을 것입니다. 예를 들면 Amazon의 책검색, eBay 물건 검색 등등. 이때 이런 것도 이 플러그인과 쉽게 연계될 수 있습니다. 기본으로 제공되는 CGI의 입력/출력 부분만 보면 양자간의 인터페이스는 어렵지 않습니다. 혹 개발하는 분은 알려주세요.
google.cgi는 Perl의 SOAP::Lite 모듈을 사용하는데, 간혹 이런 저런 문제로 한글 쿼리를 입력했을 경우 결과가 깨져나타나는 경우가 있습니다. 이때는 PHP 버전으로 된 이것을 한번 이용해 보세요. 압축 파일을 풀면 google.php와 NuSOAP PHP 라이브러리가 있습니다. 이것을 webSSearchy/ 폴더 밑으로 옮깁니다. 즉, webSSearchy/google.php 와 webSSearchy/NuSOAP/nusoap.php 가 될 것입니다. 그리고 마찬가지로 google.php에서 구글키와 wsdl 파일의 경로를 설정해주세요. 마지막 하나 남은 것은, webSSearchy.js 파일을 기존의 것과 바꿔 주면 됩니다.

License

Relased under the Creative Commons License.

Version History

3.2.01 : PHP version of Google API included.
3.2.01 : First release.

Comments

모든 경로를 알맞게 수정했으나 검색이 되지 않았는데(Timeouted. Try again) 경로 수정을 텔넷 에디터로 변경하니 제대로 되었습니다. 파일의 인코딩 문제였던 것입니다. 메모장(notepad)으로도 안되더군요. 메모장으로 check와 google는 쉽게 되었지만 naver, yahoo, mt는 인코딩에 맞게 저장을 해도 안되더군요. 저처럼 문제가 발생하는 분들은 참고해주세요. 텔넷 에디터 사용법은 쉽게 찾을 수 있을 겁니다.

Posted by: tiiop | 2006년 05월 02일 새벽 03시 24분

Individual Entry Archive 템플릿 부분에 넣는 아래의 링크에 오류가 있었네요. rel="...에 가 빠졌습니다. 모질라를 사용하기에 css가 적용되지 않아 한참을 늪에 빠져있었지 뭡니까. ㅎㅎ

p.s. 현재 제가 적용하고 있는 webSSearchy는 이곳에서 확인하실 수 있습니다.

감사합니다. 수정했습니다

Posted by: tiiop | 2006년 05월 02일 새벽 05시 25분

어이쿠, 바로 위 코멘트에 태그를 잘못써서 빠진 글자가 있네요. 알록볼록님은 알아보시리라 믿고 수정해주시길 바랍니다. ^^

사용해본 결과 분석을 해보니, 검색 결과가 RSS로 제공되는 형식이더군요. 그런데 알다시피 구글서치가 강력하기에 google 서치로 한글 웹페이지가 검색 결과로 나오게 하면 한글이 깨지는 문제가 발생하더군요. 이 문제는 없으신지요?

구글로 한글웹 서치하실때 어떤 옵션을 주셨는가요? 한글이 깨지는건, 아마 CGI자체 에러원인과 구글에서 한글페이지를 EUC-KR인코딩으로 보내는 것이 원인이 될수 있을거 같은데요.그냥 키워드만 한글로 하신건가요?

Posted by: tiiop | 2006년 05월 02일 새벽 05시 49분

검색 결과를 blog body의 폭(width)과 동일하게 맞추고 싶은데(제 블로그 폭이 좁아서^^), 이거 ul, li 리스트 때문에 검색 결과가 오르쪽으로 들여쓰기처럼 되는 것 같습니만... ul, li를 cgi랑 css에서 모두 지워봐도 변하지 않는데요. 혹시 다른 태그 때문인가요? 스타일을 다양하게 만들어보고 싶은데 이것이 해결되지 않네요. inline 속성을 넣어도 봤습니다만... 어느 부분인지 좀 알려주세요. ^^;

네이버 책검색을 이미지만이 아니라 관련 정보(제목,저자,본문)도 함께 출려되면 좋겠는데요. 이미지만 기본으로 되어있을 뿐, 다른 정보 출력도 가능하지요? 제가 커스터마이징을 할 수 있으려나 모르겠는데, 함 천천히 해보겠습니다.

커스터마이징에 대해서 설명이 좀 빈약하죠? ㅎㅎㅎ
항상 관련 설명 엔트리를 적을땐, 그 플럭인에 대해 지칠대로 지친 상태라...설명글 제대로 적는다는게 정말 귀찮은 상태가 대부분이어서, 허술한 부분이 많습니다. Example 섹션에 추가했습니다.

Posted by: tiiop | 2006년 06월 04일 오전 10시 14분

PSPad 너무너무 좋네요. 그동안 왜 이런 것을 찾아볼 생각을 못했는지 ㅠ.ㅠ

*.cgi 파일을 수정하면 MT 리빌드를 해주어야 되는 줄 알았는데, 다시 확인해본 결과 db 캐쉬 파일만 삭제해주면 바로 수정 사항이 적용되네요. 감사합니다.

Posted by: tiiop | 2006년 06월 06일 오후 05시 41분

우와~좋은기능이네요!
3.31 버젼에서도 설치 가능한가요?

Posted by: allegolle | 2006년 09월 20일 오후 04시 52분

김인호돼지박사 한국형우주관 응^응=응 우주화시대 응원해주세요

Posted by: adekosis.myid.net | 2007년 05월 31일 밤 09시 26분

alogblog's MTy plugins!

MT is empty. We can fill it with our imagination.

webSSearchy, 네이버, 구글, 야후 검색 웹서비스 이용 플러그인