검색 창 디자인, 어떻게 하면 좋을까?

좋은 검색 창 디자인은 사용자가 검색을 통해 원하는 정보에 빠르게 도달할 수 있도록 설계되어야 합니다. 모바일 환경에서 검색 디자인의 중요성이 더욱 대두되며, 검색 필터 기능을 활용하는 것이 좋습니다.

 Part1：좋은 검색 창 디자인을 만드는 방법

1. 모바일 환경 우선시하기

검색 창 디자인은 모바일 환경에서 더욱 중요해집니다. 모바일은 PC에 비해 화면의 크기가 작기 때문에 사용자가 원하는 정보를 얻기 위한 “검색”기능이 더욱 중요해졌습니다. 그래서 서비스의 긍정적인 사용자 경험(UX)을 위해 검색 기능에 쉽게 접근할 수 있도록 설계되어야 합니다.

2. 검색 창 디자인은 웹 상단 고정하기

국내 대표 서비스인 네이버를 시작으로 야놀자, 인터파크 등 주요 서비스들은 검색창의 위치를 상단에 배치해 사용자들이 쉽게 검색기능을 인지하도록 합니다.

3. 추천 컨텐츠 활용하기

검색 결과만을 단순하게 보여주는 것이 아니라 추천 콘텐츠를 함께 배치해 서비스의 주요 기능까지 연결되는 접점을 만들어 줍니다. 특히 커머스의 경우 이를 적극적으로 활용하고 있습니다. 국내 쇼핑몰 플랫폼 에이블리는 최근 검색어, 추천 검색어, 인기 검색어를 함께 보여주도록 검색 창 디자인을 합니다.

4.  다양한 검색 방법 활용하기

직접 키워드를 입력하는 경우가 가장 일반적이지만 음성 및 바코드, QR 검색 등을 제공하기도 합니다. 현대카드 다이브는 도서나 음반을 사진 촬영으로 인식해 검색할 수 있으며, 이마트는 오프라인 매장에서 바코드를 스캔해 검색하는 기능도 제공합니다.

5. 검색 결과가 없는 경우에 추천 키워드와 베스트 상품을 보여주기

사용자가 검색하는 것은 생각보다 능동적인 행동이기에 결과 없음과 같은 부정적 상황은 피하는 것이 좋습니다. 텐바이텐의 경우 추천 컨텐츠를 하단에 노출해 자연스레 다음 행동으로 이어질 수 있는 연결고리를 만듭니다.

6. 자동 검색어와 연관검색어 저장하기

인스타그램은 최근 검색한 계정, 태그, 장소를 별도로 검색결과를 보여줍니다. 사용자가 검색어를 입력할 때, 이미 검색했던 결과를 먼저 보여주고 다른 결과는 로딩 상태의 디자인으로 표기합니다.

 Part2：검색 필터 기능 설치 주의점

1. 검색 필터는 카테고리 맞춤형으로 설계해야 합니다.

가장 널리 사용되는 필터는 가격, 색상, 인기도 등과 같이 일반적인 특징으로 검색 결과를 좁혀서 제공합니다. 이때 서비스의 특성에 따라 카테고리별로 다양한 필터를 추가해 사용자가 원하는 결과를 빠르게 찾을 수 있도록 디자인 합니다.

2. 필터의 다중 선택이 가능하도록 검색 창 디자인을 합니다.

예를 들어 레스토랑을 검색할 때, 반려동물 출입이 가능하고 야외테이블이 있으며 베지테리언 옵션이 있는 곳을 찾고 싶을 수 있습니다. 때문에 이런 사용자의 다중의 니즈를 탐색할 수 있도록 검색 필터에서 다중 선택을 허용하는 것이 좋습니다.

3. 사용자가 적용된 필터의 위치를 확인할 수 있도록 검색 창 디자인 합니다.

사용자가 검색 결과를 확인한 후, 검색 시 적용한 필터를 해제하고 싶을 때 빠르게 위치를 찾을 수 있어야 합니다. 그렇지 않을 경우, 사용자는 검색 기능을 사용하며 불편함을 느낄 수 있습니다.

 Part3：좋은 검색 창 디자인을 위해 Pixso 추천

   새롭게 주목받는 디자인 도구 Pixso로 위에서 언급했던 검색 창 디자인 원칙과 주의사항들을 반영해 숙박예약 서비스의 검색창 디자인을 작업해 보았습니다. 서비스 메인화면 상단에 검색창을 배치해 사용자가 쉽게 검색기능을 인지할 수 있도록 검색 창 디자인을 했습니다. 그리고 검색 필터 기능으로 숙박 형태와 위치, 체크인 시간, 게스트 수 등을 제공해 사용자가 원하는 정보에 빠르게 접근할 수 있도록 하였습니다.

   특히 Pixso의 장점은 각 디자인의 CSS 코드를 바로 확인할 수 있습니다. Pixso 화면 오른쪽 상단 디자인 패널에서 표시를 선택하면 메뉴 중간에 CSS코드가 표시되며, 이를 개발자들이 HTML 텍스트로 바로 사용할 수 있습니다. 

 Part4：마무리

좋은 검색 창 디자인은 사용자가 원하는 정보에 빠르게 도달할 수 있도록 합니다.  Pixso는 리소스 커뮤니티에서 다양한 템플릿과 컴포넌트를 제공해 검색 디자인 작업에 활용하기 좋은 디자인 도구입니다.