Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Contents

소개

개인 사이트의 문서 검색을 위해서 Solr, ElasticSearch등을 붙여본적도 있었다. 공부는 할 수 있었지만 유지&보수의 귀찮음 그리고 품질 문제 때문에(이것도 결국 귀차니즘의 문제가 되겠다.) 그냥 Google Custom Search를 사용하기로 했다.

Google Custom Search

Google Custom Search(구글 맞춤검색)은 구글에서 제공하는 검색 서비스다. 다른 검색 엔진을 만들거나 구축할 필요 없이(ES, Solr 등을 이용하면 쉽게 구축할 수 있다고 하는데, 쉽지 않다.)간단하게 자신의 사이트에 검색 서비스를 붙일 수 있다.

이렇게 새 검색엔진을 만들고, 디자인에서 레이아웃을 설정하고 만들어진 코드를 사이트에 붙이기만 하면 된다. 그리고 (사이트가 구글 검색을 방해하지 않도록 구성돼 있다면) 상당히 괜찮은 결과를 얻을 수 있는데, 대충 ElasticSearch를 적용하는 것 보다 훨씬 낫다. 물론 시간이 많다면, ElasticSearch로 훨씬 훌륭한 검색 서비스를 만들 수 있긴 하다. 구글 맞춤검색은 자바스크립트 호출만 제공한다. 따라서 검색결과를 읽어와서 UI/UX를 구성하는 것은 할 수 없다. 몇 개의 템플릿을 이용해서 제한된 디자인 편집만 가능 할 뿐이다.

이제 디자인으로 넘어가 보자. (2018년 6월)현재 7개의 템플릿이 있다. 가장 먼저 적용한건 오버레이다. 그리고 가장 쉽고 무난한 방법이기도 하다. 그냥 검색창을 붙이고픈 위치에 아래와 같은 태그를 삽입하면 끝이다.

<script>
  (function() {
    var cx = '002661009167463862046:-gtgjwr2yio';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

나는 오버레이디자인을 선택했다. 결과가 구글 맞춤검색에서 제공하는 자바스크립트 페이지로 뜨기 때문에, 결과 페이지를 만드는 등의 부가적인 작업이 필요 없기 때문이다. 아래는 이렇게 만든 코드다. 검색결과가 레이어로 뜨는 걸 확인 할 수 있을 것이다.
그런데, 디자인이 좀 이상하다. Foundation 프레임워크와 table 영역에서의 css가 충돌이 나기 때문이다. 뭐 그냥 무시하고 쓸 수도 있겠는데, 문서 최상단의 Top-Bar 영역에 배치하려면, 눈에 띄게 거슬릴 정도의 꼴 사나운 디자인이 만들어진다. 아무리 개인 사이트라고 해도 봐줄 수 없다. 직접 구글 맞춤검색의 css를 수정해서 사용하려는 시도를 했으나 (적어도 내게는)너무 복잡해서 포기했다.

그래서 6번 레이어를 선택했다. 검색 입력창은 직접만들고, 검색결과만 구글 맞춤검색에서 제공하는 자바스크립트코드를 이용하는 방식이다. 아주 간단하다. 검색결과를 출력할 위치에 아래의 코드만 삽입하면 된다.
// 앞 부분 생략
<div id="row">
<gcse:searchresults-only></gcse:searchresults-only>
</div>
// 뒷 부분 생략
그리고 검색 질의어는 "q"파라미터로 넘기면 된다. https://www.joinc.co.kr/w/search?q=리눅스 와 같은 형식이다. /w/search 페이지에 삽입된 맞춤검색 자바스크립트가 질의어를 읽어서 결과물을 출력한다.

이제 검색창만 예쁘게 만들면 된다. foundation 으로 자유롭게 만들 수 있으니 마음데로 제어 할 수 있다.

vuejs로 메뉴에 구글 검색창 만들기

Top-bar 메뉴 왼쪽에 아래와 같은 느낌의 검색창을 만들기로 했다. 작동하는 코드로 /w/search 로 이동한다.

아래는 사용한 코드다. 설명은 주석으로 대신한다.
<!-- search-demo vuejs 애플리케이션의 실행 위치 -->
<div id="search-demo">
  <!-- google-search vuejs 컴포넌트의 실행 위치-->
  <google-search></google-search>
</div>

<script>
// 유저 검색어가 있을 경우 검색창에 검색어를 출력하려고 한다.
// URL 파라미터로 부터 값을 가져오기 위한 함수다. 
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var q = getParameterByName('q')

// googl-search vuejs 컴포넌트를 정의 했다.
Vue.component('google-search', {
  // 유저 Input format를 정의 했다. 
  template: `<div class="input-group"> 
    <span class="input-group-label"><i class='fi-magnifying-glass'></span>
    <input class="input-group-field" type="search" v-model="query" v-on:keyup.enter="search">
    <div class="input-group-button">
        <input type="submit" v-on:click="search" class="button" value="구글검색"> 
    </div> 
</div>`,
    data: function() {
        return {
            query: [q]
        }
    },
    methods: {
        search: function() {
            window.location.href = "/w/search?q="+this.query
        }
    }
});
new Vue({el:'#search-demo'})
</script>
<gcse:searchresults-only></gcse:searchresults-only>
유저 입력 코드를 자세히 살펴보자.
  • v-on:keyup.enter="search" : input 입력 폼에 질의어를 입력하고 "엔터키"를 누르면 search메서드를 실행한다.
  • v-model="query" : v-model 디렉티브를 이용해서 input 입력폼의 입력값을 바인딩 했다.
  • methods.search : 검색페이지 /w/search를 호출한다. v-model="query"에 바인딩 됐으므로, input 입력폼의 값을 읽을 수 있다. 이 값을 읽어서 /w/search 쿼리 파리미터로 던졌다. 구글 맞춤검색이 사용하는 파리미터는 "q"다.
  • v-on:click="search" : 검색 버튼을 눌렀을 때도 search 메서드를 호출한다.

결론

뭐 별거는 없다. 그냥 간단한 Vue.js 예제 코드를 만들었다고 보면 되겠다.