직관적인 검색 경험 디자인하기

안녕하세요, 저는 Apple 디자인 팀의 디자이너 Rob입니다 오늘은 앱에 직관적인 검색 경험을 설계하는 방법을 이야기하겠습니다 검색은 사람들이 콘텐츠를 찾고 탐색하는 데 도움이 되는 가장 중요한 도구 중 하나입니다 앱이 점점 더 다양한 콘텐츠와 경험을 제공함에 따라 검색은 사용자에게 강력한 도구가 됩니다 시간을 들여 찾아 헤매지 않아도 원하는 것을 정확히 바로 찾을 수 있는 능력이죠 검색은 앱을 열었을 때 사람들이 가장 먼저 찾는 기능이기도 합니다 Pages에서 문서로 돌아가거나 Apple TV에서 영화를 찾거나 Apple Music에서 새로운 아티스트와 장르를 탐색하는 등 검색은 이러한 인터랙션을 자연스럽게 만드는 핵심 역할을 합니다 그렇기 때문에 훌륭한 검색 경험을 설계하는 것은 앱에서 중요한 부분입니다

Liquid Glass와 함께 새로운 패턴을 도입했습니다 iOS에서 검색을 더 편리하게 만들고 iPad와 Mac의 더 큰 디스플레이를 최대한 활용할 수 있도록 했습니다 이 세션에서는 먼저 검색 필드를 소개하고 검색 필드가 지원하는 핵심 동작과 인터랙션을 살펴보겠습니다 그런 다음 사용 가능한 다양한 검색 패턴을 개괄적으로 알아보고 어떤 것들이 있는지 살펴보겠습니다 앱에서 검색 위치를 결정할 때 최선의 방법도 다룰 것입니다 마지막으로 몇 가지 일반적인 모범 사례를 이야기하겠습니다 텍스트 입력, 검색 결과 필터링 같은 일반적인 인터랙션을 최대한 직관적이고 매끄럽게 만드는 방법을 알아보겠습니다 먼저 검색 필드를 살펴보겠습니다 Apple은 개발자에게 검색 컴포넌트를 제공합니다 검색 시 사람들이 기대하는 핵심 요소와 인터랙션을 포함하고 있습니다 예를 들어 앞쪽의 검색 아이콘은 해당 UI가 검색 필드임을 시각적으로 나타냅니다 플레이스홀더 텍스트는 검색어를 입력할 수 있는 곳을 알려줍니다 지우기 버튼은 텍스트가 입력되면 나타납니다 iOS에서 검색이 포커스되면 추가 취소 버튼이 표시됩니다 키보드를 내리면서 동시에 검색을 종료할 수 있습니다 검색 필드가 배치되는 위치에 따라 자동으로 올바른 표현 스타일이 적용됩니다 Toolbar에 배치하면 유리 효과를 사용하거나 앱의 스크롤 영역에 배치하면 표준 콘텐츠 스타일을 사용하는 식으로요 앱에 고유한 브랜드와 아이콘 세트가 있다면 검색 필드의 핵심 요소는 그대로 유지하세요 커스텀 아이콘은 대체하는 심볼과 최대한 유사해야 합니다 돋보기 같은 심볼은 검색을 나타내는 것으로 전 세계적으로 인식됩니다 이제 사용 가능한 다양한 검색 패턴과 앱에 맞는 방법을 선택하는 방법을 살펴보겠습니다 iOS부터 시작하겠습니다 iOS에서 검색은 Toolbar에 필드 또는 버튼으로 배치할 수 있습니다 탭 바에 탭으로 배치하거나 상단 Toolbar 아래 또는 앱의 콘텐츠 영역에 필드로 배치할 수 있습니다 검색을 어디에 배치하느냐가 활성화될 때 필드가 어디로 애니메이션되는지에 직접 영향을 미친다는 점이 중요합니다 검색이 하단 Toolbar에 배치되면 필드가 키보드 위로 부드럽게 올라옵니다 접근성과 키보드 입력에 최적화된 방식입니다 검색이 인라인 필드로 배치되면 활성화 시 상단에 그대로 유지되어 앱 하단의 UI와 겹치지 않습니다 검색 위치를 결정할 때 크게 두 가지 질문을 해보세요 첫 번째, 사람들이 내 앱을 어떻게 탐색하는가? 이 질문은 탭 바 같은 특정 컴포넌트를 수용해야 하는지 파악하는 데 도움이 됩니다 두 번째, 내 검색의 범위는 무엇인가? 특정 배치는 사람들이 인식하는 검색 대상 콘텐츠에 영향을 줄 수 있습니다 Apple의 자체 앱 몇 가지를 통해 실제로 적용해 보겠습니다 Mail 앱에서 대부분의 탐색은 메일 목록을 통해 이루어지며 각 보기 위에 상황별 툴바가 표시됩니다 이것은 검색을 하단 툴바에 배치하기에 좋은 예입니다 가장 편리한 위치이며 앱의 다른 주요 액션과 인접해 있습니다 여기서 배치는 활성화되면 메일을 검색하게 된다는 것을 명확하게 전달합니다 Toolbar의 인접 항목 수에 따라 필드 너비가 자동으로 조정됩니다 앞쪽과 뒤쪽 액션을 모두 수용할 수 있습니다 두 개 이상의 툴바 항목이 필요하다면 검색이 버튼으로 시작하다가 탭 시 필드로 애니메이션될 수도 있습니다

