[TIL] Day44 #UI/UX

Beanxxยท2022๋…„ 6์›” 27์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
44/120
post-thumbnail

2022.06.27(Mon)

[TIL] Day44
[SEB FE] Day43

โ˜‘๏ธย UI/UX

๐Ÿ“Žย UI (User Interface, ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค)

์‚ฌ๋žŒ๋“ค์ด ์ปดํ“จํ„ฐ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ์‹œ์Šคํ…œ
โœ‹ย ๋ฌผ๋ฆฌ์  ์š”์†Œ(ํ‚ค๋ณด๋“œ, ๋งˆ์šฐ์Šค โ€ฆ)๋„ UI

โž•ย GUI (Graphical User Interface, ๊ทธ๋ž˜ํ”ฝ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค)

์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ๋ž˜ํ”ฝ์„ ํ†ตํ•ด ์ปดํ“จํ„ฐ์™€ ์ •๋ณด๋ฅผ ๊ตํ™˜ํ•˜๋Š” ์ž‘์—… ํ™˜๊ฒฝ

๐Ÿ“Žย UX (User Experience, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜)

์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ์‹œ์Šคํ…œ/์ œํ’ˆ/์„œ๋น„์Šค๋ฅผ ์ง/๊ฐ„์ ‘์ ์œผ๋กœ ์ด์šฉํ•˜๋ฉด์„œ ๋Š๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์ด์ฒด์  ๊ฒฝํ—˜

๐Ÿ“Žย UI & UX ๊ด€๊ณ„

UI โŠ‚ UX (์„œ๋กœ๋ฅผ ๋ณด์™„ํ•˜๋Š” ์—ญํ• )

๐Ÿ™…โ€โ™€๏ธย But, good UX ๐Ÿ‘ ๐Ÿ” good UI ๐Ÿ‘ย ์˜๋ฏธ โŒ (๋น› ์ข‹์€ ๊ฐœ์‚ด๊ตฌ์ผ ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ๋œป!)


โ˜‘๏ธย UI Design

๐Ÿ“Žย UI Design Pattern

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

  1. Modal: ๊ธฐ์กด์— ์ด์šฉํ•˜๋˜ ํ™”๋ฉด ์œ„์— ์˜ค๋ฒ„๋ ˆ์ด ๋˜๋Š” ์ฐฝ / ๋ชจ๋‹ฌ ๋‹ซ๊ธฐ ์ „๊นŒ์ง„ ๊ธฐ์กด ํ™”๋ฉด๊ณผ ์ƒํ˜ธ์ž‘์šฉ โŒ

    โœ‹ย ย ํŒ์—…์ฐฝ(๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ € ํŽ˜์ด์ง€๋ฅผ ์—ถ)๊ณผ ๋‹ค๋ฅธ ๊ฐœ๋…

    โ†”๏ธย ๋ชจ๋‹ฌ์€ ๋ธŒ๋ผ์šฐ์ € ์„ค์ • ์˜ํ–ฅ โŒย โ†’ ๋ฐ˜๋“œ์‹œ ๋ณด์—ฌ์ค˜์•ผ ํ•˜๋Š” ๋‚ด์šฉ์€ ๋ชจ๋‹ฌ ์‚ฌ์šฉ ๊ถŒ์žฅ

  2. Toggle: On/Off ์„ค์ •์‹œ ์‚ฌ์šฉํ•˜๋Š” ์Šค์œ„์น˜ ๋ฒ„ํŠผ (3๊ฐœ ์ด์ƒ์˜ ์—ฌ๋Ÿฌ ์˜ต์…˜์ด ์žˆ์„ ๋•Œ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ)

    โœ‹ย But, ๋„ˆ๋ฌด ๋งŽ์€ ์˜ต์…˜์ด ์กด์žฌํ•  ๋• Tab ์‚ฌ์šฉ ๊ถŒ์žฅ

  3. Tab: ์ฝ˜ํ…์ธ ๋ฅผ ๋ถ„๋ฆฌํ•ด์„œ ๋ณด์—ฌ์ฃผ๋Š” ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ (๊ฐ€๋กœ ํ•œ ์ค„ ๋ฐฐ์—ด ํ˜•ํƒœ๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉ)

    โž•ย ์„ธ๋กœ ๋ฐฐ์—ด / ์—ฌ๋Ÿฌ ์ค„๋กœ ๋ฐฐ์—ด๋„ ๊ฐ€๋Šฅ

  4. Tag: ์ฝ˜ํ…์ธ ๋ฅผ ์„ค๋ช…ํ•˜๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ผ๋ฒจ ๋ถ™์ด๋Š” ์—ญํ• 

    โž•ย Tag๋กœ ์ฝ˜ํ…์ธ  ๋ถ„๋ฅ˜ / ์›ํ•˜๋Š” ์ฝ˜ํ…์ธ ๋“ค๋งŒ ๊ฒ€์ƒ‰ ๊ฐ€๋Šฅ

  5. Autocomplete(์ž๋™์™„์„ฑ): ์‚ฌ์šฉ์ž๊ฐ€ ๋‚ด์šฉ ์ž…๋ ฅ ์ค‘์ผ ๋•Œ ์ž…๋ ฅํ•˜๊ณ ์ž ํ•˜๋Š” ๋‚ด์šฉ๊ณผ ์ผ์น˜ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์€ ํ•ญ๋ชฉ์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ

    ๐Ÿ‘‰ย ์‚ฌ์šฉ์ž์˜ ์ •๋ณด ์ž…๋ ฅ ์‹œ๊ฐ„ ๋‹จ์ถ•ํ•ด์ฃผ๋ฉฐ, ์ •๋ณด ๊ฒ€์ƒ‰์‹œ ๋งŽ์ด ์‚ฌ์šฉ
    โœ‹ย ์ž๋™ ์™„์„ฑ ํ•ญ๋ชฉ์— so many ํ•ญ๋ชฉ ๋‚˜์˜ค์ง€ ์•Š๋„๋ก ๊ฐœ์ˆ˜ ์ œํ•œํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ ๐Ÿ‘

  6. Dropdown: ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ํ•ญ๋ชฉ์„ ์ˆจ๊ฒจ๋†จ๋‹ค๊ฐ€, ํŽผ์ณ์ง€๋ฉด์„œ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์คŒ

    ๐Ÿ‘ย ์‚ฌ์šฉ์ž๊ฐ€ ์ž์‹ ์ด ์„ ํƒํ•œ ํ•ญ๋ชฉ์„ ์ •ํ™•ํžˆ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ค‘์š”!

  7. Accordion(์•„์ฝ”๋””์–ธ): ์ ‘์—ˆ๋‹ค ํˆ๋‹ค ํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ / ๋ณดํ†ต ๊ฐ™์€ ๋ถ„๋ฅ˜ ์•„์ฝ”๋””์–ธ ์—ฌ๋Ÿฌ๊ฐœ ์—ฐ์† ๋ฐฐ์น˜

    โžฐย ๋ณดํ†ต ๊น”๋”ํ•œ ํ™”๋ฉด ๊ตฌ์„ฑ์„ ์œ„ํ•ด ์‚ฌ์šฉ
    โžฐย ํŠธ๋ฆฌ ๊ตฌ์กฐ / ๋ฉ”๋‰ด๋ฐ”๋กœ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ์—” ์ƒํ•˜ ๊ด€๊ณ„ ํ‘œํ˜„์„ ์œ„ํ•ด ์‚ฌ์šฉ
    โžฐย ์ฝ˜ํ…์ธ  ๋‹ด๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ์—” ํ•ต์‹ฌ ๋‚ด์šฉ์„ ๋จผ์ € ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ

  8. Carousel(์บ๋Ÿฌ์…€): like ํšŒ์ „๋ชฉ๋งˆ ๐ŸŽ ย ๐Ÿ‘‰ย ๋น™๊ธ€๋น™๊ธ€ ๋Œ์•„๊ฐ€๋ฉด์„œ ์ฝ˜ํ…์ธ  ํ‘œ์‹œ

    โžฐย ์ž๋™์œผ๋กœ ์ฝ˜ํ…์ธ ๊ฐ€ ๋Œ์•„๊ฐ€๊ฑฐ๋‚˜, ์‚ฌ์šฉ์ž๊ฐ€ ์˜†์œผ๋กœ ๋„˜๊ฒจ์•ผ๋งŒ ๋„˜์–ด๊ฐ€๋„๋ก ์„ ํƒ ๊ฐ€๋Šฅ

  9. Pagination: ํ•œ ํŽ˜์ด์ง€์— ๋„์šธ ๊ฒฝ์šฐ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์„ ๊ฒฝ์šฐ, ๋ฒˆํ˜ธ๋ฅผ ๋ถ™์—ฌ ํŽ˜์ด์ง€ ๊ตฌ๋ถ„ํ•ด์ฃผ๋Š” ๊ฒƒ
    ๐Ÿ‘ย ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ํŽ˜์ด์ง€๋กœ ๋ฐ”๋กœ๋ฐ”๋กœ ์ ‘๊ทผ ๊ฐ€๋Šฅ
    ๐Ÿ‘Žย ํŽ˜์ด์ง€๋ฅผ ๋„˜๊ธฐ๊ธฐ ์œ„ํ•ด์„  ์ž ์‹œ ๋ฉˆ์ถฐ์•ผ ํ•˜๋ฏ€๋กœ ๋งค๋„๋Ÿฌ์šด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ๋Š” ๊ฑฐ๋ฆฌ๊ฐ€ ๋ฉ€ ์ˆ˜๋„..

  10. Infinite Scroll, Continuous Scroll(๋ฌดํ•œ ์Šคํฌ๋กค)
    : ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋–„๊นŒ์ง€ ๋ฌดํ•œ์œผ๋กœ ์Šคํฌ๋กค ๋‚ด๋ฆผ ๊ฐ€๋Šฅ
    โžฐย ํ•œ ๋ฒˆ์— ๋„์šฐ๊ธฐ์—” ์ •๋ณด๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์„ ๋•Œ ์‚ฌ์šฉ
    โžฐย ๋ณดํ†ต ํŽ˜์ด์ง€ ๋งจ ์•„๋ž˜์— ๋„๋‹ฌํ•˜๋ฉด ์ถ”๊ฐ€ ์ฝ˜ํ…์ธ  ๋กœ๋“œํ•ด์˜ค๋Š” ๋ฐฉ์‹์œผ๋กœ ๋งŒ๋“ฆ
    โœ‹ย ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋ฅผ ํ•œ ๋ฒˆ์— ๋ฐ›์•„์˜จ ํ›„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์€ ๋ฌดํ•œ ์Šคํฌ๋กค์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์—†์Œ

    ๐Ÿ‘ย ์ž ์‹œ ๋ฉˆ์ถฐ์„œ ํŽ˜์ด์ง€ ์„ ํƒํ•  ํ•„์š” โŒย ๐Ÿ‘‰ย ๋ณด๋‹ค ๋” ๋งค๋„๋Ÿฌ์šด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์ œ๊ณต
    ๐Ÿ‘Žย ์ง€๋‚˜์นœ ์ฝ˜ํ…์ธ  ์ฐพ๊ธฐ ํž˜๋“ฆ / ์ฝ˜ํ…์ธ  ๋์ด ์–ด๋”˜์ง€ ์•Œ ์ˆ˜ ์—†์Œ where.. ๐Ÿคทโ€โ™€๏ธ

  11. GNB(Global Navigation Bar) & LNB(Local Navigation Bar)
    โœ”๏ธย GNB: ์–ด๋Š ํŽ˜์ด์ง€์—์„œ๋“  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ์ƒ์œ„ ๋ฉ”๋‰ด๋กœ, ํ•ญ์ƒ ๋™์ผํ•œ ์œ„์น˜์— ์žˆ์–ด์•ผ ํ•จ
    โœ”๏ธย LNB: GNB์— ์ข…์†๋˜๋Š”์„œ๋ธŒ ๋ฉ”๋‰ด / ํŠน์ • ํŽ˜์ด์ง€์—์„œ๋งŒ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋‰ด


๐Ÿ“Žย UI Layout

โœ”๏ธย Grid System

์งˆ์„œ ์žˆ๋Š” ๊ตฌ์กฐ์˜ UI ๊ตฌ์„ฑ์„ ๋„์™€์ฃผ๋Š” system์œผ๋กœ์จ,
ํ™”๋ฉด์„ ๊ฒฉ์ž๋กœ ๋‚˜๋ˆˆ ๋‹ค์Œ, ๊ทธ ๊ฒฉ์ž์— ๋งž์ถฐ ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•

โœ”๏ธย Column Grid System
: ํ™”๋ฉด์„ ์„ธ๋กœ๋กœ ๋ช‡ ๊ฐœ์˜ ์˜์—ญ์œผ๋กœ ๋‚˜๋ˆŒ ๊ฒƒ์ธ๊ฐ€์— ์ดˆ์ 
โžฐย Margin, Column, Gutter 3๊ฐ€์ง€ ์š”์†Œ๋กœ ๊ตฌ์„ฑ

  1. Margin: ํ™”๋ฉด ์–‘์ชฝ ์—ฌ๋ฐฑ

  2. Column: ์ฝ˜ํ…์ธ ๊ฐ€ ์œ„์น˜ํ•˜๊ฒŒ ๋ , ์„ธ๋กœ๋กœ ๋‚˜๋ˆ„์–ด์ง„ ์˜์—ญ

    โžฐย ํ‘œ์ค€์ ์œผ๋กœย ๐Ÿ“ฑPhone: 4๊ฐœ, Tablet: 8๊ฐœ, ๐Ÿ’ปย PC: 12๊ฐœ column์œผ๋กœ ๋‚˜๋ˆ”
    โžฐย break point: ์ด๋ฏธ์ง€ ์† ํ™”๋ฉด ํฌ๊ธฐ ๊ตฌ๋ถ„์„ 

    ๐Ÿ‘ย ์ƒ๋Œ€ ๋‹จ์œ„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ˜ํ…์ธ ๊ฐ€ ์ฐฝ ํฌ๊ธฐ์— ๋งž์ถฐ์„œ ํฌ๊ธฐ๊ฐ€ ๋ณ€ํ•˜๋„๋ก ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Œ

  3. Gutter: Column ์‚ฌ์ด ๊ณต๊ฐ„์œผ๋กœ, ์ฝ˜ํ…์ธ  ๊ตฌ๋ถ„์— ๋„์›€

    โžฐย Gutter ๊ฐ„๊ฒฉ์ด ์ข์„์ˆ˜๋ก ์ฝ˜ํ…์ธ ๋“ค๊ฐ„์˜ ์—ฐ๊ด€์„ฑ์ด ์žˆ์–ด ๋ณด์ด๋ฉฐ, ๋„“์„์ˆ˜๋ก ๊ฐ ์ฝ˜ํ…์ธ ๊ฐ€ ๋…๋ฆฝ์ ์ธ ๋Š๋‚Œ์„ ์คŒ
    โœ‹ย Gutter๋Š” ์•„๋ฌด๋ฆฌ ๋„“์–ด๋„ Column ๋„ˆ๋น„๋ณด๋‹ค๋Š” ์ž‘๊ฒŒ ์„ค์ •ํ•˜๊ธฐ


