๐ŸŽจ ๋ ˆ๋ฒจ๋กœ๊ทธ์˜ UI/UX ๊ฐœ์„ ๊ธฐ

thumb_hyeokยท2022๋…„ 10์›” 26์ผ
2

๐Ÿ”ฅ WoowaCourse

๋ชฉ๋ก ๋ณด๊ธฐ
8/10
post-thumbnail

๐ŸŽจ UI/UX ๊ฐœ์„ ๊ธฐ

๋‚˜๋Š” 3์ฐจ ๋ฐ๋ชจ๊ฐ€ ๋๋‚˜๊ณ , ๋Š˜ ์šฐ์„ ์ˆœ์œ„์—์„œ ๋ฐ€๋ฆฌ๊ณ  ๋ฐ€๋ ค ๋ฒ„๋ ค์ ธ์žˆ๋˜ UI/UX๋ฅผ ์Šคํ”„๋ฆฐํŠธ4 ๋•Œ ๊ผญ ๊ฐœ์„ ํ•ด์„œ ๋ฐฉํ•™์ด ๋๋‚˜๊ณ  ๋”ฑ ๋ ˆ๋ฒจ ์ธํ„ฐ๋ทฐ๋ฅผ ํ•˜๊ฒŒ๋  ๋•Œ ์šฐ๋ฆฌ์˜ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜๊ธฐ๋กœ ๋งˆ์Œ ๋จน์—ˆ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ๋ฐ๋ชจ์—์„œ ์Œ“์ธ UI/UX์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ, ๊ธฐ๋Šฅ์ถ”๊ฐ€๋ณด๋‹ค ์‚ฌ์šฉ์„ฑ ๊ฐœ์„ ์ด ์‹œ๊ธ‰ํ•œ ์—ฌ๋Ÿฌ ์ด์œ ๋ฅผ ํ†ตํ•ด ํŒ€์›๋“ค์„ ์„ค๋“ํ•˜๋Š”๋ฐ์— ์„ฑ๊ณตํ•˜๊ณ , 4์ฐจ ์Šคํ”„๋ฆฐํŠธ 2์ฃผ์ฐจ ๋•Œ UI/UX ๊ฐœ์„  ์ž‘์—…์ด ์‹œ์ž‘๋˜์—ˆ๋‹ค.


๐Ÿคข ๊ธฐ์กด์˜ ๋ถˆํŽธํ•œ UI/UX

๋จผ์ € ๊ธฐ์กด์˜ ํŽ˜์ด์ง€๋“ค๋ถ€ํ„ฐ ์‚ดํŽด๋ณด์ž. ์ด ๋‹น์‹œ ์กด์žฌํ–ˆ๋˜ ํŽ˜์ด์ง€๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • ํŒ€ - ํŒ€ ์ „์ฒด ์กฐํšŒ, ํŒ€ ์ƒ์„ธ ์กฐํšŒ, ํŒ€ ์ƒ์„ฑ, ํŒ€ ์ˆ˜์ • ํŽ˜์ด์ง€
  • ๋ ˆ๋ฒจ๋กœ๊ทธ - ๋ ˆ๋ฒจ๋กœ๊ทธ ์ž‘์„ฑ, ์ˆ˜์ • ํŽ˜์ด์ง€, ์กฐํšŒ ๋ชจ๋‹ฌ
  • ํ”ผ๋“œ๋ฐฑ - ํ”ผ๋“œ๋ฐฑ ์ž‘์„ฑ, ์ˆ˜์ •, ์กฐํšŒ ํŽ˜์ด์ง€,
  • ์‚ฌ์ „์งˆ๋ฌธ - ์‚ฌ์ „์งˆ๋ฌธ ์ž‘์„ฑ, ์ˆ˜์ • ํŽ˜์ด์ง€, ์กฐํšŒ ๋ชจ๋‹ฌ

์ˆ˜์ •ํŽ˜์ด์ง€๋Š” ์ƒ์„ฑํŽ˜์ด์ง€์™€ ๊ฐ™์€ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•จ์œผ๋กœ ์ƒ๋žตํ•˜๊ฒ ๋‹ค!
์ถ”๊ฐ€๋กœ ๋‘ ๋ชจ๋‹ฌ์€ ๋™์ผํ•œ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์ „์งˆ๋ฌธ์—์„œ๋งŒ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค!


ํŒ€ ๊ด€๋ จ ํŽ˜์ด์ง€

์—ฌ๊ธฐ๋Š” ํŒ€ ์ „์ฒด ์กฐํšŒ ํŽ˜์ด์ง€์ด๋‹ค.

๋ฐ˜์‘ํ˜•์— ๋Œ€ํ•œ ์ƒ์„ธํ•œ ๊ณ ๋ ค๋„ ์—†์—ˆ๊ณ , ํŠน์ • ํ•ด์ƒ๋„์— ํ™”๋ฉด์ด ๋งž์ง€์•Š์œผ๋ฉด ์šฐ์ธก์— ์• ๋งคํ•œ ๊ณต๋ฐฑ์ด ์ƒ๊ฒผ๋‹ค. ๊ทธ ์™ธ์—๋„ ํ•ด์ƒ๋„๋ฅผ ๋†’์ด๋ฉด ํ•œ ์ค„์— ๋ฌด์ˆ˜ํžˆ ๋งŽ์€ ํŒ€ ์นด๋“œ๊ฐ€ ๋ฐฐ์น˜๋˜๊ณ , ํ•ด์ƒ๋„๊ฐ€ ๋†’์€ ํ™”๋ฉด์—์„œ ๊ฐ€๋…์„ฑ์ด ๋‚˜๋น ์ง€๋Š” ๋ฌธ์ œ๋„ ์žˆ์—ˆ๋‹ค. ์‹ฌ์ง€์–ด๋Š” footer๋„ ๋งˆ์Œ๋Œ€๋กœ ๋Š˜์–ด๋‚œ๋‹ค..

์œ„์˜ ํŒ€ ์นด๋“œ๋ฅผ ๋ณด๋ฉด, ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” dm ์ฃผ์†Œ , 2022-12-31T12:59:00 ๊ณผ ๊ฐ™์€ ๋ถˆํŽธํ•œ ๋‚ ์งœ ํ‘œํ˜„, ๋‚ ์งœ๋‚˜ ์žฅ์†Œ๊ฐ€ ๊ธธ์–ด์ง€๋ฉด ์ฝ๊ธฐ ํž˜๋“ค๊ฒŒ ๋‘ ์ค„์ด ๋œ๋‹ค๋Š” ๋ฌธ์ œ๋„ ์žˆ์—ˆ๋‹ค.
์ถ”๊ฐ€๋กœ ์ฐธ๊ฐ€์ž๊ฐ€ ๋Š˜์–ด๋‚˜๋ฉด ๋งจ ์•„๋ž˜์˜ ์ฐธ๊ฐ€์ž ํ”„๋กœํ•„์ด 2์ค„, 3์ค„, ๋ฌดํ•œ์ • ๋Š˜์–ด๋‚˜๋Š” ๋ฌธ์ œ๋“ค๋„ ์žˆ์—ˆ๋‹ค.

๋‹ค์Œ ํŒ€ ์ƒ์„ฑํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด, ํƒ€์ดํ‹€์€ ์ธํ„ฐ๋ทฐ ํŒ€ ์ƒ์„ฑํ•˜๊ธฐ ์ธ๋ฐ, ์šฐ์ธก์˜ ๋ฒ„ํŠผ์€ ๋งŒ๋“ค๊ธฐ ๋ผ๊ณ  ๋˜์–ด ์žˆ์–ด ์ผ๊ด€์„ฑ์ด ์—†๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํŒ€์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋ชจ๋“  ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ๋‹ค์‹œ ์œ„๋กœ ์˜ฌ๋ผ์™€์„œ ๋งŒ๋“ค๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์•ผํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€๋„ ์กด์žฌํ–ˆ๋‹ค.

ํŒ€ ์ƒ์„ธ ์กฐํšŒ ํŽ˜์ด์ง€๋„ ํŒ€ ์ „์ฒด ์กฐํšŒ ํŽ˜์ด์ง€์™€ ๊ฐ™์€ ๋ฌธ์ œ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋‹ค. ์ถ”๊ฐ€์ ์ธ ๋ถ€๋ถ„์ด๋ผ๋ฉด ๋ฒ„ํŠผ์— ๋งˆ์šฐ์Šค๊ฐ€ ํ˜ธ๋ฒ„๋˜๊ฑฐ๋‚˜ ํด๋ฆญ๋˜์–ด๋„ ์•„๋ฌด๋Ÿฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์—†์–ด ํ…์ŠคํŠธ๋งŒ ๋ณด์ด๋Š”

๋ ˆ๋ฒจ๋กœ๊ทธ ๋ณด๊ธฐ, ์‚ฌ์ „ ์งˆ๋ฌธ ์ž‘์„ฑ ๊ณผ ๊ฐ™์€ ๋ฒ„ํŠผ์ด ๋”๋”์šฑ ๋ฒ„ํŠผ์ฒ˜๋Ÿผ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์ด ์žˆ์—ˆ๋‹ค. ๋Œ€์ฒด์ ์ธ ๋ฌธ์ œ์ ์„ ๋‹ค๋ค„๋ดค์œผ๋‹ˆ ๋‹ค์Œ ํŽ˜์ด์ง€๋ถ€ํ„ฐ๋Š” ์†๋„๊ฐ ์žˆ๊ฒŒ ์‚ดํŽด๋ณด์ž.


๋ ˆ๋ฒจ๋กœ๊ทธ ๊ด€๋ จ ํŽ˜์ด์ง€

ํƒ€์ดํ‹€์—์„œ๋Š” ์ž‘์„ฑ, ๋ฒ„ํŠผ์€ ์ œ์ถœํ•˜๊ธฐ, ํƒ€์ดํ‹€์—์„œ๋Š” ๋ ˆ๋ฒจ๋กœ๊ทธ, ๋ฐ‘์—๋Š” Level Log ๋กœ ํ•œ/์˜์˜ ํ˜ผ์šฉ, ๋ฒ„ํŠผ์ด ๋งจ ์œ„์— ์žˆ์–ด ๋‹ค ์ž‘์„ฑ ํ›„์— ๋‹ค์‹œ ์Šคํฌ๋กค์„ ์˜ฌ๋ ค์„œ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์•ผํ–ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  "๋ ˆ๋ฒจ๋กœ๊ทธ ์ž‘์„ฑ์„ ์œ„ํ•œ ๊ณต๊ฐ„"์„ ์œ„์— ์žˆ๋Š” ํƒ€์ดํ‹€๋ถ€ํ„ฐ ํ•ด์„œ ์“ธ๋ฐ ์—†๋Š” ์š”์†Œ์—๊ฒŒ ๋„ˆ๋ฌด ๋งŽ์ด ๋บ๊ธด๋‹ค.

ํ”ผ๋“œ๋ฐฑ ๊ด€๋ จ ํŽ˜์ด์ง€

ํ”ผ๋“œ๋ฐฑ ์ž‘์„ฑ ํŽ˜์ด์ง€๋Š” ์‹ฌ์ง€์–ด ์ œ์ถœ, ์ž‘์„ฑ ์ด ์•„๋‹ˆ๋ผ ๋˜ ์ƒˆ๋กœ์šด ํ‚ค์›Œ๋“œ์ธ ๋“ฑ๋กํ•˜๊ธฐ ์˜€๋‹ค.
์‹ฌ์ง€์–ด ์ด ํŽ˜์ด์ง€๋กœ ์ง„์ž…ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€์—์„œ ์ถ”๊ฐ€ํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด์•ผํ•œ๋‹ค.

๋˜ํ•œ ์ขŒ์ธก์—๋Š” ๋ ˆ๋ฒจ๋กœ๊ทธ ๋ผ๊ณ  ํ•œ๊ธ€๋กœ ์จ์žˆ๊ณ , ์šฐ์ธก์—๋Š” Feedback ์ด๋ผ๊ณ  ์˜์–ด๋กœ ์จ์žˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์ขŒ์ธก๊ณผ ์šฐ์ธก์˜ ํฐ๋ฐ•์Šค์˜ ์‹œ์ž‘์ง€์ ์ด ์–ด๊ธ‹๋‚˜์žˆ๋‹ค.

๋˜ํ•œ ๊ฝค ์ž์ฃผ ๋“ฑ์žฅํ•œ ๋ฌธ์ œ์˜€๋Š”๋ฐ, ํƒ€์ดํ‹€์ด ํ•ด๋ฆฌ์˜ ๋ ˆ๋ฒจ ์ธํ„ฐ๋ทฐ ํ”ผ๋“œ๋ฐฑ ์ด๋ผ ์ž‘์„ฑ์ž๊ฐ€ ํ•ด๋ฆฌ์ธ๊ฑด์ง€, ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›๋Š” ์‚ฌ๋žŒ์ด ํ•ด๋ฆฌ์ธ๊ฑด์ง€๋„ ํ—ท๊ฐˆ๋ฆฐ๋‹ค.

์ด ํŽ˜์ด์ง€๋„ ๋ฐ˜์‘ํ˜•์ด ์ œ๋Œ€๋กœ ๊ณ ๋ ค๋˜์ง€ ์•Š์•„, ์œ„์—์„œ ๋ดค๋˜ ํŒ€ ์ „์ฒด ์กฐํšŒ, ํŒ€ ์ƒ์„ธ ์กฐํšŒ ํŽ˜์ด์ง€์™€ ๊ฐ™์€ ๋ฌธ์ œ์ ๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. (ํ”ผ๋“œ๋ฐฑ์ด ์œ„์น˜ํ•œ ์• ๋งคํ•œ ์œ„์น˜๋Š” ์ง€๊ธˆ๋ด๋„ ์›ƒ๊ธฐ๋‹ค.)

๊ทธ๋ฆฌ๊ณ  ํƒ€์ดํ‹€์— ๋ ˆ๋ฒจ ์ธํ„ฐ๋ทฐ ํ”ผ๋“œ๋ฐฑ ์ด๋ผ๊ณ ๋งŒ ์ ํ˜€์žˆ์–ด ๋ˆ„๊ตฌ์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์ธ์ง€ ๊ฐœ๋ฐœ์ž์ธ ๋‚˜๋„ ๊ฐ€๋” ํ—ท๊ฐˆ๋ ค์„œ ๋‹ค์‹œ ๋‚˜๊ฐ€์„œ ํ™•์ธ์„ ํ•˜๊ณ  ๋“ค์–ด์™€์•ผ ํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ํ”ผ๋“œ๋ฐฑ์—์„œ ์ž˜ ๋ณด์—ฌ์•ผํ•  ๋ถ€๋ถ„์ด ํšŒ์ƒ‰์œผ๋กœ ์น ํ•ด์ ธ ์ž˜ ๋ณด์ด์ง€ ์•Š์•˜๊ณ , ์˜คํžˆ๋ ค ์•ˆ ๋ณด์—ฌ๋„ ์ƒ๊ด€์—†๋Š” ํ…Œ๋‘๋ฆฌ ๋ถ€๋ถ„์ด ํฐ์ƒ‰์œผ๋กœ ๋” ๋ˆˆ์— ๋„์—ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ํ”ผ๋“œ๋ฐฑ์ด ์—†๋Š” ์ฐธ๊ฐ€์ž์˜ ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€์— ๋“ค์–ด์™”์„ ๋•Œ๋Š” ๋ญ”๊ฐ€ ์ž˜๋ชป ๋“ค์–ด์˜จ๊ฑด๊ฐ€ ์‹ถ์€ ํŽ˜์ด์ง€๋กœ ์˜ค๊ฒŒ๋œ๋‹ค. (ํ•˜์ง€๋งŒ ์ด ํŽ˜์ด์ง€๋กœ ์˜ค๋Š”๊ฒŒ ๋งž๋‹ค) ์—ฌ์ „ํžˆ ์œ— ๊ณต๊ฐ„์ด ๋น„์–ด์žˆ์œผ๋‹ˆ footer๋„ ์ปค์ง„๋‹ค.


์‚ฌ์ „์งˆ๋ฌธ ๊ด€๋ จ ํŽ˜์ด์ง€

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

์—ฌ๊ธฐ ๋ชจ๋‹ฌ์˜ ๋ฒ„ํŠผ๋„ ํ…์ŠคํŠธ๋งŒ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๊ณ  ๋”ฑํžˆ ์• ๋‹ˆ๋ฉ”์ด์…˜๋„ ์—†๋‹ค.


๐ŸŽฏ UX ๊ฐœ์„  ์ „๋žต ์งœ๊ธฐ.

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

๋ฌธ์ œ ํŒŒ์•…

  • ์ƒ์„ธํ•œ ๋ฐ˜์‘ํ˜•์ด๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜, ์š”์†Œ์˜ ํฌ์ง€์…˜ ๋“ฑ์ด ๊ณ ๋ ค๋˜์ง€ ์•Š์•˜๋‹ค.

  • ์ œ๋ชฉ, ๋‚ ์งœ ๋“ฑ์ด ๊ธธ์–ด์ง€๋Š” ๊ฒฝ์šฐ๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š์•„ 2์ค„๋กœ ๋Š˜์–ด๋‚˜๋Š” ๋“ฑ์˜ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค.

  • ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ธฐ ํž˜๋“  ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•œ๋‹ค. ex) 2022-12-31T12:59:00

  • ์ž‘์„ฑ, ์ œ์ถœ, ๋“ฑ๋ก, ๋งŒ๋“ค๊ธฐ, ์ƒ์„ฑ ๋“ฑ ๊ฐ™์€๊ฑธ ์˜๋ฏธํ•˜๋Š” ๋‹ค๋ฅธ ๋‹จ์–ด๊ฐ€ ๋„ˆ๋ฌด ๋งŽ๋‹ค

  • ์˜์–ด์™€ ํ•œ๊ธ€์ด ํ˜ผ์šฉ๋˜๊ณ  ์žˆ๋‹ค.

  • to, from ๊ตฌ๋ถ„์ด ์–ด๋ ต๋‹ค.

  • ์—๋Ÿฌ๋ฉ”์‹œ์ง€๋ฅผ ๊ทธ๋Œ€๋กœ alert ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์—ฌ์ค€๋‹ค.

  • ๋ชจ๋“ ๊ฑธ ์ž‘์„ฑํ•˜๊ณ  ์ž‘์„ฑํ•˜๊ธฐ ์™€ ๊ฐ™์€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ ค๋ฉด ์Šคํฌ๋กค์„ ์ตœ์ƒ๋‹จ์œผ๋กœ ์˜ฌ๋ ค์•ผํ•œ๋‹ค.

  • ์“ธ๋ฐ์—†๋Š” ์š”์†Œ์—๊ฒŒ ๋ฉ”์ธ๊ณต๊ฐ„์ด ๋„ˆ๋ฌด ๋งŽ์ด ๋บ๊ธด๋‹ค.


์ข€ ๋” ์ƒ์„ธํ•œ ํ”ผ๊ทธ๋งˆ.

๊ธฐ์กด์˜ ํ”ผ๊ทธ๋งˆ๋Š” ๋ฐ˜์‘ํ˜•, ํŠน์ˆ˜ํ•œ ์ผ€์ด์Šค, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋“ฑ์˜ ๊ณ ๋ ค๊ฐ€ ์—†์—ˆ๋‹ค. ์ด๋Ÿฐ๊ฒŒ ์—†์œผ๋ฉด ๊ฐœ๋ฐœ์ž ๊ฐ„์˜ ์˜๊ฒฌ ์ฐจ์ด๋‚˜ ๊ตฌํ˜„์˜ ์ฐจ์ด๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒํ•œ๋‹ค.

์˜๊ฒฌ ์ฐจ์ด๋Š” ์ถ”๊ฐ€์ ์ธ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ์ž์ฃผ ๋ฐœ์ƒํ•˜๋„๋ก ํ•ด ์“ธ๋ฐ ์—†๋Š” ์‹œ๊ฐ„์„ ์žก์•„๋จน๋„๋ก ํ•˜๊ณ , ๊ตฌํ˜„์˜ ์ฐจ์ด๋Š” ์„œ๋กœ์˜ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๋Š”๋ฐ ์‹œ๊ฐ„์„ ๋” ์“ฐ๊ฒŒ ๋งŒ๋“ค๊ณ , ์ฝ”๋“œ ์œ ์ง€๋ณด์ˆ˜์— ์–ด๋ ค์›€์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

์ƒˆ๋กœ์šด ํ”ผ๊ทธ๋งˆ์—์„œ๋Š” ์ด๋ฅผ UX์— ๊ด€ํ•œ ์ƒ์„ธํ•œ ์ฝ”๋ฉ˜ํŠธ ๋“ฑ์œผ๋กœ๋กœ ์ด๋ฅผ ๊ฐœ์„ ํ–ˆ๋‹ค.


์ตœ์†Œ ์š”๊ตฌ ์‚ฌํ•ญ ๋Š˜๋ฆฌ๊ธฐ.

์•„๋ฌด๋ž˜๋„ ํ”ผ๊ทธ๋งˆ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์—…์„ ํ•˜๋Š”๋ฐ, ๊ธฐ์กด ํ”ผ๊ทธ๋งˆ์— UX ๊ด€๋ จ๋œ ๋‚ด์šฉ์ด ๊ฑฐ์˜ ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— โ€œ๊ธฐ๋Šฅ๋งŒ ๋˜๋ฉด ๋œ๋‹คโ€๋Š” ์‹์œผ๋กœ UX๋Š” ๋‚ดํŒฝ๊ฒจ์ณ์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜๋‹ค.

์ƒˆ๋กœ์šด ํ”ผ๊ทธ๋งˆ์—๋Š” UX ๊ด€๋ จ ์š”๊ตฌ์‚ฌํ•ญ์„ ๋งŽ์ด ์ถ”๊ฐ€ํ–ˆ๊ณ , ํ”ผ๊ทธ๋งˆ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์—…ํ•˜๊ฒŒ๋˜๋Š” ํ•œ, ๋‹น์—ฐํžˆ ๊ฐœ์„ ์œผ๋กœ ์ด์–ด์ง€๋ฆฌ๋ผ ์ƒ๊ฐํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

โžก๏ธ ๋ ˆ๋ฒจ๋กœ๊ทธ ํ”ผ๊ทธ๋งˆ (Page 2)

๊ทธ ๊ฒฐ๊ณผ๋กœ ํƒ„์ƒํ•œ ํ”ผ๊ทธ๋งˆ์ด๋‹ค! ์•„๋ž˜์—์„œ ์ด ํ”ผ๊ทธ๋งˆ๋ฅผ ๋ฐ˜์˜ํ•œ ์ƒˆ๋กœ์šด UI๋ฅผ ์‚ดํŽด๋ณด์ž.


โœจ ๋ฐ”๋€ UI/UX ์™€์˜ ๋น„๊ต

