LainyZine: 프로그래머 가이드 🐣

구글 커스텀 검색으로 사이트에 검색 기능 구현하는 방법

Google 검색엔진에서는 site: 연산자로 특정한 사이트의 컨텐츠만 검색하는 기능을 제공하고 있습니다. 또한 이 기능을 별도 서비스로도 제공하고 있습니다. 이전에는 Custom Search Engine(CSE)으로 서비스되었으나, 현재는 Programmable Search Engine(프로그래밍 검색)으로 이름이 변경되었습니다. 이 서비스를 사용하면 웹 사이트를 운영할 때 직접 검색 기능을 구현하지 않더라도, 구글의 검색 기능을 빌려서 검색 기능을 구현할 수 있습니다. 이 글에서는 구글의 커스텀 검색 엔진 사용법을 소개합니다.

구글 커스텀 검색 엔진 만들기

구글 커스텀 검색 엔진을 셋업하려면, 먼저 Programmable Search Engine 공식 웹 사이트에 접속합니다.

우측 상단의 Get started 버튼을 클릭하면 프로그래밍 검색 관리자 페이지로 이동합니다. 이 때 구글 계정이 필요합니다.

Programmable Search Engine 공식 웹 사이트

Google 계정에 로그인을 하면, 프로그래밍 검색 관리자 페이지가 열립니다. 왼쪽 사이드 바의 ’새 검색엔진’을 클릭합니다.

검색 엔진 생성을 위한 폼이 나타납니다. 먼저 검색할 사이트에는 커스텀 검색 결과에 표시할 웹 사이트들을 지정합니다. 아래 쪽에 상세한 예시가 나와있으니 참고해주세요.

예를 들어 www.lainyzine.com 사이트 아래의 모든 페이지를 검색 대상에 포함하라면 www.lainyzine.com/*을 입력합니다. 티스토리 전체를 검색 대상으로 포함하려면 *.tistory.com/*을 입력합니다. 사이트를 입력하면 자동으로 폼이 확장되며, 검색 대상으로 여러 개의 사이트를 추가할 수 있습니다.

다음으로 언어를 선택합니다. 이 때 언어는 검색 결과가 아닌 검색 결과의 레이아웃을 결정하는 옵션입니다. 원하는 언어를 선택해주세요.

마지막으로 커스텀 검색 엔진 이름을 입력합니다.

커스텀 검색 엔진에 대한 정보를 입력합니다

하단의 만들기 버튼을 클릭하면 커스텀 검색 엔진이 생성됩니다.

웹 사이트에 커스텀 검색 엔진 추가하기

커스텀 검색 엔진이 생성되면 코드 가져오기, 공개 URL, 제어판 세 가지 버튼이 나타납니다. 공개 URL 로 접속하면 방금 만큼 커스텀 검색 엔진을 바로 테스트해볼 수 있습니다. 제어판은 커스텀 검색 엔진에 대한 상세 옵션을 설정하는 페이지입니다. 마지막으로 코드 가져오기는 웹 사이트에 검색 엔진 폼을 추가하는 코드를 보여줍니다. 코드 가져오기 버튼을 클릭합니다.

커스텀 검색 엔진 생성 완료

아래 출력되는 자바스크립트 코드를 웹 사이트에서 검색엔진을 표시하고 싶은 위치에 추가해주면, 커스텀 검색엔진 창이 나타납니다.

커스텀 검색 엔진 코드

LainyZine에도 우측 사이드 바에 구글 커스텀 검색 엔진이 적용되어있으니 참고해주세요.

구글 커스텀 검색 엔진이 적용된 모습

이제 필요한 상세 설정만 손보면 됩니다. 왼쪽 사이드바의 검색엔진 수정 메뉴에서 검색엔진을 입맛대로 수정해보시기 바랍니다.

LainyZine은 쿠팡 파트너스 활동에 따른 수수료를 제공받습니다.