Human Interface Guidelines์ ๋ํ ํด์๊ณผ ์ฃผ๊ด์ ์ธ ์ฌ๋ก ๋ถ์์ ์ถ๊ฐํ ๊ธ์ ๋๋ค.
Navigation Bar๊ฐ ๋ญ๋ฐ โ
Navigation Bars - Bars - iOS - Human Interface Guidelines - Apple Developer
Navigation Bars A navigation bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical screens. When a new screen is displayed, a back button, often labeled with the title of the previous screen,
developer.apple.com
๋ค๋น๊ฒ์ด์ ๋ฐ๋ ์คํฌ๋ฆฐ์ ๊ฐ์ฅ ์, status bar์ ์๋์ ์์นํ๋ฉฐ
๊ณ์ธต์ ์ธ ํ๋ฉด์ ํ์ ํ ์ ์๊ฒ ํ๋ ์์์ ๋๋ค.
์๋ก์ด ํ๋ฉด์ด ๋ํ๋ฌ์ ๋๋ back button๊ณผ ์ข ์ข ์ด์ ํ๋ฉด์ ์ ๋ชฉ์ด ์ผ์ชฝ์ ๋ํ๋๊ณ ,
์ค๋ฅธ์ชฝ์๋ ์์ ์ด๋ ์ข ๋ฃ ๋ฒํผ ๊ฐ์ ํด๋น ๋ทฐ์์ ์ปจํ ์ธ ๋ฅผ control ํ ์ ์๋ ๊ฒ์ด ์ค๊ฒ๋ฉ๋๋ค.
์์ดํด๋ผ์ฐ๋๋ฅผ ์์๋ก ๋ณด๋ฉด,
์ผ์ชฝ์๋ back button๊ณผ ํจ๊ป ์ด์ ๋ทฐ์ ์ ๋ชฉ์ด ๋ํ๋๊ณ ,
์ค๋ฅธ์ชฝ์๋ ๋๋ณด๊ธฐ์ ๊ฐ์ ๋ฒํผ์ด ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ฑ์ ์ฌ์ฉํ๋ค๋ณด๋ฉด ์คํฌ๋กค์ ๋ด๋ ธ์ ๋ ๋ค๋น๋ฐ๊ฐ ์ค์์ฉ ์ฌ๋ผ์ง๊ฑฐ๋ ์ค์ด๋๋ ๊ฒฝ์ฐ๊ฐ ์๋๋ฐ, ์ด๋ฐ ๊ฒ๋ค์ ์๋์์ ์ฐฌ์ฐฌํ ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค
Navigation Bar Title
1. ์ ๋ชฉ์ ์ฌ์ฉ์์๊ฒ ํ์ฌ ๋ณด๊ณ ์๋ ๋ทฐ๋ฅผ ์ดํดํ ์ ์๋๋ก ๋์์ฃผ์ง๋ง, ๋ถํ์ํ ๊ฒฝ์ฐ๋ ์ ๋ชฉ์ ๋น์๋ ์ ์๋ค
๋ฉ๋ชจ๐
๋ฉ๋ชจ์ฑ์ ๊ฒฝ์ฐ ๋ฉ๋ชจ ์์ฑ์ผ๋ก ๋ค์ด๊ฐ์ ๋,
๋ค๋น๊ฒ์ด์ ๋ฐ ํ์ดํ์ ์๊ณ ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ๊ณผ ์ด์ ๋ทฐ์ ์ด๋ฆ, ๋๋ณด๊ธฐ์ ์๋ฃ ๋ฒํผ์ด ์กด์ฌํฉ๋๋ค.
๋ฉ๋ชจ์ฑ์์ ๋ฉ๋ชจ ์์ฑ๊ณผ ๊ฐ์ ๊ฒฝ์ฐ๋ ํ์ดํ์ด ์๊ธฐ ๋๋ฌธ์ ์๋ต๋ ๊ฒ ์ ๋๋ค.
์ฑ์คํ ์ด๐
์ฑ์คํ ์ด๋ ๋ค๋น๊ฒ์ด์ ๋ฐ ํ์ดํ์ด ์์ต๋๋ค!
์ฑ์ ๋ํ ์์ธ ์ ๋ณด๋ฅผ ๋ณด์ฌ์ฃผ๋ ๋ทฐ๋ก, ์ฑ์ ์ด๋ฆ์ด ํ์ดํ๊ณผ ๋ง์ฐฌ๊ฐ์ง์ ์ญํ ์ ํ๋๋ฐ์ฑ์คํ ์ด ๋ค๋น๋ฐ ํ์ดํ์ ๋ค์์ ๋ณด๊ฒ ์ต๋๋ค์
์ฑ์์ด์ฝ ์์ ํฌ๊ฒ ์ด๋ฆ์ด ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ค๋น๋ฐ ํ์ดํ์ด ๋ณ๋๋ก ๋ถํ์ํ ๊ฒฝ์ฐ์ ์ํ๋ ๊ฒ ๊ฐ์ต๋๋ค..
2. ๊ฐ์กฐ๋ฅผ ์ํด ํฐ ์ ๋ชฉ ์ฌ์ฉํ๋ค
ํ์ดํ์ด ๋๋ฌด ์ปค์ ์ฝํ ์ธ ์ ์์ ์ด ๊ฐ์ง ์๋ ๊ฒฝ์ฐ๋ ์๋์ง๋ง,
์ผ๋ถ ์ฑ์์๋ ํฐ ์ ๋ชฉ์ด ์ฌ์ฉ์๊ฐ ํ์ํ๊ณ ๊ฒ์ํ ๋ ๋์์ ์ค ์ ์๋ค๊ณ ํฉ๋๋ค..
ํฐ ์ ๋ชฉ์ ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ๊ธฐ ์์ํ๋ฉด ํ์ค ์ ๋ชฉ์ผ๋ก ์ ํ๋ฉ๋๋ค.
3. ํฐ ์ ๋ชฉ์ผ ๋๋ ๋ค๋น๊ฒ์ด์ ๋ฐ์ ํ ๋๋ฆฌ๋ฅผ ์์ ๊ณ ํ์ค ์ ๋ชฉ์ผ ๋๋ ๋ณด์ด๊ธฐ
ํ ๋๋ฆฌ๊ฐ ์๋ ์คํ์ผ์ ์ ๋ชฉ๊ณผ ๋ด์ฉ์ ์ฐ๊ฒฐ์ ์์ฐ์ค๋ฝ๊ฒ ํ๊ธฐ ๋๋ฌธ์ ํฐ ์ ๋ชฉ์ ํ์๋ฐ์์ ์ ์๋ํฉ๋๋ค.
ํ์ง๋ง ํ์ค ์ ๋ชฉ ๋ค๋น๋ฐ์์๋ ํ ๋๋ฆฌ๊ฐ ์์ผ๋ฉด ๋ง๋์ ์ ๋ชฉ๊ณผ ์ปจํ ์ธ ๋ฅผ ๊ตฌ๋ถํ๊ธฐ ์ด๋ ค์ธ ์ ์์ด์ ํ์ํด์ฃผ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๋ฉ์ผโ๏ธ
๋ฉ์ผ ์ฑ์ ๋ณด๋ฉด ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ๊ณผ ํจ๊ป ๋ฉ์ผ์์๋ผ๋ ์ด์ ๋ทฐ์ ํ์ดํ์ด ๋์ค๊ณ , ์ค๋ฅธ์ชฝ์๋ ํธ์ง์ด๋ผ๋ control ๋ฒํผ์ด ๋์ต๋๋ค.
์์์ ์ฅ์ด๋ผ๋ ํ์ดํ์ ๊ฐ์กฐํ๊ธฐ ์ํด ํฌ๊ฒ ๋ํ๋์๊ณ ,
์คํฌ๋กค์ ํ์ ๋ ํ์ค ํฌ๊ธฐ๋ก ์ค์ด๋ค์ด ๋ค๋น๊ฒ์ด์ ๋ฐ์ ๋ค์ด๊ฐ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค!
๊ทธ๋ฆฌ๊ณ ! ํฐ ์ ๋ชฉ์์ ํ์ค ํฌ๊ธฐ ์ ๋ชฉ์ผ๋ก ์ค์ด๋ค ๋,์๋ ์ปจํ ์ธ ์ ๊ตฌ๋ถ์ง๊ธฐ ์ํ ํ ๋๋ฆฌ๊ฐ ๋ํ๋๊ฒ ๋ฉ๋๋ค
๊ฑด๊ฐโค๏ธ๐ฉน
๊ธฐ๋ณธ ๊ฑด๊ฐ์ฑ์ ๋ณด๋ฉด ์์ฝ์ด๋ผ๋ ํ์ดํ์ ๊ฐ์กฐํ๊ธฐ ์ํด ํฌ๊ฒ ์ ์ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค
๊ทธ๋ฆฌ๊ณ ์ด ํ๋ฉด์ ์คํฌ๋กคํ ๋ ํ์ดํ์ด ํ์ค ์ ๋ชฉ ํฌ๊ธฐ๋ก ์ค์ด๋ญ๋๋ค!
์ฌ๊ธฐ์๋ ๋ง์ฐฌ๊ฐ์ง๋ก ์คํฌ๋กคํด์ ํ์ค ํฌ๊ธฐ์ ์ ๋ชฉ์ผ๋ก ๋ํ๋ผ ๋ ํ ๋๋ฆฌ๋ ๋ํ๋์ ์ปจํ ์ธ ์ ๋ค๋น๊ฒ์ด์ ๋ฐ๋ฅผ ๊ตฌ๋ถํด์ฃผ๊ณ ์์ต๋๋ค.
4. ๋ค๋น๊ฒ์ด์ ๋ฐ ํ์ดํ์ ๊ฐ์ด๋ฐ ๋ฐฐ์นํ๋ ๊ฒ ๊ถ์ฅ
๋ค๋น๊ฒ์ด์ ๋ฐ๋ฅผ ์ฌ์ฉํ ๋, back button ๊ณผ ํจ๊ป ์ด์ ๋ทฐ์ ์ ๋ชฉ์ด ๋์์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค..
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋ค๋น๊ฒ์ด์ ๋ฐ์ ํ์ดํ์ด ์ผ์ชฝ์ ์์นํ ๊ฒฝ์ฐ, ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ๊ณผ์ ๊ฒฝ๊ณ๊ฐ ์ ๋งคํ ์ ์๊ธฐ ๋๋ฌธ์ ๊ฐ์ด๋ฐ์ ์์นํ๋ ๊ฒ์ด ์ ํฉํ๋ต๋๋ค.
ํน์ ๋ค๋น๊ฒ์ด์ ๋ฐ ํ์ดํ์ ์ผ์ชฝ์ ๋ฐฐ์นํ๊ณ ์ถ์ ๊ฒฝ์ฐ๋ ์ด์ ๋ทฐ์ ์ ๋ชฉ ์์ด ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ๋ง ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
CGV๐ฟ
CGV๋ ์ด์ ํ๋ฉด์ ํ์ดํ์ ๋น๊ต์ ์ค์ํ์ง ์์๋ ๊ฒ ๊ฐ์ต๋๋ค.
๊ทธ๋์ ๊น๋ํ๊ฒ ์ด์ ํ์ดํ์ ์์ ๊ณ , ์ํ ์์ธ ๋ทฐ์ ์ ๋ชฉ์ด๋ผ๊ณ ํ ์ ์๋ ์ํ์ ๋ชฉ๋ง์ ๊ฐ์ด๋ฐ๊ฐ ์๋ ์ผ์ชฝ์ ๋ฐฐ์นํด๋์ต๋๋ค.
Navigation Bar Controls
1. ๋ค๋น๊ฒ์ด์ ๋ฐ ์์ ๋๋ฌด ๋ง์ control์ ํผํ๊ธฐ
์ผ๋ฐ์ ์ผ๋ก ๋ค๋น๊ฒ์ด์ ๋ฐ ์์๋ ๋ทฐ์ ํ์ฌ ์ ๋ชฉ, ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ, ์ด ์ธ์ control ํ๋๊ฐ ํฌํจ๋๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
ํ์ง๋ง ๋ง์ ๊ฒ์ ๋ฃ๊ณ ์ถ๋ค๋ฉด ์ด์ฉ ์ ์๊ฒ ์ฃ .. ์ ์ฌ์ด์ข๊ฒ ๋ฐฐ์นํ๋ ๊ฒ๋..
์๋ฐ๋ชฌ๐จ๐ณ
์๋ฐ๋ชฌ์์๋ ์ค๋ฅธ์ชฝ์ ์ด 3๊ฐ์ control ๋ฒํผ์ ์ ๊ณตํฉ๋๋ค. (์บก์ณ / ์ฆ๊ฒจ์ฐพ๊ธฐ / ๊ณต์ )
์ฌ์ค ์๋ฐ๋ชฌ์ ์ฌ์ฉํ๋ฉด์ ์์ 3๊ฐ ๋ฒํผ์ ์ ๋ถ ๋ค ์ฌ์ฉํด๋ณธ ์ ์.. ์ ๋ ์์ต๋๋ค...
ํญ์ ๊ทธ๋ฅ ์บก์ณ๋ฅผ ํด์์ด์ ์บก์ณ ๋ฒํผ์ ๋ฐฉ๊ธ ์ฒ์ ์ฌ์ฉํด๋ดค๋๋ฐ, ์ ์ฒด ํ๋ฉด์ด ์ ์ฅ๋๋๋ผ๊ตฌ์!
๋ ๊ณต์ ๋ฒํผ์ ํญํ์ ๋ Activity Views์ ํํ๋ก ์ฌ๋ผ์ต๋๋ค!
์ด๋ฐ ํํ๋ก ์ฌ๋ผ์ฌ๊ฑฐ๋ฉด ๋๋ณด๊ธฐ๊ฐ์ ๋ฒํผ ํ๋๋ก ์บก์ณ์ ๊ณต์ ๋ฒํผ์ ํฉ์น ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๊ฒ์ด
์ฌ์ฉ์๊ฐ ๋ณด๊ธฐ์ ๊น๋ํ๊ฒ ํ๋์ ๋ณด์ด์ง ์์๊น ํ๋ ์๊ฐ๋ ๋ค์์ต๋๋ค.
2. ๋ค๋ก๊ฐ๊ธฐ ํ์ค ๋ฒํผ ์ฌ์ฉ ๊ถ์ฅ
์ฌ์ฉ์๋ค์ ํ์ค ๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ํตํด ์์ ์ด ๋ค์ด์จ ๋ทฐ๋ฅผ ๋๋์๊ฐ๋ณผ ์ ์๋ค๋ ๊ฒ์ ์๊ณ ์์ต๋๋ค.
๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ์ customํ๋ ๊ฒฝ์ฐ, ์ฑ ์ ์ฒด์์ ์ผ๊ด๋๊ฒ ํ์ค๊ณผ ๋น์ทํ๊ฒ ๊ตฌ์ฑํด์ผ ํฉ๋๋ค.
๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ ๋ชจ์์ ๐
Back Button ๋ค๋ค ์ ๋ง ๋น์ทํ๊ฒ ์๊ฒผ์ ธ
3. ์ฌ๋ฌ ๊ณ์ธต์ ์ด๋ํ๋ ๊ฒฝ๋ก X
๋ค๋น๊ฒ์ด์ ๋ฐ์ back button์ ํญ์ ์ด์ ํ๋ฉด์ผ๋ก ๋์๊ฐ๋ ๋จ์ผ ์์ ๋ง์ ์ํํฉ๋๋ค.
4. ํ ์คํธ ์ ๋ชฉ์ผ๋ก ๋ ๋ฒํผ์ ์ถฉ๋ถํ ๊ณต๊ฐ ์ ๊ณต
๋ค๋น๊ฒ์ด์ ๋ฐ์ ์ฌ๋ฌ ๊ฐ์ ํ ์คํธ ๋ฒํผ์ด ์๋ ๊ฒฝ์ฐ, ๊ตฌ๋ถํ๊ธฐ ์ด๋ ค์ธ ์ ์๊ธฐ ๋๋ฌธ์
๊ทธ ์ฌ์ด์ ๊ณ ์ ๊ณต๋ฐฑ์ ๋ฃ์ด์ ๋ถ๋ฆฌํฉ์๋ค.
์ผ์ชฝ์ ๊ฒฝ์ฐ๋ ๋๋ฌด ๊ฐ๊น์ ธ
์ ๋ ๊ฒ ๋๋ฒ๋ฆฌ๋ฉด EditDelete ํ๋์ธ์ง Edit์ด๋ Delete ๊ฐ๊ฐ์ธ์ง ํท๊ฐ๋ฆฌ๋ ์ง๊ฒฝ์ด ๋ ์ ์์ต๋๋ค
๋ ํฐ์น์์ญ๋ ์ ๋งคํด์ง๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์๊ฐ ์ ํํ๊ฒ ๋ณธ์ธ์ด ์ํ๋ ์ก์ ์ ํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
5. Segmented control๋ก ๊ณ์ธต์ ๋จ์ํ๊ฒ
๋ค๋น๊ฒ์ด์ ๋ฐ์์ segmented control์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ๊ณ์ธต์ ์ต์์ ์์ค์์๋ง ์ปจํธ๋กค์ ์ฌ์ฉํด์ผ ํฉ๋๋ค!
ํ์ ์์ค์์๋ ์ ์ ํ ๋ค๋ก๊ฐ๊ธฐ ์ ๋ชฉ์ ์ ํํด์ผ ํฉ๋๋ค.
๊ฐ์ฅ ์ต์์ ๊ณ์ธต์ธ ํํ๋ฉด์ ์์นํ Segment Control ์ ๋๋ค
ToolBar vs Tab Bar vs Navigation Bar
ํท๊ฐ๋ ค์ ์ด์ง์ฟต ์ฐพ์๋ดค์ด๋ค
ToolBar
์ฑ ํ๋ฉด ํ๋จ์ ํ์(์๋จ๋ ๊ฐํน...)
ํ์ฌ ๋ทฐ ๋๋ ํด๋น ๋ด์ฉ๊ณผ ๊ด๋ จ๋ ์์ ์ ์ํํ๊ธฐ ์ํ ๋ฒํผ ํฌํจ
Tab Bar
์ฑ ํ๋ฉด ํ๋จ์ ํ์์ฑ์ ์ฌ๋ฌ ์น์ ์ ์ฝ์ฅ ์ ํ
๊ฐ์ ๊ณ์ธต์ ๋ทฐ๋ค๋ก ๊ตฌ์ฑ
Navigation Bar
status ์๋,๊ณ์ธต์ ํ๋ฉด ์ ๋ณด ์ ๊ณต
์ฑ ํ๋ฉด ์๋จ์ ์์น
'UIUX' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HIG] Web views๐ (0) | 2022.11.04 |
---|---|
[HIG] Modality ๐ถโ๐ซ๏ธ (0) | 2022.08.01 |
[HIG] Loading ๐ (0) | 2022.05.23 |
[HIG] Onboarding ๐ซ (0) | 2022.05.20 |
[HIG] ๐ง Tab Bars (0) | 2022.04.29 |