[쇼핑몰 구축기] 쉽고 빠른 검색을 위한 라이브 서치 기능 추가하기

쇼핑 경험을 개선하기 위해 쉽게 검색할 수 있도록 모바일 메뉴에 검색창 추가 방법에 대해서 살펴봤지만 여기서 더 나아가 검색어 입력 시 페이지 이동없이 그 자리에서 검색 결과를 보여주는 라이브 서치 기능에 대해서 살펴 봅니다.

[검색 고도화] 라이브 서치 기능 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[검색 고도화] 라이브 서치 기능 추가하기

우커머스 테마를 고를 때 각 테마마다 그들이 주장하는 주요 기능들을 소구할 때, 라이브 서치 기능을 중요한 기능으로 이야기하는 경우를 종종 만납니다.

일반적인 검색 프로세스를 살펴보면 아래와 같은 다소 복잡한 과정을 거칩니다.

• 먼저 검색창을 찾고
• 검색어를 입력
• 검색을 실행하라는 명령(주로 엔터)
• 별도 검색 결과 페이지로 이동

그런데 모바일의 경우 별도 페이로 이동했다 다시 되돌아오는 과정이 쉽지는 않습니다. 되돌아가기 버튼이 점점 없어지는 추세죠. 아주 오래전부터 아이폰은 되돌아가ㅣ 하드키를 없앴고, 덩달아 삼성과 같은 다른 스마트폰 회사들도 이러한 하드키를 없앴습니다.

앱의 UI에서 되돌아가기 버튼이 없는 것은 아니지만 아무래도 불편합니다. 그리고 UX를 더 단순화한다고 되돌아가기 기능은 있지만 다시 실행하는 기능을 또 없기도 하죠.

요는 스마트폰일수록 UX가 단순화되면서 이러 저리 이동하는 것이 쉽지 않다는 것이고, 이러한 추세에 사이특 맞추어서 사용 경험을 높일 수 있도록 해야한다는 것입니다.

들어가며, 검색관련 세가지 프로세스

검색 관련해서는 사이트 내용을 잘 정리해 빠르고 정확하게 검색을 할 수 있게 만드는 검색 엔진과 검색할 수 있도록 검색 양식을 만드는 검색폼 그리고 검색 결과를 어떻게 보여줄 것인가라는 세가지 프로세스가 있습니다.

첫번째, 검색엔진 – 사이트 내용을 잘 정리(Index)해 데이타베이스화 : 워드프레스 기본 검색 엔진, WPSolr, SearchWP, Relevanssi – A Better Sear 등

[검색 고도화] 최고의 검색 엔진을 찾자

두번째, 검색폼 – 검색을 어디에서나 쉽게 할 수 있는 검색창 구현

[검색 고도화] 메뉴에 검색 기능 추가하기

세번째, 검색 결과를 어떻게 보여줄 것인가

[검색 고도화] 라이브 서치 기능 추가하기

[검색 고도화] 라이브 서치 플러그인 SearchWP Live Ajax Search 제대로 사용하기

아러한 세가지 프로세스중에서 여기에서는 검색 결과를 어떻게 보여줄 것인가에 대한 이야기 중의 하나인 라이브 서치 기능에 대해서 알아보겠습니다.

1. 사용자 경험을 높일 수 있는 라이브 서치 기능

사이트 검색에서 이러한 사용 경험을 높일 수 있는 방법이 바로 라이브 서치 기능입니다.

이 라이브 서치 기능은 검색창에 검색어를 입력하면 바로바로 검색 결과를 창 아래 또는 위에 띄워주죠.

이러한 라이브 서치기능의 장점은 아래와 같이 정리해 볼 수 있습니다.

• 검색 시 검색 실행 명령인 엔터 단계와 검색 결과 페이지로 이동이라는 단계가 줄어듭니다.
• 검색 간련 단어를 입력하자마자 첫 글자부터 해당되는 검색 결과를 뿌려주기 때문에 바로 바로 결과를 보면서 검색어를 바꾸어가며 검색할 수 있기 때문에 검색 효율이 높아지비낟.
• 거기다 바로바로 반응하기 때문에 만족도가 높아질 수 있습니다.

