[UX] 구글 머티리얼 디자인 – 3.4.머티리얼 기초(Material foundation) – 내비게이션(Navigation): 검색(Search)
내비게이션에서 검색(Search)은 단순히 하나의 화면에서 다른 화면으로의 이동을 하는 화면 간 이동과 관련된 내비게이션보다는 복잡한 내비게이션 구조가 발생합니다. 특히 역방향 내비게이션(Reverse navigation)에 대한 구조 설계는 신경써서 해야 합니다.
출처: 원문보기
앱 내에서 검색(Search) 기능은 사용자가 앱의 콘텐츠를 빨리 찾도록 합니다. 다시 말해, 화면의 계층 구조를 따라가면서 콘텐츠를 탐색하는 구조가 아니라 계층을 점프하여 콘텐츠를 탐색할 수 있게 해줌에 따라 더 빨리 원하는 콘텐츠에 접근할 수 있도록 한다는 의미입니다. 다시 말해, 그만큼 대부분의 앱에서 콘텐츠를 탐색하기 위한 검색(Search) 기능은 자주 사용된다는 의미이기도 합니다.
1. 사용법 (Usage)
검색 기능은 앱 내에서 사용자에게 콘텐츠에 빠르게 접근할 수 있도록 합니다. 기본적으로 검색(Basic search) 기능은 사용자가 연관된 검색결과를 찾기 위해 검색어 입력 필드에 검색어를 입력할 수 있도록 합니다.
검색어 입력 방법은 이전에 입력했던 검색어(Historical suggestions)를 제안하는 것으로 확장될 수 있고, 검색어 자동 완성(Auto-completion), 음성 검색(Voice input) 등의로 확장될 수 있습니다.
2. 지속형 검색 (Persistent search)
앱 내에서 검색 기능이 중요하다면 지속형 검색 기능을 사용합니다. 검색어 입력창(Search text field)이 검색바(Search bar) 내에서 항상 활성화되어 검색어 입력이 언제든 가능한 형태의 검색 방식입니다.
2.1. 사용법 (Usage)
- 지속형 검색을 위해 사용자가 검색어 입력창을 선택하면, 검색어 입력을 위한 창이 화면 전체로 확대됩니다. 선택적으로 검색어 기록이 하단의 텍스트 필드(Text field)로 입력될 수 있습니다.
- 사용자는 검색어(Query)를 직접 입력하거나 검색어 기록을 통해 검색어를 선택할 수 있습니다. 키보드의 엔터키(Return)를 눌러 검색 기능을 사용할 수 있습니다.
- 검색결과는 검색바(Search bar) 하단에 출력됩니다.
- 검색결과가 출력되면 검색어 입력창 선택 상태가 해제되고, 검색어 기록이 사라집니다. 사용자는 뒤로 가기 아이콘(Up arrow)을 통해 이전 화면으로 이동할 수 있습니다.
위 그림은 검색어 입력창이 선택된 상태(Focus), 검색결과 호출, 선택이 해제된 상태로 복귀하는 절차를 나타내고 있습니다.
위 그림은 지속형 검색바(Persistent search bar)가 선택되지 않은 상태를 나타냅니다. (기본 상태)
지속형 검색바를 사용자가 선택(Focus)하면, 카드(Cards) 컴포넌트를 통해 검색바 하단으로 검색어 자동완성 기능으로 예상 검색어 제안을 합니다.
3. 확장형 검색 (Expandable search)
앱 내에서 검색이 핵심 기능이 아니라면 확장형 검색(Expandable search)을 사용합니다. 확장형 검색은 검색어 입력창을 노출하는 대신에 툴바(Toolbar) 내에 검색 아이콘만 출력하는 형태의 검색입니다. 검색바(Search bar)가 기본적으로 노출되지 않는 형태의 검색 방식이라고 생각하면 됩니다.
3.1. 사용법 (Usage)
- 사용자는 검색바(Search bar)를 활성화 하기 위해 툴바(Toolbar) 내에 있는 검색 아이콘(Search icon)을 선택합니다.
- 사용자가 타이핑을 시작하면 검색어 기록(Historical search)이 검색바 하단에 출력될 수 있습니다.
- 검색어(Query)를 입력하거나 검색어 기록을 통해 검색어를 선택하고, 키보드의 엔터키를 선택하여 검색을 진행합니다.
- 검색결과가 검색바 하단에 출력되고, 스크롤하여 검색결과를 탐색할 수 있습니다.
검색결과가 출력되는 동안, 검색어 입력창(Search text field)은 보이기(Visible) 상태로 남아있지만 검색어 입력창이 선택되어 활성화되지 않습니다. 검색어 입력창이 선택되고, 활성화 된다는 의미는 시스템이 사용자의 검색어 입력을 대기하고 있는 상태를 의미하며, 이때는 검색어 자동완성 등의 기능이 활성화 되는 상태를 의미합니다.
뒤로 가기(Up arrow) 아이콘을 선택하면, 검색어 입력창이 선택되고 활성화 된 상태가 해제되고, 검색어 자동완성 등의 검색어 제안과 가상 키보드가 사라지고, 툴바의 원래 상태로 돌아갑니다. 툴바의 원래 상태는 검색 아이콘이 선택되기 전에 검색 아이콘만 출력된 툴바의 상태로 돌아간다는 것을 의미합니다.
위 그림은 검색 아이콘 선택에서부터 검색결과를 출력하는 것을 나타내는 확장형 검색바(Expandable search bar)입니다.
위 그림은 확장형 검색(Expandable)의 기본 상태를 나타냅니다. (툴바 내에서 검색 아이콘이 선택되지 않은 상태가 확장형 검색의 기본 상태인 것입니다.)
검색어 입력창에서 검색어가 입력되면 검색어 자동완성(Auto-complete suggestions)과 함께 예상 검색어가 제안됩니다.
4. 마무리
내비게이션에서 검색 기능이 중요한 이유는 대부분의 앱 내 기능으로 검색기능이 포함되지만 이와 관련한 내비게이션 설계를 잘못하여 앱의 상태 및 검색 결과 출력과 관련한 다양한 버그가 발생하기 때문입니다.
내비게이션에서 검색 프로세스에 대한 설계 중 가장 중요한 부분은 검색어 자동완성(Auto-complete suggestion) 같은 부분들은 경우에 따라 생략을 하는 경우도 있습니다.
그것보다 중요한 것은 검색어가 입력되고, 검색결과를 탐색하고, 검색어가 변경되고, 다시 검색결과가 출력되고 하는 과정에서 이전에 입력된 검색어와 그에 따른 검색결과 상태를 어떻게 관리할 것인지에 대한 설계입니다.
사실 이 부분에 대한 내비게이션 설계는 단순히 검색 기능을 포함하는 것을 넘어서 피곤한 문제를 야기시키기에 충분합니다. 이 부분이 잘못되어 실제 테스트를 해보면 오류를 나타내는 경우가 실무에서는 가장 흔하게 발생합니다.
해당 내비게이션을 설계하는 가장 좋은 방법은 늘 그렇듯이 구글의 레퍼런스 앱의 검색 내비게이션을 분석하는 것입니다. 각 상태와 화면이 어떻게 이동하는지를 파악하여 제대로된 검색 내비게이션 기능을 구현할 수 있도록 하기 바랍니다.
다음 내용은 색상(Color) 시스템은 어떻게 구성되어 있고, UI, 텍스트, 테마(Theme) 등에 어떻게 적용하는지 등을 다룰 예정입니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기