검색에 대한 지침

Applies to Windows and Windows Phone

표준 검색 상자 컨트롤의 모양 샘플

이러한 지침을 활용하면 앱의 콘텐츠에 대한 검색 결과를 제공하는 데 도움이 될 수 있습니다. 지침에는 검색 상자에 검색 제안 및 개체 틀 텍스트를 제공하고 검색 결과 페이지를 디자인하는 방법에 대한 도움말이 포함됩니다.

앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.:  Windows 스토어 앱 UI 전체 프로세스

설명

검색 상자는 검색 쿼리 텍스트를 입력하는 데 사용할 수 있는 컨트롤입니다.

검색이 사용자가 앱의 콘텐츠에 액세스하는 주요 방법 중 하나인 경우 앱 캔버스에 검색 상자를 추가하는 것이 좋습니다. 검색 상자는 사용자에게 시작 위치를 알려주는 좋은 방법입니다. 레이아웃에서 공간이 문제가 되는 경우 검색 상자를 표시하도록 확장 가능한 아이콘을 사용합니다. 또한 검색 상자를 앱 바에 배치할 수도 있습니다. 검색 상자를 앱의 모든 페이지에 배치할 것을 고려합니다. 어떤 페이지에는 검색 상자가 있고 다른 페이지에는 없을 경우 사용자가 헷갈릴 수 있습니다. 그러나 이 결정은 컨텍스트와 앱의 용도에 따라 다르게 내릴 수 있습니다.

표준 검색 상자 컨트롤을 보여 주는 스크린샷

검색 구현

앱에 사용자가 검색하려는 콘텐츠가 있는 경우 앱 캔버스에 검색 상자를 추가합니다.

  • C++, C# 또는 Visual Basic으로 작성된 Windows 스토어 앱에는 SearchBox 컨트롤을 사용하고 JavaScript로 작성된 Windows 스토어 앱에는 WinJS.UI.SearchBox 개체를 사용합니다.

  • 앱 콘텐츠가 있는 위치(예: 로컬 파일 시스템 또는 웹 서비스)에 관계없이 검색 상자를 사용하여 사용자 쿼리에 응답하고, 직접 디자인한 앱 페이지에 검색 결과를 표시할 수 있습니다.

  • 검색 상자는 사용자에게 시작 위치를 알려주는 좋은 방법입니다. 레이아웃에서 공간이 문제가 되는 경우 검색 상자를 표시하도록 확장 가능한 아이콘을 사용합니다. 또한 검색 상자를 앱 바에 배치할 수도 있습니다.

  • 앱 바에 검색 UI가 필요한 경우 위쪽 앱 바에 배치합니다. JavaScript로 작성한 Windows 스토어 앱에서는 탐색 모음에 검색 UI를 배치할 수 있습니다.

  • 검색 상자를 앱의 모든 페이지에 배치할 것을 고려합니다. 어떤 페이지에는 검색 상자가 있고 다른 페이지에는 없을 경우 사용자가 헷갈릴 수 있습니다. 그러나 이 결정은 컨텍스트와 앱의 용도에 따라 다르게 내릴 수 있습니다.

검색 상자의 제안 및 개체 틀 텍스트 사용자 지정

사용자가 검색 상자에 쿼리를 입력하기 시작하면, 검색 상자 아래의 제안 플라이아웃에 검색 제안이 표시됩니다. 앱은 AppendResultSuggestionAppendQuerySuggestion 메서드를 사용하여 이러한 검색 제안을 제공합니다.

검색 상자에는 검색 제안을 최대 25개까지 저장할 수 있습니다.