๋‹ค์Œ ๋ฆด๋ฆฌ์ฆˆ์— ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜์–ด์„œ ์•ฝ๊ฐ„ ๊ธฐ์กด๊ณผ ๋‹ฌ๋ผ์ง„ ๋ถ€๋ถ„์ด ์žˆ์ง€๋งŒ, ์‹ ๊ฒฝ์“ฐ์ง€ ๋ง๊ณ  ๋ฌธ์ œ์ ์ด ์–ด๋–ป๊ฒŒ ๊ฐœ์„ ๋˜์—ˆ๋Š”์ง€๋ฅผ ์ค‘์ ์œผ๋กœ ์‚ดํŽด๋ณด์ž!

ํŒ€ ๊ด€๋ จ ํŽ˜์ด์ง€

๊ฐœ์„ ๋œ ์ „์ฒด ํŒ€ ์กฐํšŒ์ด๋‹ค.
๊ธฐ์กด์˜ ํ•ต์‹ฌ ๋ฌธ์ œ์˜€๋˜ ๋ฐ˜์‘ํ˜•์— ๋Œ€ํ•œ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.
ํ•ด์ƒ๋„๊ฐ€ ์•„๋ฌด๋ฆฌ ๋†’์•„์ ธ๋„ ๋ฉ”์ธ์˜์—ญ์˜ width์— ์ œํ•œ์„ ๋‘ฌ ํ•œ ์ค„์— 4๊ฐœ๊นŒ์ง€๋งŒ ํŒ€์ด ํ‘œ์‹œ๋˜๋„๋กํ–ˆ๋‹ค.
๊ทธ ์™ธ ํŒ€ ์ถ”๊ฐ€ํ•˜๊ธฐ ๋ฒ„ํŠผ์˜ ์œ„์น˜๋„ ์Šคํฌ๋กค์„ ๋‚ด๋ ค๋„ ๋ฐ”๋กœ ํด๋ฆญํ•  ์ˆ˜ ์žˆ๋„๋ก ์ˆ˜์ •ํ–ˆ๋‹ค.

์žฅ์†Œ์™€ ์‹œ๊ฐ„์„ ๊ฐ๊ฐ์˜ ์—ด๋กœ ๋ถ„๋ฆฌํ•ด 2์ค„๋กœ ๋ฐ”๋€Œ๋Š” ๋ถˆ์ƒ์‚ฌ๊ฐ€ ์ผ์–ด๋‚˜์ง€ ์•Š๋„๋ก ์ˆ˜์ •ํ–ˆ๋‹ค.
๋˜ํ•œ ์ฐธ๊ฐ€์ž๊ฐ€ ๋Š˜์–ด๋‚˜๋„ ์Šคํฌ๋กค๋กœ ๋„˜๊ธฐ๋„๋กํ•ด์„œ ์ค„๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚˜๋Š” ์ผ๋„ ์ด์ œ๋Š” ์—†๋‹ค.

์ด์ œ ํŒ€ ์ƒ์„ฑ ํŽ˜์ด์ง€์—์„œ ํŒ€์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋ชจ๋“  ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ๋‹ค์‹œ ์œ„๋กœ ์˜ฌ๋ผ์™€์„œ ๋งŒ๋“ค๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์•ผํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€๋„ ์ƒ์„ฑํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ์ตœํ•˜๋‹จ์— ์œ„์น˜์‹œ์ผœ ์ œ๊ฑฐํ–ˆ๋‹ค.
(๋‹น์‹œ์—๋Š” "์ƒ์„ฑํ•˜๊ธฐ" ์˜€์ง€๋งŒ ์ง€๊ธˆ์€ ํŒ€ ์ „์ฒด์กฐํšŒ ํŽ˜์ด์ง€์™€ ๋™์ผํ•˜๋„๋ก "์ถ”๊ฐ€ํ•˜๊ธฐ"๋กœ ์šฉ์–ด๊ฐ€ ํ†ต์ผ๋˜์—ˆ๋‹ค!)

๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ๋ฒ„ํŠผ์— "hover"๋‚˜ "click"์‹œ, ์ตœ์†Œํ•œ ์ƒํ˜ธ์ž‘์šฉ์„ ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๋ฆด๋งŒํ•œ ๋ณ€ํ™”๋ฅผ ์ฃผ์—ˆ๋‹ค.

๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์• ๋งคํ•˜๊ฒŒ ๊ณต๊ฐ„์ด ๋‚จ๊ฑฐ๋‚˜ ํ•˜๋Š” ๋ฌธ์ œ๋“ค์ด ๋™์ผํ•˜๊ฒŒ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.
๋‹ค์Œ์€ ๋ ˆ๋ฒจ๋กœ๊ทธ ๊ด€๋ จ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๋ณด์ž!


๋ ˆ๋ฒจ๋กœ๊ทธ ๊ด€๋ จ ํŽ˜์ด์ง€

