💡 (무료) 불편함이 낳은 UX : 검색 기능 편

불편함이 낳은 UX 이번 내용은 '검색 기능'입니다. 검색 기능을 다섯 가지 유형으로 나눠, 사용자가 어떤 불편을 겪을 수 있으며 이에 따라 서비스는 어떤 방법을 활용할 수 있을지 자세히 정리했습니다. 사례는 국내와 해외 사례를 모두 포함하고 있어요.

• 검색 관련 다섯 가지 문제와 해결 방법을 사례와 에디터 생각을 덧붙여 제공합니다.
• 실제 기획 시 참고할 수 있는 고려 사항을 하나의 표로 정리해 제공합니다.
• 주제와 관련해 추가로 살펴보면 좋은 아티클을 별도 문서(에어테이블)로 제공합니다.
• 뉴스레터에 포함된 각 '이미지'는 클릭 시 더 선명한 모습으로 확인하실 수 있습니다.
• '웹에서 보기'를 활용하시면 더 쾌적한 환경에서 읽으실 수 있습니다.

🔍 사용자의 가장 능동적 행동 중 하나인 '검색'

검색은 사용자가 ‘원하는 대상'을 찾기 위해 하는 가장 적극적이고 능동적인 행동 중 하나입니다. 천천히 둘러보며 탐색하는 발견형이 아니라 명확한 목적을 갖고 있는 상태기에 실패에 대한 부담 역시 클 수밖에 없는데요. 그래서 서비스 입장에서는 검색을 시작하는 순간부터 검색 대상을 발견(또는 반대의 경우)하는 과정까지 사용자의 불편을 최소화할 수 있는 여러 방법을 고민하고 적용할 수 있어야 합니다. 

이번 뉴스레터에서는 검색 과정에서 발생할 수 있는 다섯 가지 문제를 중심으로 각 불편을 해결할 수 있는 방법과 여전히 아쉬운 내용들을 하나씩 살펴봤는데요. 이를 통해 실제 검색 기능을 구현할 때 고려해야 하는 대상은 무엇이며 기존 방법을 개선할 수 있는 방향은 무엇인지 함께 확인할 수 있는 기회가 되었으면 좋겠습니다. 

• 어떻게 검색해야 할지 막막할 때 가이드 제공
  
• 검색 시 문자 입력 외 유용한 편의 기능 제공
  
• 검색어 입력 과정은 더 쉽게!
  
• 검색 결과 내 원하는 대상을 더 빠르게 찾게 도와주기
  
• 검색 결과가 없는 경우, 명확한 피드백 제공하기
  

📝 문제 유형 및 해결 방법 정리

1. 어떻게 검색해야 할지 막막할 때 가이드 제공

검색 메인 화면에서 어떻게 검색해야 할지 도움을 받는 방법에는 크게 세 가지가 있습니다. 첫째, 콘텐츠 카테고리를 노출해 검색의 큰 방향성 제시하는 방법입니다. 둘째, 추천/인기 검색어 등을 노출해 다른 유저들이 어떤 대상에 관심 있어하는지 가이드를 제공하는 방법입니다. 셋째, 검색 인풋 필드에서 검색 대상과 범위에 대한 간단한 힌트를 제공하는 방법입니다. 국내외 서비스는 각각 유저들의 막막한 상황을 어떻게 해결하고 있는지 살펴보겠습니다.

(1)검색 인풋 필드 하단 키워드 노출

검색 메인 화면 진입 시 검색어를 입력하는 인풋 필드 영역과 추천/인기 콘텐츠를 보여주는 영역으로 보통 나뉘는데요. ‘Medium’, ‘Raddish’, ‘Realm’ 모두 검색어 인풋 필드 하단에 주요 카테고리를 보여줘 콘텐츠 범위에 대한 정보를 제공하고 있습니다.

