๐Ÿ”ฅ2021 UX/UI ํŠธ๋ Œ๋“œ 14๊ฐ€์ง€์™€ ๊ทธ ํ™œ์šฉ๋ฒ•๐Ÿ”ฅ [๐ŸŸก๋“ค์–ด๊ฐ€๊ธฐ ์•ž์„œ] ์ƒˆํ•ด๊ฐ€ ์˜จ ์ง€๋„ ํ•œ์ฐธ์ธ 4์›”์— 2021 ํŠธ๋ Œ๋“œ ์˜ˆ์ธก์ด๋ผ๋‹ˆ ํ•œ๋ฌผ ๊ฐ„ ์†Œ์‹์ฒ˜๋Ÿผ ๋Š๊ปด์งˆ ์ˆ˜๋„ ์žˆ์„ ํ…๋ฐ์š”. ํ•˜์ง€๋งŒ ์ง€๊ธˆ ์šฐ๋ฆฌ ์„œ๋น„์Šค๊ฐ€ ์ด ํŠธ๋ Œ๋“œ์˜ ์–ด๋–ค ๋‹จ๊ณ„๋ฅผ ๋ฐŸ๊ณ  ์žˆ๋Š”์ง€ ์ ๊ฒ€ํ•ด ๋ณด๊ณ , ์ „๋ฐ˜์ ์ธ ์œ ํ–‰์˜ ํ๋ฆ„์„ ๋ณด๋Š” ์‹œ๊ฐ์„ ๊ธฐ๋ฅด๋Š” ๋ฐ์—๋Š” ์ง€๋‚œ ํŠธ๋ Œ๋“œ ์˜ˆ์ธก ๊ธ€๋„ ๋„์›€์ด ๋  ๋“ฏ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์–ด๋–ค ์š”์†Œ๋“ค์€ ํŠธ๋ Œ๋“œ์™€ ๋ฌด๊ด€ํ•˜๊ฒŒ ๊พธ์ค€ํžˆ ์œ ์ง€๋˜๊ธฐ๋„ ํ•˜๋‹ˆ๊นŒ์š”:) ์Ÿ์•„์ง€๋Š” ๋””์ž์ธ ํŠธ๋ Œ๋“œ ์˜ˆ์ธก ๊ธ€ ์ค‘์—์„œ ์ด ์•„ํ‹ฐํด์„ ๊ฐ€์ ธ์˜จ ์ด์œ ๋Š” ๋””์ž์ธ ๋งŒ์ด ์•„๋‹Œ UI/UX ๊ธฐ์ˆ  ์ƒํƒœ๊ณ„์— ๋Œ€ํ•œ ํ๋ฆ„๋„ ๊ฐ™์ด ์งš์–ด์ฃผ๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ฒดํฌํ•ด ๋ณด๊ณ  ์˜ฌํ•ด์˜ 1๋ถ„๊ธฐ๊ฐ€ ์ง€๋‚˜๊ฐ„ ์ง€๊ธˆ ๋‹ฌ๋ผ์ง„ ๊ฒƒ์€ ์—†๋Š”์ง€, ํ˜น์€ ๋ถ€์ฉ ํŠธ๋ Œ๋“œ๋ฅผ ์ฒด๊ฐํ•˜๊ณ  ์žˆ๋Š”์ง€ ์‚ดํŽด๋ณด๋„๋ก ํ• ๊นŒ์š”. [๐Ÿ“ ๋ณธ๋ฌธ ์†Œ๊ฐœ] UX/UI ํŠธ๋ Œ๋“œ๋Š” ๋งค๋…„ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ์„œ๋น„์Šค ์ œ๊ณต์ž๊ฐ€ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ•  ์ˆ˜๋ก ์‹œ๊ฐ์  ๊ณผํฌํ™”๋กœ ์ธํ•ด ํŠธ๋ Œ๋“œ์˜ ํšจ๊ณผ๋Š” ๋ฏธ๋ฏธํ•ด์งˆ ๊ฒƒ์ด๊ธฐ์—, ๋งค๋ฒˆ ์ƒˆ๋กœ์šด ํŠธ๋ Œ๋“œ๊ฐ€ ๋‚˜ํƒ€๋‚˜๊ณ  ๋””์ž์ด๋„ˆ๋Š” ์ด๋ฅผ ํ‹ˆํ‹ˆ์ด ํ™•์ธํ•ด์•ผ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๐Ÿ“Œ๋ชจ๋“  ๊ฒƒ์„ ์›๊ฒฉ์œผ๋กœ, ๊ทธ๋ฆฌ๊ณ  ๊ฐ€์ƒ์œผ๋กœ ์ „์—ผ๋ณ‘์˜ ํ™•์‚ฐ๊ณผ ํ•จ๊ป˜ VR/AR, ์›๊ฒฉ ํ˜‘์—…์ด ๊ธ‰์†๋„๋กœ ํ™•๋Œ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“Œ๊ตฌ์ถœ์„ ์œ„ํ•œ ์ธ๊ณต์ง€๋Šฅ๊ณผ ๊ธฐํƒ€ ๋„๊ตฌ๋“ค ์ด์ œ ๋””์ž์ธ ๋„๊ตฌ์—๋„ ์ธ๊ณต ์ง€๋Šฅ์ด ํ™œ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์•„์ง UI/UX ์—์„œ์˜ AI ๊ธฐ์ˆ ์€ ์ดˆ๊ธฐ ๋‹จ๊ณ„์— ์žˆ์ง€๋งŒ, ์ด๋Ÿฌํ•œ ๋„๊ตฌ๋“ค์„ ํ™•์ธํ•˜๊ณ  ๋„์›€์„ ๋ฐ›์œผ์„ธ์š”. ๐Ÿ“Œ๊ณ ๊ธ‰ ๊ฐœ์ธํ™” ์‚ฌ์šฉ์ž์˜ ๊ฐœ์ธ ์ •๋ณด, ํ™œ๋™ ์ •๋ณด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์„œ๋น„์Šค๋Š” ์ ์  ๋” ๊ฐœ์ธ์—๊ฒŒ ๋งž์ถคํ™”๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๐Ÿ“Œ๋น„์ ‘์ด‰ ์ƒํ˜ธ์ž‘์šฉ ์ „์—ผ๋ณ‘์˜ ํ™•์‚ฐ์€ ์Œ์„ฑ ์ƒํ˜ธ์ž‘์šฉ, ์—์–ด ์ œ์Šค์ฒ˜ ๋“ฑ ๊ธฐ๊ธฐ๋ฅผ ์ง์ ‘ ๋งŒ์ง€์ง€ ์•Š๊ณ ๋„ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํŠธ๋ Œ๋“œ๋ฅผ ํ™•์‚ฐ์‹œ์ผฐ์Šต๋‹ˆ๋‹ค. ๐Ÿ“Œ(๋” ๋งŽ์€) 3D ๋ฐ ๋ชฐ์ž…ํ˜• ๊ฒฝํ—˜ ๊ธฐ์ˆ ์ด ๋ฐœ์ „ํ•˜๊ณ  VR/AR์˜ ์ธ๊ธฐ๊ฐ€ ๋†’์•„์ง€๋ฉด์„œ 3D๋Š” ๋”๋”์šฑ ๊ด€์‹ฌ์„ ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“Œ์‚ฌ์šฉ์ž๊ฐ€ ์ข‹์•„ํ•˜๋Š” ๋ชจ์…˜ ๋งค๋ ฅ์ ์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์Šคํ† ๋ฆฌ๋ฅผ ๋ณด๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜ ํ™”๋ฉด๊ณผ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ๊ฒƒ์€ ๋ชจ๋“  ์„ธ๋Œ€๊ฐ€ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ์ธํ„ฐํŽ˜์ด์Šค์™€ ๋ชจ์…˜์˜ ๊ฒฐํ•ฉ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์˜ ๊ธด์žฅ์„ ํ’€๊ณ  ์ƒํ˜ธ ์ž‘์šฉ์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์„ ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์„ธ์š”. ๐Ÿ“Œ๋ฌผ๋ฆฌ์ ์ด๊ณ  ์‚ฌ์‹ค์ ์ธ ์งˆ๊ฐ 'ํ”Œ๋žซ' ๋””์ž์ธ์€ ๊พธ์ค€ํžˆ ํ˜„๋Œ€ UI ๋””์ž์ธ์˜ ์ฃผ์š” ์š”์†Œ์ด์ง€๋งŒ, ์ƒˆ๋กญ๊ณ  ์‹ ์„ ํ•œ ๊ฒƒ์— ๋Œ€ํ•œ ํ•„์š”์„ฑ์ด ๋Œ€๋‘๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฑฐ์นœ ์งˆ๊ฐ๊ณผ ํŠน์ˆ˜ ๊ธ€๊ผด ๋“ฑ์€ ๋ธŒ๋žœ๋“œ์— ํ˜„์‹ค๊ฐ์„ ๋ถ€์—ฌํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ“Œ์™„๋ฒฝํ•จ์—์„œ ๋…ํŠนํ•จ์œผ๋กœ ๋…ํŠนํ•˜๊ณ  ๋น„์ •ํ˜•์ ์ธ, '๋ถˆ์™„์ „ํ•œ' ๋””์ž์ธ์ด ํŠธ๋ Œ๋“œ๋กœ ์˜ฌ๋ผ์„ฐ์Šต๋‹ˆ๋‹ค. ๋น„ ์ •ํ†ต ๋ ˆ์ด์•„์›ƒ, ๋น„ ์ •ํ†ต ์Šคํฌ๋กค, ์ƒ‰์ƒ ์กฐํ•ฉ, ๋…ํŠนํ•œ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ๋ฅผ ํ†ตํ•ด ๊ฐœ์„ฑ์„ ๋ถ€์—ฌํ•˜์„ธ์š”. ๐Ÿ“Œ๋›ฐ์–ด๋‚œ ๊ธฐ์ˆ ๋ ฅ์œผ๋กœ ๊ตฌํ˜„ํ•œ ๋žœ๋”ฉ ํŽ˜์ด์ง€ ์‚ฌ์‹ค์ ์ด๊ณ  ๋ณต์žกํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜, ๋ Œ๋”๋ง, ๋งค๋ ฅ์ ์ธ ์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ด์…˜์„ ํ™œ์šฉํ•ด ์‚ฌ์šฉ์ž๋ฅผ ๋†€๋ผ๊ฒŒ ํ•˜๋Š” ํ™˜์ƒ์ ์ธ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“œ๋Š” ์ถ”์„ธ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“ŒํŠน์ดํ•œ ์‚ฝํ™”์™€ SVG ๋…ํŠนํ•œ ์‚ฝํ™”๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž์˜ ์‹œ์„ ์„ ์‚ฌ๋กœ์žก๊ณ , SVG(Scalable Vector Graphics)๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ๋””์Šคํ”Œ๋ ˆ์ด์— ํ’ˆ์งˆ ์ €ํ•˜ ์—†์ด ๋™์ผํ•œ ๊ทธ๋ž˜ํ”ฝ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜์„ธ์š”. ๐Ÿ“ŒUX ๋‹จ๊ณ„ ๋‹จ์ˆœํ™” ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ์— ๋„๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ๊ฑฐ์ณ์•ผ ํ•˜๋Š” ๋‹จ๊ณ„๋ฅผ ์ค„์ด์„ธ์š”. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ตœ์‹  UX ํŠธ๋ Œ๋“œ ์ค‘ ํ•˜๋‚˜๋Š” ์ „์ฒด ๊ฒฐ์ œ ๊ณผ์ •์„ ํ•œ ๋‹จ๊ณ„์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๐Ÿ“Œ์Šˆํผ ์•ฑ ์‹œ๋Œ€ ์„œ๊ตฌ ์†Œ๋น„์ž๋“ค์—๊ฒŒ๋Š” ์—ฌ์ „ํžˆ ๋‹จ์ผ ๋ชฉ์  ์•ฑ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ์ง€๋งŒ, ์•„์‹œ์•„์˜ ์†Œ๋น„์ž๋“ค์—๊ฒŒ๋Š” ํ•œ ์•ฑ์—์„œ ์‡ผํ•‘, ๋ฐฐ๋‹ฌ, ๋ฉ”์‹ ์ €, ๊ฒŒ์ž„, ์†ก๊ธˆ ๋“ฑ ๋ชจ๋“  ์„œ๋น„์Šค๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” '์Šˆํผ ์•ฑ'์ด ์ ์  ์ธ๊ธฐ๋ฅผ ์–ป๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ“Œ์˜จ๋ณด๋”ฉ ๊ฐœ์„  ํšจ๊ณผ์ ์ธ ์˜จ๋ณด๋”ฉ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์•ฑ์ด ๋ฌด์—‡์„ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ์•Œ๊ฒŒ ํ•˜๊ณ  ๊นŠ์€ ์ธ์ƒ์„ ๋‚จ๊ธฐ์„ธ์š”. ๐Ÿ“Œ๋ถˆ๋ณ€์˜ ํŠธ๋ Œ๋“œ : ๋น„ํ‰์ ์ธ ์‚ฌ๊ณ ์™€ ๋””์ž์ธ ๊ด€๋ จ์„ฑ ๋น„ํ‰์  ์‚ฌ๊ณ ์™€ ๋””์ž์ธ ๊ด€๋ จ์„ฑ์€ ์ ˆ๋Œ€ ์œ ํ–‰์ด ์ง€๋‚˜๊ฐ€์ง€ ์•Š์„ ๋ถˆ๋ณ€์˜ ํŠธ๋ Œ๋“œ์ž…๋‹ˆ๋‹ค. ๋ฌด์—‡์ธ๊ฐ€๊ฐ€ ํŠธ๋ Œ๋“œ๋ผ๋ฉด, ๊ทธ ๋’ค์—๋Š” ์ด๊ฒƒ์ด ์‚ด์•„๋‚จ์€ ์ด์œ ์™€ ๊ทธ๊ฒƒ๋งŒ์˜ ์ž‘๋™ ๋…ผ๋ฆฌ, ๊ฐœ๋ฐœ ๊ด€์ ์ด ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ ๋’ค์— ์žˆ๋Š” ๊ฒƒ์„ ์œ ์˜ ๊นŠ๊ฒŒ ์‚ดํ”ผ์„ธ์š”. โž• ํ•ญ๋ชฉ๋ณ„ ๊ตฌ์ฒด์ ์ธ ์ ์šฉ ์‚ฌ๋ก€์™€ ์œ ์˜ํ•ด์•ผ ํ•  ์ ์€ ์›๋ฌธ์— ์ž‘์„ฑ๋˜์–ด ์žˆ๊ธฐ์—(+์˜ค์—ญ์˜ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๊ธฐ์—) ๊ธฐ์‚ฌ๋ฅผ ๋ˆŒ๋Ÿฌ ๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์˜ค๋Š˜๋„ ์ฆ๊ฑฐ์šด ์„œ๋น„์Šค ๋˜์„ธ์š”:)