"๋ ˆ๋ฒจ๋กœ๊ทธ ์ž‘์„ฑ์„ ์œ„ํ•œ ๊ณต๊ฐ„"์„ ์ตœ๋Œ€ํ•œ ํ™•๋ณดํ–ˆ๊ณ , ์šฉ์–ด๋„ ์ž‘์„ฑํ•˜๊ธฐ ๋กœ ํ†ต์ผ๋˜์—ˆ๋‹ค. ๋ฒ„ํŠผ๋„ ์ตœํ•˜๋‹จ์— ๊ณ ์ •๋˜์–ด์žˆ์–ด ๋‹ค์‹œ ์Šคํฌ๋กค์„ ์ตœ์ƒ๋‹จ์œผ๋กœ ์˜ฌ๋ฆด ํ•„์š”๋„ ์—†๋‹ค.


ํ”ผ๋“œ๋ฐฑ ๊ด€๋ จ ํŽ˜์ด์ง€

"์ธํ„ฐ๋ทฐ์—์„œ ๋ฐ›์€ ์งˆ๋ฌธ" ์นธ์ด ์ƒˆ๋กœ ์ƒ๊ฒผ์ง€๋งŒ ์‹ ๊ฒฝ์“ฐ์ง€ ๋ง์ž.
From , to ๊ฐ€ ํ—ท๊ฐˆ๋ ธ๋˜ ๋ฌธ์ œ๋ฅผ "~์— ๋Œ€ํ•œ ๋ ˆ๋ฒจ ์ธํ„ฐ๋ทฐ ํ”ผ๋“œ๋ฐฑ"์œผ๋กœ ๊ณ ์น˜๊ณ  ํ”„๋กœํ•„ ์‚ฌ์ง„๊นŒ์ง€ ์ถ”๊ฐ€ํ•ด ํ•ด๊ฒฐํ–ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ž‘์„ฑํ•˜๊ธฐ ๋ฒ„ํŠผ์€ ํ•˜๋‹จ ๊ณ ์ •.

ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€์—์„œ๋„ From , to ๊ฐ€ ํ—ท๊ฐˆ๋ ธ๋˜ ๋ฌธ์ œ๋ฅผ ์œ„์™€ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ํ•ด๊ฒฐํ–ˆ๊ณ , ์–ด๋–ค ํ•ด์ƒ๋„์—์„œ๋„ ํ•˜๋‚˜์˜ ํ”ผ๋“œ๋ฐฑ์ด ๊ฐ€์šด๋ฐ์— ์œ„์น˜ํ•˜๋„๋ก ํ•˜์—ฌ ์• ๋งคํ•œ ๊ณต๋ฐฑ์ด๋‚˜, ๋ฐ˜์‘ํ˜• ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ๋‹ค.

ํ”ผ๋“œ๋ฐฑ์ด ์กด์žฌํ•˜์ง€ ์•Š์„ ๋•Œ ๋ณด์—ฌ์ค„ "๋นˆ ํ”ผ๋“œ๋ฐฑ ํŽ˜์ด์ง€"๋ฅผ ์ถ”๊ฐ€๋กœ ๋งŒ๋“ค์—ˆ๋‹ค. ์ด ์™ธ์—๋„ "์—ฌ๋Ÿฌ ๋นˆ ํŽ˜์ด์ง€"์™€ "์—๋ŸฌํŽ˜์ด์ง€", "๋กœ๋”ฉ UI" ๋“ฑ์„ ํ•จ๊ป˜ ๋งŒ๋“ค์–ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ๊ฐœ์„ ์„ ์ด๋Œ์—ˆ๋‹ค.


์‚ฌ์ „์งˆ๋ฌธ ๊ด€๋ จ ํŽ˜์ด์ง€

๋ˆ„๊ตฌ์— ๋Œ€ํ•œ ์‚ฌ์ „์งˆ๋ฌธ์„ ๋ณด์—ฌ์ค„์ง€ ๋ง์ง€๋ฅผ ๊ณ ๋ฏผํ–ˆ์œผ๋‚˜, ๋‹ค๋ฅธ ๊ณณ์€ ์ž‘์„ฑ๊นŒ์ง€ ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋ฅผ ์ถ”๊ฐ€๋กœ ๊ฑฐ์ณ ์ด๋™์„ ํ•ด์•ผํ•˜์ง€๋งŒ, ์—ฌ๊ธฐ๋Š” ์ฐธ๊ฐ€์ž ์นด๋“œ์—์„œ ์‚ฌ์ „์งˆ๋ฌธ ์ž‘์„ฑ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด ๋ฐ”๋กœ ์ด๋™ํ•˜๋Š” ํŽ˜์ด์ง€๋ผ ๋”ฐ๋กœ ์•Œ๋ ค์ฃผ์ง€ ์•Š๊ธฐ๋กœ ํ–ˆ๋‹ค.