이를 통해 유저는 크게 두 가지 플로우를 경험하게 되는데요. 첫째, 해당 카테고리 내 관심 검색어를 입력해 원하는 결과를 확인할 수 있으며 둘째, 카테고리 키워드를 선택해 각 카테고리에 포함된 콘텐츠를 둘러본 후 어떤 것을 추가로 검색해야 할지 팁을 얻을 수 있습니다.

패션 커머스도 검색 메인 화면에서 카테고리를 구분, 유저들이 어떻게 검색하고 둘러보는 게 좋은지 도움을 줄 수 있습니다. ‘Bershka’, ‘Zara’, ‘Pull&Bear’와 같은 의류 브랜드는 성별, 의류 종류에 따라 카테고리를 관리하고 유저들 역시 카테고리에 맞춰 검색하는 플로우가 익숙합니다.

그래서 검색 화면 내 각 카테고리를 노출, 검색하기 애매할 경우 일단 둘러볼 수 있게 하고, “드레스”처럼 사고 싶은 분야가 명확할 경우, “흰색 드레스”와 같이 입력하여 빠르게 결과를 얻을 수 있도록 도와줍니다. 추가로, ‘Bershka’와 ‘Pull&bear’는 어떤 카테고리가 최근에 업데이트되었고, 인기가 있는지 표기해주고 있어 유행에 대해 간접적인 정보를 얻어갈 수도 있도록 설계해 두었습니다.

(2)검색 메인 화면에 인기 검색어 노출

서비스를 이용하며 검색 대상이 명확할 때도 있지만, 어떻게 검색해야 할지 막막한 상황도 겪게 되는데요. 이때 인기 검색어나 사람들이 많이 찾는 검색어를 통해 검색에 대한 팁을 얻어갈 수 있습니다. 특히, ‘다방’의 경우 <쉬운 방 찾기>에서 금액-전/월세-주거형태 등 원하는 조건으로 검색할 수 있다는 점을 안내하며 사람들이 어떻게 찾고 있는지 보여주고 있습니다. ‘필라이즈’, ‘번개장터’는 사람들이 최근에 많이 검색하는 검색어를 순위에 따라 보여줘 검색 대상에 대한 안내와 다른 사람들이 관심 있어하는 정보를 동시에 제공하고 있습니다.

(3)인풋 박스에서 어떻게 검색할 지 문구로 안내

아예 플레이스 홀더를 활용해 검색 대상을 안내하는 방법도 있는데요. ‘강남언니’, ‘요긱’, ‘와디즈’와 같이 단순히 “검색”이라고 써두는 게 아니라, 어떤 주제로 검색하면 좋을지 서비스의 주된 목적에 맞게 문장형으로 제시, 사용자들에게 대략적인 검색 방향성에 대한 안내를 줄 수 있습니다.

검색어 예시를 포함하는 사례 (텍스트 기준) : 출처 인스타그램 micro_copy_

• [샵백] 스토어 검색 (예: 지마켓)
• [반려생활] 내 근처 '24시 동물병원'은?
• [애니맨] 서비스 검색 (예: 짐옮기기, 줄서기, 배달 등)
• [What3words] 지명과 3단어 주소를 검색할 수 있습니다. 예 : 자치,기쁜,환승역

서비스에서 제공하는 카테고리별 검색이 가능하도록 인풋 박스 내 플레이스 홀더로 안내하는 방법도 있습니다. ‘모두닥’은 “지역, 진료과, 병원명, 치료명” 등 앱 내 검색 가능한 카테고리를 텍스트로 넣어 검색 시 단순히 “치료명"만 검색하는 게 아니라 구체적으로 검색하여 원하는 결과를 빠르게 얻을 수 있도록 도와주고 있습니다.

‘원티드’ 역시 회사, 포지션, 기술 심지어 태그 검색까지 가능하게끔 안내하고 있습니다. 구인구직을 할 때, 원하는 회사를 정해두고 탐색하는 경우도 있지만, 나의 기술 스택에 맞는 회사가 어디 있나 알아보고 싶은 니즈도 있는데요. 이를 반영한 검색이 가능하게 해 원하는 니즈를 충족할 수 있도록 안내하고 있는 점이 친절하게 느껴졌습니다.

2.문제 해결 방법 : 검색 시 유용한 편의 기능 제공

빠르고 정확하게 원하는 검색 결과를 얻을 수 있도록 보조하는 기능 역시 문제를 해결해주는 장치 중 하나입니다. 첫째는 이전에 내가 입력한 내역을 보여주는 방법이며 둘째는 해당 서비스의 상황에 맞게 지도 혹은 이미지로 검색이 가능하도록 지원하는 방법입니다.

(1) 최근 검색 내역 노출

최근 검색 내역을 보여주는 방법은 이전에 원하는 결과를 얻지 못하거나, 동일한 상품군을 확인하고자 할 때 빠른 검색을 보조하는 장치입니다. 예를 들어, 이전에 해당 검색어로 입력했는데 품절, 마감 상태라서 원하는 액션을 못했을 상황에 마주한 적이 있을 텐데요. 최근 검색어를 보여주면, 같은 단어 혹은 어절을 반복적으로 계속 타이핑하지 않아도 빠르게 원하는 결과로 바로 이동할 수 있습니다.

특히, ‘카카오맵’과 같이 '지도'나 '내비' 서비스는 최근 검색어가 반드시 필요한 기능이라고 생각합니다. 길을 찾을 때 여기저기 검색 후 거리를 비교하며 최종적으로 목적지를 확정하는 경우가 자주 발생하기 때문입니다. 이때 최근 검색 기록을 남겨 주지 않는다면 다른 곳에 기록해두고 계속 내용을 입력해야 하는 불편함이 발생합니다.

(2)텍스트 외에 다른 방법으로 검색 가능

여행 관련 서비스에서 목적지 등의 입력값이 정해진 상황이 아니라, 근처 몇 군데 후보 중 설정해야 하는 상황이라면 어떤 방식이 더 빠른 검색을 가능하게 할까요? 지도 혹은 현재 위치에서 검색을 하면 후보지 중 보다 시각적으로 정보를 얻으면서 결정하는 데 도움을 얻을 수 있습니다.

‘Rome2rio’는 도시 혹은 나라 간 이동 시 운송 수단을 검색하는 서비스인데요. 루트를 짜면서 검색 대상을 하나씩 타이핑하는 것보다 지도에서 핀을 활용해 대략적인 장소나 위치를 더 쉽고 효율적으로 판단할 수 있는 기능 제공합니다. 지도를 기반으로 하는 서비스라면 '주변 정보' 등을 빠르게 확인할 수 있는 기능이 더 편리하게 다가오는 이유라고 생각해요.

이미지로 검색하는 것 역시 특정 상황에서 빠른 결과를 얻기 위한 편의 기능이 될 수 있는데요. 웹 서핑 중 사고 싶은 가방을 발견해 캡처해두었는데 어떤 브랜드인지 도저히 알 수 없는 상황을 경험해보신 적 있지 않나요? 이미지 검색 기능은 이런 불편함을 쉽게 해결해줄 수 있습니다.

‘멜리즈’는 검색 인풋 필드 우측에 이미지 검색 기능을 넣어 사진을 올리면, 해당 내용과 매칭 되는 유사한 상품을 하단에 결과값으로 안내해줍니다. 최근 검색 히스토리에 이미지 검색 결과 값도 남아 있어 같은 이미지로 다시 검색하고 싶을 때, 매번 이미지를 업로드하지 않아도 됩니다.

‘Vivino’ 역시 멜리즈와 비슷하게 사진 촬영 및 이미지 업로드를 통해 와인에 대한 평점 및 기본적인 정보를 얻을 수 있습니다. 특히 와인을 사야 하는 상황에서 가격 대비 평점 좋은 와인을 고르는 게 맞나 고민될 때 자주 사용하는 기능입니다. 심지어 ‘Vivino’는 이미지 검색 기능이 서비스의 핵심이기 때문에 하단 탭의 가운데에 크게 위치하고 있습니다. 와인 이름과 브랜드를 직접 타이핑하는 것보다 훨씬 정확하게 빠르게 결과를 얻을 수 있는 기능입니다.