2. 라이브 서치 플러그인 3가지

사이트에 라이브 서치 기능은 테마에서 지원한다면 바로 사용할 수 있겠죠.

그렇지만 대부분의 테마에서 라이브 서치 기능은 기본으로 내장되어 있지는 않습니다.

OceanWP와 같이 커스터마이징을 주요 특징으로하는 테마의 경우 기본 기능하에 여러가지 기능을 추가하는 방식을 취하기 때문에 이러한 기능이 추가되어 있지는 않습니다.

이런 경우 라이브 서치 기능 추가를 위해서는 플러그인의 힘을 빌리는 것도 좋은 방법입니다. 능력이 된다면 직접 프로그램해도 좋지만요.

2.1. Dave’s WordPress Live Search

라이브 서치 기능중에서 가장 많이 추천되는 플러그인이 Dave’s WordPress Live Search인데요.

제가 보기에 다음과 같은 장점이 있는 것 같습니다.

• 사이트에서 사용하는 검색 명령에 상관없이 기존 검색폼에서 자동으로 라이브 서치 기능을 구현해 줍니다.
• 사용자에 따라서 라이브 서치 결과 폼을 커스터마이징할 수 있습니다. 그것도 별다른 코딩없이.
• 리이브 서치 플러그인들이 그렇듯이 성능 좋은 서치 엔진과 같이 사용해 성과를 높일 수 있습니다. 무료로 강력한 검색 기능을 제공하는 Relevanssi – A Better Search와 활용 시 무료로 좋은 성과를 낼 수 있습니다.
• 프로그래밍 능력이 된다면 다양한 필터 기능을 적용할수 있습니다.

이 플러그인도 여러가지 단점이 있습니다.

• 가장 큰 단점은 최근 업데이트가 멈추고, 지원도 안되고 있다는 점입니다. 이 그를 ㅆ는 2019년 6월 기준 근 1년동안 업데이트가 안되고 있습니다.

2.2. SearchWP Live Ajax Search

두번째로 SearchWP Live Ajax Search를 들 수 있습니다.

이 플러그인은 SearchWP라는 굉장히 파워플한 워드프레서 검색 플러근에서 제공하는 라이브 서치 기능인데요.

장점은

• SearchWP라는 유수의 프리미어 검색 플러그인에서 제공하기 때문에 업데이트가 계속된다는 점
• 워드프레스 검색 폼인 get_search_form() 를 사용하는 모든 테마에서 제공하는 검색 폼에 자동으로 라이브 서치 기능을 제공
• 개발자 입장에서 다양하게 커스터마이징할 수 있음

그렇지만 이 플러그인도 단점이 많이 있기는 합니다.

• 우선 개발자들이 쉽게 커스터마이징을 할 수 있지만 일반들이 커스터마이징 하기는 쉽지는 않습니다. 어느 정도 기술적인 지식을 가지고 있어야 합니다.
• 위에서 소개한 Dave’s WordPress Live Search보다는 호환성이 높지는 않습니다. get_search_form()을 명시적으로 사용하는 검색폼은 자동으로 지원하지만 그렇지 않은 경우 별도 커스터마이징을 해야 합니다.

2.3. Ajax Search Lite

Ajax Search Lite는 Ajax Search Pro라는 검색 엔진과 라이브 서치 기능을 동시에 제공하는 프리미엄 플러그인의 무료 공개판입니다.

기본적인 검색 기능을 라이브 서치로 구현해 보여주는데요.

개인적으로 장점이라면 아래와 같은 점을 들 수 있습니다.

• 상당히 보기 좋은 디자인
• 상대적으로 빠른 속도
• 검색폼에서 다양한 필터를 바로 선택할 수 있습니다. 포스팅 제목, 콘텐츠, 글쓴이 등읃

제 개인적으로는 단점이 더 많이 보이기는 합니다.

• 기존 테마에서 구현해 놓은 검색폼을 그대로 지원하지는 않습니다. Ajax Search Lite에서 제공한ㄴ 검색폼을 별도로 설치해야 하죠.
• Ajax Search Lite는 무료 공개판이다보니, 기본적인 검색 기능만 제공합니다.