brunch

You can make anything
by writing

C.S.Lewis

by Lawn Jun 02. 2023

[HIG] Search fields

콘텐츠 모음을 검색하는 서치필드

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.


Introduction


서치 필드(Search field)를 사용하여 사람들이 입력한 특정 용어에 대한 콘텐츠 모음을 검색할 수 있습니다.


서치 필드(Search field)는 주로 검색 버튼, 지우기 버튼 및 선택적인 플레이스 홀더 텍스트를 나타내는 수정가능한 텍스트 필드입니다. 플랫폼에 따라 서치 텍스트 필드는 토큰을 사용하여 사람들이 입력하는 검색어나 필터로 사용하는 앱 정의 항목을 나타낼 수 있습니다. 토큰은 시각적 처리를 사용해서 용어나 항목을 캡슐화하여 토큰 내에서 텍스트를 선택할 필요 없이 쉽게 복사하거나 드래그할 수 있음을 나타냅니다. macOS에서 토큰의 예시는 Token fields를 참고하세요.


Best Practices


검색을 돕는 힌트를 제공하는 것이 좋습니다. 예를 들어 음악에는 사람들이 검색할 수 있는 내용을 제안하는 “아티스트, 노래, 가사 등”이라는 플레이스 홀더가 있습니다. “검색”과 같은 용어의 플레이스 홀더는 유용한 정보를 제공하지 않으므로 사용하지 않는 것이 좋습니다.


서치 필드(Search field) 근처에 유용한 단축어나 기타 콘텐츠를 제공하는 것을 고려해 보세요. 예를 들어 사파리(Safari)에서 서치 필드(Search field)를 누르거나 클릭하자마자 북마크를 나타내므로 사람들이 북마크를 선택하여 즉시 열 수 있습니다. 개발자 지침은 UISearchSuggestion를 참고하세요.


적절한 시기에 검색을 시작합니다. 사람들이 입력을 시작하자마자 검색을 시작하거나 Return 또는 Enter를 선택할 때까지 기다릴 수 있습니다. 사람들이 타이핑하는 동시에 검색하는 것은 텍스트가 구체화되면서 지속적으로 정제된 결과를 제공합니다. 사람들이 타이핑을 끝낸 후 검색하는 경우에는 사람들이 타이핑하는 동안 최근 검색어나 추천 검색어를 선택할 수 있는 메뉴를 보여주는 것을 고려해 보세요.


지우기(Clear) 버튼을 포함하세요. 사람들은 현재 검색어를 빠르게 삭제할 수 있기 때문에 지우기 버튼을 선호합니다.


검색 기록을 나타내기 전에 개인 정보를 고려하세요. 사람들은 다른 사용자가 볼 수 있는 곳에 검색 기록이 나타나는 것을 원하지 않을 수 있습니다. 대신 사람들이 결과를 빠르게 좁힐 수 있는 스코프 바(scope bar)를 제공하는 것을 고려해 보세요.


Scope bars


iOS, iPadOS 및 tvOS에서는 스코프 바(scope bar)를 사용하여 검색 범위를 세분화할 수 있습니다. 개발자 가이드라인은 UISearchBar를 참고하세요.

스코프 바(scope bar) 보다는 검색 결과를 개선하는 것이 좋습니다. 스코프 바(scope bar)는 검색 카테고리가 명확히 지정된 경우에는 유용할 수 있지만 일반적으로 범위를 지정할 필요가 없도록 검색 결과를 개선하는 것이 좋습니다.


Platform considerations


Not supported in watchOS.


iOS, iPadOS

내비게이션 바 또는 콘텐츠 영역에 서치 필드(Search field)를 나타낼 수 있습니다. 내비게이션 바의 서치 필드(Search field)에 시스템 제공 구성요소를 포함한다면 자동으로 적절한 형태를 적용하여 사람들이 예상하는 대로 작동합니다. 예를 들어 서치 바는 아래로 스와이프 하여 나타내기 전까지 숨길 수 있습니다. 

  

