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

Navigation - App Architecture - iOS - Human Interface Guidelines - Apple Developer

Navigation People tend to be unaware of an app’s navigation until it doesn’t meet their expectations. Your job is to implement navigation in a way that supports the structure and purpose of your app without calling attention to itself. Navigation shoul

developer.apple.com

Navigation 

iOS ์—์„œ๋Š” ์ƒˆ ์ข…๋ฅ˜์˜ ๋‚ด๋น„๊ฒŒ์ด์…˜ ์Šคํƒ€์ผ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. 

Hierarchical Navigation

  • ๋ชฉ์ ์ง€ ํ™”๋ฉด๊นŒ์ง€ ๋„์ฐฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ•œ ํ™”๋ฉด ๋‹น ํ•˜๋‚˜์˜ ์„ ํƒ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋‹ค๋ฅธ ๋ชฉ์ ์ง€ ํ™”๋ฉด์œผ๋กœ ๊ฐ€๊ธฐ ์œ„ํ•ด์„œ๋Š” ์‹œ์ž‘์ ์—์„œ๋ถ€ํ„ฐ ๋‹ค๋ฅธ ์„ ํƒ์„ ํ†ตํ•ด ์ด๋™ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. 
  • ์„ค์ •๊ณผ ๋ฉ”์ผ ์•ฑ์ด ์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Flat Navigation

  • ์—ฌ๋Ÿฌ๊ฐœ์˜ ์นดํ…Œ๊ณ ๋ฆฌ์—์„œ ์ „ํ™˜์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. 
  • ์Œ์•…์ด๋‚˜ ์•ฑ์Šคํ† ์–ด๊ฐ€ ์ด๋Ÿฐ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

Content-Driven or Experience-Driven Navigation

  • ์ปจํ…์ธ ๊ฐ€ ์Šค์Šค๋กœ ๋‚ด๋น„๊ฒŒ์ด์…˜์ด ๋˜์–ด์„œ ์ปจํ…์ธ  ๊ฐ„์˜ ์ด๋™์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฒŒ์ž„, ์ฑ… ์•ฑ๊ณผ ๊ฐ™์ด ๋ชฐ์ž…๊ฐ์ด ์žˆ๋Š” ์•ฑ์ด ์ด๋Ÿฐ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋””์ž์ธ ๊ฐ€์ด๋“œ๋ผ์ธ

  • ํ•ญ์ƒ ๋ช…ํ™•ํ•œ ๊ฒฝ๋กœ๋ฅผ ์ œ๊ณตํ•˜์„ธ์š”.
    • ์‚ฌ์šฉ์ž๋“ค์€ ์ž์‹ ์ด ์–ด๋–ค ์œ„์น˜์— ์žˆ๋Š”์ง€ ์•Œ๊ณ ์žˆ์–ด์•ผ ํ•˜๊ณ , ์ž์‹ ์ด ๊ฐ€๊ณ ์ž ํ•˜๋Š” ํ™”๋ฉด๊นŒ์ง€ ์–ด๋–ป๊ฒŒ ๋„๋‹ฌํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์•Œ๊ณ ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.
  • ์ •๋ณด ๊ตฌ์กฐ๋ฅผ ๋น ๋ฅด๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์ปจํ…์ธ ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ํ•˜์„ธ์š”.
    • ์ตœ์†Œํ•œ์˜ ํƒญ๊ณผ ์Šค์™€์ดํ”„, ์Šคํฌ๋ฆฐ์„ ํ†ตํ•ด ์ปจํ…์ธ ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์„ธ์š”.
  • ํ„ฐ์น˜ ์ œ์Šค์ฒ˜๋กœ ์œ ์—ฐํ•จ์„ ๋งŒ๋“œ์„ธ์š”.
    • ์Šค์™€์ดํ”„๋ฅผ ํ†ตํ•ด ์ด์ „ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด ์ตœ์†Œํ•œ์˜ ๋™์ž‘์œผ๋กœ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.
  • ํ‘œ์ค€์˜ ๋‚ด๋น„๊ฒŒ์ด์…˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
    • ํƒญ ๋ฐ”, ์ฝœ๋ ‰์…˜, ํ…Œ์ด๋ธ”๊ณผ ๊ฐ™์€ ํ‘œ์ค€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. ์‚ฌ์šฉ์ž๋“ค์€ ํ‘œ์ค€ ์ปดํฌ๋„ŒํŠธ๋“ค์— ์ต์ˆ™ํ•ด์ ธ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง๊ด€์ ์ธ ์•ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฐ”๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ ๊ณ„์ธต์„ ์ด๋™ํ•˜๋„๋ก ํ•˜์„ธ์š”.
  • ํƒญ ๋ฐ”๋ฅผ ํ†ตํ•ด ์ปจํ…์ธ ๋‚˜ ๊ธฐ๋Šฅ์˜ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ํ‘œํ˜„ํ•˜์„ธ์š”.
    • ํƒญ ๋ฐ”๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ์œ„์น˜์— ์žˆ๋˜์ง€ ์‰ฝ๊ฒŒ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • iPad ์—์„œ๋Š” ํƒญ ๋ฐ”๋ณด๋‹ค๋Š” ์Šคํ”Œ๋ฆฟ ๋ทฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.
  • ๊ฐ™์€ ์ข…๋ฅ˜์˜ ์ปจํ…์ธ ์— ๋Œ€ํ•œ ํŽ˜์ด์ง€๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ ์žˆ๋‹ค๋ฉด page control๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.