Unit2 ํšŒ๊ณ 

YEN Jยท2022๋…„ 10์›” 24์ผ
0

code states

๋ชฉ๋ก ๋ณด๊ธฐ
28/43

UI/UX

๐Ÿ”† UI/UX ๊ฐœ๋…

UI๐Ÿ“ฑ

UI(User Interface, ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค)๋ž€ ์‚ฌ์šฉ์ž๋“ค์ด ์ปดํ“จํ„ฐ์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ์‹œ์Šคํ…œ์„ ๋งํ•œ๋‹ค. ํ™”๋ฉด ์ƒ์˜ ๊ทธ๋ž˜ํ”ฝ ์š”์†Œ๋“ค์€ ๋ฌผ๋ก  ์‚ฌ์šฉ์ž๋“ค์ด ํ‚ค๋ณด๋“œ๋‚˜ ๋งˆ์šฐ์Šค์™€ ๊ฐ™์€ ๋ฌผ๋ฆฌ์  ์š”์†Œ๋ฅผ ํ†ตํ•ด์„œ๋„ ์ปดํ“จํ„ฐ์™€ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ๊ธฐ์— ์ด ์—ญ์‹œ UI๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ํ”„๋กœํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ์„œ ๊ฐ€๋ฆฌํ‚ค๋Š” UI๋Š” ๋Œ€๋ถ€๋ถ„ GUI๋ฅผ ์˜๋ฏธํ•˜๋Š”๋ฐ GUI(Graphical User Interface)๋ž€ ์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ๋ž˜ํ”ฝ์„ ํ†ตํ•ด ์ปดํ“จํ„ฐ์™€ ์ •๋ณด๋ฅผ ๊ตํ™˜ํ•˜๋Š” ์ž‘์—… ํ™˜๊ฒฝ์„ ์˜๋ฏธํ•œ๋‹ค.

UX๐Ÿ‘ค

UX(User Experience, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜)๋ž€ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ์‹œ์Šคํ…œ, ์ œํ’ˆ, ์„œ๋น„์Šค๋ฅผ ์งโ€ข๊ฐ„์ ‘์ ์œผ๋กœ ์ด์šฉํ•˜๋ฉด์„œ ๋Š๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์ด์ฒด์  ๊ฒฝํ—˜์„ ๋งํ•œ๋‹ค. ์ œํ’ˆ ์ž์ฒด ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ œํ’ˆ๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“  ์š”์†Œ๊ฐ€ UX์— ์˜ํ–ฅ์„ ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ด์ฒด์  ๊ฒฝํ—˜์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์œผ๋ฉฐ UX์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ๋งŽ์€ ์š”์†Œ๋“ค ์ค‘ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ์š”์†Œ๋ฅผ ํ•œ ๊ฐ€์ง€๋งŒ ๊ผฝ์ž๋ฉด UI๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

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

  • UX๋Š” UI๋ฅผ ํฌํ•จ๐Ÿ“ฒ
    • ์ข‹์€ UX๊ฐ€ ์ข‹์€ UI๋ฅผ ๋ณด์žฅํ•˜๊ฑฐ๋‚˜ ์ข‹์€ UI๊ฐ€ ์ข‹์€ UX๋ฅผ ๋ณด์žฅํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹˜
    • ๋‚˜์œ UX๊ฐ€ ๋‚˜์œ UI๋กœ ์ธํ•œ ๊ฒƒ์ด๋ผ๊ณ  ํ•  ์ˆ˜๋Š” ์—†์ง€๋งŒ ๋‚˜์œ UI๋Š” ๋‚˜์œ UX๋ฅผ ์œ ๋ฐœํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Œ(UI/UX ํฌํ•จ ๊ด€๊ณ„์— ๋”ฐ๋ผ)
  • UX์™€ UI ์ƒํ˜ธ ๋ณด์™„์ ์ธ ๊ด€๊ณ„๐Ÿ‘ฅ
    • ๋‚˜์œ UX๋ฅผ ์ฐพ์•„ UI ๊ฐœ์„ ์ ์„ ์ฐพ์•„๋‚ผ ์ˆ˜ ์žˆ๊ณ  UI๋ฅผ ๊ฐœ์„ ํ•ด ์ข‹์€ UX๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ

๐Ÿ”† UI ๋””์ž์ธ

UI ๋””์ž์ธ ํŒจํ„ด๐Ÿ’ก

UI ๋””์ž์ธ ํŒจํ„ด์ด๋ž€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์‹œ ์ž์ฃผ ๋ฐ˜๋ณต๋˜์–ด ๋‚˜ํƒ€๋‚˜๋Š” ๋ฌธ์ œ์ ์„ ํ•ด๊ฒฐํ•˜๊ณ ์ž ๊ณผ๊ฑฐ์˜ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ํ•ด๊ฒฐํ•œ ๊ฒฐ๊ณผ๋ฌผ์„ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์€ ํ˜•ํƒœ๋กœ ๋งŒ๋“  ํŒจํ„ด

  • ์ž์ฃผ ์“ฐ์ด๋Š” UI ๋””์ž์ธ ํŒจํ„ด
    • ๋ชจ๋‹ฌ(Modal): ๊ธฐ์กด์— ์ด์šฉํ•˜๋˜ ํ™”๋ฉด ์œ„์— ์˜ค๋ฒ„๋ ˆ์ด ๋˜๋Š” ์ฐฝ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ € ์„ค์ •์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์—์„œ ํŒ์—…์ฐฝ๊ณผ ๊ตฌ๋ถ„๋จ
    • ํ† ๊ธ€(Toggle): On/Off๋ฅผ ์„ค์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์Šค์œ„์น˜ ๋ฒ„ํŠผ์œผ๋กœ ์‹œ๊ฐ์  ํšจ๊ณผ๋ฅผ ํ†ตํ•ด ํ† ๊ธ€์˜ ์ƒํƒœ๋ฅผ ์ง๊ด€์ ์œผ๋กœ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผ ํ•จ
    • ํƒญ(Tab): ์ฝ˜ํ…์ธ ๋ฅผ ๋ถ„๋ฆฌํ•ด์„œ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํŒจํ„ด์œผ๋กœ ์„น์…˜์˜ ๊ตฌ๋ถ„์ด ๋ช…ํ™•ํ•˜๋ฉฐ ์„น์…˜๋ช…์ด ๊ฐ„๊ฒฐํ•ด์•ผ ํ•จ
    • ํƒœ๊ทธ(Tag): ์ฝ˜ํ…์ธ ๋ฅผ ์„ค๋ช…ํ•˜๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ผ๋ฒจ์„ ๋ถ™์ด๋Š” ์—ญํ• ๋กœ ์‚ฌ์šฉ์ž์˜ ํƒœ๊ทธ ์ถ”๊ฐ€์™€ ์ œ๊ฑฐ์˜ ์ž์œจ์„ฑ์„ ๋ณด์žฅํ•ด์•ผ ํ•จ
    • ์ž๋™์™„์„ฑ(Autocomplete): ์‚ฌ์šฉ์ž๊ฐ€ ๋‚ด์šฉ ์ž…๋ ฅ ์‹œ ์ž…๋ ฅํ•˜๊ณ ์žํ•˜๋Š” ๋‚ด์šฉ๊ณผ ์ผ์น˜ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์€ ํ•ญ๋ชฉ์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์œผ๋กœ ์ž๋™ ์™„์„ฑ ํ•ญ๋ชฉ์˜ ๊ฐœ์ˆ˜๋Š” ์ ์ ˆํ•˜๊ฒŒ ์ œํ•œํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์งํ•จ
    • ๋“œ๋กญ๋‹ค์šด(Dropdown): ์„ ํƒ ๊ฐ€๋Šฅํ•œ ํ•ญ๋ชฉ๋“ค์„ ์ˆจ๊ฒจ๋†“์•˜๋‹ค๊ฐ€ ํŽผ์ณ์ง€๋ฉด์„œ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๋””์ž์ธ ํŒจํ„ด์œผ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์ž์‹ ์ด ์„ ํƒํ•œ ํ•ญ๋ชฉ์„ ์ •ํ™•ํžˆ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ค‘์š”
    • ์•„์ฝ”๋””์–ธ(Accordion): ์ ‘์—ˆ๋‹ค ํˆ๋‹ค ํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ ํ™”๋ฉด ์ƒ์— ์ƒํ•˜๊ด€๊ณ„๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋จ
    • ์บ๋Ÿฌ์…€(Carousel): ์ปจ๋ฒ ์ด์–ด ๋ฒจํŠธ๋‚˜ ํšŒ์ „๋ชฉ๋งˆ์ฒ˜๋Ÿผ ๋น™๊ธ€๋น™๊ธ€ ๋Œ์•„๊ฐ€๋ฉฐ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œ์‹œํ•ด์ฃผ๋Š” ๋””์ž์ธ ํŒจํ„ด
    • ํŽ˜์ด์ง€๋„ค์ด์…˜(Pagination): ๋ฒˆํ˜ธ๋ฅผ ๋ถ™์—ฌ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ๋ถ„ํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋งค๋„๋Ÿฌ์šด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ๋Š” ๋‹ค์†Œ ๊ฑฐ๋ฆฌ๊ฐ€ ๋ฉ€๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Œ
    • ๋ฌดํ•œ์Šคํฌ๋กค(Infinite Scroll, Continuous Scroll): ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๊นŒ์ง€ ๋ฌดํ•œ์œผ๋กœ ์Šคํฌ๋กค์„ ๋‚ด๋ฆด ์ˆ˜ ์žˆ๋Š” ๋””์ž์ธ ํŒจํ„ด์œผ๋กœ ์ฒ˜์Œ์— ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์กฐ๊ธˆ์”ฉ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ฌดํ•œ์Šคํฌ๋กค์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์€ ๋ฌดํ•œ์Šคํฌ๋กค์ด๋ผ๊ณ  ๋ณด๊ธฐ ์–ด๋ ค์›€
    • GNB(Global Navigation Bar), LNB(Local Navigation Bar): GNB๋Š” ์–ด๋Š ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€๋“  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ์ƒ์œ„ ๋ฉ”๋‰ด๋ฅผ ๋งํ•˜๋ฉฐ LNB๋Š” GNB์— ์ข…์†๋˜๋Š” ์„œ๋ธŒ๋ฉ”๋‰ด ํ˜น์€ ํŠน์ • ํŽ˜์ด์ง€์—์„œ๋งŒ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋‰ด๋ฅผ ๋งํ•จ
      UI๋””์ž์ธํŒจํ„ด

UI ๋ ˆ์ด์•„์›ƒ

๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ(Grid System)๐Ÿ“

๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์ด๋ž€ ํ™”๋ฉด์„ ๊ฒฉ์ž๋กœ ๋‚˜๋ˆˆ ๋‹ค์Œ ๊ทธ ๊ฒฉ์ž์— ๋งž์ถฐ ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์›น ๋””์ž์ธ ๋ถ„์•ผ์—์„œ๋Š” ์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ(Column Grid System)์„ ์‚ฌ์šฉํ•˜์—ฌ ํ™”๋ฉด์„ ์„ธ๋กœ๋กœ ๋ช‡ ๊ฐœ์˜ ์˜์—ญ์œผ๋กœ ๋‚˜๋ˆŒ ๊ฒƒ์ธ๊ฐ€์— ์ดˆ์ ์„ ๋‘”๋‹ค.

  • ์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์˜ ๊ตฌ์„ฑ ์š”์†Œ
    • Margin: ํ™”๋ฉด ์–‘์ชฝ์˜ ์—ฌ๋ฐฑ์œผ๋กœ ์ ˆ๋Œ€ ๋‹จ์œ„, ์ƒ๋Œ€ ๋‹จ์œ„๋ฅผ ํ•„์š”์— ๋”ฐ๋ผ ์œ ๋™์ ์œผ๋กœ ์‚ฌ์šฉ
    • Column: ์ฝ˜ํ…์ธ ๊ฐ€ ์œ„์น˜ํ•˜๊ฒŒ ๋ , ์„ธ๋กœ๋กœ ๋‚˜๋ˆ„์–ด์ง„ ์˜์—ญ์œผ๋กœ ํ‘œ์ค€์ ์œผ๋กœ ํœด๋Œ€ํฐ์—์„œ 4๊ฐœ, ํƒœ๋ธ”๋ฆฟ์—์„œ 8๊ฐœ, PC์—์„œ 12๊ฐœ์˜ ์ปฌ๋Ÿผ์œผ๋กœ ๋‚˜๋ˆ„๋Š”๋ฐ Column ์˜์—ญ์€ ์ƒ๋Œ€๋‹จ์œ„๋กœ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ์ ํ•ฉ
    • Gutter: Column ์‚ฌ์ด์˜ ๊ณต๊ฐ„์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ๊ตฌ๋ถ„ํ•˜๋Š” ์—ญํ• 

๐Ÿ”† UX ๋””์ž์ธ

์ข‹์€ UX๋ฅผ ๋งŒ๋“œ๋Š” ์š”์†Œ

  • ํ”ผํ„ฐ ๋ชจ๋นŒ(Peter Morville)์˜ ๋ฒŒ์ง‘ ๋ชจํ˜•์—์„œ ์ œ์‹œํ•œ UX 7์š”์†Œ
    • ์œ ์šฉ์„ฑ(Useful): ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ๊ฐ€?
    • ์‚ฌ์šฉ์„ฑ(Usable): ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด๊ฐ€?
    • ๋งค๋ ฅ์„ฑ(Desirable): ๋งค๋ ฅ์ ์ธ๊ฐ€?
    • ์‹ ๋ขฐ์„ฑ(Credible): ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?
    • ์ ‘๊ทผ์„ฑ(Accessible): ์ ‘๊ทผํ•˜๊ธฐ ์‰ฌ์šด๊ฐ€?
    • ๊ฒ€์ƒ‰ ๊ฐ€๋Šฅ์„ฑ(Findable): ์ฐพ๊ธฐ ์‰ฌ์šด๊ฐ€?
    • ๊ฐ€์น˜์„ฑ(Valuable): ๊ฐ€์น˜๋ฅผ ์ œ๊ณตํ•˜๋Š”๊ฐ€?

User Flow๐Ÿง

User Flow(์‚ฌ์šฉ์ž ํ๋ฆ„)๋ž€ ์‚ฌ์šฉ์ž๊ฐ€ ์ œํ’ˆ์— ์ง„์ž…ํ•œ ์‹œ์ ์„ ์‹œ์ž‘์œผ๋กœ ์ทจํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ํ–‰๋™์„ ๋œปํ•˜๋ฉฐ ๋ณดํ†ต ๋‹ค์ด์–ด๊ทธ๋žจ์„ ๊ทธ๋ ค ์ •๋ฆฌํ•œ๋‹ค.

  • User Flow ๋‹ค์ด์–ด๊ทธ๋žจ ์ž‘์„ฑ๋ฒ•
    • ํ•„์ˆ˜ ์š”์†Œ
      • ์ง์‚ฌ๊ฐํ˜•: ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ฒŒ ๋  ํ™”๋ฉด
      • ๋‹ค์ด์•„๋ชฌ๋“œ: ์‚ฌ์šฉ์ž๊ฐ€ ์ทจํ•˜๊ฒŒ ๋  ํ–‰๋™
      • ํ™”์‚ดํ‘œ: ํ™”๋ฉด๊ณผ ํ–‰๋™์„ ์—ฐ๊ฒฐํ•ด์ฃผ๋Š” ํ™”์‚ดํ‘œ
  • User Flow ๋‹ค์ด์–ด๊ทธ๋žจ์˜ ์žฅ์ 
    • ์‚ฌ์šฉ์ž ํ๋ฆ„์˜ ์–ด์ƒ‰ํ•˜๊ฑฐ๋‚˜ ๋งค๋„๋Ÿฝ์ง€ ์•Š์€ ๋ถ€๋ถ„์„ ๋ฐœ๊ฒฌํ•˜์—ฌ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Œ
    • ์žˆ์œผ๋ฉด ์ข‹์€ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์—†์–ด๋„ ๋  ๊ธฐ๋Šฅ์„ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ์Œ
  • ๋Œ€ํ‘œ์ ์ธ User Flow ๋‹ค์ด์–ด๊ทธ๋žจ ๋„๊ตฌ

๐Ÿ”† UI/UX ์‚ฌ์šฉ์„ฑ ํ‰๊ฐ€

์ œ์ด์ฝฅ ๋‹์Šจ์˜ ์‚ฌ์šฉ์„ฑ ํ‰๊ฐ€ ๊ธฐ์ค€(Jakob's Tem Usability Heuristics)๐Ÿ“‘

  • ์‹œ์Šคํ…œ ์ƒํƒœ์˜ ๊ฐ€์‹œ์„ฑ(Visibility of system status)
    ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง„ํ–‰ ์ƒํ™ฉ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•  ๊ฒƒ
  • ์‹œ์Šคํ…œ๊ณผ ํ˜„์‹ค ์„ธ๊ณ„์˜ ์ผ์น˜(Match between system and the real world)
    ์‚ฌ์šฉ์ž์—๊ฒŒ ์นœ์ˆ™ํ•œ ๋‹จ์–ด, ๊ตฌ๋ฌธ ๋ฐ ๊ฐœ๋…์„ ์‚ฌ์šฉํ•  ๊ฒƒ
  • ์‚ฌ์šฉ์ž ์ œ์–ด ๋ฐ ์ž์œ (User control and freedom)
    ์‹ค์ˆ˜ํ•œ ์‚ฌ์šฉ์ž์—๊ฒŒ ํƒˆ์ถœ๊ตฌ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์ œ๊ณตํ•  ๊ฒƒ
  • ์ผ๊ด€์„ฑ ๋ฐ ํ‘œ์ค€(Consistency and standards)
    • ์™ธ๋ถ€ ์ผ๊ด€์„ฑ: ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์˜ ์ผ๊ด€์„ฑ์„ ์œ„ํ•ด ํ”Œ๋žซํผ ๋ฐ ์—…๊ณ„์˜ ๊ด€์Šต์„ ๋”ฐ๋ฅผ ๊ฒƒ
      ex) UI ๋””์ž์ธ ํŒจํ„ด ์‚ฌ์šฉ
    • ๋‚ด๋ถ€ ์ผ๊ด€์„ฑ: ์ œํ’ˆ์˜ ์ธํ„ฐํŽ˜์ด์Šค๋‚˜ ์ •๋ณด ์ œ๊ณต์— ์ผ๊ด€์„ฑ์„ ๊ฐ€์งˆ ๊ฒƒ
  • ์˜ค๋ฅ˜ ๋ฐฉ์ง€(Error prevention)
    ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์‰ฌ์šด ์ƒํ™ฉ์„ ์ œ๊ฑฐํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ์‹ค์ˆ˜๋ฅผ ๋ฐฉ์ง€ํ•  ๊ฒƒ
  • ๊ธฐ์–ต๋ณด๋‹ค๋Š” ์ง๊ด€(Recognition rather than recall)
    ์‚ฌ์šฉ์ž๊ฐ€ ๊ธฐ์–ตํ•ด์•ผ ํ•˜๋Š” ์ •๋ณด๋ฅผ ์ค„์ผ ๊ฒƒ
  • ์‚ฌ์šฉ์˜ ์œ ์—ฐ์„ฑ๊ณผ ํšจ์œจ์„ฑ(Flexibility and efficiency of use)
    ์ดˆ๋ณด์ž์™€ ์ „๋ฌธ๊ฐ€ ๋ชจ๋‘์—๊ฒŒ ๊ฐœ๋ณ„ ๋งž์ถค ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•  ๊ฒƒ
  • ๋ฏธํ•™์ ์ด๊ณ  ๋ฏธ๋‹ˆ๋ฉ€ํ•œ ๋””์ž์ธ(Aesthetic and minimalist)
    ์ธํ„ฐํŽ˜์ด์Šค์— ๊ด€๋ จ์ด ์—†๊ฑฐ๋‚˜ ๋ถˆํ•„์š”ํ•œ ์ •๋ณด๊ฐ€ ํฌํ•จ๋˜์ง€ ์•Š๋„๋ก ํ•  ๊ฒƒ(์ •๋ณด๋ฅผ ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ผ ์ œ๊ณต)
  • ์˜ค๋ฅ˜์˜ ์ธ์‹, ์ง„๋‹จ, ๋ณต๊ตฌ๋ฅผ ์ง€์›(Help users recognize, diagnose, and recover from errors)
    ์‚ฌ์šฉ์ž๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์ œ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์ •ํ™•ํ•˜๊ฒŒ ํ‘œ์‹œํ•˜๊ณ  ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์„ ์ œ์•ˆํ•  ๊ฒƒ
  • ๋„์›€๋ง ๋ฐ ์„ค๋ช… ๋ฌธ์„œ(Help and document)
    ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ดํ•ดํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋Š” ๋ฌธ์„œ๋ฅผ ์ œ๊ณตํ•  ๊ฒƒ