2021 UI/UX Design Trends and How To Make Them Work For You

Medium

2021 UI/UX Design Trends and How To Make Them Work For You

๋‹ค์Œ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

๋˜๋Š”

์ด๋ฏธ ํšŒ์›์ด์‹ ๊ฐ€์š”?

2021๋…„ 4์›” 18์ผ ์˜ค์ „ 10:44

๋Œ“๊ธ€ 4




๋น„์Šทํ•œ ๊ฒŒ์‹œ๋ฌผ

์ฃผ๊ฐ„ ์ธ๊ธฐ TOP 10

1

ํ•œ๊ธฐ์šฉ UpZen ์ฐฝ์—…์ž ๋Œ€ํ‘œ

์ข‹์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ์•„์•ผํ•˜๋Š” 9๊ฐ€์ง€ ํฌ์ธํŠธ๋“ค - ์‚ฌ๊ณ  ๋Œ€์ฒ˜ ๋Šฅ๋ ฅ ํ‚ค์šฐ

2

๊ถŒํƒœ๊ด€ NAVER ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด

API์˜ ์‘๋‹ต์„ ํ”„๋ก ํŠธ์—์„œ ์†์‰ฝ๊ฒŒ ๋ณ€๊ฒฝํ•˜๊ธฐ

3

๋ฅ˜ํ˜ธ์ค€ Senior SWE@Affirm. ex)Twitter, MS, Adobe

์ง์žฅ์—์„œ ๋‚˜๋ฅด์‹œ์ŠคํŠธ๋ฅผ ์ƒ๋Œ€ํ•˜๋Š” ๋ฐฉ๋ฒ•

4

์†ก์š”์ฐฝ ๋ฐฐ๋ฏผ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ๊ทธ๋ž˜๋จธ

๋ฐ˜๋ ค์ƒํ™œ์— ํ•ฉ๋ฅ˜ํ•˜๊ธฐ ์œ„ํ•œ ์—ฌ์ •

4

๊น€์˜์ค‘ ์œ„๋Œ€ํ•œ์ƒ์ƒ ๊ฐœ๋ฐœ์ž

Next.js ๊ฐœ๋ฐœ ์‹œ ์ž์ฃผ ๋งˆ์ฃผ์น˜๋Š” Hydration ์—๋Ÿฌ ์ดํ•ด

์ถ”์ฒœ ํ”„๋กœํ•„