โ˜‘๏ธย UX Design

๐Ÿ“Žย Good UX๋ฅผ ๋งŒ๋“œ๋Š” ์š”์†Œ - Peter Morville ๋ฒŒ์ง‘ ๋ชจํ˜•

โœ‹ย UX ํ‰๊ฐ€์—๋„ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Œ

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-27 แ„‹แ…ฉแ„’แ…ฎ 5 00 45
  1. ์œ ์šฉ์„ฑ(Useful): ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”๊ฐ€?
  2. ์‚ฌ์šฉ์„ฑ(Usable): ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด๊ฐ€?
  3. ๋งค๋ ฅ์„ฑ(Desirable): ์ œํ’ˆ์ด ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ๋งค๋ ฅ์ ์ธ๊ฐ€?
  4. ์‹ ๋ขฐ์„ฑ(Credible): ์‚ฌ์šฉ์ž๊ฐ€ ์ œํ’ˆ/์„œ๋น„์Šค๋ฅผ ๋ฏฟ๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?
  5. ์ ‘๊ทผ์„ฑ(Accessible): ๋ˆ„๊ตฌ๋“ ์ง€ ์ œํ’ˆ/์„œ๋น„์Šค์— ์ ‘๊ทผํ•˜๊ธฐ ์‰ฌ์šด๊ฐ€?
  6. ๊ฒ€์ƒ‰ ๊ฐ€๋Šฅ์„ฑ(Findable): ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ/์ •๋ณด๋ฅผ ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š”๊ฐ€?
  7. ๊ฐ€์น˜์„ฑ(Valuable): ๊ณ ๊ฐ์—๊ฒŒ ๊ฐ€์น˜๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”๊ฐ€?

๐Ÿ“Žย User Flow

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

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-27 แ„‹แ…ฉแ„’แ…ฎ 5 08 02

