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

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

Tab Bars A tab bar appears at the bottom of an app screen and lets people quickly switch among different sections of an app. Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a ke

developer.apple.com

Tab Bars

ํƒญ ๋ฐ”๋Š” ์•ฑ์˜ ํ•˜๋‹จ์— ์œ„์น˜ํ•˜๋ฉด์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์•ฑ ๋‚ด์˜ ์„น์…˜์„ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์˜์—ญ์ž…๋‹ˆ๋‹ค.

  • ์ผ๋ฐ˜์ ์œผ๋กœ ํƒญ ๋ฐ”๋Š” ์•ฑ์˜ ์ •๋ณด๋ฅผ ์ •๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋งŽ์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. 
    • ํƒญ ๋ฐ”๋Š” ์ •๋ณด์˜ ๊ณ„์ธต์„ ๋‹จ์ˆœํ™”ํ•˜๋Š”๋ฐ ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค.
    • ๋˜ํ•œ ๋น„์Šทํ•œ ์ข…๋ฅ˜์˜ ์ •๋ณด๋ฅผ ํ•œ ๋ฒˆ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค.
  • ํƒญ ๋ฐ”๋Š” ๋‚ด๋น„๊ฒŒ์ด์…˜์˜ ์šฉ๋„๋กœ๋งŒ ์‚ฌ์šฉํ•˜์„ธ์š”.
    • Control์ด๋‚˜ ํ–‰๋™์„ ์ •์˜ํ•˜๋Š” ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๊ฒฝ์šฐ์—๋Š” Toolbar๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
  • ์ ์ ˆํ•œ ๊ฐœ์ˆ˜์˜ ํƒญ์„ ์„ค์ •ํ•˜์„ธ์š”.
    • ๋„ˆ๋ฌด ๋งŽ์€ ํƒญ์€ ์•ฑ์„ ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ  ์‚ฌ์šฉ์ž๋“ค์ด ์ •๋ณด๋ฅผ ํŠน์ •ํ•˜๊ธฐ ์–ด๋ ต๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
    • ์ผ๋ฐ˜์ ์œผ๋กœ๋Š” 3~5๊ฐœ์˜ ํƒญ์ด iPhone์—์„œ ์‚ฌ์šฉ๋˜๊ณ  iPad์—์„œ๋Š” ์ข€ ๋” ๋งŽ์€ ๊ฐœ์ˆ˜์˜ ํƒญ์ด ํ—ˆ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • ํƒญ ๋ฐ”๋ฅผ ์ˆจ๊ธฐ์ง€ ๋งˆ์„ธ์š”.
    • ํƒญ ๋ฐ”๋Š” ์ „์—ญ์ ์ธ ๋‚ด๋น„๊ฒŒ์ด์…˜์„ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋””๋ฅผ ์‚ฌ์šฉํ•˜๋˜์ง€ ํ•ญ์ƒ ๋ณด์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    • ๋ชจ๋‹ฌ ๋ทฐ๋Š” ์•ฑ์˜ ๋‚ด๋น„๊ฒŒ์ด์…˜๊ณผ๋Š” ๋ณ„๊ฐœ์˜ ์˜์—ญ์ด๊ธฐ ๋•Œ๋ฌธ์— ์˜ˆ์™ธ์ ์œผ๋กœ ํƒญ ๋ฐ”๋ฅผ ์ˆจ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๊ธฐ๋Šฅ์˜ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋”๋ผ๋„ ํƒญ์„ ์ง€์šฐ๊ฑฐ๋‚˜ ๋น„ํ™œ์„ฑํ™”ํ•˜์ง€ ๋งˆ์„ธ์š”.
    • ๋ชจ๋“  ๊ฒฝ์šฐ์— ํƒญ์ด ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•˜๋„๋ก ํ•ด์•ผ ์•ฑ์˜ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์•ˆ์ •์ ์œผ๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ๋ชจ๋“  ํƒญ์€ ํ•ญ์ƒ ๋™์ž‘ํ•ด์•ผ ํ•˜๊ณ  ํƒญ์˜ ์ปจํ…์ธ ๊ฐ€ ์™œ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ์ง€ ์„ค๋ช…ํ•˜์„ธ์š”.
    • ์˜ˆ๋ฅผ ๋“ค์–ด Music ์•ฑ์—์„œ๋Š” iOS ๊ธฐ๊ธฐ์— ์Œ์•…์ด ์—†์„ ๋•Œ ์žฌ์ƒ ํƒญ์œผ๋กœ ์ด๋™ํ•˜๋ฉด ์Œ์•…์„ ๋‹ค์šด๋กœ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.
  • ์ปจํ…Œ์ŠคํŠธ๋ฅผ ๋ฐ”๊ฟ€ ๋•Œ๋Š” ์—ฐ๊ฒฐ๋œ ๋ทฐ ์•ˆ์—์„œ๋งŒ ๋ณ€๊ฒฝํ•˜์„ธ์š”
    • ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ํƒญ์„ ์„ ํƒํ–ˆ์„ ๋•Œ ํƒญ ๋ฐ”์™€ ์ง์ ‘์ ์œผ๋กœ ์—ฐ๊ฒฐ๋œ ๋ทฐ๋งŒ ์˜ํ–ฅ์„ ๋ฐ›์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.
    • ์˜ˆ๋ฅผ ๋“ค์–ด, popover์—์„œ ์„ ํƒํ•œ ํƒญ์€ popup ์•„๋ž˜์— ์œ„์น˜ํ•œ ๋ทฐ์—๋Š” ์–ด๋–ค ์˜ํ–ฅ๋„ ์ฃผ์–ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.
  • Badging์„ ์ด์šฉํ•ด์„œ ๋ˆˆ์— ๋„๊ฒŒ ํ•˜์„ธ์š”.
    • ์ˆซ์ž๋‚˜ ๋Š๋‚Œํ‘œ ๋“ฑ์„ ์‚ฌ์šฉํ•ด์„œ ํƒญ์— ์ƒˆ๋กœ์šด ์ •๋ณด๊ฐ€ ์žˆ์Œ์„ ์•Œ๋ฆฌ์„ธ์š”.

 

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

[HIG] Views - Action Sheets  (0) 2021.08.21
[HIG] Bars - Toolbars  (0) 2021.08.21
[HIG] Bars - Status Bars  (0) 2021.08.21
[HIG] Bars - Search Bars  (0) 2021.08.21
[HIG] Bars - Navigation Bars  (0) 2021.08.21