Wireframe&Prototype

๐Ÿ”† ์™€์ด์–ด ํ”„๋ ˆ์ž„๊ณผ ํ”„๋กœํ† ํƒ€์ž… ๋น„๊ต

์™€์ด์–ดํ”„๋ ˆ์ž„ํ”„๋กœํ† ํƒ€์ž…
์ž‘์„ฑ ์‹œ๊ธฐ๊ธฐํš ๋‹จ๊ณ„๊ฐœ๋ฐœ ์ „ ๋‹จ๊ณ„
์ž‘์„ฑ ๋ชฉ์ ํ™”๋ฉด ๊ตฌ์กฐ ์„ค๊ณ„UI ์ƒํ˜ธ์ž‘์šฉ ์‹œ๋ฎฌ๋ ˆ์ด์…˜
ํŠน์ง•์ •์ ๋™์ 
ํ”ผ๋ธ๋ฆฌํ”ผLow~MiddleMiddle~High
  • ์™€์ด์–ดํ”„๋ ˆ์ž„์˜ ๊ฒฝ์šฐ Hi-Fi๋Š” ๊ฑฐ์˜ ์ž‘์„ฑํ•˜์ง€ ์•Š์Œ
    • Hi-Fi wireframe์€ ๋ชฉ์—…์— ๊ฐ€๊นŒ์šด ํ˜•ํƒœ๋กœ ์ž‘์„ฑ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋ฉฐ ์ˆ˜์ •๋„ ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ํ•˜๋ ค๋Š” ์™€์ด์–ดํ”„๋ ˆ์ž„์˜ ์ž‘์„ฑ ๋ชฉ์ ๊ณผ๋Š” ๋ถ€ํ•ฉํ•˜์ง€ ์•Š์Œ
  • ํ”„๋กœํ† ํƒ€์ž…์˜ ๊ฒฝ์šฐ Lo-Fi๋Š” ๊ฑฐ์˜ ์ž‘์„ฑํ•˜์ง€ ์•Š์Œ
    • Lo-Fi๋Š” ํ…Œ์ŠคํŠธ์— ์ ํ•ฉํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํ…Œ์ŠคํŠธ๊ฐ€ ๊ฐ€๋Šฅํ•œ Mid-Fi ๋ถ€ํ„ฐ ์ž‘์„ฑํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Œ

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

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