3.문제 해결 방법 : 검색어 입력 과정을 더 쉽게!

내가 지금 검색하고 있는 키워드에 해당하는 결과가 있을까?라는 생각을 한 번쯤 해보셨을 것 같아요. 검색어를 입력, 다음 단계로 이동했는데 그제야 검색 결과가 없다는 사실을 알게 될 경우, 사용자는 같은 과정을 다시 한번 반복해야 하는 불편을 겪게 됩니다. 그래서 서비스는 사용자가 입력하는 문자를 바탕으로 검색어를 자동 완성해주거나, 검색 후 연관 키워드를 제공해 입력 과정은 간소화하고, 반복 행동을 줄일 수 있는 방법을 활용하고 있습니다.

(1) Bershka, Zara, Pull&Bear

Bershka, Pull&Bear는 검색어 입력 과정에서 별다른 피드백을 제공하지 않습니다. 내용을 입력 - 확인 버튼 등을 눌러야 검색 대상 유무를 알 수 있습니다. 뒤에서 다시 살펴볼 예정이지만 이런 경우에는 반드시 결과가 없으니 다른 방법을 활용해보라는 구체적 행동에 대한 피드백을 차선으로 고려해야 합니다. 사용자가 입력 과정에서 키워드를 잘못 입력했을 가능성까지 고려해야 하기 때문입니다. (물론, Pull&Bear는 키워드 외 바코드를 스캔해 검색 하는 등의 편의를 추가로 제공하곤 있어요)

반면, 자라는 입력한 문자와 연관된 키워드를 검색창 아래로 제공합니다. 이는 두 가지 의미가 있는데, 하나는 검색 대상이 존재한다는 것을 화면 내 알 수 있다는 것이며 또 하나는 사용자가 전체 문자를 입력하지 않고도 원하는 검색 키워드를 입력할 수 있다는 점입니다. 이 둘은 모두 사용자의 불편을 최소화하는 장치로의 역할을 할 수 있다는 장점을 갖고 있습니다.

(2) Realm, Canva, Masterclass

세 서비스는 모두 다른 방법을 활용하고 있어요. ‘Realm’은 사용자가 입력하는 키워드를 문자 단위로 잘라 검색 결과를 바로 보여줍니다. 검색 대상이 많을 경우, 확인이 느려진다는 단점도 있지만 특정 콘텐츠 범위 내 검색이 이뤄진다면 사용자가 입력과 동시에 결과 여부를 알 수 있다는 장점도 있는 방법입니다. 이 방법에서 중요한 건 입력과 동시에 검색이 가능하다 또는 검색 중이다 라는 점을 사용자에게 명확한 피드백으로 제공할 수 있어야 한다는 점입니다. ‘Realm’은 검색창 오른쪽, Loading..이라는 내용을 추가해 안내를 제공합니다.

우리에게 제법 익숙한 ‘Canva’는 사용자가 입력한 문자와 연관성이 높은 키워드를 리스트로 보여줍니다. ‘insta’까지 입력한 상황에서 instagram ad, post, post(portrait) 등 다양한 키워드를 리스트로 확인할 수 있습니다. 전체 내용을 입력하지 않아도 필요한 키워드를 확인하고 탭 해 결과를 볼 수 있다는 장점으로 다가옵니다.

마스터클래스는 ‘Realm’과 유사한 방법을 사용하면서도 한 발짝 더 나아간 모습을 보여줍니다. 실시간으로 검색 결과를 보여주되, 사용자가 입력한 키워드가 어떻게 반영되어 있는지 하이라이트를 적용했기 때문입니다. ‘Writing’을 검색하기 위해 ‘Wri’까지 입력하면, 해당 키워드가 포함된 클래스를 리스트로 알려주고 타이틀 내 별도 표기를 해주는 방법입니다. 덕분에 더 빠르게 검색 결과 내 원하는 콘텐츠를 찾을 수 있습니다.