하단 툴바 위치가 선호되지만 검색을 상단 Toolbar에 배치할 수도 있습니다 Stocks 앱은 이것이 유용한 좋은 예입니다 여기서 Stocks 목록 하단에는 시트가 있습니다 하단 Toolbar나 필드를 배치할 수 없는 상황입니다 이 경우 검색이 상단 Toolbar에 배치됩니다 탭 시 마찬가지로 키보드 위로 필드를 올려줍니다 이제 다른 종류의 탐색 방식을 살펴보겠습니다 탭 방식 앱입니다 탭 바는 앱의 최상위 섹션 간에 빠르게 이동할 수 있게 해줍니다 탭 방식 앱에는 종종 다양한 풍부한 콘텐츠와 검색 가능한 보기가 있습니다 이 경우 일반적으로 검색의 주요 진입점을 만드는 것이 권장됩니다 사람들이 앱 내의 모든 관련 콘텐츠를 찾을 것으로 기대하는 단일 공간입니다 검색 탭을 만들어 이를 구현할 수 있습니다 검색 탭을 사용하면 두 가지 옵션이 있습니다 첫 번째는 표준 탭을 사용하는 것입니다 검색을 나머지 바와 일관되게 유지하는 방법입니다 탭을 선택하면 랜딩 페이지로 이동합니다 상단에 검색 필드가 표시된 페이지입니다 검색 전에 도움이 될 수 있는 콘텐츠나 제안을 보여줄 공간이 생깁니다 검색 전에 유용한 내용을 표시할 수 있습니다 두 번째 옵션은 버튼 형태를 사용하는 것입니다 검색을 탭에서 두드러지게 만드는 방법입니다 탭하면 즉시 검색이 시작되고 키보드가 올라온다는 것을 전달합니다 첫 번째 방법은 앱에 풍부한 콘텐츠가 많을 때 유용합니다 사람들이 검색할 때 더 탐색적인 마음가짐을 가질 수 있는 경우입니다 예를 들어, Apple TV는 검색 탭을 사용하여 검색 전에 다양한 장르와 이용 가능한 카테고리를 보여줍니다 어떤 콘텐츠가 있는지 파악하는 데 도움이 됩니다 사람들이 대체로 무엇을 찾는지 알고 있는 경우에는 빠르게 검색에 접근해야 할 때 두 번째 방법을 추천합니다 검색을 두드러진 탭으로 만드는 것입니다 좋은 예가 Phone 앱입니다 여기서 사람들은 최근 통화나 연락처로 빠르게 돌아가고 싶어 합니다 검색을 탭하면 즉시 키보드가 올라옵니다 이 배치는 검색이 항상 존재하며 탭 한 번으로 접근할 수 있게 합니다 전용 검색 탭은 더 통합된 환경을 제공하기에 좋지만 앱 내 전체 검색에 유용하고 특정 탭만 검색하는 것이 유용한 경우도 있습니다 Apple Music 보관함이 좋은 예입니다 여기서 검색은 콘텐츠 바로 위, 제목 아래에 인라인으로 배치됩니다 제목과 검색 필드의 더 설명적인 플레이스홀더 텍스트 모두 음악 보관함의 앨범만 검색된다는 것을 명확히 합니다 앱 전체가 아니라는 것을요

이 패턴은 앱에 검색 필드가 여러 개 있을 때 특히 유용하며 위치가 검색 범위에 중요한 역할을 할 때도 마찬가지입니다 이제 iPad와 Mac을 살펴보겠습니다 두 플랫폼 모두 더 넓은 디스플레이를 제공하며 앱에서 유사한 탐색 모델을 공유하므로 검색에 접근하는 방식도 대체로 비슷합니다 iPad와 Mac의 검색 경험을 최대한 일관되게 유지하길 권장합니다 가능한 한 긴밀하게 맞춰두세요 두 플랫폼 모두 앱의 기본 검색 필드를 배치할 수 있습니다 Toolbar의 끝 위치에 배치하거나