앱은 쿼리 제안결과 제안 등 두 가지 유형의 검색 제안을 제공할 수 있습니다. 결과 제안은 대답으로, 쿼리 제안은 가능성으로 생각할 수 있습니다.

  • 쿼리 제안은 종종 사용자의 쿼리 텍스트를 자동으로 완성하고 사용자가 검색하려 할 수 있는 쿼리를 제공합니다. 예를 들어, 사용자가 스토어 앱에서 앱을 검색하고 있으며 스토어 앱의 검색 상자에 "word"라는 쿼리를 입력했다고 가정하겠습니다. 결과 제안으로 "Wordament" 및 "Wordpress"가 나타날 수 있으며, 쿼리 제안으로 "word games" 및 "words"가 나타날 수 있습니다. 사용자가 쿼리 제안 중 하나를 선택하면 스토어 앱이 사용자를 해당 쿼리의 검색 결과 페이지로 안내합니다. 일반적으로 쿼리 제안은 자동 완성인 경우가 많지만 반드시 그럴 필요는 없습니다. 예를 들어 조리법 앱에서 "달걀"을 검색하는 경우 키시(quiche)가 쿼리 제안으로 나타날 수 있습니다.

  • 결과 제안은 사용자가 즉시 보려는 사용자 쿼리에 대한 강력한 일치 또는 정확한 일치입니다. 예를 들어 스토어 앱의 "word" 쿼리에 대해 추천 앱 레이블 아래에 Wordament 앱이 결과로 제안될 수 있습니다. 사용자가 Wordament 결과 제안을 선택하면 스토어 앱이 사용자를 스토어의 Wordament 앱 페이지로 바로 안내합니다.

일반적으로 더 근접하게 일치하는 결과 제안이 제안 플라이아웃의 위쪽에 표시되고 그 뒤를 이어 쿼리 제안이 표시됩니다.

사용자가 검색 쿼리를 입력하면 검색 상자에 가능한 쿼리에 대한 검색 기록 제안이 자동으로 제공됩니다. 이러한 제안은 앱에서 제공하는 제안보다 먼저 사용자가 이전에 앱의 검색 상자를 조작한 것을 기반으로 합니다. 검색 기록을 사용하지 않도록 설정할 수 있습니다.

제안을 사용하여 앱 검색 결과를 필터링하거나 범위를 지정하지 마세요. 검색 결과를 구체화할 수 있는 앱 검색 결과 페이지에는 필터링 및 범위 지정 옵션을 배치해야 합니다. 반면, 제안은 사용자가 입력한 쿼리 텍스트와 직접 관련되기 때문에 검색 상자에 배치해야 합니다.

쿼리 제안

  • 일반적으로 사용자가 빨리 검색할 수 있도록 쿼리 제안을 제공하세요.

  • 쿼리 제안을 사용하여 사용자가 앱에서 검색할 수 있는 쿼리 텍스트를 자동 완성하세요. 그러면 사용자가 검색을 완료하는 데 필요한 입력 항목을 줄여서 빠르게 검색할 수 있습니다. 사용자는 전체 쿼리를 입력하는 대신 제안된 쿼리 중 하나를 선택하여 검색을 즉시 실행할 수 있습니다.

  • 사용자가 쿼리 제안을 선택하면 선택한 쿼리에 대한 검색 결과 페이지로 바로 이동합니다.

  • 앱의 쿼리 제안은 사용자의 현재 쿼리 텍스트를 포함해야 합니다. 쿼리 제안은 일반적으로 현재 쿼리 텍스트를 기반으로 하여 자동 완성되므로 현재 쿼리 텍스트를 포함해야 합니다.

  • 쿼리 제안은 더 전체적인 컨텍스트의 결과를 제공하는 대신 앱의 콘텐츠와 앱이 제공할 수 있는 결과를 반영해야 합니다. 쿼리 제안은 앱에서 제공할 수 있는 콘텐츠를 검색하여 사용자가 앱에서 검색할 수 있는 항목을 알 수 있도록 도와줍니다. 예를 들어 날씨 앱은 사용자 쿼리를 자동으로 완성하여 앱이 일기 예보를 제공할 수 있는 시/군/구를 제안합니다.

결과 제안

  • 사용자 쿼리에 대한 강력한 일치 또는 정확한 일치를 추천하려면 결과 제안을 제공하세요.

  • 먼저 검색 결과 페이지로 이동하지 않고 특정 결과의 세부 정보로 바로 이동하도록 하려면 결과 제안을 사용하세요.

  • 결과 제안은 적절한 이미지 또는 미리 보기, 관련 제목 또는 레이블, 간략한 설명으로 구성되어야 합니다. 이미지 크기는 40x40 픽셀로 고정됩니다.

  • 사용자는 이미지, 제목 및 설명을 사용하여 제안된 결과가 검색하려던 내용과 일치하는지 빠르게 확인할 수 있습니다.

  • 결과 집합이 작은 경우 앱의 캔버스에서 결과를 필터링할 수 있습니다. 즉, 사용자가 입력할 때 각 키 입력마다 결과가 즉시 업데이트되도록 합니다. 이는 사용자가 입력할 때의 필터링 양식입니다. 예를 들어 읽기 목록 앱은 이 방법으로 결과를 필터링합니다. 검색 기록이 꺼져 있어야 하며, 앱은 가능한 한 빨리 캔버스를 업데이트합니다. 이 기능의 구현은 UI 성능과 일반적으로 결과가 10개를 넘지 않는 작은 결과 집합을 얼마나 빨리 반환할 수 있는지에 따라 달라집니다. 사용자가 10개의 결과 집합을 얻기 위해 세 글자 이상 입력해야 할 때는 위에 설명된 제안을 사용하는 것이 좋습니다.

구분 기호

  • 구분 기호를 사용하여 유사하거나 개념적으로 정렬된 결과 그룹을 정의할 수 있습니다.

  • 앱이 검색 상자에 제공하는 제안 목록에 구분 기호를 추가할 수 있습니다. 각 구분 기호는 25개의 제안 범위에서 사용할 수 있습니다.

  • 여러 유형의 결과 제안을 제공하려면 레이블이 지정된 구분 기호를 사용하여 사용자가 여러 검색 결과를 구분할 수 있도록 합니다. 예를 들어 다양한 콘텐츠 형식(영화, TV 프로그램 등)의 결과에 대해 두 개 이상의 제안을 제공하는 경우 레이블이 지정된 구분 기호를 사용하여 "영화" 및 "TV 프로그램" 콘텐츠 형식을 구분합니다.

개체 틀 텍스트

  • 검색 상자에 개체 틀 텍스트를 사용하여 사용자가 앱에서 검색할 수 있는 내용을 설명하세요. 예를 들어 조리법 앱은 "조리법 검색"을 표시할 수 있습니다.

  • 개체 틀 텍스트는 검색 상자가 비어 있을 때만 표시합니다. 사용자가 검색 상자에 입력을 시작하면 개체 틀 텍스트를 지웁니다.

  • 검색 상자의 개체 틀 텍스트를 앱에서 검색 가능한 콘텐츠에 대한 간단한 설명으로 설정합니다. 예를 들어 앨범 이름, 곡 이름 또는 아티스트 이름별 검색을 지원하는 음악 앱에서는 개체 틀 텍스트를 "앨범, 아티스트 또는 곡 이름"으로 설정할 수 있습니다.

  • 개체 틀 텍스트를 사용하여 사용자가 검색 중인 내용에 대한 컨텍스트를 제공할 수 있습니다. 이는 지정된 컨텍스트에서 앱의 일부를 검색하려는 경우 중요합니다. 예를 들어 해당 항목 전용의 하위 섹션에서 아티스트 또는 앨범을 검색하는 음악 앱에서 "아티스트" 또는 "앨범"과 같은 텍스트를 사용합니다.

검색 결과 페이지 디자인

검색 환경은 공들여 만들어야 합니다. 검색 결과 사용자 환경(UX)은 콘텐츠, 즉 앱에서 콘텐츠를 표시하는 방법과 유사하게 맞춰야 합니다.

사용자가 앱에 검색 쿼리를 제출하면 쿼리에 대한 검색 결과를 보여주는 페이지가 표시됩니다. 앱에 대한 검색 결과 페이지를 디자인하는 것이므로 사용자에게 제공되는 결과가 유용하고 레이아웃이 적절하도록 해야 합니다.

