[HIG] iOS - Themes
๐ก ๊ฐ์ธ์ ์ธ ๊ณต๋ถ๋ฅผ ๋ชฉ์ ์ผ๋ก ๋ฒ์ญํ์ฌ ๊ฐ๋ตํ๊ฒ ์ ๋ฆฌ๋ง ํ ๊ธ์ ๋๋ค. ์ ๋ฌธ์ ํฌํจํ๊ณ ์์ง ์์ผ๋ ์์ธํ ๋ด์ฉ์ ๊ณต์๋ฌธ์๋ฅผ ์ฝ์ด๋ณด์๊ธธ ๊ถํด๋๋ฆฝ๋๋ค!
Themes - iOS - Human Interface Guidelines - Apple Developer
Themes - iOS - Human Interface Guidelines - Apple Developer
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differenti
developer.apple.com
iOS Design Themes
์ ํ๋ฆฌ์ผ์ด์ ๋์์ด๋๋ก์, ์ฑ์คํ ์ด ์์๊ถ์ ๋ฑ๋ก๋๋ ๋๋ผ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ ๊ธฐํ๊ฐ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฅผ ์ํด์๋ ๋์ ํ๋ฆฌํฐ์ ๊ธฐ๋ฅ์ฑ์ ๋ง์กฑ์์ผ์ผ ํฉ๋๋ค.
iOS ์๋ ๋ค๋ฅธ ํ๋ซํผ๋ค๊ณผ ์ฐจ๋ณ์ฑ์ ๋ง๋๋ ์ธ ๊ฐ์ง ์ฃผ์ํ Theme ์ด ์์ต๋๋ค.
- Clarity : ์ ์์คํ ์ ๊ฑธ์ณ์ ํ ์คํธ๋ ์ฝ๊ธฐ ์ฌ์์ผ ํ๊ณ , ์์ด์ฝ์ ์ ๋ฐํ๊ณ ๋ช ๋ฃํด์ผํ๋ฉฐ, ์ฅ์(adorment)์ ์ ์ ํด์ผํ๊ณ , ๊ธฐ๋ฅ์ ์ง์คํ๋ ๊ฒ์ ๋์์ธ์ ๋๊ธฐ๋ฅผ ๋ถ์ฌํฉ๋๋ค. ๋ค๊ฑฐํฐ๋ธ ์คํ์ด์ค, ์์, ํฐํธ, ๊ทธ๋ํฝ๊ณผ ์ธํฐํ์ด์ค ์์๋ ์ ๋ฌํ๊ฒ ์ค์ํ ์ปจํ ์ธ ๋ค์ ๊ฐ์กฐํ๊ณ ์ํธ์์ฉ์ ์ ๋ฌํฉ๋๋ค.
- Deference : ๋ถ๋๋ฌ์ด ์์ง์๊ณผ ์๋ฆ๋ค์ด ์ธํฐํ์ด์ค๋ ์ฌ๋๋ค์ด ํฐ ์ด๋ ค์ ์์ด ์ปจํ ์ธ ๋ฅผ ์ดํดํ๊ณ ์ํธ์์ฉํ ์ ์๋๋ก ํฉ๋๋ค. ์ปจํ ์ธ ๋ ์ผ๋ฐ์ ์ผ๋ก ํ๋ฉด์ ๊ฐ๋ ์ฑ์ฐ์ง๋ง ํฌ๋ช ๋๋ ๋ธ๋ฌ๋ฅผ ํตํด ๋ ๋ง์ ์ปจํ ์ธ ๊ฐ ์์์ ์์ํฉ๋๋ค. ๋ฐฐ์ ค, ๊ทธ๋ผ๋์ธํธ, ๊ทธ๋ฆผ์๋ ์ธํฐํ์ด์ค๋ฅผ ๊ฐ๋ณ๊ฒ ํ๋ฉด์ ์ปจํ ์ธ ๋ฅผ ๊ฐ์ฅ ์ค์ํ๊ฒ ํฉ๋๋ค.
- Depth : ๋๋๋ฌ์ง๊ฒ ๊ตฌ๋ถ๋๋ ์๊ฐ์ ์ธ ๋ ์ด์ด์ ํ์ค๊ฐ์ด ์๋ ๋ชจ์ ์ ๊ณ์ธต์ ์ ๋ฌํ๊ณ , ํ๊ธฐ๋ฅผ ๋ถ์ด๋ฃ์ผ๋ฉฐ ์ดํด๋ฅผ ๋์ต๋๋ค. ํฐ์น์ ๋ฐ๊ฒฌ๊ฐ๋ฅ์ฑ(Discoverability)์ ๋งฅ๋ฝ์ ์์ง ์๊ณ ๊ธฐ๋ฅ๊ณผ ์ถ๊ฐ์ ์ธ ์ปจํ ์ธ ์ ์ ๊ทผํ ์ ์๋๋ก ํฉ๋๋ค.
Design Principles
์ ํ๋ฆฌ์ผ์ด์ ์ ์ํฅ๋ ฅ์ ๊ทน๋ํํ๊ธฐ ์ํด์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ฒด์ฑ์ ๋ํด ์๋ ์์น๋ค์ ๊ธฐ์ตํด์ผํฉ๋๋ค.
Aesthetic Integrity
๋ฏธ์ ๋ฌด๊ฒฐ์ฑ(Aesthetic integrity)์ ์ฑ์ ๋ชจ์ต๊ณผ ๋์์ด ์ฑ์ ๊ธฐ๋ฅ๊ณผ ์ผ๋ง๋ ์ ํตํฉ๋์ด ์๋์ง๋ฅผ ๋ํ๋ ๋๋ค. ์๋ฅผ ๋ค์ด, ์ค์ํ ์ผ์ ๋๋ ์ฑ์ ์ฌ์ฉ์๊ฐ ์ง์คํ ์ ์๋๋ก ๋์ ๊ฑฐ์ฌ๋ฆฌ์ง ์๋ ๊ทธ๋ํฝ๊ณผ ๊ธฐ๋ณธ์ ์ธ ์กฐ์, ์์ธก ๊ฐ๋ฅํ ๋์์ ์ ๊ณตํด์ผํฉ๋๋ค. ๋ฐ๋๋ก, ๊ฒ์๊ณผ ๊ฐ์ ๋ชฐ์ ๊ฐ์ด ์ค์ํ ์ฑ์ ์ฆ๊ฑฐ์๊ณผ ํฅ๋ฏธ๋ก์์ ์ ๋ฌํ ์ ์๋ ๋ง์์ ์ฌ๋ก์ก๋ ๋ชจ์ต์ ์ ๊ณตํด์ผํฉ๋๋ค.
Consistency
์ผ๊ด์ฑ ์๋ ์ฑ์ ์์คํ ์์ ์ ๊ณตํ๋ ์ธํฐํ์ด์ค ์์, ์๋ ค์ง ์์ด์ฝ, ํ์ค์ ํ ์คํธ ์คํ์ผ๊ณผ ์ผ๊ด์ฑ์๋ ์ฉ์ด์ ์ฌ์ฉ์ ํตํด ์ต์ํ ํ์ค๊ณผ ํจ๋ฌ๋ค์์ ๊ตฌํํฉ๋๋ค. ์ด๋ฐ ์ฑ์ ๊ธฐ๋ฅ๋ค๊ณผ ๋์๋ค์ ์ฌ์ฉ์๋ค์ด ๊ธฐ๋ํ๋ ๋ฐฉํฅ์ผ๋ก ํตํฉ์ํต๋๋ค.
Direct Manipulation
์ปจํ ์ธ ์ ํ๋ฉด์ ์ง์ ์ ์ผ๋ก ์กฐ์ํ๋ ๊ฒ์ ์ฌ์ฉ์๋ค์ด ์ฌ๋๋ค์ ์ด๋ชฉ์ ๋๊ณ ์ดํด๋ฅผ ๋์ต๋๋ค. ์ฌ์ฉ์๋ค์ ์ง์ ์ ์ธ ์กฐ์์ ํ๋ฉด์ ํ์ ์ํค๊ฑฐ๋ ์คํฌ๋ฆฐ์ ์ปจํ ์ธ ์ ์ ์ค์ณ๋ฅผ ํํ์ ๋ ๊ฒฝํํฉ๋๋ค. ์ด๋ฌํ ์ง์ ์ ์ธ ์กฐ์์ ํตํด์ ์ฌ์ฉ์๋ค์ ์์ ์ ํ๋์ ๋ํ ์ฆ๊ฐ์ ์ด๊ณ ์๊ฐ์ ์ธ ๊ฒฐ๊ณผ๋ฅผ ๋ณผ ์ ์๊ฒ๋ฉ๋๋ค.
Feedback
ํผ๋๋ฐฑ์ ์ฌ์ฉ์๋ค์๊ฒ ์ง์์ ์ผ๋ก ์ ๋ณด๋ฅผ ์ ๋ฌํ๊ธฐ ์ํด ์ด๋ค ํ๋์ ๋ํ ์ธ์ง๋ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ค๋๋ค. iOS์ ๋ด์ฅ ์ฑ๋ค์ ์ฌ์ฉ์๋ค์ ๋ชจ๋ ํ๋์ ๋ํด ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค. ์ํธ์์ฉ ์์๋ค์ ํญ์ด ๋์์ ๋ ๋ก๋ฉ ํ๋ฉด(progress indicator), ์ ๋๋ฉ์ด์ ๊ณผ ์ฌ์ด๋ ํจ๊ณผ๋ฅผ ํตํด ์ด๋ค ํ๋์ ๋ํ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์กฐํฉ๋๋ค.
Metaphors
์ฌ๋๋ค์ ์์ ์๊ฒ ์ต์ํ ๊ฒฝํ๊ณผ ์ ์ฌํ ๊ฒฝํ์ ์ฑ์ ๊ฐ์ํ๊ฒฝ์์ ๋ง๋ฌ์ ๋ ๋ ๋น ๋ฅด๊ฒ ํ์ตํฉ๋๋ค. Metaphors๋ ์ฌ์ฉ์๋ค์ด ํ๋ฉด๊ณผ ๋ฌผ๋ฆฌ์ ์ผ๋ก ์ํธ์์ฉํ๊ธฐ ๋๋ฌธ์ ๋ ํฐ ํจ๊ณผ๋ฅผ ๋ฐํํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ๋ ์๋์ ์๋ ๋ด์ฉ์ ๋ณด๊ธฐ์ํด ๋ทฐ๋ฅผ ์น์๋๋ค. ์ฌ์ฉ์๋ค์ ์ปจํ ์ธ ๋ฅผ ๋๋๊ทธํ๊ฑฐ๋ ์ค์์ดํ ํ๊ธฐ๋ ํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ๋ ์ค์์น๋ฅผ ํ ํดํ๊ฑฐ๋ ์ฌ๋ผ์ด๋๋ฅผ ์์ง์ด๊ณ , ํฝ์ปค์ ๊ฐ๋ค์ ์คํฌ๋กค ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฑ ์ด๋ ์ก์ง์ ํ์ด์ง๋ฅผ ๋๊ธฐ๊ธฐ๋ ํฉ๋๋ค.
User Control
์ฑ์ด ์๋ ์ฌ์ฉ์๋ค์ด iOS์ ์ ์ฒด์ ์ธ ๋ถ๋ถ๋ค์ ํต์ ํฉ๋๋ค. ์ฑ์ ๋์์ ์ ์ํ๊ฑฐ๋ ์ํํ ๊ฒฐ๊ณผ์ ๋ํด ๊ฒฝ๊ณ ๋ฅผ ๋ณด์ฌ์ค ์ ์์ง๋ง ๋๋ถ๋ถ์ ๊ฒฝ์ฐ๋ ์ฑ์๊ฒ ์์ฌ๊ฒฐ์ ์ ๋งก๊ธฐ๋ ์ค์์ ๋๋ค. ์ต๊ณ ์ ์ฑ์ ์๋์น ์์ ๊ฒฐ๊ณผ๋ฅผ ํผํ๋ ๊ฒ๊ณผ ์ฌ์ฉ์์๊ฒ ์์ฌ๊ฒฐ์ ์ ๋งก๊ธฐ๋ ๊ฒ์ ์ ์ ํ ๊ท ํ์ ์ฐพ์ต๋๋ค. ์ฑ์ ์ฌ์ฉ์๋ค์ด ์ฑ์ ํต์ ํ๊ณ ์๋ค๊ณ ๋๋ผ๋๋ก ์์ธก๊ฐ๋ฅํ๊ณ ์์์์ฉํ๋ ์ธํฐํ์ด์ค ์์๋ฅผ ์ฌ์ฉํ๊ณ ์์ข์ ์ํฅ์ ๋ผ์น๋ ํ๋์ ํ์ธํ๊ณ , ์์ ์ด ์งํ์ค์ด๋ผ๊ณ ํ๋๋ผ๊ณ ๊ทธ๊ฒ์ ์ทจ์ํ ์ ์๋๋ก ํด์ผํฉ๋๋ค.
'๐ ์์ด-์ค-์์ค > ๐บ ํ-๊ทธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HIG] Bars - Tab Bars (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 |
[HIG] iOS - Interface Essentials (0) | 2021.08.21 |
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote