UXUI ์ฃผ๊ฐ„ ์•„ํ‹ฐํด

๐Ÿ”– UXUI ํ•ด์™ธ ์ธ๊ธฐ ์•„ํ‹ฐํด

2022๋…„ 8์›” 3์ฃผ!

2022.08.18 | ์กฐํšŒ 1.43K |
0
|

from.designer

ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” UXUI ์ปค๋ฎค๋‹ˆํ‹ฐ

๐Ÿ”– 2022๋…„ 8์›” 3์ฃผ TOP3

  • ๋””์ง€ํ„ธ ์ œํ’ˆ ๋””์ž์ธ์€ ๋‹จ์ˆœํ•œ ์•„๋ฆ„๋‹ค์›€์ด ์•„๋‹™๋‹ˆ๋‹ค
  • ๋””์ž์ธ ์‹œ์Šคํ…œ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”? ์‹œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ„๋‹จํ•œ ๊ฐ€์ด๋“œ
  • ๋ชฉํ‘œ ์ง€ํ–ฅ์ ์ธ UX ๋ฆฌ์„œ์น˜

 1๏ธโƒฃ ๋””์ง€ํ„ธ ์ œํ’ˆ ๋””์ž์ธ์€ ๋‹จ์ˆœํ•œ ์•„๋ฆ„๋‹ค์›€์ด ์•„๋‹™๋‹ˆ๋‹ค

"์šฐ๋ฆฌ ๋Œ€๋ถ€๋ถ„์€ ๋””์ž์ธ์ด ๋ณด์ด๋Š” ๊ทธ๋Œ€๋กœ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์‹ค์ˆ˜๋ฅผ ํ•ฉ๋‹ˆ๋‹ค."์Šคํ‹ฐ๋ธŒ ์žก์Šค๊ฐ€ ๋งํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Š” "์‚ฌ๋žŒ๋“ค์€ ์ด๊ฒƒ์ด ๋ฒ ๋‹ˆ์–ดํŒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋””์ž์ด๋„ˆ์—๊ฒŒ ์ด ์ƒ์ž๋ฅผ ๊ฑด๋„ค์ฃผ๊ณ  '๋ฉ‹์ง€๊ฒŒ ๋งŒ๋“ค์–ด๋ผ!'๋ผ๊ณ  ๋งํ•˜๋Š” ๊ฒƒ์€ ์šฐ๋ฆฌ๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๋””์ž์ธ์ด ์•„๋‹™๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๋ณด์ด๋Š” ๊ฒƒ๊ณผ ๋Š๋ผ๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ๋””์ž์ธ์€ ์ž‘๋™ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.โ€

์ €๋Š” ์ˆ˜๋…„ ๋™์•ˆ ํ”„๋กœ๋•ํŠธ ๋ฐ UX ๋””์ž์ธ ๋ถ„์•ผ, ํŠนํžˆ 10๊ฐœ๊ตญ 4๊ฐœ ๋Œ€๋ฅ™์˜ ์†Œ๊ทœ๋ชจ ๊ธฐ์—…, ๊ธฐ์—…, ์‹ ์ƒ ๊ธฐ์—… ๋ฐ ์ •๋ถ€๋ฅผ ์œ„ํ•œ ๋””์ง€ํ„ธ ๋ถ„์•ผ์—์„œ ์ผํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์—ฌ์ •์„ ํ†ตํ•ด ๋‚˜๋Š” ๊ทธ๋“ค์˜ ๊ฒฝํ—˜๊ณผ ์ „๋ฌธ์„ฑ์— ๋”ฐ๋ผ ๋””์ž์ธ์„ ์ดํ•ดํ•˜๋Š” ๋‹ค์–‘ํ•œ ์‚ฌ๋žŒ๋“ค์„ ๋งŒ๋‚  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

โ˜๏ธ ํžŒํŠธ: ๋””์ž์ธ์€ ๊ด‘๋ฒ”์œ„ํ•œ ๊ฐœ๋…์ด๊ณ  ๊ทธ ์˜๋ฏธ๋Š” ๋ถ„์•ผ๋งˆ๋‹ค ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ œ๊ฐ€ ์ผํ–ˆ๋˜ ํŠน์ • ์˜์—ญ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ๋””์ž์ธ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

