๐ŸŒŸ ๋””ํ…Œ์ผ์˜ ๊ฐ„๊ฒฉ ์‹œ๋ฆฌ์ฆˆ! [๐Ÿ’–์•ฑ ์•Œ๋ฆผ์„ ์„ค๊ณ„ ํ•˜๋Š” 7๊ฐ€์ง€ ๋‹จ๊ณ„] (๐Ÿ‘€๊ฐ„๋‹จ ์š”์•ฝ) ๐Ÿ“Œ์•Œ๋ฆผ์„ ๋””์ž์ธ ํ•˜๊ธฐ ์œ„ํ•œ ๋…ผ์˜ ๋ฐ ํ•ด๊ฒฐ์  โœ“ ์•ฑ์—์„œ ์•Œ๋ฆผ์€ ์™œ ํ•„์š”ํ• ๊นŒ? โœ“ ์–ด๋–ค ์•Œ๋ฆผ๋“ค์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์„๊นŒ? โœ“ ์–ด๋–ค ์•Œ๋ฆผ ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ? โœ“ ์•Œ๋ฆผ(or ํ‘ธ์‹œ ์•Œ๋ฆผ)์˜ ์ƒ์„ฑ๊ณผ ๋งŒ๋ฃŒ์˜ ๊ธฐ์ค€์€ ๋ฌด์—‡์ผ๊นŒ? โœ“ ์•Œ๋ฆผ ํด๋ฆญ ์‹œ ํ™”๋ฉด์„ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„๊นŒ? โœ“ ์•Œ๋ฆผ์„ ์–ด๋–ป๊ฒŒ ํšจ์œจ์ ์œผ๋กœ ๋ณด์—ฌ์ค„๊นŒ? โœ“ ์•Œ๋ฆผ ์„ค์ •์€ ์–ด๋–ป๊ฒŒ ๊ธฐํšํ•˜๋ฉด ์ข‹์„๊นŒ? ๐Ÿ“Œ์•ฑ์—์„œ ์•Œ๋ฆผ์€ ์™œ ํ•„์š”ํ• ๊นŒ? ์šฐ๋ฆฌ ์•ฑ์˜ ํ™œ์šฉ๋„์™€ ์‚ฌ์šฉ์ž์˜ ํŽธ์˜๋ฅผ ๋†’์ด๊ธฐ ์œ„ํ•ด 1. ๋งฅ๋ฝ์— ๋ถ€ํ•ฉํ•œ๋‹ค. (Contextual) - "๋‚ด๊ฐ€ ์™œ ์ด ์•Œ๋ฆผ์„ ๋ฐ›์•˜๋Š”๊ฐ€?" 2. ์ ์‹œ์— ๋„์ฐฉํ•œ๋‹ค. (Time-sensitive) - "๋‚ด๊ฐ€ ์™œ ์ด ์•Œ๋ฆผ์„ ์ง€๊ธˆ ๋ฐ›์•˜๋Š”๊ฐ€?" ๐Ÿ“Œ์–ด๋–ค ์•Œ๋ฆผ๋“ค์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์„๊นŒ? ์šฐ์„ , ์šฐ๋ฆฌ ์•ฑ ๋‚ด์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ์•Œ๋ฆผ๋“ค์„ ๋‚˜์—ดํ•ด์„œ ๋ธŒ๋ ˆ์ธ ์Šคํ† ๋ฐ ํ•ด๋ณด์ž. ์ดํ›„ ๊ฐ ์•Œ๋ฆผ๋“ค์ด ๋ฐ›๋Š” ๋Œ€์ƒ, ํ”ผ๋“œ๊ฐ€ ์ƒ์„ฑ๋˜๋Š”์ง€, ํ‘ธ์‹œ์•Œ๋ฆผ ์—ฌ๋ถ€, ์•Œ๋ฆผ ํ›„ ๋™์ž‘ ์—ฌ๋ถ€, ์•Œ๋ฆผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ์ด๋™๋˜๋Š” ํ™”๋ฉด ๋“ฑ์„ ๋ถ„๋ฅ˜ํ•œ๋‹ค. ๐Ÿ“Œ์–ด๋–ค ์•Œ๋ฆผ ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ? 1. ์•Œ๋ฆผ ์„ผํ„ฐ(Notification Center) - ์•Œ๋ฆผ์ด ๋ชจ์•„์ ธ ์žˆ๋Š” ์„น์…˜, ํ•˜๋‚˜์˜ ํ’€ํŽ˜์ด์ง€๋‚˜ย [๋ชจ๋‹ฌ ๋“œ๋กœ์–ด](https://material.io/components/navigation-drawer/#usage)ย ํ˜•ํƒœ๋กœ ๋‚˜ํƒ€๋‚จ 2. ์†Œ์Šค์— ์ •์ฐฉํ•œ ์•Œ๋ฆผ(Source Anchored Notification) - ๋„ค๋น„๊ฒŒ์ด์…˜์— ๊ฐ ํ•ญ๋ชฉ์— ๋ฐฐ์ง€ ํ‘œ์‹œ 3. ํ˜ผํ•ฉ๋ชจ๋ธ(Mixed Model) ํŽ˜์ด์Šค๋ถ์˜ ๊ฒฝ์šฐ๋Š” ํ˜ผํ•ฉ๋ชจ๋ธ์„ ์ฑ„ํƒํ•˜๊ณ  ์žˆ๋‹ค. ํ˜ผํ•ฉ๋ชจ๋ธ ์‚ฌ์šฉ ๊ฐ€์ด๋“œ์— ๋”ฐ๋ฅด๋ฉด, ํ˜ผํ•ฉ๋ชจ๋ธ์€ ๋ชจ๋“  ์•Œ๋ฆผ์ด ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๋Š” ์ƒํ™ฉ์„ ์ƒ๊ฐํ•œ ๋’ค ์•Œ๋ฆผ์˜ ํŠน์„ฑ์— ๋”ฐ๋ผ ์–ด๋–ค ์•Œ๋ฆผ์€ ๋„ค๋น„๊ฒŒ์ด์…˜์— ์ •์ฐฉ(=์†Œ์Šค์— ์ •์ฐฉ, ๋ฐฐ์ง€ ํ˜•ํƒœ์˜ ์•Œ๋ฆผ)ํ•˜๊ณ , ์–ด๋–ค ์•Œ๋ฆผ๋“ค์€ ๊ทธ๋Ÿฌ๊ธฐ ํž˜๋“ค ๋•Œ ์•Œ๋ฆผ์„ผํ„ฐ์—์„œ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋„๋ก ์œ ๋„ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๐Ÿ“Œ์•Œ๋ฆผ(or ํ‘ธ์‹œ ์•Œ๋ฆผ)์˜ ์ƒ์„ฑ๊ณผ ๋งŒ๋ฃŒ์˜ ๊ธฐ์ค€์€ ๋ฌด์—‡์ผ๊นŒ? ์•Œ๋ฆผ์€ย **๋งฅ๋ฝ์„ฑ๊ณผ ์ ์‹œ์„ฑ**์— ์˜ํ•ด ๋ฐœ์ƒํ•œ๋‹ค. ์ด๋ฅผ ์ข€๋” ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌ์ฒดํ™” ํ•ด ๋ณด์•˜๋‹ค. ์•Œ๋ฆผ ๋ฉ”์„ธ์ง€๋ฅผ ์œ ํ˜•ํ™”ํ•˜๋ฉด ํ‘ธ์‹œ ์•Œ๋ฆผ์˜ ์—ฌ๋ถ€๋ฅผ ๊ณ ๋ คํ•˜๊ธฐ์— ์œ ์šฉํ•˜๋‹ค. 1. ๋‚ด๊ฐ€ ํ•œ ํ–‰์œ„์— ๋Œ€ํ•œ ๊ฒฐ๊ณผ๋‚˜ ์ƒํƒœ ๋ณ€๊ฒฝ์ด ๋ฐœ์ƒ ํ–ˆ์„ ๋•Œ (๋งฅ๋ฝ์„ฑ) - โ‘  ๋‹ต๋ณ€ or ํ”ผ๋“œ๋ฐฑํ˜• 2. ๋‚ด๊ฐ€ ํ•œ ํ–‰์œ„์˜ ์™„๋ฃŒ, ๋”๋ธ”์ฒดํฌ์„ฑ ์•Œ๋ฆผ (๋งฅ๋ฝ์„ฑ) - โ‘ก ๋”๋ธ”์ฒดํฌํ˜• 3. ํ˜„์žฌ ์‹œ๊ธฐ์— ์„œ๋น„์Šค์— ๋Œ€ํ•œ ์•Œ๋ฆผ์ด ํ•„์š”ํ•  ๋•Œ (์ ์‹œ์„ฑ) - โ‘ข ์‹œ์Šคํ…œ์•Œ๋ฆผํ˜•, ํ”„๋กœ๋ชจ์…˜ํ˜• 4. ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์„œ๋น„์Šค์˜ ์ƒˆ ์ฝ˜ํ…์ธ ๊ฐ€ ๊ฒŒ์‹œ ๋˜์—ˆ์„ ๋•Œ (์ ์‹œ์„ฑ) - โ‘ฃ ์ƒˆ๊ธ€์•Œ๋ฆผํ˜• ํŠน์ •ํ•œ ๊ธฐ๊ฐ„์„ ๋ฏธ๋ฆฌ ์ •ํ•˜๊ธฐ ๋ณด๋‹ค๋Š” ๊ฐ ์„œ๋น„์Šค์—์„œ ์•Œ๋ฆผ์ด ๋ฐœ์ƒํ•˜๋Š” ๋นˆ๋„ ์ˆ˜๋‚˜ ์•ฑ ๋‚ด์—์„œ์˜ ์•Œ๋ฆผ์˜ ์ค‘์š”์„ฑ์˜ ๋น„์ค‘์— ๋”ฐ๋ผ ์–ด๋Š ์ •๋„ ๊ธฐ๊ฐ„์˜ ์•Œ๋ฆผ์„ ๋ณด์—ฌ์ค„์ง€ ์„ค์ •ํ•˜๋Š” ๊ฒƒ๋„ ๋ฐฉ๋ฒ•์ด๋‹ค. ๐Ÿ“Œ์•Œ๋ฆผ ํด๋ฆญ ์‹œ ํ™”๋ฉด์„ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„๊นŒ? ์•Œ๋ฆผ์„ผํ„ฐ ๋‚ด์˜ ๊ฐ ๋ฉ”์„ธ์ง€๋ฅผ ํด๋ฆญํ•˜๋ฉด ๊ด€๋ จ๋œ ํŽ˜์ด์ง€๋กœ ์ด๋™ ์‹œํ‚จ๋‹ค. ์•Œ๋ฆผ ํ•ญ๋ชฉ ํด๋ฆญ ์‹œ ํ•˜๋‚˜์˜ ๋Ž์Šค๋กœ ๋“ค์–ด๊ฐ€ ๊ด€๋ จ ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ , Back ํด๋ฆญ ์‹œ ์›๋ž˜ ๋ณธ์ธ์ด ์žˆ๋˜ ํŽ˜์ด์ง€(์•Œ๋ฆผ์„ผํ„ฐ๋Š” ๋“ค์–ด๊ฐ)๋กœ ๋‚˜์˜ค๋Š” ํ”Œ๋กœ์šฐ๋กœ ๊ตฌ์ƒํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๐Ÿ“Œ์•Œ๋ฆผ์„ ์–ด๋–ป๊ฒŒ ํšจ์œจ์ ์œผ๋กœ ๋ณด์—ฌ์ค„๊นŒ? ์•Œ๋ฆผ์˜ ์ถœ์ฒ˜, ์ฆ‰ ์†Œ์Šค๋ฅผ ์•„์ด์ฝ˜์œผ๋กœ ์‹œ๊ฐํ™”ํ•˜์—ฌ ๊ตฌ๋ถ„ํ•˜๊ณ , ์†Œ์Šค๋ณ„๋กœ ํ•„ํ„ฐ๋งํ•˜์—ฌ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•„ํ„ฐ ์นฉ๊ณผ ์•Œ๋ฆผ์— ๋Œ€ํ•ด ๋ฐ”๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์–ดํฌ๋˜์Šค๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ๐Ÿ“Œ์•Œ๋ฆผ ์„ค์ •์€ ์–ด๋–ป๊ฒŒ ๊ธฐํšํ•˜๋ฉด ์ข‹์„๊นŒ? ์•Œ๋ฆผ ์„ค์ •์€ ์ผ๋ฐ˜ ์„ค์ • ๋‚ด์˜ ์ผ๋ถ€๋กœ ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฉฐ, ์•Œ๋ฆผ์˜ ์œ ํ˜•๊ณผ ๊ฐ ์„œ๋น„์Šค์— ๋”ฐ๋ผ ํ‘ธ์‹œ ์•Œ๋ฆผ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. (๐Ÿ‘‹์ค‘์š”ํ•œ ์ด์œ ๊ฐ€ ๋ญ”๊ฐ€์š”?) ๋ฏธ๋””์—„, ๋ธŒ๋Ÿฐ์น˜ ๋“ฑ์— '์•Œ๋ฆผ'์— ๋Œ€ํ•ด ๊ฒ€์ƒ‰ํ•ด ๋ณด๋ฉด ๊ฐ์ž์˜ ๊ธฐ์ค€์€ ๋‹ค๋ฅด๊ฒ ์ง€๋งŒ ์ƒ๊ฐ๋ณด๋‹ค ๋” ๋งŽ์€ ๊ณ ๋ฏผ๋“ค์ด ์ง„ํ–‰๋˜๊ณ  ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ ์ˆ˜ ์žˆ์–ด์š”. ์ œ๊ฐ€ ์•Œ๋ฆผ์„ ๋Œ€ํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ์ƒ๊ฐํ•˜๋Š” ๊ฑด '์ด๋ฉ”์ผ'์ธ๋ฐ์š”. ์ด๋ฉ”์ผ์ด ์ค‘์š”ํ•˜์ง€ ์•Š์•„! ๋ผ๊ณ  ์ฃผ์žฅํ•˜๋Š” ์ž…์žฅ์ด๋ผ๊ธฐ ๋ณด๋‹ค ์ด๋ฉ”์ผ์€ ์ƒ๋Œ€์ ์œผ๋กœ ์ค‘์š”ํ•˜์ง€ ์•Š์€ ์ฑ„๋„์ด์•ผ - ๋ผ๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ด€์ ์ด์—์š”. ๋ชจ๋ฐ”์ผ์•ฑ์—์„œ์˜ ์•Œ๋ฆผ์„ ๊ทธ๋ ‡๊ฒŒ ์ƒ๊ฐํ•˜๊ณ  ๋„˜์–ด๊ฐˆ ์ˆ˜๋„ ์žˆ๋‹ค ๋ผ๋Š” ๊ฒƒ์ด์ฃ . ์•Œ๋ฆผ์€ ํฌ๊ฒŒ 2๊ฐ€์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์–ด์š”. ํ•˜๋‚˜๋Š” ์‚ฌ์šฉ์ž์˜ ํ–‰๋™์— ๋Œ€ํ•œ ๋ฐ˜์‘. ์ด ์•Œ๋ฆผ์€ ์ƒ๋Œ€์ ์œผ๋กœ ์‰ฝ๊ฒŒ ์‚ฌ์šฉ์ž๋ฅผ ๋‹ค์‹œ ์•ฑ์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋„ˆ์˜ ๊ฒŒ์‹œ๊ธ€์— ์ข‹์•„์š”๊ฐ€ ๋‹ฌ๋ ธ์–ด. ์ข‹์•„์š”๊ฐ€ n๊ฐœ๋ฅผ ๋„˜์—ˆ์–ด! ๋“ฑ๋“ฑ ํ•˜๋‚˜์˜ ๋ฐ˜์‘์œผ๋กœ๋„ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์•Œ๋ฆผ์„ ์„ค๊ณ„ ํ•  ์ˆ˜ ์žˆ์–ด์š”. ๊ตฌ๊ฐ„์— ๋”ฐ๋ผ์„œ ์–ผ๋งˆ๋“ ์ง€ ๋ง์ด์ฃ . ๋ฌธ์ œ๋Š” ์ € ์•Œ๋ฆผ์˜ ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž๊ฐ€ ์šฐ๋ฆฌ ์•ฑ์„ ์–ด๋Š์ •๋„ ํ™œ์šฉํ•ด์•ผ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ. D+1 ๊ธฐ์ค€ ๋“ฑ์—์„œ๋Š” ํฌ๊ฒŒ ์˜๋ฏธ๊ฐ€ ์—†๋Š” ์•Œ๋ฆผ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ ํ•˜๋‚˜๋Š” ์‹ ๊ทœ ์‚ฌ์šฉ์ž๋ฅผ ๋‹ค์‹œ ํ•œ ๋ฒˆ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์•Œ๋ฆผ์ด์—์š”. ์ •ํ™•ํ•œ ๊ธฐ์ค€์ด์•ผ ์„œ๋น„์Šค์— ๋”ฐ๋ผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์ง€๋งŒ ์ฒซ ๋ฐฉ๋ฌธ ํ›„ ์žฌ๋ฐฉ๋ฌธ์„ ๊ธฐ์ค€์œผ๋กœ ํ•œ๋‹ค๋ฉด ์•Œ๋ฆผ์€ ์—„์ฒญ๋‚˜๊ฒŒ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•  ์ˆ˜ ๋ฐ–์— ์—†์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์ฒซ ๋ฐฉ๋ฌธ ์‹œ ๊ทธ๋ƒฅ ์šฐ๋ฆฌ ์•ฑ์„ ๋‘˜๋Ÿฌ๋ณด๊ณ  ๋‚˜๊ฐ”๋‹ค๋ฉด? ๊ทธ ์‚ฌ์šฉ์ž์—๊ฒŒ ์–ด๋–ค ๊ทผ๊ฑฐ๋กœ ๋‹ค์‹œ ๋Œ์•„์˜ค๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์„๊นŒ? ์˜ค๊ฒŒ ๋œ๋‹ค๋ฉด ์–ด๋””๋กœ ๋ถˆ๋Ÿฌ์˜ค์ง€? ๋“ฑ๋“ฑ ๊ณ ๋ฏผ์ด ํญ์ด ์ฒซ ๋ฒˆ์งธ ์œ ํ˜•๋ณด๋‹ค ๋งŽ์•„์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ผ๋ จ์˜ ์ƒํ™ฉ๋“ค์— ๋Œ€ํ•ด ์ •๋ง ์ž˜ ์ •๋ฆฌ๋œ ๊ธ€์ด๋ผ ์ƒ๊ฐํ–ˆ์–ด์š”. 7๊ฐ€์ง€์— ๋Œ€ํ•ด ๋‹จ๊ณ„๋ณ„๋กœ ๊ณ ๋ฏผํ•˜๋‹ค ๋ณด๋ฉด ์•Œ๋ฆผ์˜ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์ข…ํ•ฉ์ ์œผ๋กœ ๊ณ ๋ฏผํ•˜๊ณ , ํŒ๋‹จํ•˜๊ณ , ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์„ ์ˆ˜ ์žˆ์„๊ฑฐ์—์š”.

์Šคํƒ€ํŠธ์—…์—์„œ ์•ฑ์—์„œ์˜ ์•Œ๋ฆผ UI/UX ๋””์ž์ธํ•˜๊ธฐ

Brunch Story

์Šคํƒ€ํŠธ์—…์—์„œ ์•ฑ์—์„œ์˜ ์•Œ๋ฆผ UI/UX ๋””์ž์ธํ•˜๊ธฐ

2020๋…„ 7์›” 29์ผ ์˜คํ›„ 2:25

๋Œ“๊ธ€ 0