DEVELOPER NOTE : 내비게이션 바 내 서치 필드(Search field)의 시스템 제공 형태와 동작을 원한다면 searchController를 사용하세요. 서치 필드(Search field)의 사용자 지정 형태와 동작이 필요하다면 UISearchBar를 사용하여 바에 넣을 필드를 생성하거나 UISearchTextField를 사용하여 콘텐츠 영역의 서치 필드(Search field)에 사용자 지정 배경을 적용하는 것을 고려해 보세요.  


macOS

서치 필드(Search field)는 창의 도구 모음에 포함시키는 것이 일반적이지만 본문 영역에서도 서치 필드(Search field)를 표시할 수 있습니다.


콘텐츠 영역 내에서 서치 필드(Search field)의 소개 레이블은 제공하지 않는 것이 좋습니다. 사람들은 서치 필드(Search field)의 독특한 형태에 익숙하기 때문에 레이블을 지정할 필요가 없습니다. 반면에 도구 모음의 서치 필드(Search field)에 “검색” 레이블을 제공하면 사람들이 도구 모음을 설정할 때 아이콘과 텍스트 또는 텍스트만 표시하도록 레이블이 나타납니다.


스코프 버튼(scope button)에 적절한 베젤 스타일을 적용합니다. 베젤은 두 가지 스타일을 사용할 수 있습니다. 오목한(recessed) 베젤은 버튼이 끼워진 듯한 모양으로 범위를 좁히기 위해 껐다 켰다 하는 토글 스코프 버튼(scope button)입니다. 둥근(rounded) 베젤은 초기 동작이나 검색 기준을 명시하는 스코프 버튼(scope button)에 사용됩니다.

필요에 따라 범위를 구체화합니다. 스코프 바(scope bar) 아래에 표시되는 필터를 사용하여 추가 범위 설정을 활성화할 수 있습니다. 예를 들어 Finder에서 파일명을 검색할 때 추가(+) 버튼을 클릭하여 확장자 또는 수정 날짜 범위와 같은 추가 속성을 지정할 수 있습니다. 필터에는 텍스트 필드, 버튼 및 필터 기준을 기정 하기 위한 기타 컨트롤을 포함할 수 있습니다.

tvOS

검색 화면은 사람들이 검색어를 입력하는 전용 키보드 화면으로 완전히 사용자 지정이 가능한 뷰에서 검색 결과를 키보드 아래 표시됩니다. 개발자 가이드라인은 UISearchController를 참고하세요.


최근 검색어 표시를 고려해 보세요. 사람들은 종종 tvOS에서 검색을 반복하기 때문에 사람들이 입력을 시작하기 전에 키보드 아래의 결과 영역에 인기 검색어나 최근 검색어를 나열하여 텍스트 입력의 필요성을 최소화할 수 있습니다.


검색을 쉽게 하기 위한 제안을 제공해 보세요. 사람들은 보통 tvOS에서 타이핑을 많이 하고 싶어 하지 않습니다. 검색 환경을 개선하기 위해 가능하다면 최근 검색어를 포함하여 인기 검색어와 컨텍스트 별 검색을 제안을 제공해 보세요. 개발자 가이드라인은 Using suggested searches with a search controller을 참고하세요.


검색 결과를 단순화합니다. 스크롤이 많이 필요한 긴 검색 결과 목록은 제공하지 않는 것이 좋습니다. 가장 관련성이 높은 결과의 우선순위를 지정하는 것 외에, 사람들이 원하는 결과를 찾을 수 있도록 분류하는 것을 고려해 보세요.


검색 결과를 필터링할 수 있도록 합니다. 예를 들어 검색 결과의 콘텐츠 영역에 스코프 바(scope bar)를 포함하면 검색 결과를 빠르고 쉽게 필터링할 수 있습니다.


Resources


Related   

Searching


Developer documentation   

searchable — SwiftUI

UISearchBar — UIKit

UISearchTextField — UIKit

NSSearchField— AppKit


Videos

Discoverable design WWDC21

Craft search experiences in SwiftUI


작가의 이전글 [HIG] Path controls
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari