๐Ÿšจ Alerts

J.Nomaยท2021๋…„ 10์›” 25์ผ
0

iOS : View : Human Interface Guidelines (HIG)

๋ชฉ๋ก ๋ณด๊ธฐ
16/19
post-thumbnail

๐Ÿšจ Alert๋Š” app์ด๋‚˜ device์™€ ๊ด€๋ จํ•œ ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ๊ฐ€๋”์€ ์œ ์ €์—๊ฒŒ feedback์„ ์š”์ฒญํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค

alert ๊ตฌ์„ฑ์š”์†Œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค

  • ์ œ๋ชฉ
  • ํ•œ ๊ฐœ ์ด์ƒ์˜ ๋ฒ„ํŠผ
  • (์„ ํƒ) ๋ฉ”์‹œ์ง€
  • (์„ ํƒ) input์„ ๋ฐ›๋Š” text field

์ด ์š”์†Œ๋“ค์€ ์„ค์ •์ด ๊ฐ€๋Šฅํ•œ๋ฐ˜๋ฉด, alert์˜ ์™ธํ˜•์€ ์ •์ ์ด๊ณ  customizeํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค

โœ” Alert๋ฅผ ๋„์šฐ๋Š” ๊ฒƒ์„ ์ตœ์†Œํ™”ํ•˜๋ผ

alert๋Š” ์œ ์ € ๊ฒฝํ—˜์„ ๋ฐฉํ•ดํ•˜๋ฏ€๋กœ, ์–ด๋–ค ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค๊ฑฐ๋‚˜ (์‚ญ์ œ๊ฐ™์€)ํŒŒ๊ดด์ ์ธ action์— ๋Œ€ํ•œ ํ™•์ธ์ฐจ์› ๋“ฑ ์ค‘์š”ํ•œ ์ƒํ™ฉ์—์„œ๋งŒ ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค
alert์˜ ๋นˆ๋„๊ฐ€ ์žฆ์ง€ ์•Š๊ฒŒ ํ•จ์œผ๋กœ์จ ์œ ์ €๋“ค์€ ์ด๋Ÿฐ ๊ฒฝ๊ณ ๋“ค์„ ์ข€ ๋” ์‹ฌ๊ฐํ•˜๊ฒŒ ๋ฐ›์•„๋“ค์ด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค
๊ฐ alert๊ฐ€ ์น˜๋ช…์ ์ธ ์ •๋ณด์™€ ์œ ์šฉํ•œ ์„ ํƒ์ง€๋ฅผ ์ œ๊ณตํ•˜๋„๋ก ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค

โœ” both orientation ๋ชจ๋‘์—์„œ alert์˜ ์™ธํ˜•์„ ํ™•์ธํ•˜๋ผ

alert๋Š” landscape/portrait ๋ชจ๋“œ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ๋ณด์—ฌ์งˆ์ง€๋„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค
๋ณ„๋„๋กœ scrollํ•˜์ง€ ์•Š๊ณ ๋„ ์–ด๋–ค orientation์—์„œ๋“  ์ž˜ ์ฝํžˆ๋„๋ก alert์˜ text๋ฅผ ์ตœ์ ํ™”ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค


๐Ÿ“ฐ ์ œ๋ชฉ / ๋ฉ”์‹œ์ง€

โœ” ์ œ๋ชฉ: ์งง๊ณ , ์„œ์ˆ ํ˜•์œผ๋กœ, ์—ฌ๋Ÿฌ๋‹จ์–ด๋กœ

์šฐ์„ , ์œ ์ €๊ฐ€ ์ฝ์–ด์•ผ ํ•  text๊ฐ€ ์ ์„์ˆ˜๋ก ์ž˜ ์ฝํžˆ๋ฏ€๋กœ ์งง๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค
๋ฉ”์‹œ์ง€์— ์“ธ ๋ง์„ ์ œ๋ชฉ์— ์ ์–ด์„œ ๊ธธ๊ฒŒ ๋งŒ๋“ค์ง€ ๋ง์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ•œ ๋‹จ์–ด๋กœ ๋œ ์ œ๋ชฉ์€ ์œ ์šฉํ•œ ์ •๋ณด๋ฅผ ๊ฑฐ์˜ ๋‹ด์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค
๊ทธ๋Ÿฌ๋ฏ€๋กœ ์งˆ๋ฌธ์„ ํ•˜๊ฑฐ๋‚˜ ์งง์€ ๋ฌธ์žฅ ํ˜•ํƒœ์˜ ์ œ๋ชฉ์„ ๊ณ ๋ คํ•ฉ๋‹ˆ๋‹ค
๊ฐ€๋Šฅํ•œ ํ•œ, ์ œ๋ชฉ์€ ํ•œ ์ค„๋กœ ๋๋‚ด๋Š”๊ฒŒ ์ข‹์Šต๋‹ˆ๋‹ค

๋งŒ์•ฝ ์ œ๋ชฉ์ด ์™„์ „ํ•œ ๋ฌธ์žฅ์ด๋ผ๋ฉด, sentence-style capitalization(๋ฌธ์žฅ ํ†ต์งธ๋กœ ๋Œ€๋ฌธ์ž๋กœ ์“ฐ๋Š” ๊ฒƒ)์„ ์‚ฌ์šฉํ•˜๊ณ  ๋ฌธ์žฅ ๋์— ์ ์ ˆํ•œ ๋ฌธ์žฅ๋ถ€ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š” (ex. ~ํ•ฉ๋‹ˆ๋‹ค.)

โœ” ๋ฉ”์‹œ์ง€: ์งง๊ณ , ์™„์ „ํ•œ ๋ฌธ์žฅ์œผ๋กœ

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

โœ” ๋น„๋‚œ, ๋น„ํŒ, ๋ชจ์š•์ ์ธ ํ‘œํ˜„ ๊ธˆ์ง€

์‚ฌ๋žŒ๋“ค์€ alert๊ฐ€ ์–ด๋–ค ๋ฌธ์ œ๋‚˜ ์œ„ํ—˜์ƒํ™ฉ์„ ์•Œ๋ฆฌ๋ ค๋Š” ๊ฒƒ์ž„์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. (์œ ์ €๋Š” ์ด๋ฏธ ๋ถ€์ •์ ์ธ ์ƒํƒœ)
๊ทธ๋ ‡๋‹ค๊ณ  ์ฐฉํ•˜์ง€๋งŒ ์• ๋งคํ•œ ํ‘œํ˜„์„ ์“ฐ๊ธฐ๋ณด๋‹จ, ๋ถ€์ •์ ์ด๋”๋ผ๋„ ์ง์ ‘์ ์ธ ํ‘œํ˜„์„ ์นœ์ ˆํ•œ ํ†ค์œผ๋กœ ์ „๋‹ฌํ•˜๋Š”๊ฒŒ ๋‚ซ์Šต๋‹ˆ๋‹ค
๋Œ€๋ช…์‚ฌ๋ฅผ ์“ฐ๋ฉด ๋•Œ๋•Œ๋กœ ๊ฑฐ๋งŒํ•˜๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ์œผ๋‹ˆ ์“ฐ์ง€ ๋งˆ์„ธ์š”

โœ” Alert ๋ฒ„ํŠผ ์„ค๋ช… ๊ธˆ์ง€

๊ธฐ๋ณธ์ ์œผ๋กœ alert์˜ text์™€ ๋ฒ„ํŠผ์˜ ์ œ๋ชฉ๋“ค์ด ๋ช…ํ™•ํ•˜๋‹ค๋ฉด, ๋ฒ„ํŠผ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•  ํ•„์š”๊ฐ€ ์—†์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค
์ •๋ง ๋“œ๋ฌผ๊ฒŒ ๋ณ„๋„์˜ ์„ค๋ช…์„ ์ œ๊ณตํ•ด์•ผ๋งŒ ํ•˜๋Š” ๊ฒฝ์šฐ๋ผ๋ฉด, ์„ค๋ช…์— "tap"์ด๋ผ๋Š” ๋‹จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๋ฒ„ํŠผ์„ ์–ธ๊ธ‰ํ•  ๋•Œ๋Š” ๋Œ€๋ฌธ์ž๋กœ ํ‘œํ˜„ํ•˜๋ฉฐ ๋ฒ„ํŠผ ์ œ๋ชฉ์„ ๋”ฐ์˜ดํ‘œ๋กœ ๋ฌถ์ง€ ๋งˆ์„ธ์š”
(๋ญ๊ฐ€ ์ด๋ ‡๊ฒŒ ์ž์„ธํ•ด...)


๐Ÿฅ ๋ฒ„ํŠผ

โœ” ์ผ๋ฐ˜์ ์œผ๋กœ, 2๊ฐœ๋ฅผ ์”๋‹ˆ๋‹ค

alert๋ฅผ 2๊ฐœ ๋ฒ„ํŠผ์œผ๋กœ ์ œ๊ณตํ•˜์—ฌ ๋‘ ๊ฐœ์˜ ๋Œ€์•ˆ ์ค‘ ์‰ฝ๊ฒŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

1๊ฐœ์งœ๋ฆฌ ๋ฒ„ํŠผ์€ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•  ์ˆœ ์žˆ์ง€๋งŒ, ์ƒํ™ฉ์— ๋Œ€ํ•œ ์ œ์–ด๊ถŒ์€ ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค

3๊ฐœ ์ด์ƒ์˜ ๋ฒ„ํŠผ์€ alert๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“ค๊ณ  ๊ธธ๋‹ค๋ณด๋‹ˆ scroll์„ ์š”๊ตฌํ•˜์—ฌ ์œ ์ € ๊ฒฝํ—˜์„ ๋‚˜์˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

๋งŒ์•ฝ 3๊ฐœ ์ด์ƒ์˜ ์„ ํƒ์ง€๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด, alert๋Œ€์‹  action sheet๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฑธ ๊ณ ๋ คํ•ฉ๋‹ˆ๋‹ค

โœ” ๋ฒ„ํŠผ ์ œ๋ชฉ: ๊ฐ„๊ฒฐํ•˜๊ณ  ๋…ผ๋ฆฌ์ ์ด๊ฒŒ

๊ฐ€์žฅ ์ข‹์€ ๋ฒ„ํŠผ ์ œ๋ชฉ์€ ๊ฐ ์„ ํƒ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ฌ˜์‚ฌํ•˜๋Š” 1~2๊ฐœ ๋‹จ์–ด๋กœ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค

์—ฌ๋Š ๋ฒ„ํŠผ ์ œ๋ชฉ๋“ค์ด ๊ทธ๋Ÿฌํ•˜๋“ฏ์ด, title-style capitalization(์ฒซ ๊ธ€์ž๋งŒ ๋Œ€๋ฌธ์ž)๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๋งˆ์นจํ‘œ๋ฅผ ์ฐ์ง€ ์•Š์Šต๋‹ˆ๋‹ค

๊ฐ€๋Šฅํ•œ ํ•œ, ๋™์‚ฌ 1~2๊ฐœ๋‚˜ ๋™์‚ฌ๊ตฌ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค
(alert ์ œ๋ชฉ/๋ฉ”์‹œ์ง€์™€ ์ง์ ‘์ ์œผ๋กœ ๊ด€๋ จ๋œ)
์˜ˆ๋กœ, View all, Reply, Ignore๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค

๊ฐ„๋‹จํ•œ ์ˆ˜๋ฝ์„ ํ‘œํ˜„ํ•˜๋ ค๋ฉด OK๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค

Yes๋‚˜ No๋Š” ํ”ผํ•ฉ๋‹ˆ๋‹ค

โœ” ๋ฒ„ํŠผ ์œ„์น˜: ์‚ฌ๋žŒ๋“ค์€ ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค

์ผ๋ฐ˜์ ์œผ๋กœ, ์‚ฌ๋žŒ๋“ค์€ ์šฐ์ธก์— ์žˆ๋Š” ๋ฒ„ํŠผ์„ ๊ฐ€์žฅ ํŽธํ•˜๊ฒŒ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค

์šฐ๋ฆฌ๋Š” ๋ณดํ†ต ์œ ์ €๊ฐ€ "์ˆ˜๋ฝ"ํ•˜๊ธธ ์›ํ•˜๋ฏ€๋กœ ์ด๊ฒƒ์„ ์šฐ์ธก์— ๋†“๊ณ  ์ทจ์†Œ ๋ฒ„ํŠผ์€ ์ขŒ์ธก์— ๋†“์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค

โœ” ์ทจ์†Œ ๋ฒ„ํŠผ์€ "Cancel"์ด๋ผ๊ณ  ์ด๋ฆ„ ๋ถ™ํ˜€์•ผ ํ•ฉ๋‹ˆ๋‹ค

alert์˜ action์„ ์ทจ์†Œํ•˜๋Š” ๋ฒ„ํŠผ์€ "Cancel"์ด๋ผ๊ณ  ์ด๋ฆ„ ๋ถ™ํ˜€์•ผ ํ•ฉ๋‹ˆ๋‹ค

โœ” ํŒŒ๊ดด์ ์ธ ๋ฒ„ํŠผ์€ ๋”ฐ๋กœ ํ‘œ์‹œํ•˜๋ผ

๋งŒ์•ฝ alert ๋ฒ„ํŠผ์˜ ๊ฒฐ๊ณผ๊ฐ€ ํŒŒ๊ดด์ ์ด๋ผ๋ฉด(data๋ฅผ ์ง€์šด๋‹ค๋˜์ง€) ๋ฒ„ํŠผ์˜ ์Šคํƒ€์ผ์„ "Destructive"๋ผ๊ณ  ์„ค์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค
์ด๋ ‡๊ฒŒ ์„ค์ •ํ•˜๋ฉด ์‹œ์Šคํ…œ์— ์˜ํ•ด ์ ์ ˆํ•˜๊ฒŒ formatting๋ฉ๋‹ˆ๋‹ค (๋นจ๊ฐ„์ƒ‰ ์น )

์ถ”๊ฐ€๋กœ, ์‚ฌ๋žŒ๋“ค์ด ์•ˆ์ „ํ•˜๊ฒŒ ํŒŒ๊ดด์ ์ธ action์„ ํ”ผํ•  ์ˆ˜ ์žˆ๋„๋ก Cancel ๋ฒ„ํŠผ์„ ์ œ๊ณตํ•˜๊ณ  ์ด๊ฒŒ default๋ผ๋Š” ๊ฒƒ์ด ํ‹ฐ๊ฐ€ ๋‚˜๋„๋ก Bold์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค

โœ” ํ™ˆํ™”๋ฉด์œผ๋กœ ๋‚˜๊ฐ€๋ฉด alert ์ทจ์†Œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ ํšจ๊ณผ๋ฅผ ์ฃผ์–ด๋ผ

alert๊ฐ€ ๋ณด์—ฌ์กŒ์„ ๋•Œ, ์•„์ดํฐ ํ™ˆํ™”๋ฉด์— ์ ‘๊ทผํ•˜๋Š” ํ–‰์œ„๋Š” ์–ด๋– ํ•œ ์„ ํƒ๋„ ํ•˜์ง€ ์•Š๊ณ  app์„ ๋‚˜๊ฐ€๋Š” ๊ฒƒ์ด ๋ฉ๋‹ˆ๋‹ค

์šฐ๋ฆฌ๋Š” ์ด ํ–‰์œ„๊ฐ€ ์ทจ์†Œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•œ ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค๋„๋ก ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค
(์ฆ‰, ์ทจ์†Œ๋ฒ„ํŠผ์ฒ˜๋Ÿผ alert๊ฐ€ ๋ณ„๋„์˜ action์—†์ด dismiss๋˜๋„๋ก)

๋งŒ์•ฝ alert์— ์ทจ์†Œ ๋ฒ„ํŠผ์ด ๋”ฐ๋กœ ์—†๋‹ค๋ฉด, app์„ ๋‚˜๊ฐ€๋ฉด ์ทจ์†Œ action์„ ํ•˜๋„๋ก ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์„ธ์š”

profile
๋…ธ์…˜์œผ๋กœ ์ด์‚ฌ๊ฐ‘๋‹ˆ๋‹ค https://tungsten-run-778.notion.site/Study-Archive-98e51c3793684d428070695d5722d1fe

0๊ฐœ์˜ ๋Œ“๊ธ€