검색 결과 페이지의 제목을 지정하고, 검색 상자에 사용자의 쿼리 텍스트를 표시하여 컨텍스트를 제공합니다.

최고에서 최저 순으로 관련성을 기준으로 정렬하고 배치하여 검색 결과의 순위를 표시합니다.

검색 결과가 쿼리와 일치하는 이유를 표시합니다.

양방향 언어에서 검색 아이콘을 뒤집어 표시하지 마세요.

일치하는 검색 용어를 강조하여 제안에서 쿼리와 일치하는 부분을 표시합니다. 이는 사용자에게 일치 속성을 표시하는 모든 경우에 중요합니다.

결과 필터링

  • 사용자가 필터링하거나 범위를 지정하여 검색 결과 집합의 범위를 좁힐 수 있도록 하면 앱의 검색 결과 페이지를 개선할 수 있습니다.

  • 쿼리 결과가 매우 많은 경우 사용자가 결과를 필터링할 수 있는 방법을 제공할 수 있습니다.

  • 사용자가 검색 결과 페이지에서 검색 결과를 필터링하고 범위를 지정할 수 있도록 하세요.

  • 각 필터 또는 각 범위에서 사용할 수 있는 결과의 수를 표시합니다. 이렇게 하면 사용자가 자신들이 검색의 범위를 효과적으로 좁히고 있는지 여부를 아는 데 도움이 됩니다.

  • 필터를 지우고 모든 결과를 볼 수 있는 방법을 제공합니다.

검색 상자 크기 조정

  • 앱에서 바로 검색 상자 컨트롤을 사용할 경우 제목에 따라 창 크기와 컨트롤 위치를 다양하게 변경할 수 있습니다.

  • 제목이 잘리지 않도록 하세요.

  • 창 크기가 더 작으면 제목 표시줄의 내용에 따라 검색 상자를 검색 아이콘이 있는 단추로 축소할 수 있습니다. 사용자가 클릭하면 검색 상자를 확장하고 제목과 같이 가려진 요소를 숨깁니다.

  • 뒤로 단추는 탐색의 핵심 요소이므로 숨기지 마세요. 이 단추는 사용자가 항상 액세스할 수 있어야 합니다.

  • 제안 플라이아웃의 최소 높이는 200픽셀입니다.

  • 기본 최대 높이는 300픽셀이며 이 값을 변경할 수 있습니다.

  • 최소 너비는 270픽셀입니다. 이 값은 변경할 수 있지만 IME(입력기) 창에서는 270픽셀보다 작은 너비를 사용하지 않습니다.

항상 결과 페이지에 쿼리를 미리 채워 넣습니다. 사용자가 결과 페이지에서 나갔다가 다시 돌아올 경우 결과가 그대로 표시되어야 합니다. 결과 페이지를 포함하여 모든 페이지에서 앞으로 탐색의 쿼리 텍스트를 지웁니다.

최대 자리 표시자 텍스트 길이는 128자입니다. 최대 쿼리 텍스트 길이는 2048자입니다. 제안에서 모든 텍스트 필드(텍스트, 세부 텍스트, 이미지 대체 텍스트)의 최대 길이는 512자입니다.

검색어 입력 사용

검색 상자를 사용하는 경우, 먼저 검색 상자 컨트롤을 클릭하거나 눌러야 하는 대신 단순히 입력하여 검색하도록 하는 방법을 고려해 보세요. searchPane.showOnKeyboardInput 또는 FocusOnKeyboardInput을 사용하도록 설정하면 됩니다. 이 동작은 사용자가 Windows 8의 시작 화면을 사용할 때와 동일한 종류의 동작입니다. 대부분의 사용자는 키보드를 사용하여 Windows 8을 조작하며, 사용자가 입력하여 검색하도록 하면 키보드 조작이 효율적으로 사용됩니다.