๐Ÿ‘ย ์‚ฌ์šฉ์ž ํ๋ฆ„ ์ƒ ์–ด์ƒ‰ํ•˜๊ฑฐ๋‚˜ ๋งค๋„๋Ÿฝ์ง€ ์•Š์€ ๋ถ€๋ถ„์„ ๋ฐœ๊ฒฌํ•˜์—ฌ ์ˆ˜์ • ๊ฐ€๋Šฅ
๐Ÿ‘ย ์žˆ์œผ๋ฉด ์ข‹์€ ๊ธฐ๋Šฅ์„ ๋ฐœ๊ฒฌํ•˜์—ฌ ์ถ”๊ฐ€ / ์—†์–ด๋„ ์ƒ๊ด€ ์—†๋Š” ๊ธฐ๋Šฅ์„ ๋ฐœ๊ฒฌํ•˜๊ณ  ์‚ญ์ œ ๊ฐ€๋Šฅ
๐Ÿ‘‰ย UX ๊ฐœ์„  ๊ฐ€๋Šฅ ูฉ( แ› )ูˆ

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-27 แ„‹แ…ฉแ„’แ…ฎ 5 10 10
  1. ์ง์‚ฌ๊ฐํ˜• โ—ฝ๏ธ: ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ฒŒ ๋  ํ™”๋ฉด
  2. ๋‹ค์ด์•„๋ชฌ๋“œ ๐Ÿ”ธ: ์‚ฌ์šฉ๊ฐ€ ์ทจํ•˜๊ฒŒ ๋  ํ–‰๋™
  3. ํ™”์‚ดํ‘œ โžก๏ธ: ํ™”๋ฉด๊ณผ ํ–‰๋™์„ ์—ฐ๊ฒฐ์‹œ์ผœ์ฃผ๋Š” ํ™”์‚ดํ‘œ

โ˜‘๏ธย UI/UX ์‚ฌ์šฉ์„ฑ ํ‰๊ฐ€

๐Ÿ“Žย Jakobโ€™s Ten Usability Heuristics (์ œ์ด์ฝฅ ๋‹์Šจ์˜ 10๊ฐ€์ง€ ์‚ฌ์šฉ์„ฑ ํ‰๊ฐ€ ๊ธฐ์ค€)

  1. ์‹œ์Šคํ…œ ์ƒํƒœ์˜ ๊ฐ€์‹œ์„ฑ(Visibility of system status)
    : ํ•ฉ๋ฆฌ์ ์ธ ์‹œ๊ฐ„ ๋‚ด์— ์ ์ ˆํ•œ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง„ํ–‰ ์ƒํ™ฉ ์ •๋ณด ํ•ญ์ƒ ์ œ๊ณต
  2. ์‹œ์Šคํ…œ & ํ˜„์‹ค ์„ธ๊ณ„ ์ผ์น˜(Match between system and the real world)
    : ์ „๋ฌธ์šฉ์–ด ๋Œ€์‹  ์นœ์ˆ™์ž ๋‹จ์–ด, ๊ตฌ๋ฌธ, ๊ฐœ๋… ์‚ฌ์šฉ
  3. ์‚ฌ์šฉ์ž ์ œ์–ด & ์ž์œ (User control and freedom)
    : ์ง„ํ–‰ ์ค‘์ธ ์ž‘์—…์—์„œ ๋ฒ—์–ด๋‚  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ• / ์‹ค์ˆ˜๋กœ ์ˆ˜ํ–‰ํ•œ ์ž‘์—…์„ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•, ์ฆ‰ โ€˜ํƒˆ์ถœ๊ตฌ' ์ œ๊ณต
  4. ์ผ๊ด€์„ฑ & ํ‘œ์ค€ (Consistency and standards)
    โžฐย ์™ธ๋ถ€ ์ผ๊ด€์„ฑ: ์ผ๊ด€์ ์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ์ œ๊ณต์„ ์œ„ํ•ด ํ”Œ๋žซํ’ˆ / ์—…๊ณ„ ๊ด€์Šต ๋”ฐ๋ฅด๊ธฐ
    โžฐย ๋‚ด๋ถ€ ์ผ๊ด€์„ฑ: ์‚ฌ์šฉ์ž๊ฐ€ ํ˜ผ๋ž€์Šค๋Ÿฝ์ง€ ์•Š๋„๋ก ์ œํ’ˆ ์ธํ„ฐํŽ˜์ด์Šค / ์ •๋ณด ์ œ๊ณต์— ์ผ๊ด€์„ฑ โญ•๏ธ
  5. ์˜ค๋ฅ˜ ๋ฐฉ์ง€(Error prevention)
    : ์˜ค๋ฅ˜ ๋ฐœ์ƒ ์‰ฌ์šด ์ƒํ™ฉ ์ œ๊ฑฐ ๐Ÿ‘‰ย ์‚ฌ์šฉ์ž ์‹ค์ˆ˜ ๋ฐฉ์ง€
  6. ๊ธฐ์–ต๋ณด๋‹จ ์ง๊ด€(Recognition rather than recall)
    : ์‚ฌ์šฉ์ž๊ฐ€ ๊ธฐ์–ตํ•ด์•ผ ํ•˜๋Š” ์ •๋ณด ์ค„์ด๊ธฐ โฌ‡๏ธย (ex. ์ตœ๊ทผ ๊ฒ€์ƒ‰ ๋ชฉ๋ก ํ™•์ธ)
  7. ์‚ฌ์šฉ์˜ ์œ ์—ฐ์„ฑ & ํšจ์œจ์„ฑ(Flexibility and efficiency of use)
    : ์ดˆ๋ณด์ž&์ „๋ฌธ๊ฐ€ ๋ชจ๋‘์—๊ฒŒ ๊ฐœ๋ณ„ ๋งž์ถค ๊ธฐ๋Šฅ ์ œ๊ณต
  8. ๋ฏธํ•™์ ์ด๊ณ  ๋ฏธ๋‹ˆ๋ฉ€ํ•œ ๋””์ž์ธ(Aesthetic and minimalist design)
    : ์ธํ„ฐํŽ˜์ด์Šค์— ๊ด€๋ จ์ด ์—†๊ฑฐ๋‚˜ ๋ถˆํ•„์š”ํ•œ ์ •๋ณด ํฌํ•จ๋˜์ง€ ์•Š๋„๋ก ํ•จ.
    โœ‹ ์ฝ˜ํ…์ธ ์™€ ๊ธฐ๋Šฅ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ •ํ•˜๊ณ  ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์€ ๊ฒƒ์„ ์ž˜ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธ
  9. ์˜ค๋ฅ˜ ์ธ์‹, ์ง„๋‹จ, ๋ณต๊ตฌ ์ง€์›(Help users recognize, diagnose, and recover from errors)
    : ์‚ฌ์šฉ์ž๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด๋กœ ๋ฌธ์ œ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์ •ํ™•ํžˆ ํ‘œ์‹œ ๐Ÿ‘‰ย ํ•ด๊ฒฐ ๋ฐฉ์•ˆ ์ œ์•ˆ
  10. ๋„์›€๋ง & ์„ค๋ช… ๋ฌธ์„œ(Help and documentation)
    : ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ๋ฌธ์„œ ์ œ๊ณต