๋””์ž์ธ์˜ ๋ณธ์งˆ์— ๊ด€ํ•ด์„œ๋Š” ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. "์˜ค๋ธŒ์ ํŠธ, ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์‹œ์Šคํ…œ, ๊ฑด๋ฌผ, ์ฐจ๋Ÿ‰ ๋“ฑ์˜ ์ƒ์„ฑ์„ ๊ตฌ์ƒํ•˜๊ณ  ๊ณ„ํšํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ค‘์‹ฌ์ž…๋‹ˆ๋‹ค." ๋ผ๊ณ  ํŒŒ๋ฆฌ์— ์žˆ๋Š” ๋””์ž์ธํ•™๊ต Strate๊ฐ€ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ตญ์ œ ๋””์ž์ธ ํ˜‘์˜ํšŒ์— ๋”ฐ๋ฅธ ๋˜ ๋‹ค๋ฅธ ์ •์˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ–ˆ์Šต๋‹ˆ๋‹ค. "๋””์ž์ธ์€ ๋ฏธ์ , ๊ธฐ๋Šฅ์ , ๋งฅ๋ฝ์ , ๋ฌธํ™”์ , ์‚ฌํšŒ์  ๊ณ ๋ ค ์‚ฌํ•ญ์„ ๊ณ ๋ คํ•˜์—ฌ ์‚ฌ๋žŒ, ์ฆ‰ '์‚ฌ์šฉ์ž'์™€ ์ธ๊ณต ํ™˜๊ฒฝ ๊ฐ„์˜ ์ƒํ˜ธ ์ž‘์šฉ์— ์ดˆ์ ์„ ๋งž์ถ˜ ์—ฐ๊ตฌ ๋ฐ ์‹ค์Šต ๋ถ„์•ผ์ž…๋‹ˆ๋‹ค."

๊ทธ๋ฆฌ๊ณ  ์•„๋ฆ„๋‹ค์›€์ด๋ž€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์˜ฅ์Šคํฌ๋“œ ์‚ฌ์ „์—์„œ ์ •์˜ํ•œ ์•„๋ฆ„๋‹ค์›€์ด๋ž€ ๋ฌด์—‡์„ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ? : "์•„๋ฆ„๋‹ค์›€์€ ๋ฏธ์  ๊ฐ๊ฐ, ํŠนํžˆ ์‹œ๊ฐ์„ ์ฆ๊ฒ๊ฒŒ ํ•˜๋Š” ๋ชจ์–‘, ์ƒ‰์ƒ ๋˜๋Š” ํ˜•ํƒœ์™€ ๊ฐ™์€ ํŠน์„ฑ์˜ ์กฐํ•ฉ์ž…๋‹ˆ๋‹ค."

๋””์ง€ํ„ธ ํ”„๋กœ๋•ํŠธ ๋ฐ UX ๋””์ž์ธ์€ ์ปจํ…์ŠคํŠธ, ์ง„์ •์„ฑ, ์‚ฌ์šฉ์„ฑ, ์—…๋ฌด ์ˆ˜ํ–‰, ์‹ฌ๋ฆฌํ•™, ๋น„์ฆˆ๋‹ˆ์Šค, ์ „๋žต, ๋งˆ์ผ€ํŒ…, ์ง€์›, ์˜์—… ๋“ฑ์— ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ์›น ์‚ฌ์ดํŠธ, ๋ชจ๋ฐ”์ผ ์•ฑ, ์…€ํ”„ ์„œ๋น„์Šค ํ‚ค์˜ค์Šคํฌ ๋“ฑ ์œ ํ˜•์˜ ํ”„๋กœ๋•ํŠธ๋กœ ์ด์–ด์ง€๋Š” ๊ฐ ๋‹จ๊ณ„์˜ ๋งŽ์€ ํ™œ๋™์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

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

๋ธŒ๋žœ๋“œ ๊ฐ€์ด๋“œ๋ผ์ธ ๋‹ค์Œ์€ Bynder๊ฐ€ ์ •์˜ํ•œ ๋ธŒ๋žœ๋“œ๊ฐ€์ด๋“œ ๋ผ์ธ ์ž…๋‹ˆ๋‹ค "๋ธŒ๋žœ๋“œ ๊ฐ€์ด๋“œ๋ผ์ธ์€ ๋ธŒ๋žœ๋“œ๊ฐ€ ์„ธ์ƒ์— ์–ด๋–ป๊ฒŒ ํ‘œํ˜„๋˜์–ด์•ผ ํ•˜๋Š”์ง€๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜๋œ ๊ทœ์น™๊ณผ ํ‘œ์ค€์ž…๋‹ˆ๋‹ค."

..๐Ÿ‘‡ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์›๋ฌธ์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”.


2๏ธโƒฃ ๋””์ž์ธ ์‹œ์Šคํ…œ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”? ์‹œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ„๋‹จํ•œ ๊ฐ€์ด๋“œ

๋””์ž์ธ ์‹œ์Šคํ…œ์€ ํ”„๋กœ๋•ํŠธ ๊ฒฝํ—˜์˜ ์ผ๊ด€์„ฑ์„ ํ™•๋ฆฝํ•ด์•ผ ํ•˜๋Š” ์ง€์นจ๊ณผ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ตฌ์„ฑ ์š”์†Œ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋””์ž์ธ ์‹œ์Šคํ…œ์˜ ๋ชฉํ‘œ๋Š” ํŒ€์—์„œ ๋ณผ ์ˆ˜ ์žˆ๊ณ  ์œ ์ง€ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋‹จ์ผ ์ •๋ณด ์†Œ์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๋ชจ๋“  ํŒ€์— ๋””์ž์ธ ์‹œ์Šคํ…œ์ด ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ฐœ์ธ์ ์ธ ๊ฒฝํ—˜์— ๋”ฐ๋ฅด๋ฉด ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž๋Š” ์ข…์ข… ์‹œ์Šคํ…œ ์—†์ด๋Š” ์ž˜๋ชป๋œ ์˜์‚ฌ ์†Œํ†ต์„ ํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์„ธ์Šค์—๋Š” ์‹œ๊ฐ„๊ณผ ๋…ธ๋ ฅ์ด ํ•„์š”ํ•˜์ง€๋งŒ ํ”„๋กœ๋•ํŠธ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์†๋„๋ฅผ ๋†’์ด๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ์ผ๋ จ์˜ ๊ทœ์น™๊ณผ ์›์น™์„ ์ œ์‹œํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋งค์šฐ ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค. ์ด ๊ธฐ์‚ฌ์—์„œ๋Š” ๋””์ž์ธ ์‹œ์Šคํ…œ ํ”„๋กœ์„ธ์Šค์˜ ์ฃผ์š” ๋‹จ๊ณ„๋ฅผ ๋‹ค๋ฃจ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ์ด ์›Œํฌํ”Œ๋กœ์˜ ๊ฐ„๋‹จํ•œ ๋‹ค์ด์–ด๊ทธ๋žจ์ž…๋‹ˆ๋‹ค.

๊ธฐ์ดˆ

์ด๊ฒƒ์€ ๋””์ž์ธํ•  ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ์™€ ๋ ˆ์ด์•„์›ƒ์—์„œ ์‚ฌ์šฉ๋  ๊ทœ์น™ ๋˜๋Š” ์ง€์นจ์˜ ๋ชจ์Œ์ž…๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ด ๋ชฉ๋ก์€ ์ƒ‰์ƒ, ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ, ์•„์ด์ฝ˜๊ทธ๋ž˜ํ”ผ, ๊ฒฉ์ž, ๊ฐ„๊ฒฉ, ์ ‘๊ทผ์„ฑ ์ฒดํฌ๋ฆฌ์ŠคํŠธ, ํ…Œ๋งˆ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.

์ƒ‰์ƒ

์ด๊ฒƒ์€ ํ”„๋กœ๋•ํŠธ ๊ฐœ์„ฑ์˜ ๊ธฐ์ดˆ์ด์ž UI ๋””์ž์ธ์˜ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ถ€๋ถ„ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๋””์ž์ด๋„ˆ๊ฐ€ ์ œ์‹œํ•ด์•ผ ํ•˜๋Š” ๋งŽ์€ ์ˆ˜์˜ UI ์ƒํƒœ๋Š” ๋‹ค์–‘ํ•œ ์ƒ‰์ƒ, ์Œ์˜ & ์ƒ‰์กฐ๊ฐ€ ํฌํ•จ๋œ ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ๋ฅผ ์ง€์›ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ƒ‰์ƒ ํŒ”๋ ˆํŠธ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋‹จ๊ณ„:

1. ์ƒ‰์ƒ์— ์˜ฌ๋ฐ”๋ฅธ ์ด๋ฆ„ ์‚ฌ์šฉ ์˜ˆ๋ฅผ ๋“ค์–ด ๊ธฐ๋ณธ ์ƒ‰์ƒ์—๋Š” ๊ธฐ๋ณธ, ๋ณด์กฐ์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์  ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜๊ณ  ์˜ค๋ฅ˜/๊ฒฝ๊ณ /์„ฑ๊ณต๊ณผ ๊ฐ™์€ ๋ช…ํ™•ํ•œ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜๊ณ  ์ƒ‰์ƒ ์Œ์˜/์ƒ‰์กฐ์—๋Š” ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด ๋‹ค์–‘ํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. Primary-50/Primary-100๊ณผ ๊ฐ™์ด ์ˆซ์ž ์Šค์ผ€์ผ์ด ์žˆ๋Š” ์ด๋ฆ„.

2. ์ƒ‰์ƒ์„ ๊ทธ๋ฃน/ํด๋”๋กœ ๊ตฌ์„ฑ Figma์—์„œ๋Š” ์ƒ‰์ƒ์„ ํด๋”๋กœ ๊ตฌ์„ฑํ•˜์—ฌ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์‰ฝ๊ฒŒ ์ฐพ๊ณ  ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3. ๋ฌธ์„œ ์ƒ‰์ƒ ์ ‘๊ทผ์„ฑ ๋‹ค์Œ์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์„œ๋ฅผ ์ค€๋น„ํ•˜์„ธ์š”: ์ƒ‰์ƒ ์ด๋ฆ„ & ๊ฐ’, ์ „๊ฒฝ์ƒ‰, ๋ช…์•”๋น„, ์ ‘๊ทผ์„ฑ ์ˆ˜์ค€, ์ƒ‰์กฐ/์Œ์˜. ๊ธ€์ž์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ์ƒ‰์˜ ๋Œ€๋น„๊ฐ€ ์ž˜ ๋˜์–ด ๊ธ€์ž์˜ ๊ฐ€๋…์„ฑ์ด ์œ ์ง€๋˜๋ฏ€๋กœ ์–‘์‹, ๋ฒ„ํŠผ, ๊ธ€์ž ๋“ฑ ์ฃผ์š” UI ์š”์†Œ์˜ ๋ช…์•”๋น„๊ฐ€ 4.5:1 ์ด์ƒ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. WCAG(์›น ์ฝ˜ํ…์ธ  ์ ‘๊ทผ์„ฑ ์ง€์นจ) 2.1 ์„ ํ™•์ธํ•˜์—ฌ ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ ๊ธฐ๋ณธ ์ˆ˜์ค€์—์„œ WCAG 2.1 ์ง€์นจ์€ ์„ธ ๊ฐ€์ง€ ์ˆ˜์ค€ ๊ทธ๋ฃน์œผ๋กœ ๋ถ„๋ฅ˜๋ฉ๋‹ˆ๋‹ค.

A๋ ˆ๋ฒจ: ๋‚ฎ์€ ์ฝ˜ํŠธ๋ผ์ŠคํŠธ. ํ…์ŠคํŠธ์— ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ค‘์š”ํ•˜์ง€ ์•Š์€ ์š”์†Œ/์žฅ์‹์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. AA ์ˆ˜์ค€: ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ชจ๋“  UI ์š”์†Œ(ํ…์ŠคํŠธ, ๋ฒ„ํŠผ, ์–‘์‹ ๋“ฑ)์— ๋Œ€ํ•œ ์ตœ์†Œ ์ ‘๊ทผ์„ฑ ์ˆ˜์ค€. AAA ๋ ˆ๋ฒจ: ๊ณ ๋Œ€๋น„ โ€” 7:1 ์ด์ƒ. ์ตœ๊ณ  ์ˆ˜์ค€์˜ ์ ‘๊ทผ์„ฑ. ํ•„์ˆ˜๋Š” ์•„๋‹ˆ์ง€๋งŒ ์žˆ์œผ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

์ ‘๊ทผ์„ฑ ๋ชจ๋ฒ” ์‚ฌ๋ก€:

  • ํฐ ํ…์ŠคํŠธ(> 19px)๋Š” ๋ช…์•”๋น„๊ฐ€ 3:1 ์ด์ƒ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์ผ๋ฐ˜ ํ…์ŠคํŠธ(< 19ํ”ฝ์…€) & ์•„์ด์ฝ˜์€ ์ตœ์†Œ 4.5:1์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • Figma ํ”Œ๋Ÿฌ๊ทธ์ธ ๋˜๋Š” ์›น ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ˆ˜๋™์œผ๋กœ ์ƒ‰์ƒ ๋Œ€๋น„ ํ…Œ์ŠคํŠธ
  • ๋‹คํฌ ๋ชจ๋“œ์—์„œ ์•ฑ ํ…Œ์ŠคํŠธ

..๐Ÿ‘‡ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์›๋ฌธ์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”.


3๏ธโƒฃ  ๋ชฉํ‘œ ์ง€ํ–ฅ์ ์ธ UX ๋ฆฌ์„œ์น˜

UX ์—ฐ๊ตฌ ๋ฐฉ๋ฒ•๋ก 

์ž˜ ์•Œ๋ ค์ง„ UX ์—ฐ๊ตฌ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ์ž ์ค‘์‹ฌ ์„ค๊ณ„
  • ๋ชฉํ‘œ ์ง€ํ–ฅ ์„ค๊ณ„
  • ํ™œ๋™ ์ค‘์‹ฌ ์„ค๊ณ„

๋‹ค์Œ์—์„œ 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.

์‚ฌ์šฉ์ž ์ค‘์‹ฌ ๋””์ž์ธ, ํ™œ๋™ ์ค‘์‹ฌ ๋””์ž์ธ ๋ฐ ๋ชฉํ‘œ ์ง€ํ–ฅ ๋””์ž์ธ: Ashley Williams์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋””์ž์ธ์„ ์œ„ํ•œ ์„ธ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊ฒ€ํ† ์ž…๋‹ˆ๋‹ค.

์ด ๊ธฐ์‚ฌ์—์„œ๋Š” ๋ชฉํ‘œ ์ง€ํ–ฅ ๋””์ž์ธ๋งŒ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

  • ๊ทธ ๊ธฐ์›๊ณผ ๋ฐœ์ „
  • ํ”„๋กœ์„ธ์Šค ๋ฐ ํ™œ๋™
  • ๊ฒฐ๊ณผ๋ฌผ

๋ชฉํ‘œ ์ง€ํ–ฅ์ ์ธ ๋””์ž์ธ

๋ชฉํ‘œ ์ง€ํ–ฅ์ ์ธ ๋””์ž์ธ์€ 1983๋…„์—์„œ 2000๋…„ ์‚ฌ์ด์— Alan Cooper์— ์˜ํ•ด ์‹ค์ œ ์„ธ๊ณ„์—์„œ์˜ ์—ฐ์Šต์„ ํ†ตํ•ด ๊ฐœ๋ฐœ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ์„ธ์Šค ๋ฐ ํ™œ๋™

๋ชฉํ‘œ ์ง€ํ–ฅ์ ์ธ ๋””์ž์ธ์€ 6๊ฐœ์˜ ํ™œ๋™์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์œผ๋ฉฐ, ๊ฐ ํ™œ๋™์€ ๋‹ค๋ฅธ ๋ชฉํ‘œ๋ฅผ ๊ฐ€์ง„ ์งˆ์  ์—ฐ๊ตฌ๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. (์•จ๋Ÿฐ์€ ์งˆ์  ๋ฐ์ดํ„ฐ์— ๊ฐ•ํ•œ ์• ์ •์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค. ) ๋ชฉํ‘œ ์ง€ํ–ฅ์  ๋””์ž์ธ์˜ 6๊ฐ€์ง€ ํ™œ๋™

