brunch

매거진 더오픈프로덕트

라이킷 26 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 더오픈프로덕트 Jul 09. 2024

모바일 검색 서비스 기획하기 (1편)

검색 서비스의 6가지 가지 주요 패턴

모바일 서비스에 일반적으로 이용되는 공통 서비스들이 있습니다. 예를 들면 회원 가입, 본인 인증, 검색 같은 것들이죠. 이번 시리즈는 이들 중 하나인 검색 서비스 기획에 대해서 알아보려고 합니다. 검색 서비스를 기획하기 위해서는 검색 플로우는 어떻게 할지, 검색 대상 DB는 어떻게 할지, 검색어 트리거는 어떻게 할지, 자동 완성은 어떻게 할지, 검색 결과는 어떻게 보여줄지 등 UI적으로나 디자인적으로 고민하고 결정해야 할 것들이 정말 많습니다. 그 중에서도 특히 UI의 관점에서 검색 서비들의 주요 패턴을 알아보고 어떤 상황에 어떤 옵션을 선택하는 것이 좋을지에 대해서 알아 보겠습니다.

1. 검색의 진입점

검색 진입점과 그 위치를 선택하는 것은 검색 필요성에 대한 강조 수준에 따라 달라집니다. 가장 일반적인 세 가지 옵션을 살펴보겠습니다.

검색창

검색 기능에 중점을 두어야 할 때 선호됩니다. 검색창은 화면에서 상당한 공간을 차지하므로 사용자가 더 쉽게 인지하고 접근할 수 있습니다. 이는 검색이 핵심 기능이거나 콘텐츠와 상호 작용하는 주요 방법인 상황에서 특히 편리합니다. 이러한 바의 예는 Google Maps, Airbnb, DoorDash 및 기타 여러 앱에서 찾을 수 있습니다.

검색창 (mobbin.com)

하단 네비게이션에 검색 아이콘

검색 아이콘을 하단의 탭바 또는 내비게이션바에 배치하면 애플리케이션의 모든 화면에서 검색 기능에 액세스할 수 있습니다. 이 옵션은 검색이 전체 내비게이션에서 중요한 역할을 하는 애플리케이션에 적합하며, 사용자는 언제든지 검색으로 빠르게 전환할 수 있습니다. 이 접근 방식은 검색 기능에 더 쉽게 접근할 수 있게 합니다. Instagram, Uber Eats, Apple TV와 같은 앱에서 이 기능을 접할 수 있습니다. 또한 검색 필드와 하단 탐색창의 검색 아이콘은 같은 화면에 동시에 표시되기도 합니다.

하단 네비게이션에 검색 아이콘 (mobbin.com)

상단 네비게이션에 검색 아이콘

상단 네비게이션바 영역에 검색 아이콘을 사용하는 것은 검색 기능의 우선순위가 낮거나 덜 자주 사용되는 경우에 적합합니다. 화면 공간을 절약할 수 있고, 사용자가 검색을 시작하기 전에 먼저 애플리케이션의 다른 측면에 집중하게 됩니다. 검색이 애플리케이션에서 유일하게 중요한 작업이 아닌 경우에 이러한 검색 진입점을 사용하는 것이 좋습니다. 예로는 Youtube, Youtube Music, Twitch가 있습니다.

상단 네비게이션에 검색 아이콘 (mobbin.com)

검색 진입점도 숨길 수 있습니다. 예를 들어, 드롭다운 메뉴 안에 검색을 두는 방식이 가능합니다. 이 옵션은 검색이 매우 드물게 필요한 경우에 적합합니다.

검색 진입점을 어떻게 제시할 것인가에 대한 선택은 사용자의 니즈와 애플리케이션 자체의 특성을 고려하여 이뤄져야 합니다. 또한 애플리케이션의 전반적인 네비게이션 및 디자인 전략과 일치하면서도 사용성을 극대화할 수 있어야 합니다.

2. 검색 결과의 범주

결과의 범주 측면에는 1) 글로벌 검색과 2) 로컬 검색이 있습니다. 두 유형의 검색 모두 장점이 있으며 수요도 비슷하게 있습니다.