(3) 필라이즈, 번개장터, 모두닥

이번에는 국내 서비스가 활용하는 방법을 살펴볼게요. 세 서비스 모두 사용자가 입력한 문자를 바탕으로 관련된 키워드를 쭉- 나열해서 보여주며 입력한 문자를 더 진하게 또는 다른 컬러로 적용해 안내합니다. 덕분에 사용자는 입력한 내용이 어떻게 포함 되는지 쉽게 이해할 수 있습니다.

번개장터에서는 몇 가지 흥미로운 점을 함께 볼 수 있는데요. 하나는 뒤로 가기 버튼 외 홈 화면으로 이동할 수 있는 버튼이 제공된다는 점입니다. 아무래도 검색은 여러 화면에서 접근할 수 있기에, 가장 기본이 되는 홈 화면으로 바로 나갈 수 있는(이동 가능한) 버튼을 활용하는 것 같아요.

또 카테고리를 검색 대상에 포함시킨 것이 눈에 띕니다. 저는 ‘텐트'를 입력했는데 텐트 종류와 별개로 스포츠/레저 - 텐트/그늘막 또는 캠핑용품 등의 카테고리를 함께 볼 수 있었습니다. 카테고리를 제공할 경우, 큰 범위 내 검색을 목적(면텐트 등이 아니라 텐트 정도의)으로 하는 사용자가 관련 상품이나 정보를 빠르게 찾는 과정에 도움을 줄 수 있습니다.

4.문제 해결 방법 : 검색 결과 내 원하는 대상을 더 빠르게 찾게 도와주기

검색 결과의 수는 검색어와 서비스 성격에 따라 달라질 수밖에 없습니다. 검색 대상의 유무를 잘 안내한다 하더라도, 특정 키워드에 대한 결과가 많을 경우 사용자는 다시 한번 자신이 원하는 대상을 찾기 위한 노력과 시간을 들여야 하는데요. 이 시간을 얼마나 단축시킬 수 있냐에 따라 탐색 과정에 필요한 사용자의 불편 역시 최소화할 수 있습니다.

(1) Bershka, Zara, Pull&Bear

커머스에서 ‘성별’은 아주 중요한 기준으로, 제공되는 상품이 많이 다르기 때문입니다. 세 서비스는 모두 검색 결과를 여성 또는 남성에 따라 나눠 볼 수 있는 기능을 제공합니다. 자라는 키즈 의류도 판매하기에 세 가지 분류를 제공하고 있어요. 이는 아주 적절한 필터의 역할을 하는데, 나와 관련 없는 대상을 빠르게 제외하고 결과를 확인할 수 있기 때문입니다.

서비스 별 눈에 띄는 점을 살펴보면, ‘Bershka’는 전체, 여성, 남성 등의 구분에 따라 검색 결과가 몇 개인지 숫자로 안내합니다. 이는 사용자로 하여금 검색 대상의 범위를 가늠할 수 있는 기회가 될 수 있습니다. 몇 개인지 모르는 상태에서 추가 탐색을 하기엔(필터 등이 제공되지 않는 상황에서) 불필요한 과정을 추가로 겪어야 합니다.

‘자라'도 검색 대상이 몇 개인지 안내하며, 추가 ‘필터'를 제공합니다. 필터에는 사이즈, 컬러 등이 포함되어 있어 1차로 확인한 검색 결과 중 원하는 상품에 더 빠르게 다다를 수 있습니다. ‘Pull&Bear’는 검색 결과가 몇 개인지 안내하진 않지만 자라와 같이 필터를 제공합니다. 정렬 방법(가격순 등), 컬러, 사이즈, 가격 대 등을 개별 설정해 대상을 압축하거나 원하는 조건에 따라 확인할 수 있습니다.

• [아이디어스] 상품 정보는 빼고 이미지만 모아볼 수 있는 상품 리스트 제공

