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

 

  1. Clarity : ์ „ ์‹œ์Šคํ…œ์— ๊ฑธ์ณ์„œ ํ…์ŠคํŠธ๋Š” ์ฝ๊ธฐ ์‰ฌ์›Œ์•ผ ํ•˜๊ณ , ์•„์ด์ฝ˜์€ ์ •๋ฐ€ํ•˜๊ณ  ๋ช…๋ฃŒํ•ด์•ผํ•˜๋ฉฐ, ์žฅ์‹(adorment)์€ ์ ์ ˆํ•ด์•ผํ•˜๊ณ , ๊ธฐ๋Šฅ์— ์ง‘์ค‘ํ•˜๋Š” ๊ฒƒ์€ ๋””์ž์ธ์— ๋™๊ธฐ๋ฅผ ๋ถ€์—ฌํ•ฉ๋‹ˆ๋‹ค. ๋„ค๊ฑฐํ‹ฐ๋ธŒ ์ŠคํŽ˜์ด์Šค, ์ƒ‰์ƒ, ํฐํŠธ, ๊ทธ๋ž˜ํ”ฝ๊ณผ ์ธํ„ฐํŽ˜์ด์Šค ์š”์†Œ๋Š” ์ ˆ๋ฌ˜ํ•˜๊ฒŒ ์ค‘์š”ํ•œ ์ปจํ…์ธ ๋“ค์„ ๊ฐ•์กฐํ•˜๊ณ  ์ƒํ˜ธ์ž‘์šฉ์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
  2. Deference : ๋ถ€๋“œ๋Ÿฌ์šด ์›€์ง์ž„๊ณผ ์•„๋ฆ„๋‹ค์šด ์ธํ„ฐํŽ˜์ด์Šค๋Š” ์‚ฌ๋žŒ๋“ค์ด ํฐ ์–ด๋ ค์›€ ์—†์ด ์ปจํ…์ธ ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์ปจํ…์ธ ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ํ™”๋ฉด์„ ๊ฐ€๋“ ์ฑ„์šฐ์ง€๋งŒ ํˆฌ๋ช…๋„๋‚˜ ๋ธ”๋Ÿฌ๋ฅผ ํ†ตํ•ด ๋” ๋งŽ์€ ์ปจํ…์ธ ๊ฐ€ ์žˆ์Œ์„ ์•”์‹œํ•ฉ๋‹ˆ๋‹ค. ๋ฐฐ์ ค, ๊ทธ๋ผ๋””์–ธํŠธ, ๊ทธ๋ฆผ์ž๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ฐ€๋ณ๊ฒŒ ํ•˜๋ฉด์„œ ์ปจํ…์ธ ๋ฅผ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
  3. 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