사이드바 상단에 배치하거나 전용 검색 탭 또는 섹션 상단에 배치할 수 있습니다 몇 가지 예를 살펴보겠습니다 앱에 가장 적합한 방법을 결정하는 데 도움을 드리겠습니다 여러 열의 정보를 검색해야 하는 Split View 앱의 경우 Mail처럼 Toolbar의 끝 위치에 검색을 배치하세요 공간을 효율적으로 사용할 수 있으며 사람들이 결과를 탐색하면서 선택한 콘텐츠를 세부 정보 보기에서 계속 볼 수 있습니다 이것은 사용자에게 가장 익숙하고 보편적인 검색 패턴 중 하나입니다 Notes와 Files 같은 앱에서 활용됩니다 검색 결과가 앱의 세부 정보 보기에 나타날 것으로 예상된다면 툴바에 검색을 배치하는 것도 고려해보세요 예를 들어 Freeform에서 검색은 아래 보드를 직접 필터링합니다 툴바에 여러 항목과 그룹이 있으면 검색 필드는 공간에 따라 크기가 조정되거나 버튼으로 축소됩니다

활성화되면 검색이 텍스트 입력에 최적화된 너비로 확장되고 넘치는 항목은 메뉴로 이동합니다 또 다른 일반적인 패턴은 사이드바에 검색을 배치하는 것입니다 예를 들어 설정 앱에서처럼요 사이드바의 콘텐츠나 탐색을 직접 필터링하고 싶을 때 검색을 여기에 배치하길 권장합니다 앱에 풍부한 세부 정보 보기가 있을 때 특히 유용합니다 검색하는 목록과 인접한 보기 사이를 명확히 구분해야 할 때 좋습니다 좋은 예로 Stocks 앱을 살펴보겠습니다 여기서 검색을 사용해 주식 목록에 종목을 찾고 추가할 수 있으며 사이드바 배치로 어디서 검색하는지 명확하게 알 수 있습니다 검색을 'Top Stories' 섹션 위에 배치한다면 뉴스와 기사를 검색하게 될 것이라는 기대를 줄 수 있습니다 iOS와 마찬가지로 iPad와 Mac에서도 검색을 전용 탭으로 만들거나 사이드바 항목으로 설정할 수 있습니다 Apple Music처럼 여러 섹션이 있는 풍부한 앱의 경우 사람들에게 검색할 수 있는 단일 공간을 제공하는 데 도움이 됩니다 앱에서 이용 가능한 모든 콘텐츠를 검색할 수 있는 곳입니다 이 더 몰입형 접근 방식은 검색 결과를 표현할 더 큰 캔버스를 제공합니다

마지막 섹션에서는 몇 가지 핵심 모범 사례를 다루겠습니다 검색 경험을 향상시키는 데 도움이 될 것입니다 검색 제안을 활용하는 방법부터 시작하겠습니다 사람들이 앱에서 검색을 사용할 때 처음에 원하는 것을 찾지 못했다는 의미일 수 있습니다 그래서 결과에 도달하는 것을 최대한 쉽고 빠르게 만드는 것이 중요합니다 많은 경우 사용자는 이전에 검색했던 것으로 돌아가고 있을 수 있습니다 최근 검색어를 표시하면 이전 결과로 빠르게 돌아가는 데 도움이 됩니다 타이핑을 시작하지 않아도 됩니다 iOS에서 최근 검색어는 필드가 포커스될 때 바로 인라인으로 표시되어야 합니다 iPad와 Mac에서 검색 필드가 Toolbar나 사이드바에 있는 경우 최근 검색어를 메뉴에 표시할 수 있습니다 검색 탭이 있다면 페이지의 다른 콘텐츠 제안과 함께 표시할 수 있습니다 표시되는 최근 검색어를 선별적으로 선택하는 것을 고려하세요 일부 앱에서는 사용자가 실제로 보거나 상호작용한 특정 결과만 표시하는 것이 도움이 될 수 있습니다 앱에서 사람들에게 가장 도움이 되는 것이 무엇인지 생각해보세요 사람들이 최근 검색어를 삭제할 수 있도록 하는 것도 중요합니다 개별 항목에는 스와이프 제스처를 사용하고 섹션 헤더의 버튼으로 모두 지울 수도 있습니다 누군가 타이핑을 시작하면 가능한 한 빨리 관련 결과를 보여주는 것이 중요합니다 결과와 함께 예측 제안을 통합하면 전체 쿼리를 입력할 필요성을 줄일 수 있습니다 이러한 제안은 사용자가 입력하는 내용과 직접적으로 대응해야 하며 검색의 자연스러운 완성처럼 느껴져야 합니다 사람들의 방향을 잡아주기 위해 사용자 입력과 제안의 예측 부분을 시각적으로 구분하세요 표시되는 제안 수를 제한하는 것도 권장합니다 검색 결과가 중심에 있도록 느껴지게 하기 위해서입니다 결과와 제안이 효율적으로 순위가 매겨지면 사람들이 전체 검색어를 다 입력할 필요가 없어집니다 검색의 또 다른 핵심 측면은 사람들이 결과를 좁히거나 필터링하도록 돕는 것입니다 특히 여러 위치를 검색할 때 중요합니다 카테고리나 계정 간 검색 시에도요 앱의 기본 검색 필드의 경우 일반적으로 더 광범위한 검색으로 시작하는 것이 권장됩니다 그런 다음 사용자가 필요에 따라 결과를 좁혀갈 수 있게 합니다 가벼운 필터링을 위해 Apple은 범위 바라는 컨트롤을 제공합니다 Mail 앱에서 범위 바를 사용하면 모든 사서함의 결과와 현재 사서함의 결과 사이를 전환할 수 있습니다 여러 사서함이나 위치를 탐색할 수 있는 Mail 같은 앱에서 원하는 결과만 볼 수 있도록 돕는 훌륭한 방법입니다 어디서 검색하는지도 명확히 해줍니다 여러 카테고리를 검색하는 앱의 경우 결과를 좁힐 수 있는 더 다양한 옵션을 제공하는 것이 도움이 될 수 있습니다 사람들을 압도하지 않으려면 관련성 있고 맥락에 맞는 필터만 표시하는 것을 고려하세요 Maps 앱이 좋은 예입니다 여기서 필터는 다양한 위치 유형을 수용하도록 맞춤화되어 있습니다 레스토랑부터 하이킹 코스까지요 사람들이 검색을 좁힐 수 있는 또 다른 방법은 검색 토큰입니다 토큰은 입력하는 동안 나타나는 특정 키워드로 결과를 필터링합니다 적용되면 토큰은 검색 필드 내에서 강조된 텍스트로 나타나며 사용자는 계속해서 검색을 추가할 수 있습니다 특정 사람이나 장소 또는 콘텐츠 유형으로 결과를 쉽게 좁힐 수 있습니다 토큰은 검색 필드 내에서 텍스트로 존재하기 때문에 더 자연스러운 언어로 필터를 적용할 수 있습니다 Photos 같은 앱에서는 토큰을 조합해 개인화된 필터를 만들 수도 있습니다 예를 들어 2021년 Joshua Tree에서 찍은 사진을 보는 것처럼요 강력하지만 토큰은 발견하기 어려울 수도 있습니다 앱에서 더 잘 보이는 필터링 UI를 대체하는 데 사용하지 마세요 실제로 토큰은 범위 바와 함께 사용하면 효과적입니다 또는 다른 필터 컨트롤과 함께요 마지막으로 우아하게 실패하는 방법을 이야기해 보겠습니다 검색에서 결과가 반환되지 않는 경우 잘 고려된 빈 상태 또는 결과 없음 보기를 표시하는 것이 좋습니다 완전히 빈 화면은 검색이 제대로 된 건지 의문이 들게 합니다 이를 위해 Apple은 개발자에게 콘텐츠 사용 불가 보기를 제공합니다 검색에 맞게 구성하면 검색 심볼이 표시됩니다 제목과 부제목으로 검색 결과가 없다는 것을 전달합니다 이 보기에 현재 검색어를 표시하는 것을 고려하세요 오타나 오류를 빠르게 발견할 수 있도록 도와줍니다

이것으로 오늘 세션을 마치겠습니다 오늘 공유한 내용을 바탕으로 앱 내의 기회를 생각해 보시기 바랍니다 예를 들어 검색을 하단으로 이동해서 접근성을 개선할 수 있는 곳이 있나요? 아니면 검색 탭의 혜택을 받을 수 있는 탭 방식 앱이 있나요? 마지막으로 제안과 필터 같은 도구를 활용하고 있나요? 검색을 최대한 쉽게 느껴지게 하려면요 오늘 공유한 내용에 대해 더 알아보려면 Human Interface Guidelines를 확인하세요 시작하는 데 도움이 되는 도구는 디자인 리소스를 탐색해 보세요 디자인 시스템에 대해 더 깊이 알고 싶다면 이전 연도의 이 강연들을 확인해보시길 권합니다

여러분이 자신의 앱에서 이 업데이트와 가이드라인을 활용하는 것을 정말 기대됩니다 시청해 주셔서 감사합니다!