κ°œλ°œν•˜λŠ” ν›ˆμ΄ 2021. 8. 21. 16:26
πŸ’‘ 개인적인 곡뢀λ₯Ό λͺ©μ μœΌλ‘œ λ²ˆμ—­ν•˜μ—¬ κ°„λž΅ν•˜κ²Œ μ •λ¦¬λ§Œ ν•œ κΈ€μž…λ‹ˆλ‹€. 전문을 ν¬ν•¨ν•˜κ³  μžˆμ§€ μ•ŠμœΌλ‹ˆ μžμ„Έν•œ λ‚΄μš©μ€ κ³΅μ‹λ¬Έμ„œλ₯Ό μ½μ–΄λ³΄μ‹œκΈΈ κΆŒν•΄λ“œλ¦½λ‹ˆλ‹€!

https://developer.apple.com/design/human-interface-guidelines/ios/bars/search-bars/

 

Search Bars - Bars - iOS - Human Interface Guidelines - Apple Developer

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 t

developer.apple.com

Search Bars 

검색 λ°”λŠ” μ‚¬λžŒλ“€μ΄ ν…μŠ€νŠΈλ₯Ό μž…λ ₯ν•˜μ—¬ μ—¬λŸ¬ 값듀을 검색할 수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€. 검색 λ°”λŠ” 화면에 ν™€λ‘œ μœ„μΉ˜ν•  μˆ˜λ„ 있고, λ‚΄λΉ„κ²Œμ΄μ…˜ λ°” λ‚΄λΆ€λ‚˜ 컨텐츠 뷰에 μœ„μΉ˜ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. λ‚΄λΉ„κ²Œμ΄μ…˜ λ°” 내뢀에 ν‘œμ‹œν•  λ•ŒλŠ” 검색 λ°”κ°€ κ³ μ •λ˜μ–΄ 항상 접근이 κ°€λŠ₯ν•˜λ„λ‘ ν•˜κ±°λ‚˜ μ‚¬μš©μžκ°€ μŠ€μ™€μ΄ν”„λ‘œ 내릴 λ•ŒκΉŒμ§€ μˆ¨κ²¨λ‘˜ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

  • 검색을 κ΅¬ν˜„ν•  λ•ŒλŠ” ν…μŠ€νŠΈ ν•„λ“œλ³΄λ‹€λŠ” 검색 λ°”λ₯Ό μ‚¬μš©ν•˜μ„Έμš”. 
    • ν…μŠ€νŠΈ ν•„λ“œλŠ” μ‚¬μš©μžλ“€μ΄ κΈ°λŒ€ν•˜λŠ” ν‘œμ€€μ˜ 검색바 λͺ¨μ–‘을 κ°€μ§€κ³  μžˆμ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  • 클리어 λ²„νŠΌμ„ ν™œμ„±ν™”ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. 
    • λŒ€λΆ€λΆ„μ˜ 검색 λ°”λŠ” ν•„λ“œμ— μž…λ ₯된 λ‚΄μš©μ„ λͺ¨λ‘ μ§€μš°λŠ” 클리어 λ²„νŠΌμ„ ν¬ν•¨ν•©λ‹ˆλ‹€.
  • 상황에 따라 μ·¨μ†Œ λ²„νŠΌμ„ ν™œμ„±ν™”ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. 
    • λŒ€λΆ€λΆ„μ˜ 쒋은 검색 바듀은 μ·¨μ†Œ λ²„νŠΌμ„ ν¬ν•¨ν•˜μ—¬ 검색을 μ¦‰μ‹œ 쀑단할 수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.
  • ν•„μš”ν•˜λ‹€λ©΄ 힌트 ν…μŠ€νŠΈμ™€ μ»¨ν…μŠ€νŠΈλ₯Ό μ œκ³΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
    • 검색 λ°”μ˜ ν•„λ“œλŠ” "Search Clothing, Shoes and Accessories" λ‚˜ κ°„λ‹¨ν•œ "Search" 같은 placeholderλ₯Ό 포함할 수 μžˆμŠ΅λ‹ˆλ‹€.
    • κ°„κ²°ν•˜κ³  μ μ ˆν•œ ꡬ두점을 ν¬ν•¨ν•˜λŠ” ν•œ μ€„μ§œλ¦¬ ν”„λ‘¬ν”„νŠΈκ°€ 검색 λ°” μœ„μ— μœ„μΉ˜ν•˜μ—¬ 검색에 λŒ€ν•œ κ°€μ΄λ“œλ₯Ό μ œκ³΅ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. Stock μ•±μ—μ„œλŠ” 이런 ν”„λ‘¬ν”„νŠΈλ₯Ό μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μžλ“€μ΄ νšŒμ‚¬μ˜ μ΄λ¦„μ΄λ‚˜ 주식 기호λ₯Ό μ‚¬μš©ν•˜μ—¬ 검색할 수 μžˆμŒμ„ μ•Œλ¦½λ‹ˆλ‹€.
  • 검색바 ν•˜λ‹¨μ— μœ μš©ν•œ λ°”λ‘œκ°€κΈ°λ‚˜ λ‹€λ₯Έ 컨텐츠듀을 μ œκ³΅ν•˜λ„λ‘ ν•˜λŠ” 것을 κ³ λ €ν•΄λ³΄μ„Έμš”.
    • 검색 λ°” ν•˜λ‹¨μ˜ μ˜μ—­μ„ μ΄μš©ν•˜μ—¬ μ‚¬μš©μžλ“€μ΄ 컨텐츠λ₯Ό 더 λΉ λ₯΄κ²Œ 얻을 수 μžˆλ„λ‘ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
    • 예λ₯Ό λ“€μ–΄, μ‚¬νŒŒλ¦¬μ—μ„œλŠ” 검색 ν•„λ“œμ— 탭을 함과 λ™μ‹œμ— λΆλ§ˆν¬λ“€μ„ λ³΄μ—¬μ€λ‹ˆλ‹€. 이 쀑 ν•˜λ‚˜λ₯Ό μ„ νƒν•˜λ©΄ 검색어λ₯Ό μž…λ ₯ν•˜μ§€ μ•Šκ³ λ„ κ³§λ°”λ‘œ μ›ν•˜λŠ” 곳에 μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€.
    • 주식 μ•± μ—­μ‹œλ„ 검색어λ₯Ό μž…λ ₯ν•  λ•Œλ§ˆλ‹€ κ²°κ³Ό 리슀트λ₯Ό 보여주어 더 이상 문자λ₯Ό μž…λ ₯ν•˜μ§€ μ•Šκ³ λ„ κ²°κ³Όλ₯Ό 선택할 수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.
    • 개발자 κ°€μ΄λ“œ: UISearchController / UISearchBar

Scope Bars

μŠ€μ½”ν”„ λ°”λŠ” 검색 바에 μΆ”κ°€λ˜μ–΄ μ‚¬μš©μžλ“€μ΄ κ²€μƒ‰μ˜ λ²”μœ„λ₯Ό μ„€μ •ν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.

 

  • μŠ€μ½”ν”„ λ°”λ₯Ό μ΄μš©ν•˜λŠ” 것보닀 검색 κ²°κ³Όλ₯Ό κ°œμ„ ν•˜λŠ” 것이 더 μ„ ν˜Έλ©λ‹ˆλ‹€.
    • μŠ€μ½”ν”„ λ°”λŠ” 검색 λŒ€μƒμ˜ μΉ΄ν…Œκ³ λ¦¬λ₯Ό μ •μ˜ν•  λ•Œ μœ μš©ν•˜κ²Œ μ‚¬μš©λ  수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ, 검색 κ²°κ³Όλ₯Ό κ°œμ„ ν•˜μ—¬ μŠ€μ½”ν”„ λ°”κ°€ ν•„μš” μ—†μ–΄μ§€λŠ” 것이 κ°€μž₯ μ’‹μŠ΅λ‹ˆλ‹€.