๊ทธ ์™ธ๋Š” ๋ ˆ๋ฒจ๋กœ๊ทธ ์ž‘์„ฑํŽ˜์ด์ง€์™€ ๋™์ผํ•˜๋‹ค!

"alert"๋„ ์Šค๋‚ต๋ฐ”๋กœ ๊ต์ฒด๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค!

์•„์ฃผ ํก์กฑํ•˜์ง„ ์•Š์ง€๋งŒ ๋ชจ๋‹ฌ๋„ ํ”ผ๋“œ๋ฐฑ์œผ๋กœ ๋ฐ›์•˜๋˜ ์–‘์ชฝ์˜ "padding"์„ ์ œ๊ฑฐํ•˜๋Š” ๋“ฑ์˜ ๋ณ€ํ™”๋ฅผ ๊ฒช์—ˆ๋‹ค. ์ด๋กœ์จ ๋ชจ๋“  ํŽ˜์ด์ง€์˜ ๊ฐœ์„ ์„ ์‚ดํŽด๋ดค๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค!


๐Ÿง ํ›„๊ธฐ

์‚ฌ์‹ค UI/UX๋ฅผ ๊ฐœ์„ ํ•œ๋‹ค๋Š” ๋งˆ์Œ์œผ๋กœ ์‹œ์ž‘ํ–ˆ์ง€๋งŒ, ์ง€๊ธˆ์™€์„œ ์ƒ๊ฐํ•ด๋ณด๋ฉด ์ž‘์—… ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐœ์„ ํ•˜๋Š” ์ž‘์—…์œผ๋กœ์จ๋„ ๋งค์šฐ ํฐ ์—ญํ• ์„ ํ•ด์คฌ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

๊ฐœ์„  ์ž‘์—… ์ด์ „์—๋Š” ๋ณดํ†ต ํ”„๋ก ํŠธ 2๋ช…์ด ํŽ˜์–ด๋กœ ์ž‘์—…์„ ํ–ˆ๊ณ , ๊ฐœ์ธ์œผ๋กœ ์ž‘์—…์„ ํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” โ€œ์ด๊ฑธ ์ด๋ ‡๊ฒŒ ํ•˜๋ผ๋Š”๊ฒŒ ๋งž๋‚˜?โ€, โ€œ์—ฅ ์ด๊ฒŒ ์•„๋‹ˆ๋ผ๊ณ ?โ€, โ€œ์ด ์ผ€์ด์Šค์— ๋Œ€ํ•œ ๊ณ ๋ ค๋Š” ํ”ผ๊ทธ๋งˆ์— ์—†๋Š”๋ฐ?โ€ ํ•˜๋Š” ์‹์œผ๋กœ ๊ณ„์† ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ํ•ด์•ผํ•˜๋Š” ํ”ผ๋กœ๊ฐ€ ์žˆ์—ˆ๋‹ค.

์ƒ๊ฐํ•ด๋ณด๋ฉด ๊ฐœ์„  ์ž‘์—… ์ดํ›„์—๋Š” ํŽ˜์–ด๋กœ ์ž‘์—…ํ•˜๋Š” ์ผ๋„ ๋ณ„๋กœ ์—†์—ˆ๊ณ , ๋”ฐ๋กœ ์ž‘์—…ํ•˜๋ฉด์„œ๋„ ์ €๋Ÿฐ ์‹์˜ ๋ฌด์˜๋ฏธํ•œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ํ•œ ๊ธฐ์–ต๋„ ์—†๋‹ค.

์ž˜ํ•œ ์ผ์ด๋ผ๊ณ  ์ƒ๊ฐ์€ ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ ๋ ˆ๋ฒจ๋กœ๊ทธ ํ”„๋กœ์ ํŠธ ํšŒ๊ณ ์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ "๋””์ž์ธ ์‹œ์Šคํ…œ"์„ ๋„์ž…ํ–ˆ๋‹ค๋ฉด ์–ด๋• ์„๊นŒ.. ํ•˜๋Š” ์•„์‰ฌ์›€์ด ์žˆ๋‹ค.

์—ฌ๊ธฐ๊นŒ์ง€๋Š” ๊ฐ€์ง€ ์•Š๋”๋ผ๋„ ์ข‹์€ UX๋ฅผ ์œ„ํ•œ ์ˆ˜๋งŽ์€ ๋””์ž์ธ ๊ฐ€์ด๋“œ๋ฅผ ํ™œ์šฉํ–ˆ๋‹ค๋ฉด ์–ด๋• ์„๊นŒํ•˜๋Š” ์•„์‰ฌ์›€๋„ ์ง€์šธ ์ˆ˜๊ฐ€ ์—†๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

profile
์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค 4๊ธฐ ์›น ํ”„๋ก ํŠธ์—”๋“œ

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