โžŠ ์‹œ์ž‘ ํšŒ์˜: ๋””์ž์ด๋„ˆ๋“ค๊ณผ ์ดํ•ด๊ด€๊ณ„์ž๋“ค์ด ํ•œ์ž๋ฆฌ์— ๋ชจ์—ฌ ํ”ผ์นด๋ฅผ ๋จน๊ณ  ํœด์‹์„ ์ทจํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋“ค์€ ๋‹ค์Œ์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.

  • ์ œํ’ˆ์€ ๋ฌด์—‡์ด๋ฉฐ ๋ฌด์—‡์„ ํ•ฉ๋‹ˆ๊นŒ?
  • ๋ˆ„๊ฐ€, ์™œ ์‚ฌ์šฉํ• ๊นŒ์š”?
  • ๋ชฉํ‘œ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
  • ๊ฒฝ์Ÿ์ž๋Š” ๋ˆ„๊ตฌ์ด๋ฉฐ ๊ทธ ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
  • ๋ฆฌ์†Œ์Šค์™€ ๋กœ๋“œ๋งต์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
  • โ€ฆ (ํŒ€์ด ํ•„์š”์— ๋”ฐ๋ผ ๋” ๋งŽ์ด)

โž‹ ๋ฌธํ—Œ ๊ฒ€ํ† : ์ง„์ •ํ•˜์„ธ์š”, ๋‹น์‹ ์˜ ๋…ผ๋ฌธ์— ๋Œ€ํ•œ ๋ฌธํ—Œ ๋ฆฌ๋ทฐ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์œ ์šฉํ•œ ์ •๋ณด

  • ๋‚ด๋ถ€ ๋ฌธ์„œ: ์ œํ’ˆ ๋งˆ์ผ€ํŒ… ๊ณ„ํš, ๋ธŒ๋žœ๋“œ ์ „๋žต, ์‹œ์žฅ ์กฐ์‚ฌ ์กฐ์‚ฌ, ์‚ฌ์šฉ์ž ์„ค๋ฌธ ์กฐ์‚ฌ, ๊ฒฝ์Ÿ ์กฐ์‚ฌ, ์‚ฌ์šฉ์„ฑ ์กฐ์‚ฌ ๋ฐ ์ง€ํ‘œ, Zendesk ๋ฐ์ดํ„ฐ, ๋ธŒ๋ ˆ์ด์ฆˆ ๋ฐ์ดํ„ฐ, ์‚ฌ์šฉ์ž ํฌ๋Ÿผ ์•„์นด์ด๋ธŒ ๋ฐ ์‚ฌ์šฉ์ž ๋ฆฌ๋ทฐ์™€ ๊ฐ™์€ ๊ณ ๊ฐ ์ง€์› ๋ฐ์ดํ„ฐ. (๊ท€ํ•˜์˜ ์กฐ์ง์— ์–ด๋–ค ์œ ์šฉํ•œ ๋ฆฌ์†Œ์Šค๊ฐ€ ์žˆ๋Š”์ง€ ํƒ์ƒ‰ํ–ˆ์Šต๋‹ˆ๋‹ค. )
  • ์‚ฐ์—… ๋ณด๊ณ ์„œ: ๋น„์ฆˆ๋‹ˆ์Šค ๋ฐ ๊ธฐ์ˆ  ์ €๋„ ๊ธฐ์‚ฌ.
  • ์‚ฌ์šฉ์ž ๋ณด๊ธฐ์™€ ๊ฐ™์€ ๊ฒฝ์Ÿ์‚ฌ์˜ ๋ฆฌ์†Œ์Šค.

