blogger.com 블로그에 구글 검색창(CSE) 달기

제 블로그는 Blogger.com의 서비스를 이용해 운영되고 있습니다. 많은 장점과 단점을 모두 갖고 있는 블로그 서비스지요. 국내에서 많이 쓰이고 있는 태터툴즈나 해외에서 많이 쓰이는 워드프레스에 비하면 많은 것이 모자란게 사실입니다. 그래서 Blogger를 이용하는 많은 블로거들은 다양한 툴을 이용하거나, 서드파티 서비스(Haloscan이나 Flickr 등)를 이용하곤 합니다.

새롭게 바뀐 Blogger Beta에서는 기본적으로 검색창을 지원합니다. 간단하게, 레이아웃 편집에서 클릭만 하면 쉽게 추가되죠. 하지만 저처럼 Blogger 클래식을 이용하는 경우, 기본적으로 검색창은 최상단 navbar의 블로그 검색창밖에 없습니다. 물론 이것도 쓸만하긴 하지만, 속도가 느리고 또 검색 키워드가 담긴 포스팅 내용 전체가 줄줄이 나와버려서 쓸데없는 트래픽을 만들어내곤 하죠.

그래서 그 이전까지는, 별도로 검색창을 붙여서 썼었습니다. 구글은 어느 사이트에나 자사의 검색창을 달 수 있게 지원해주고 있죠. '구글 검색창 달기' 란 웹페이지에서 확인할 수 있습니다. 간단히 코드만 복사해서 넣으면 쉽게 구글 검색창을 추가할 수 있고, 자신의 웹 사이트를 검색하게 할 수도 있죠. 저도 전에는 이걸 썼었습니다. 저 뿐만이 아니라, 많은 사이트들과 블로그들이 이 검색창을 썼던 것으로 기억합니다.

단점이라면, 검색결과가 새 창에서 뜬다는 것입니다. 웹사이트 운영자는 검색결과에 자신의 사이트 로고를 넣을 수 있지만, 그것 뿐이었죠. 모양도 그리 예쁜 편은 아니었습니다. 그냥, '검색창'만 자기 사이트에 달아놓고, 구글에서 검색하는 것과 마찬가지인 셈이었습니다. 별로 만족스럽지 못했죠.

그런데 구글은 최근 또 하나의 검색창 서비스를 선보였습니다. 바로 Google Custom Search Engine이 그것입니다. 이것은 검색창에 대해 다양한 설정이 가능합니다. 각기 다른 설정을 가진 나만의 검색엔진들을 만들어 관리할 수도 있죠. 자신이 운영중인 사이트가 여러 개라면, 여러 개의 검색엔진 설정을 만들 수도 있습니다. 그리고 무엇보다 가장 맘에 드는 건, 자기 사이트의 웹페이지 안에 검색결과를 포함시킬 수 있다는 점입니다. 여기서 자세한 설치 과정을 설명하면 좋겠지만, 이미 설치 과정에 대해 훌륭하게 소개해놓은 글이 있습니다. 구글 CSE의 설치에 대해선 Hoogle님의 글을 참조해 주세요.

링크된 글을 읽어보시면 아시겠지만, 구글 CSE의 코드는 두 가지로 이루어집니다. 하나는 검색창을 달기 위한 코드이며, 또 하나는 검색결과를 보여주기 위한 코드입니다. 검색창을 달기 위한 코드는 아무 곳에나 넣어도 잘 작동합니다. 하지만 검색결과를 보여주기 위한 코드는 약간 손이 더 갑니다. 스크립트도 지원되어야 하고요.

후글님은 검색창을 달기 위해 평소 잘 쓰지 않는 '지역정보' 페이지를 바꿔버렸습니다. 바로 워드프레스와는 달리 태터툴즈에서는 정적 페이지를 추가할 수 없기 때문인데요, 이 페이지는 검색결과를 나타낼 때 필요합니다. 자신의 사이트 내에서 검색결과가 보이도록 하기 위해서지요.

그럼 Blogger에서는 어떡해야 할까요? Blogger도 마찬가지로 고정적인 페이지를 만드는 기능이 없습니다. 때문에 그냥 아무 내용없는 글(포스팅)을 하나 만들어서, 그 안에 CSE의 코드를 집어넣고 글을 게시하면 됩니다 (혹시나 해서 시도하진 않았는데, 후글님의 조언대로 해보니까 되더군요). 스크린샷을 참조해 주세요.

보시다시피, 새 게시물을 만들되 'HTML편집'에서 넣어야 합니다. '쓰기(위지윅 방식)' 에서 넣으면 아무 소용 없겠죠. 하단의 스타일시트(CSS) 부분은, 필요없는 부분을 감추기 위해 썼습니다. 블로그 검색 결과를 표시하는데 글쓴 날짜나 코멘트, 올블릿 등은 필요가 없겠죠? 그래서 display: none 해버렸습니다. CSS에서는 가장 나중에 선언된 코드가 우선되기 때문에 위와 같은 코드를 이용할 수 있습니다. '덧글 허용 안함', '백 링크 허용 안함' 등을 체크해주고(혹시 모를 스팸 코멘트를 막기 위해), 적절한 날짜와 게시 시간을 선택해 글을 올려줍니다. Blogger에서는 게시 날짜와 시간을 바꿀 수 있기 때문에, 몇 달 전 날짜로 올렸습니다.

결과는 왼쪽 스크린샷과 같습니다. 직접 검색해 보시면 아시겠지만, 검색창은 왼쪽 맨 위에 두었습니다. 검색창에 삽입된 폼(form)에도 CSS를 적용할 수 있기 때문에, 자신의 사이트에 알맞게 너비를 조절할 수 있습니다. 저는 다음과 같은 코드를 썼습니다.

.searchform { width: 150px; }

<input type="text" name="q" class="searchform" />

윗줄은 CSS에 넣어주고, 아랫줄은 검색창 코드에 들어갑니다. 밑줄 그은 부분이 제가 추가한 부분입니다. 물론 테두리 색을 바꾸거나, 폰트 모양을 바꾸는 것도 가능하겠죠?

검색결과는 오른쪽 단에 나타나게 했습니다. 원래는 포스팅 내용이 표시되는 부분이죠. display:none으로 쓸데없는 것들을 감추었기 때문에, 포스팅 날짜나 코멘트 등은 나타나지 않습니다.

한가지 단점이라면, 검색 결과에 광고가 나타난다는 점입니다. 이는 구글에서 집행하는 광고죠. 별도의 설정을 하지 않는 한, 블로그에 게재된 자신의 애드센스와는 무관합니다. CSE의 컨트롤 판넬에서 자신의 애드센스와 연결시키도록 설정하는 메뉴가 있는 것 같긴 한데, 잘 안되네요.

여하튼 이렇게 해서, Blogger에 위치한 블로그에 구글 CSE를 달았습니다. 서비스형이면서도 설치형 못지않은 다양한 시도가 가능하다는 것, 그것이 Blogger의 가장 큰 매력이 아닐까 싶습니다.