(2) Realm, Canva, Masterclass

세 서비스는 1차 검색 결과를 사용자가 임의로 다시 확인할 수 있는 기능을 제공하지 않습니다. 이 경우 반복되는 이야기지만 스크롤을 통해 몇 개의 결과가 있는지도 모른채 마음에 드는 대상을 다시 찾는 시간을 가질 수밖에 없습니다. 

(3) 필라이즈, 번개장터, 모두닥

서비스 성격에 따라 검색 결과를 다른 방법으로 보여줘야 하는 상황이 생길 수 있습니다. ‘필라이즈'가 대표적으로, 사용자가 입력한 개인정보에 따라 적합한 대상인지 아닌지를 검색 결과 내 쉽게 확인할 수 있도록 구성했습니다. 세부 필터를 제공하는 것은 아니지만 ‘주의 상품 제외' 기능을 제공해 처음부터 일부 대상을 걸러내고 살펴볼 수 있습니다. (이런 방법을 커머스에서는 품절 상품 보지 않기 등으로 제공하기도 해요) 또 검색에 포함된 상품이 갖고 있는 주요 특징을 키워드처럼 보여줘 사용자가 스스로 확인, 판단해야 할 시간을 줄여주고 있어요.

번개장터는 사용자가 입력한 키워드와 연관 있는 키워드를 가장 먼저 보여줍니다. 텐트를 입력하면 텐트 브랜드, 관련 상품 등이 포함되어 있어 검색어를 다시 입력하지 않고도 연관 상품을 자연스레 둘러볼 수 있습니다. 브랜드와 카테고리, 동네와 가격 등을 필터로 제공하며 안전결제가 가능한 상품을 따로 모아볼 수 있습니다. 또 사용자가 탐색에 집중할 수 있도록 검색 리스트 내 ‘찜하기' 버튼을 기본 제공해 편의를 더하고 있는 모습입니다.

모두닥 역시 서비스 성격에 맞는 ‘필터'를 제공합니다. 병원 검색이 핵심이라, 전문의가 있는 병원, 여의사가 있는 병원은 물론 진료 시간 등을 통해 원하는 곳을 빠르게, 다시 찾을 수 있도록 도와줍니다. 리스트에도 현재 진료중 여부나 병원의 특징을 키워드 형태로 제공해줘 검색 대상 간 구분이 어렵지 않습니다.

5.문제 해결 방법 : 검색 결과가 없는 경우, 명확한 피드백 제공하기

검색 결과가 없는 화면을 사용자가 만나지 않게 하는 것이 가장 중요하지만 (검색어 입력 과정에서 결과 유무 안내 등) 그럼에도 불구하고 관련 상황이 발생할 경우 사용자에게 ‘명확한' 피드백과 더불어 다음에 가능한 행동을 ‘구체적'으로 안내할 수 있어야 합니다.

빈 화면과 같은 역할을 하는 곳으로, 사용자가 다시 처음으로 돌아가 같은 경험을 하지 않도록 돕는 역할을 할 수 있어야 하기 때문입니다. ‘검색 결과가 없어요'라는 안내만 제공할 경우, 사용자는 무엇이 잘못되었는지 상황을 바로 이해하기 어렵습니다.

(1) Bershka, Zara, Pull&Bear

‘Bershka’는 검색 결과가 없는 상황을 적절한 일러스트와 텍스트로 안내합니다. 패션 커머스답게 옷장이 ‘텅' 비어있는 일러스트가 눈에 띕니다. 다만, 텍스트 구성은 조금 아쉽습니다. 검색을 다시 하거나 자신들이 제공하는 제품 카탈로그를 확인하라는 내용이 담겨있는데, 카탈로그가 어디에 있는지 그리고 현재의 검색 과정에 어떤 문제가 있었는지에 대한 해결 방법이 구체적으로 포함되지 않았기 때문입니다.