글로벌 검색

글로벌 검색은 콘텐츠가 많은 경우에 유용한 탐색 방법입니다. 어떤 하나의 유형의 콘텐츠로 제한되지 않는 검색을 말합니다.

글로벌 검색의 예는 Google Maps 앱에서 찾을 수 있으며, 여기서 검색은 주요 탐색 수단입니다. 검색 필드를 통해 필요한 모든 것을 찾을 수 있습니다. 가장 가까운 주유소, 카페, 레스토랑 또는 랜드마크 등 모든 콘텐츠가 검색 대상이 됩니다.

Google Maps 앱에서 글로벌 검색

글로벌 검색은 애플리케이션의 메인 화면에서 바로 사용할 수 있는 경우들이 있습니다. Google Maps 외에도 Booking, Airbnb, Zillow 등에서 이러한 기능을 찾을 수 있습니다. 사용자가 정의되지 않았거나 구체적이지 않은 것을 찾아야 하는 경우 글로벌 검색 기능을 제공할 수 있습니다.

로컬 검색

로컬 검색을 이용하면 사용자는 애플리케이션의 특정 상황이나 영역 내에서 관련 정보를 더 쉽게 찾을 수 있습니다.

로컬 검색의 예는 Facebook 앱의 친구 섹션에서 찾을 수 있습니다. 여기서 검색의 진입점은 돋보기 아이콘으로 표시됩니다. 이 아이콘을 클릭하면 사용자가 사람 목록으로 검색을 엽니다. 이 검색은 사람 목록으로 제한됩니다. 즉, 사람에 대한 정보만을 검색 대상으로 한다는 점에서 로컬 검색입니다.

Facebook 앱에서 로컬 검색

어떤 유형의 검색이 더 나은지에 대한 규칙은 없습니다. 글로벌 검색, 로컬 검색 두 가지 옵션 모두 사용자의 필요와 애플리케이션 기능에 따라 수요가 있습니다.

3. 제시 방법

검색 입력 필드나 검색 아이콘을 클릭한 후에 검색 서비스를 사용에게 제시하는 방식은 두 가지가 있습니다. 새로운 화면을 띄워서 보여주거나, 동일한 화면 내에서 검색이 수행되는 방식입니다. 하나씩 살펴 보겠습니다.

새로운 화면

대체로 검색은 사용자를 검색에 집중시킬 수 있도록 새로운 화면에서 제시됩니다. 이 화면은 정식적인 풀스크린 화면일 수도 있고 모달 화면일 수 있습니다. 시각적인 측면에서는 검색 시나리오의 종료 지점에 따라 몇가지 다른 사례가 있습니다.

1) 뒤로가기 - 뒤로가기 화살표를 클릭하면 사용자가 검색 모드를 종료할 수 있습니다. 뒤로가기 화살표는 일반적으로 전체 화면에서 사용되지만, 종종 모달 뷰에 사용되기도 합니다.

2) Х 아이콘 - 이 솔루션에는 단점이 있다는 것을 바로 언급하겠습니다. 아래에서 논의하겠습니다.

3) 시트 - 플랫폼에 따라 종료를 의미하는 어포던스가 다릅니다. iOS에서는 일반적으로 스와이퍼가 있는 전체 화면 시트로 표시되는 반면, Android에서는 이전 Material 가이드라인에 따라 아래쪽 화살표가 표시되기도 했었습니다.

시트, 뒤로가기, X 아이콘 (mobbin.com)

동일한 화면

검색이 같은 화면에서 열리는 경우 해당 화면의 콘텐츠 내에서 검색하도록 의도된 것일 가능성이 높으며 이때 검색 기능은 일종의 필터로 작동합니다. 이러한 필터 검색의 예는 Telegram 앱에서 찾을 수 있습니다. 채널 내에서 검색을 활성화하는 것은 드롭다운 메뉴에서 수행할 수 있습니다. 검색을 클릭하면 상담 네비게션바(Navigation Bar)에 검색 창이 나타나 콘텐츠를 필터링합니다.