โžŒ ์ œํ’ˆ/์‹œ์ œํ’ˆ ๋ฐ ๊ฒฝ์Ÿ ์‹ฌ์‚ฌ: ์‚ฌ์‹ค ์ดํ•ด๊ด€๊ณ„์ž ์ธํ„ฐ๋ทฐ ๋ฐ SME(Subject Matter Expert) ์ธํ„ฐ๋ทฐ ์ด์ „ ๋˜๋Š” ๋ณ‘ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ˆ˜ํ–‰ํ•  ์‚ฌํ•ญ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ํ˜„์žฌ ๋””์ž์ธ๊ณผ ๊ฒฝ์Ÿ์—…์ฒด์˜ ์ œํ’ˆ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋ชจ๋‘ ๊ฒ€์‚ฌํ•˜๊ธฐ ์œ„ํ•œ ํœด๋ฆฌ์Šคํ‹ฑ ๊ฒ€ํ† . ์ƒํ˜ธ ์ž‘์šฉ ๋ฐ ์‹œ๊ฐ์  ๋””์ž์ธ ์›์น™์— ๋Œ€ํ•ด ๊ฐ๊ฐ์„ ๋ฒค์น˜๋งˆํ‚นํ•˜๊ณ  ๋น„๊ตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๊ฒฝ์Ÿ์—…์ฒด์™€ ๋น„๊ตํ•˜์—ฌ ์„ค๊ณ„ ์†”๋ฃจ์…˜์˜ ๊ฐ•์ ๊ณผ ํ•œ๊ณ„๋ฅผ ํ™•์ธํ•˜์„ธ์š”.
  • ํ˜„์žฌ ๊ธฐ๋Šฅ์˜ ๋ฒ”์œ„๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.

โž ์ดํ•ด๊ด€๊ณ„์ž ์ธํ„ฐ๋ทฐ ์‚ฌ์šฉ์ž ์กฐ์‚ฌ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ์ œํ’ˆ ํŒ€์˜ ๊ธฐ๋Šฅ๊ณผ ํ•œ๊ณ„์— ๋Œ€ํ•ด ๋ช…ํ™•ํ•˜๊ฒŒ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ์ž„์›, ๊ด€๋ฆฌ์ž, ์—”์ง€๋‹ˆ์–ด ๋‹ด๋‹น์ž, ์˜์—… ๋‹ด๋‹น์ž, CRM ๋“ฑ๊ณผ ๊ฐ™์€ ์ฃผ์š” ๊ตฌ์„ฑ์›์—๊ฒŒ ์—ฐ๋ฝํ•˜์„ธ์š”.
  • ์ดํ•ด ๊ด€๊ณ„์ž์™€ "๋ณ„๋„"๋ฅผ ๋งŒ๋‚˜์„ธ์š”. ์ผ๋Œ€์ผ ์„ค์ •์€ ์ดํ•ด ๊ด€๊ณ„์ž์˜ ์†”์งํ•จ์„ ์ด‰์ง„ํ•˜๊ณ  ๊ตฐ์ค‘ ์†์—์„œ ๊ฐœ์ธ์˜ ๊ฒฌํ•ด๋ฅผ ์žƒ์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ๋งน์ธ๊ณผ ์ฝ”๋ผ๋ฆฌ์˜ ์šฐํ™”์ฒ˜๋Ÿผ ์‚ฌ์—…๋ถ€๋งˆ๋‹ค ๋””์ž์ธํ•  ์ œํ’ˆ์— ๋Œ€ํ•œ ๊ด€์ ์ด ์•ฝ๊ฐ„ ๋‹ค๋ฅด๊ณ  ์•ฝ๊ฐ„ ๋ถˆ์™„์ „ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์งˆ๋ฌธ: ์˜ˆ๋น„ ์ œํ’ˆ ๋น„์ „, ์˜ˆ์‚ฐ ๋ฐ ์ผ์ •, ๊ธฐ์ˆ  ์ œ์•ฝ ๋ฐ ๊ธฐํšŒ, ๋น„์ฆˆ๋‹ˆ์Šค ๋ชฉํ‘œ, ๋กœ๋“œ๋งต ๋ฐ ์‚ฌ์šฉ์ž ๋ฆฌ์†Œ์Šค

..๐Ÿ‘‡ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์›๋ฌธ์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