앱의 모든 페이지에서 검색어 입력을 사용하도록 설정하지 마세요. 검색어 입력이 사용자에게 가장 유용할 수 있는 위치 및 문제가 될 수 있는 위치를 고려하세요. 예를 들어, 입력이 지원되는 다른 컨트롤(예: 텍스트 상자)이 포커스를 받는 경우에는 검색어 입력을 사용하지 않도록 설정할 수 있습니다. 그렇지 않으면 검색 상자가 계속해서 문자를 받습니다.

사용자에게 긍정적인 환경을 만들도록 입력하여 검색을 앱에 추가하는 방법을 확인하려면 다음 지침을 따르세요.

  • 앱의 기본 페이지에서 입력하여 검색을 사용하도록 설정합니다.

    앱이 기본 페이지와 앱의 검색 가능한 모든 콘텐츠를 직접 또는 간접적으로 표시하는 모든 앱 페이지에 대해 이 작업을 수행합니다. 기본 페이지는 사용자가 앱을 시작할 때 표시되는 페이지입니다. 앱이 유사한 콘텐츠에 대해 각기 다른 프레젠테이션을 제공하는 여러 기본 페이지를 제공하는 경우도 있습니다. 이 경우 모든 페이지에서 입력하여 검색을 사용하도록 설정해야 합니다.

  • 앱의 검색 결과 페이지에서 입력하여 검색을 사용하도록 설정합니다.

    검색 결과가 표시된 후 사용자가 다시 검색하는 경우도 많습니다. 키보드 사용자가 다른 검색을 신속하게 수행할 수 있도록 검색 결과 페이지에서 검색 상자에 직접 입력할 수 있도록 해야 합니다.

  • 앱의 다른 페이지에서는 입력하여 검색을 사용하지 않도록 설정합니다.

    대부분의 경우 앱의 기본 페이지나 검색 결과 페이지가 아닌 페이지에서는 검색 상자에 직접 입력할 수 없게 해야 합니다. 하나 이상의 입력 상자가 포함된 페이지의 경우 텍스트 상자로 초점이 옮겨지면 앱은 검색어 입력을 사용하지 않도록 설정할 수 있습니다.

검색 계약 사용

앱에서 검색 계약을 사용하는 경우 다음 지침에 따르세요.

  • 프로그래밍 방식으로 검색 창을 호출하고 올바르게 범위를 지정하려면 앱에 검색 아이콘이 있는 단추를 추가하세요. 검색 문자 모양, Segoe UI Symbol 0xE0094(15pt)를 사용하여 창을 호출합니다.

  • 두드러진 검색 아이콘은 시작 위치를 알려주는 강력한 시각 신호를 사용자에게 제공합니다. 사용자가 아이콘을 선택하면 검색 창에서 쿼리를 입력할 수 있도록 앱이 프로그래밍 방식으로 검색 참 메뉴를 열어야 합니다. 검색 참 메뉴를 이와 같이 사용하면 앱을 보다 직관적으로 만들 수 있습니다.

  • 앱에 검색 상자를 사용하는 경우 더 이상 SearchPane API를 호출할 수 없습니다. 이렇게 하면 예외가 발생하고 "Windows.UI.Xaml.Controls.SearchBox 유형의 인스턴스를 만들 수 없습니다."라는 메시지가 표시됩니다. 앱에서 검색 계약을 계속 사용할 수 있습니다. 실제로 검색 활성화 코드를 지원하려면 검색 계약을 사용해야 합니다.

검색 및 검색 계약에 대한 자세한 내용은 앱에 검색 추가를 참조하고, 코드 예제는 빠른 시작: 앱에 검색 추가를 참조하세요.

관련 항목

디자이너용
페이지에서 찾기에 대한 지침
개발자용(HTML)
WinJS.UI.SearchBox
검색 기능 추가
빠른 시작: 검색 기능 추가
개발자용(XAML)
SearchBox
검색 기능 추가
빠른 시작: 검색 기능 추가

 

 

표시:
© 2014 Microsoft