애플 휴먼 인터페이스 가이드라인(36) Bars -2 Search Bars

Search Bars
검색 바

A search bar allows people to search through a large collection of values by typing text into a field. A search bar can be displayed alone, or in a navigation bar or content view. When displayed in a navigation bar, a search bar can be pinned to the navigation bar so it's always accessible, or it can be collapsed until the user swipes down to reveal it.
검색바는 필드에 텍스트를 입력해 수많은 값 중 원하는 값을 검색할 수 있게 만드는 바입니다. 서치바는 단독으로 보여질 수 있고, 네비게이션 바나 콘텐츠 뷰에 포함될 수 있습니다. 네비게이션 바에 포함되어 보여질 땐, 고정되어 언제든 접근가능할 수 있게 하거나 숨겨졌다가 사용자가 아래로 스와이프해 보여지게 만들 수 있습니다.

Use a search bar instead of a text field to implement search. A text field doesn’t have the standard search bar appearance that people expect.
검색이 목적이라면, 텍스트필드* 대신 검색 바를 사용하세요. 텍스트필드는 사용자들이 기대하는 기본적인 검색 바의 모습이 아닙니다.

*텍스트필드 예시

 

Enable the Clear button. Most search bars include a Clear button that erases the contents of the field.
지우기 버튼을 활성화 시켜두세요. 대부분의 검색 바는 필드의 모든 내용(텍스트)를 지울 수 있는 지우기 버튼을 포함합니다.

 

Enable the Cancel button when appropriate. Most dedicated search bars include a Cancel button that immediately terminates the search.

적절하다면 취소 버튼을 활성화 시켜두세요. 검색 전용 바는 대개 취소 버튼을 포함해 검색 활동을 중단시킬 수 있게 합니다.

Clear button(좌) Cancel button(우)

If necessary, provide hints and context in a search bar. A search bar's field can contain placeholder text—like “Search Clothing, Shoes and Accessories” or simply “Search”—as a reminder of the context being searched. A succinct, one-line prompt with appropriate punctuation can also appear directly above a search bar to provide guidance. Stocks uses a prompt to let people know they can enter a company name or stock symbol.

필요하다면 검색 바에 힌트나 맥락을 제공해주세요. 검색 바의 필드는 "의류, 신발과 악세사리 검색" 이나 단순히 "검색" 과 같은 플레이스 홀더 텍스트를 포함할 수 있습니다. 이는 검색중인 맥락을 다시금 일깨워주죠. 적절한 구두점까지 포함한 간결한 한줄의 문장 또한 검색 바 위에 나타나 가이드를 제공하는 방법이 될 수 있습니다. 주식 앱에선 이런 프롬프트(준비 되었음을 모니터에 표시하는 것)를 사용해 사용자들이 회사 이름이나 스탁심볼을 입력해야 한다는걸 알려주죠. 

Placeholder text(좌) Introductory text(우)

 

Consider providing helpful shortcuts and other content below a search bar. Use the area under a search bar to help people get to content faster. Safari, for example, shows your bookmarks as soon as you tap the search field. Select one to go right to it without entering any search terms. Stocks shows a list of results as you type into the search field. Tap one at any time without typing any more characters.

For developer guidance, see UISearchController and UISearchBar.

검색 바에 유용한 지름길이나 다른 콘텐츠를 보여주세요. 검색 바 아래 영역을 활용해 사용자들이 원하는 콘텐츠로 더 빠르게 이동할 수 있게 하세요. 예를 들어 사파리의 경우, 검색 영역을 탭하자마자 즐겨찾기 목록을 보여줍니다. 검색에 더 시간을 할애할 필요 없이 누르고 바로 이동할 수 있습니다. 주식 앱에서는 검색 영역에 텍스트를 침과 동시에 검색 결과를 보여줍니다. 더 텍스트를 입력하지 않고도 원하는 결과값을 탭할 수 있습니다.

Scope Bars
스코프 바

A scope bar can be added to a search bar to let people refine the scope of a search.
스코프 바는 검색 바에 추가되어 사용자들이 검색 결과의 범위를 설정할 수 있도록 합니다.

Favor improving search results over including a scope bar. A scope bar can be useful when there are clearly defined categories in which to search. However, it’s best to improve search results so scoping isn’t necessary.

For developer guidance, see UISearchBar.

스코프 바를 사용하는 것 보다, 검색 결과값을 개선시키는데 초점을 맞추세요. 스코프 바는 사용자들이 검색 결과값의 카테고리를 아주 명확히 인지하고 있을 때 유용합니다. 그러나, 검색 결과값을 향상시켜 스코핑 자체가 필요할 수 없도록 하는 것이 가장 좋은 방법일 것입니다.