Search
Duplicate

UI / UX

์ƒ์„ฑ์ผ
2023/03/27 00:42
ํƒœ๊ทธ
WEB

UI (User Interface) / UX (User Experience)

ย UI (User Interface)์™€ UI Design

โ€ข
UI(User Interface)๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ๋งˆ์ฃผํ•˜๋Š” ๋””์ž์ธ, ๋ ˆ์ด์•„์›ƒ ๋“ฑ์„ ์•„์šฐ๋ฅด๋Š” ๊ฐœ๋…์ด๋‹ค.
โ€ข
์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญํ•˜๋Š” ๋ฒ„ํŠผ, ์ฝ๋Š” ํ…์ŠคํŠธ, ์ด๋ฏธ์ง€, ์Šฌ๋ผ์ด๋”, ํ…์ŠคํŠธ ์ž…๋ ฅ์ฐฝ ๋“ฑ ์‚ฌ์šฉ์ž๊ฐ€ ์ƒํ˜ธ์ž‘์šฉ ํ•˜๋Š” ๋ชจ๋“  ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.
โ€ข
UI Design์€ UI์˜ ๋ชจ์–‘๊ณผ ์ž‘๋™ ๋ฐฉ์‹์„ ๋””์ž์ธํ•˜๋Š” ํ”„๋กœ์„ธ์Šค์ด๋‹ค.
โ€ข
์ƒ‰์ƒ ๋ฐ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ์—์„œ ๋ฒ„ํŠผ, ์Šคํฌ๋กค ๊ธฐ๋Šฅ, ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ์ „ํ™˜ ๋“ฑ์— ์ด๋ฅด๊ธฐ๊นŒ์ง€ ์›น ์‚ฌ์ดํŠธ, ์†Œํ”„ํŠธ์›จ์–ด ๋ฐ ์•ฑ์˜ ๋ชจ๋“  ์‹œ๊ฐ์  ๋ฐ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•œ ์†์„ฑ์„ ๋””์ž์ธํ•œ๋‹ค.
โ€ข
๋”ฐ๋ผ์„œ UI Designer๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.
โ€ข
์ œํ’ˆ์˜ ๋ชจ์–‘๊ณผ ๋Š๋‚Œ : ๊ณ ๊ฐ ๋ถ„์„, ๋””์ž์ธ ์—ฐ๊ตฌ, ๋ธŒ๋žœ๋”ฉ ๋ฐ ๊ทธ๋ž˜ํ”ฝ ๊ฐœ๋ฐœ, ์‚ฌ์šฉ์ž ๊ฐ€์ด๋“œ ๋ฐ ์Šคํ† ๋ฆฌ๋ผ์ธ
โ€ข
๋ฐ˜์‘์„ฑ ๋ฐ ์ƒํ˜ธ์ž‘์šฉ์„ฑ : UI ํ”„๋กœํ† ํƒ€์ดํ•‘, ์ƒํ˜ธ์ž‘์šฉ ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜, ๋ชจ๋“  ์žฅ์น˜ ํ™”๋ฉด ํฌ๊ธฐ์— ๋งž๊ฒŒ ์กฐ์ •, ๊ฐœ๋ฐœ์ž์™€ ํ•จ๊ป˜ ๊ตฌํ˜„

ย UX (User Experience)์™€ UX Design

โ€ข
UX (User Experience)๋ผ๋Š” ๋‹จ์–ด๋Š” ์‚ฌ๋žŒ๊ณผ ์ปดํ“จํ„ฐ์˜ ์ƒํ˜ธ์ž‘์šฉ์— ๊ด€ํ•œ ๋‹ค์–‘ํ•œ ์ฃผ์ œ๋ฅผ ์—ฐ๊ตฌํ•˜๋Š” ํ•™๋ฌธ์ธ HCI(Human Computer Interaction)์—์„œ ์‚ฌ์šฉ์ž ์ค‘์‹ฌ ๋””์ž์ธ(User Centered Design)์„ ์„ค๋ช…ํ•  ๋•Œ ์–ธ๊ธ‰๋˜์—ˆ์œผ๋ฉฐ <The Design of Everyday Things>์„ ๊ธฐ์ˆ ํ•œ ์ธ์ง€์‹ฌ๋ฆฌํ•™์ž ๋„๋„๋“œ ๋…ธ๋จผ(Donald Norman, 1935~ )์ด 1993๋…„ ์• ํ”Œ ์ปดํ“จํ„ฐ์˜ ๋ถ€์‚ฌ์žฅ ์žฌ์ง ๋‹น์‹œ ์ž์‹ ์˜ ์งํ•จ์„ โ€˜User experience architectโ€™๋กœ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ UX๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ์•Œ๋ ค์ง€๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.
โ€ข
UX (User Experience) ์ฆ‰, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์€ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ์‹œ์Šคํ…œ, ์„œ๋น„์Šค, ์ œํ’ˆ ๋“ฑ์„ ์ง๊ฐ„์ ‘์ ์œผ๋กœ ์ด์šฉํ•˜๋ฉด์„œ ๋Š๋ผ๋Š” ์ด์ฒด์  ๊ฒฝํ—˜์ด๋‹ค.
โ€ข
์„œ๋น„์Šค์˜ UI๊ฐ€ ์ง๊ด€์ ์ด๊ณ  ๋ช…ํ™•ํ•œ์ง€, ์ ˆ์ฐจ๊ฐ€ ๋ณต์žกํ•˜์ง€๋Š” ์•Š์€ ์ง€์™€ ๊ฐ™์€ ์ง์ ‘์ ์ธ ๊ฒฝํ—˜์€ ๋ฌผ๋ก  ์„œ๋น„์Šค์— ๋Œ€ํ•œ ์ ‘๊ทผ์„ฑ์ด๋‚˜ ์˜ค๋ฅ˜์— ๋Œ€ํ•œ ์‚ฌํ›„์ฒ˜๋ฆฌ ๋“ฑ ๋ชจ๋“  ๊ฒฝํ—˜์„ ํฌํ•จํ•œ๋‹ค.
โ€ข
UX Design์€ ์ด๋Ÿฌํ•œ ๊ฒฝํ—˜์˜ ์ „๋ฐ˜์ ์ธ ๋Š๋‚Œ์„ ๋””์ž์ธ ํ•ด์•ผํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ํŠน์ • ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ์ž์˜ ์ „์ฒด ์—ฌ์ •์„ ๊ณ ๋ คํ•ด์•ผํ•œ๋‹ค.
โ€ข
๋‹คํ•™์ œ์ ์ธ ์„ฑ๊ฒฉ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ์‹ฌ๋ฆฌํ•™, ์ธ๋ฅ˜ํ•™, ์ปดํ“จํ„ฐ๊ณตํ•™, ๋งˆ์ผ€ํŒ…, ๊ทธ๋ž˜ํ”ฝ ๋””์ž์ธ ๋ฐ ์‚ฐ์—… ๋””์ž์ธ ๋ถ„์•ผ์™€ ๊นŠ์€ ๊ด€๋ จ์„ ๋งบ๊ณ  ์žˆ๋‹ค.
โ€ข
UX Designer์˜ ์ฃผ์š” ์—ญํ• ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค,
โ—ฆ
์ „๋žต ๋ฐ ์ปจํ…์ธ  : ๊ฒฝ์Ÿ์‚ฌ ๋ถ„์„, ๊ณ ๊ฐ ๋ถ„์„ ๋ฐ ์‚ฌ์šฉ์ž ์กฐ์‚ฌ, ์ œํ’ˆ ๊ตฌ์กฐ ๋ฐ ์ „๋žต, ์ฝ˜ํ…์ธ  ๊ฐœ๋ฐœ
โ—ฆ
์™€์ด์–ดํ”„๋ ˆ์ž„ ๋ฐ ํ”„๋กœํ† ํƒ€์ดํ•‘ : ์™€์ด์–ดํ”„๋ ˆ์ž„, ํ”„๋กœํ† ํƒ€์ดํ•‘, ํ…Œ์ŠคํŠธ ๋ฐ ๋ฐ˜๋ณต, ๊ฐœ๋ฐœ ๊ณ„ํš
โ—ฆ
์‹คํ–‰ ๋ฐ ๋ถ„์„ : UI ๋””์ž์ด๋„ˆ์™€์˜ ์กฐ์œจ, ๊ฐœ๋ฐœ์ž์™€์˜ ์กฐ์ •, ๋ชฉํ‘œ ์ถ”์  ๋ฐ ํ†ตํ•ฉ, UX ๋ถ„์„ ๋ฐ ํ…Œ์ŠคํŠธ

ย UI์™€ UX์˜ ๊ด€๊ณ„

โ€ข
UI์™€ UX๋Š” ๊ธด๋ฐ€ํ•˜๊ฒŒ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ๊ด€๊ณ„์ด๋‹ค. UX๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์œ ์ €๋“ค์˜ ๋‹ˆ์ฆˆ๋ฅผ ํŒŒ์•…ํ•˜์—ฌ UI๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฐœ์„ ๋œ UI๋Š” UX ๋งŒ์กฑ๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ๋‹ค.
โ€ข
๊ทธ๋Ÿฌ๋‚˜ UI์™€ UX์˜ ๋ฐœ์ „ ๋ฐฉํ–ฅ์„ฑ์ด ํ•ญ์ƒ ์ผ์น˜ํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ๋Œ€ํฌ์ ์ธ ์˜ˆ๋กœ MAC OS๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI) ๊ด€์ ์—์„œ ๋ณดํŽธ์„ฑ์ด ๋–จ์–ด์ ธ ๋ถˆํŽธํ•จ์„ ์ดˆ๋ž˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Š” ์ƒˆ๋กญ๊ณ  ํŽธ๋ฆฌํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX)์„ ๋งŒ๋“ค์–ด๋‚ธ๋‹ค.

ย ref)