โœ๏ธ ์˜ค๋Š˜ ํ•™์Šตํ•œ ๋‚ด์šฉ์€ UI/UX๋กœ ๊ทธ๋‚˜๋งˆ ๋ถ€๋‹ด์—†๋Š” ๋‚ด์šฉ์ด๋ผ coplit ๋ฌธ์ œ๋ฅผ ์ฒ˜์Œ ํ‘ผ์ง€ 2๋‹ฌ๋งŒ์— '๋ณ€์ˆ˜์™€ ์ž๋ฃŒํ˜•(10)', '์กฐ๊ฑด๋ฌธ(17)', '๋ฌธ์ž์—ด(17)', '๋ฐ˜๋ณต๋ฌธ(21)' ๋ฌธ์ œ๋ฅผ ๋ณต์Šตํ–ˆ๋‹ค. ๋ฐ˜๋ณต๋ฌธ์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ์ฑ•ํ„ฐ๋Š” 1~2๋ฌธ์ œ ๋นผ๊ณ  ์ˆ ์ˆ  ํ’€๋ฆฐ ํŽธ์ด์—ˆ์ง€๋งŒ ๋ฐ˜๋ณต๋ฌธ์—์„  ๋ฌด๋ ค 7๋ฌธ์ œ๋‚˜ ์–ด๋–ป๊ฒŒ ์ ‘๊ทผํ–ˆ์—ˆ๋Š”์ง€ ๊ธฐ์–ต๋„ ์•ˆ ๋‚ฌ๋‹ค.. ์ž˜ ์•ˆ ํ’€๋ ธ๋˜ ๋ฌธ์ œ๋Š” github์— ๋”ฐ๋กœ ๊ธฐ๋กํ•ด๋‘๊ธฐ!

โœ… ์˜ค๋Š˜์€ Programmers - Lv.1_๋‚˜๋ˆ„์–ด ๋–จ์–ด์ง€๋Š” ์ˆซ์ž ๋ฐฐ์—ด.js ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ ํ’ˆ

profile
FE developer

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