๐ŸŽ„from.designer 

ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” UXUI ์ปค๋ฎค๋‹ˆํ‹ฐ from.designer ๋Š” ๋‹ค์–‘ํ•œ ์‚ถ์˜ ๊ฒฝํ—˜ ๊ณต์œ ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ UXUI ์Šคํ„ฐ๋””, ํŠน๊ฐ•, ๋ถํด๋Ÿฝ ๋“ฑ ๋‹ค์–‘ํ•œ ํ”„๋กœ๊ทธ๋žจ์„ ์šด์˜ํ•˜๋Š” ๋””์ž์ด๋„ˆ ์ค‘์‹ฌ์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ์ž…๋‹ˆ๋‹ค. ๋””์ž์ธ, ๋””์ž์ด๋„ˆ์— ๊ด€์‹ฌ์žˆ๋Š” ๋ˆ„๊ตฌ๋‚˜ ์ฐธ์—ฌ ๊ฐ€๋Šฅํ•œ ์˜คํ”ˆ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.


๐Ÿ—“๏ธ
ํ–‰์‚ฌ ์ผ์ • & UXUI ์ž๋ฃŒ 

๋””์ž์ด๋„ˆ ๊ณต์œ , UXUI ์Šคํ„ฐ๋”” ์ฐธ๊ด€, UX ๋ฐœํ‘œ์ž๋ฃŒ ๊ณต์œ ๋“ฑ ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ๋…ธ์…˜์—์„œ ํ™•์ธํ•˜์„ธ์š”.

๐Ÿ’ญ ๋‹จํ†ก๋ฐฉ ๊ฐ€์ž…๋ฌธ์˜  (2,070๋ช…)

๐ŸŽฅ ์œ ํŠœ๋ธŒ UXUI ์ž๋ฃŒ ์˜์ƒ  

๐Ÿ”– ์ด๋ฉ”์ผ 

๐Ÿ“ SNS   @from.designer ํŽ˜์ด์Šค๋ถ , ์ธ์Šคํƒ€๊ทธ๋žจ
 




 

๋‹ค๊ฐ€์˜ฌ ๋‰ด์Šค๋ ˆํ„ฐ๊ฐ€ ๊ถ๊ธˆํ•˜์‹ ๊ฐ€์š”?

์ง€๊ธˆ ๊ตฌ๋…ํ•ด์„œ ์ƒˆ๋กœ์šด ๋ ˆํ„ฐ๋ฅผ ๋ฐ›์•„๋ณด์„ธ์š”

โœ‰๏ธ

์ด๋ฒˆ ๋‰ด์Šค๋ ˆํ„ฐ ์–ด๋– ์…จ๋‚˜์š”?

from.designer ๋‹˜์—๊ฒŒ โ˜•๏ธ ์ปคํ”ผ์™€ โœ‰๏ธ ์ชฝ์ง€๋ฅผ ๋ณด๋‚ด๋ณด์„ธ์š”!

๋Œ“๊ธ€

์˜๊ฒฌ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”

ํ™•์ธ
์˜๊ฒฌ์ด ์žˆ์œผ์‹ ๊ฐ€์š”? ์ œ์ผ ๋จผ์ € ๋Œ“๊ธ€์„ ๋‹ฌ์•„๋ณด์„ธ์š” !
ยฉ 2024 from.designer

ํ•จ๊ป˜ ์„ฑ์žฅํ•˜๋Š” UXUI ์ปค๋ฎค๋‹ˆํ‹ฐ

๋‰ด์Šค๋ ˆํ„ฐ ๋ฌธ์˜from.ddesigner@gmail.com

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ ์„œ๋น„์Šค ์†Œ๊ฐœ์„œ ์˜ค๋ฅ˜ ๋ฐ ๊ธฐ๋Šฅ ๊ด€๋ จ ์ œ๋ณด

์„œ๋น„์Šค ์ด์šฉ ๋ฌธ์˜admin@team.maily.so

๋ฉ”์ผ๋ฆฌ ์‚ฌ์—…์ž ์ •๋ณด

๋ฉ”์ผ๋ฆฌ (๋Œ€ํ‘œ์ž: ์ดํ•œ๊ฒฐ) | ์‚ฌ์—…์ž๋ฒˆํ˜ธ: 717-47-00705 | ์„œ์šธ ์„œ์ดˆ๊ตฌ ๊ฐ•๋‚จ๋Œ€๋กœ53๊ธธ 8, 8์ธต 11-7ํ˜ธ

์ด์šฉ์•ฝ๊ด€ | ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ | ์ •๊ธฐ๊ฒฐ์ œ ์ด์šฉ์•ฝ๊ด€