‘자라' 역시 비슷한 아쉬움이 있습니다. 결과가 없으니, 다른 카테고리로 시도해봐.라는 안내가 제공되는데 카테고리는 무엇을 의미하는지 같은 상황을 겪지 않으려면 어떤 과정을 거쳐야 하는지에 대한 내용이 부족합니다.

‘Pull&Bear’는 검색 결과가 없다는 안내와 더불어 인기 있는 상품을 바로 확인할 수 있는 기회가 제공됩니다. 다만, 사용자는 현재 원하는 대상을 직접 찾는 과정을 경험하고 있기에 제품을 대표하는 카테고리를 먼저 보여주는 등의 방법이 더 적합하지 않을까 하는 생각이 듭니다. 인기 제품 리스트는 성별, 카테고리 등의 구분이 적용되지 않은 상태이기 때문입니다.

(2) Realm, Canva, Masterclass

‘Realm’은 사용자가 할 수 있는 구체적인 행동에 대한 안내를 제공합니다. 검색어 입력 방식에 대한 적절한 예시는 물론, 콘텐츠 추천이 가능한 퀴즈 등을 텍스트 링크로 적용해 사용자가 행동을 바로 이어갈 수 있는 환경을 마련하고 있습니다. ‘Canva’는 검색 결과가 없다는 안내만 제공하는 모습이네요.

‘마스터클래스'는 ‘Pull&Bear’와 같이 검색 결과가 없다는 안내 아래로 인기 클래스 리스트를 보여줍니다. 개인적으로 이 공간에서는 사용자의 취향에 더 빠르게 닿을 수 있는 ‘카테고리' 리스트가 더 적합하지 않을까 생각합니다. 탐색의 출발점을 모두가 좋아하는 콘텐츠로 잡을 것인지, 적어도 하나의 구체적인 대상에서 시작할 것인지의 의미가 포함되기 때문입니다.

(3) 필라이즈, 번개장터, 모두닥

‘필라이즈'는 검색한 제품이 없는 경우 사용자가 직접 요청할 수 있는 환경을 제공합니다. 이는 두 가지 의미를 담고 있는데요. 하나는 사용자가 원하는 것을 바로 등록한다는, 검색 결과가 없는 상황을 하나의 긍정적인 경험으로 바꿀 수 있다는 점입니다. 그리고 또 하나는 서비스 입장에서 사용자가 원하는 제품 데이터를 얻고, 등록할 수 있다는 점입니다. 실제 등록 요청 화면을 보면 이름, URL 링크, 사진(선택) 등을 입력해 요청할 수 있습니다.

‘번개장터’는 앞서 살펴본 것처럼 중고거래 특성 상 ‘키워드 알림등록' 기능을 적극적으로 사용합니다. 다만, 검색 결과가 없다는 안내 아래 바로 제공되면 더 좋았을텐데 현재 화면 하단의 위치는 조금 아쉽습니다. 중간에 광고가 있어 더 아래까지 시선이 잘 닿지 않네요.

‘모두닥’은 정석에 가까운 검색 결과 없음 화면을 제공합니다. 결과가 없다는 안내, 검색어 입력 시 팁 그리고 종합병원, 대학병원, 요양병원, 보건소 등은 아직 서비스 준비 중이라는 등의 구체적인 범위에 대한 내용이 포함되어 있습니다. 또 ‘필라이즈’와 같이 병원 정보 요청하기 기능을 제공해 사용자가 직접 특정 병원 등을 입력할 수 있는 기회를 제공합니다.

💌 검색 UX 설계 시 참고해야할 내용

💌 검색 관련 아티클 모음

지난 '온보딩' 편과 마찬가지로, 검색 기능을 설계할 때 참고하면 좋은 아티클을 정리했어요. 아래 링크를 클릭하시면 전체 아티클을 확인하실 수 있습니다!

🤔 검색 기능 편을 마치며

그전에, 이번 뉴스레터는 어땠는지 의견 부탁드려도 될까요? 

