๊ธ€ ์ž‘์„ฑ์ž: ๊ฐœ๋ฐœํ•˜๋Š” ํ›ˆ์ด
๐Ÿ’ก ๊ฐœ์ธ์ ์ธ ๊ณต๋ถ€๋ฅผ ๋ชฉ์ ์œผ๋กœ ๋ฒˆ์—ญํ•˜์—ฌ ๊ฐ„๋žตํ•˜๊ฒŒ ์ •๋ฆฌ๋งŒ ํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ์ „๋ฌธ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์ง€ ์•Š์œผ๋‹ˆ ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฝ์–ด๋ณด์‹œ๊ธธ ๊ถŒํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค!

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

์Šค์ฝ”ํ”„ ๋ฐ”๋Š” ๊ฒ€์ƒ‰ ๋ฐ”์— ์ถ”๊ฐ€๋˜์–ด ์‚ฌ์šฉ์ž๋“ค์ด ๊ฒ€์ƒ‰์˜ ๋ฒ”์œ„๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

 

  • ์Šค์ฝ”ํ”„ ๋ฐ”๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ๊ฐœ์„ ํ•˜๋Š” ๊ฒƒ์ด ๋” ์„ ํ˜ธ๋ฉ๋‹ˆ๋‹ค.
    • ์Šค์ฝ”ํ”„ ๋ฐ”๋Š” ๊ฒ€์ƒ‰ ๋Œ€์ƒ์˜ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ์ •์˜ํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ๊ฐœ์„ ํ•˜์—ฌ ์Šค์ฝ”ํ”„ ๋ฐ”๊ฐ€ ํ•„์š” ์—†์–ด์ง€๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์Šต๋‹ˆ๋‹ค.

'๐ŸŽ ์•„์ด-์˜ค-์—์Šค > ๐Ÿ“บ ํžˆ-๊ทธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HIG] Bars - Tab Bars  (0) 2021.08.21
[HIG] Bars - Status Bars  (0) 2021.08.21
[HIG] Bars - Navigation Bars  (0) 2021.08.21
[HIG] iOS - Interface Essentials  (0) 2021.08.21
[HIG] iOS - Themes  (0) 2021.08.21