🤹‍♀️ 검색 화면의 유저의 flow는 크게 두 가지로 나뉘는 것 같아요. 어떻게 검색해야 할지 대략적인 방향만 가지고 있을 때와 검색하고 싶은 대상을 정확히 갖고 있을 때입니다. 각 상황에 맞게 유저들이 불편함을 느끼지 않도록 ux측면에서 생각해줘야 할 포인트가 존재하는데요.

첫째, 대략적인 방향성만 가지고 있을 때는 어떻게 검색하는 게 좋을지 애매한 상황을 해소해주는 것이 필요합니다. 특히 검색 메인 페이지에서 카테고리 정보 제공, 인풋 박스 내 힌트 메시지, 인기/추천 검색어 등의 요소를 이용하여 유저들의 불편을 해결해 줄 수 있습니다. 가장 중요한 포인트는 각 서비스의 성격에 맞게 유저의 시나리오를 고민하여 문구, 검색어, 콘텐츠를 제공해야 한다는 점입니다. 카테고리가 많지 않은 서비스에서는 1-2개의 카테고리를 제공하는 것보다 인기, 연관 검색어를 제공해주는 것이 더 빠른 검색을 가능하게 하기 때문이에요.

둘째, 검색 대상을 구체적으로 떠올린 상태로 검색 화면에 진입했을 땐 검색 과정에서 실시간 피드백과 결과에 대한 친절한 안내가 중요합니다. 검색어 입력 시 검색하는 값이 존재하는지, 사용자가 입력한 키워드가 어떻게 적용되는지 등을 알려줄 수 있어야 해요. 결과 페이지에서도 검색 의도에 맞게 리스트를 확인하고, 조건에 따라 다시 정렬할 수 있는 편의가 제공되어야 합니다.

🐳  잘 설계된 검색 기능은 전환을 높이고 이탈을 낮춰주는 역할을 합니다. 개인화 시스템이 잘 갖춰졌다 하더라도, 원하는 대상을 직관적으로 찾을 수 있는 효과적인 방법이기 때문입니다. 대다수 서비스가 검색 기능을 눈에 잘 띄는 곳에 배치하는 이유이기도 합니다. 

중요한 것은, 검색 기능을 제공하는 그 자체가 아니라 사용자가 '어떻게', '잘' 쓸 수 있는 환경을 제공할 수 있는지라고 생각해요. 사용자의 가장 능동적인 행동 중 하나기에 그만큼 실망이 클 수 있는 기능이기 때문입니다. (원래 기대가 크면 그만큼 실망도 크기에!) 

서비스 성격에 따라 적용되는 기능은 조금씩 달라질 수 있지만, 어떤 과정과 단계가 있어야 사용자가 원하는 대상을 빠르게 찾아갈 수 있는지에 집중해보면 좋을 것 같아요. 제가 개인적으로 검색 기능을 여러 번 구현하며 신경썼던 상황은 '검색 결과가 없는' 화면이었습니다. 빈화면의 연장이라는 생각도 많이 했고, 행동이 끊기는 것이 아니라 새로운 길로 연결되는 공간으로 활용할 수 있겠다는 생각 때문이었어요. 

우리 서비스에서 사용자는 검색을 어떻게 할까? 어떤 단계를 거치게 될까? 어떤 방법이 원하는 대상을 가장 빠르고 정확하게 제공할 수 있을까? 앞서 살펴본 사례 속 기능을 종합 세트로 모두 제공할 필요는 없지만, 우리 서비스에게 가장 좋은 검색 맥락은 무엇인지 한 번씩 다시 생각해볼 수 있는 기회가 되었으면 좋겠습니다.

🙌 다음 주제 안내

다음 주제는 '리뷰 기능'입니다. 리뷰를 확인하고 작성하는 과정에서 사용자가 겪을법한 문제는 무엇이며, 서비스는 이를 어떻게 해결하고 있는지 자세히 들여다볼 예정이에요. 다음 뉴스레터는 6월 2일 목요일 발행될 예정입니다!