โœ”๏ธ ์‹œ์ž‘

UI / UX์— ๋Œ€ํ•ด ์ž์„ธํžˆ ํ•™์Šตํ–ˆ๋‹ค.


๐Ÿ“ UI / UX

โœ”๏ธ UI(User Interface, ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค)

  • ์‚ฌ๋žŒ๋“ค์ด ์ปดํ“จํ„ฐ์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ์‹œ์Šคํ…œ

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

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

โœ”๏ธ UX(User Experience, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜)

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

- UI/UX์˜ ๊ด€๊ณ„

  • UX๋Š” UI๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ๋‹ค.
  • UI์™€ UX๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐœ๋…์ด์ง€๋งŒ ๋—„๋ ˆ์•ผ ๋—ผ ์ˆ˜ ์—†๋Š” ๊ด€๊ณ„์ด๋‹ค.
  • ์„œ๋กœ๋ฅผ ๋ณด์™„ํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.
  • UX๊ฐ€ ์ข‹์ง€ ์•Š์€ ๊ณณ์„ ์ฐพ์•„๋‚ด UI๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๊ณ , UI๋ฅผ ๊ฐœ์„ ํ•ด UX๊ฐ€ ์ข‹์•„์ง€๊ธฐ๋„ ํ•œ๋‹ค.

๐Ÿ“๋””์ž์ธ ํŒจํ„ด

  • ์ž์ฃผ ์‚ฌ์šฉ ๋˜๋Š” UI ์ปดํฌ๋„ŒํŠธ
  • ๋””์ž์ด ํŒจํ„ด์„ ์‚ฌ์šฉํ•ด ๋‹ค๋ฅธ ์ง๊ตฐ๊ณผ์˜ ์˜์‚ฌ์†Œํ†ต๋„ ์›ํ™œํ•ด์ ธ ํ˜‘์—… ํšจ์œจ์„ ๋†’์ผ ์ˆ˜ ์žˆ๋‹ค.

1. ๋ชจ๋‹ฌ(Modal)

  • ๊ธฐ์กด์— ์ด์šฉํ•˜๋˜ ํ™”๋ฉด ์œ„์— ์˜ค๋ฒ„๋ ˆ์ด ๋˜๋Š” ์ฐฝ
  • ๋ธŒ๋ผ์šฐ์ € ์„ค์ •์— ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๋Š”๋‹ค. (๊ผญ ๋ณด์—ฌ์ค˜์•ผ ํ•  ๋‚ด์šฉ์ด ์žˆ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํŽธ)

ํŒ์—…์ฐฝ : ๋˜ ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ € ํŽ˜์ด์ง€๋ฅผ ์—ฐ๋‹ค. (๋ชจ๋‹ฌ๊ณผ ๊ฐœ๋…์ด ๋‹ค๋ฅด๋‹ค.)

2. ํ† ๊ธ€(TOggle)

  • ON/OFF๋ฅผ ์„ค์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์Šค์œ„์น˜ ๋ฒ„ํŠผ
  • ์–ด๋Š ์˜ต์…˜์ด ์„ ํƒ๋˜์–ด ์žˆ๋Š”์ง€ ์ง๊ด€์ ์œผ๋กœ ์•Œ ์ˆ˜ ์žˆ์–ด์•ผํ•œ๋‹ค.

์˜ต์…˜์˜ ๊ฐœ์ˆ˜๊ฐ€ ๋งŽ์•„์งˆ ๊ฒฝ์šฐ ํƒญ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•ด์•ผํ•œ๋‹ค.

3.ํƒญ (Tab)

  • ์ฝ˜ํ…์ธ ๋ฅผ ๋ถ„๋ฆฌํ•ด์„œ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ
    - ๊ฐ ์„น์…˜์˜ ์ด๋ฆ„์ด ๋„ˆ๋ฌด ๊ธธ์ง€ ์•Š์•„์•ผํ•œ๋‹ค.
    - ์„น์…˜์˜ ๊ตฌ๋ถ„์ด ๋ช…ํ™•ํ•ด์•ผํ•œ๋‹ค.
    - ํ˜„์žฌ ์–ด๋–ค ์„น์…˜์„ ๋ณด๊ณ  ์žˆ๋Š”์ง€ ํ‘œ์‹œํ•ด ์ค˜์•ผํ•œ๋‹ค.

4.ํƒœ๊ทธ (Tag)

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

5.์ž๋™์™„์„ฑ (Autocomplete)

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

6.๋“œ๋กญ๋‹ค์šด (Dropdown)

  • ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ํ•ญ๋ชฉ๋“ค์„ ์ˆจ๊ฒจ ๋‘์—ˆ๋‹ค๊ฐ€ ํŽผ์น˜๋ฉด์„œ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ฒƒ
    - ์‚ฌ์šฉ์ž๊ฐ€ ์ž์‹ ์ด ์„ ํƒํ•œ ํ•ญ๋ชฉ์„ ์ •ํ™•ํžˆ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ

7.์•„์ฝ”๋””์–ธ (Accordion)

  • ์ ‘์—ˆ๋‹ค/ํˆ๋‹ค ํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ
  • ํŠธ๋ฆฌ ๊ตฌ์กฐ์˜ ์ฝ˜ํ…์ธ ๋ฅผ ๋ Œ๋”๋ง ํ•  ๋•Œ/ ๋ฉ”๋‰ด๋ฐ”๋กœ ์‚ฌ์šฉํ•  ๋•Œ
    - ์ฝ˜ํ…์ธ ๋ฅผ ๋‹ด๋Š” ์šฉ๋„์ธ ๊ฒฝ์šฐ ํ•ต์‹ฌ ๋‚ด์šฉ์„ ๋จผ์ „ ์ „๋‹ฌํ•˜๋ ค๋Š” ๋ชฉ์ ์ด ์žˆ๋‹ค.
  • ๊ณตํ•ญ์˜ ์ˆ˜ํ•˜๋ฌผ ์ปจ๋ฒ ์ด์–ด ๋ฒจํŠธ/ํšŒ์ „๋ชฉ๋งˆ๋ผ๋Š” ๋œป
  • ๋น™๊ธ€๋น™๊ธ€ ๋Œ์•„๊ฐ€๋ฉด์„œ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œ์‹œํ•ด ์ฃผ๋Š” ๊ฒƒ (์Šฌ๋ผ์ด๋“œ ํšจ๊ณผ)

9.ํŽ˜์ด์ง€๋„ค์ด์…˜ (Pagination)

  • ํ•œ ํŽ˜์ด์ง€์— ๋„์šฐ๊ธฐ์— ์ •๋ณด๊ฐ€ ๋งŽ์€ ๊ฒฝ์šฐ ์ฑ… ํŽ˜์ด์ง€๋ฅผ ๋„˜๊ธฐ๋“ฏ์ด ๋ฒˆํ˜ธ๋ฅผ ๋ถ™์—ฌ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ๋ถ„ํ•˜๋Š” ๊ฒƒ (ํŽ˜์ด์ง€ ์ด๋™)

์žฅ์  : ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ํŽ˜์ด์ง€๋กœ ๋ฐ”๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.
๋‹จ์  : ํŽ˜์ด์ง€๋ฅผ ๋„˜๊ธฐ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ž ์‹œ ๋ฉˆ์ถฐ์•ผํ•˜๊ธฐ์— ๋งค๋„๋Ÿฌ์šด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ ๊ฑฐ๋ฆฌ๊ฐ€ ๋ฉ€ ์ˆ˜ ์žˆ๋‹ค.

10.๋ฌดํ•œ ์Šคํฌ๋กค (Infinite Scroll, Continuous Scroll)

  • ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๊นŒ์ง€ ๋ฌดํ•œ์œผ๋กœ ์Šคํฌ๋กค์„ ๋‚ด๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฒƒ
  • ํŽ˜์ด์ง€๋„ค์ด์…˜๊ณผ ๋™์ผํ•˜๊ฒŒ ํ•œ ๋ฒˆ์— ๋„์šฐ๊ธฐ์—” ๋งŽ์€ ์ •๋ณด๊ฐ€ ์žˆ์„ ๋•Œ ์‚ฌ์šฉ

์žฅ์  : ํŽ˜์ด์ง€๋„ค์ด์…˜๊ณผ ๊ฐ™์ด ์ž ์‹œ ๋ฉˆ์ถฐ์„œ ํŽ˜์ด์ง€๋ฅผ ์„ ํƒํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ์— ์ข€ ๋” ๋งค๋„๋Ÿฝ๋‹ค.
๋‹จ์  : ์ฝ˜ํ…์ธ ์˜ ๋์ด ์–ด๋”˜์ง€ ์•Œ ์ˆ˜ ์—†๋‹ค, ์ง€๋‚˜์นœ ์ฝ˜ํ…์ธ ๋ฅผ ์ฐพ๊ธฐ ์–ด๋ ต๋‹ค.

๋ณดํ†ต ํŽ˜์ด์ง€์˜ ๋งจ ์•„๋ž˜์— ๋„๋‹ฌํ•˜๋ฉด ์ถ”๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ๋กœ๋“œํ•ด์˜ค๋Š” ๋ฐฉ์‹
์ฒ˜์Œ๋ถ€ํ„ฐ ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋ฅผ ๋กœ๋“œํ•ด์˜จ ํ›„ ์กฐ๊ธˆ์”ฉ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ์‹์€ ๋ฌดํ•œ ์Šคํฌ๋กค์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ์ฃผ์˜ํ•ด์•ผ ํ•œ๋‹ค.

11.GNB (Global Navigation Bar), LNB (Local Navigation Bar)

GNB : ์–ด๋Š ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€๋“  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ์ƒ์œ„ ๋ฉ”๋‰ด
LNB : GNB์— ์ข…์†๋˜๋Š” ์„œ๋ธŒ ๋ฉ”๋‰ด ํ˜น์€ ํŠน์ • ํŽ˜์ด์ง€์—์„œ๋งŒ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋‰ด

GNB๋Š” ํ•ญ์ƒ ๋™์ผํ•œ ์œ„์น˜์— ์žˆ์–ด์•ผ ํ•œ๋‹ค.
GNB๊ฐ€ ์žˆ๋‹ค ์—†๋‹ค ํ•œ๋‹ค๊ฑฐ๋‚˜ ์œ„์น˜๊ฐ€ ์ž๊พธ ๋ณ€ํ•˜๋ฉด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ์•…์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

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

  • ๊ทธ๋ฆฌ๋“œ(grid) : ์ˆ˜์ง, ์ˆ˜ํ‰์œผ๋กœ ๋ถ„ํ• ๋œ ๊ฒฉ์ž๋ฌด๋Šฌ
  • ํ™”๋ฉด์„ ์„ธ๋กœ๋กœ ๋ช‡ ๊ฐœ์˜ ์˜์—ญ์œผ๋กœ ๋‚˜๋ˆŒ ๊ฒƒ์ธ๊ฐ€์— ์ดˆ์ ์„ ๋งž์ถ˜ ์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ(Column Grid System)์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • Margin, Column, Gutter ์„ธ ๊ฐ€์ง€ ์š”์†Œ ๊ตฌ์„ฑ

1. Margin

  • ํ™”๋ฉด ์–‘์ชฝ์˜ ์—ฌ๋ฐฑ์„ ์˜๋ฏธ (px, vw, %๋‹จ์œ„๋กœ ์„ค์ •)

2. Column

  • ์ฝ˜ํ…์ธ ๊ฐ€ ์œ„์น˜ํ•˜๊ฒŒ ๋ , ์„ธ๋กœ๋กœ ๋‚˜๋ˆ„์–ด์ง„ ์˜์—ญ
  • ํ‘œ์ค€์ ์ธ ์นผ๋Ÿผ ๊ฐœ์ˆ˜
    - ํœด๋Œ€ํฐ : 4๊ฐœ
    - ํƒœ๋ธ”๋ฆฟ : 8๊ฐœ
    - PC : 12๊ฐœ
  • ๋””๋ฐ”์ด์Šค ํ™”๋ฉด ํฌ๊ธฐ
    - ์ž‘์€ ์Šค๋งˆํŠธํฐ : 0 ~ 480
    - ํฐ ์Šค๋งˆํŠธํฐ/ํƒœํ”Œ๋ฆฟ ์„ธ๋กœ : 481 ~ 768
    - ํƒœ๋ธ”๋ฆฟ ๊ฐ€๋กœ/๋…ธํŠธ๋ถ : 769 ~ 1279
    - ๋ฐ์Šคํฌํƒ‘ : 1280 ~

3. Gutter

  • Column ์‚ฌ์ด์˜ ๊ณต๊ฐ„์œผ๋กœ, ์ฝ˜ํ…์ธ ๋ฅผ ๊ตฌ๋ถ„ํ•˜๋Š”๋ฐ ๋„์›€์„ ์ค€๋‹ค.
    - Gutter์˜ ๊ฐ„๊ฒฉ์ด ์ข์„์ˆ˜๋ก : ์ฝ˜ํ…์ธ ๋“ค์ด ์—ฐ๊ด€์„ฑ ์žˆ์–ด ๋ณด์ธ๋‹ค.
    - Gutter์˜ ๊ฐ„๊ฒฉ์ด ๋„“์„์ˆ˜๋ก : ๊ฐ ์ฝ˜ํ…์ธ ๊ฐ€ ๋…๋ฆฝ์ ์ธ ๋Š๋‚Œ์„ ์ค€๋‹ค.

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

1. ์œ ์šฉ์„ฑ(Useful) : ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ๊ฐ€?

์ œํ’ˆ์ด๋‚˜ ์„œ๋น„์Šค๊ฐ€ ๋ชฉ์ ์— ๋งž๋Š”, ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”๊ฐ€์— ๊ด€ํ•œ ์š”์†Œ

2. ์‚ฌ์šฉ์„ฑ(Usable) : ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด๊ฐ€?

์ œํ’ˆ์ด ๋ณธ์—ฐ์˜ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์„ ๋„˜์–ด์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด๊ฐ€์— ๊ด€ํ•œ ์š”์†Œ

3. ๋งค๋ ฅ์„ฑ(Desirable) : ๋งค๋ ฅ์ ์ธ๊ฐ€?

๋ง ๊ทธ๋Œ€๋กœ ์ œํ’ˆ์ด ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ๋งค๋ ฅ์ ์ธ๊ฐ€์— ๋Œ€ํ•œ ์š”์†Œ

4. ์‹ ๋ขฐ์„ฑ(Credible) : ์‹ ๋ขฐํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?

์‚ฌ์šฉ์ž๊ฐ€ ์ œํ’ˆ์ด๋‚˜ ์„œ๋น„์Šค๋ฅผ ๋ฏฟ๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€์— ๊ด€ํ•œ ์š”์†Œ

5. ์ ‘๊ทผ์„ฑ(Accessible) : ์ ‘๊ทผํ•˜๊ธฐ ์‰ฌ์šด๊ฐ€?

๋‚˜์ด, ์„ฑ๋ณ„, ์žฅ์•  ์—ฌ๋ถ€๋ฅผ ๋– ๋‚˜์„œ ๋ˆ„๊ตฌ๋“ ์ง€ ์ œํ’ˆ์ด๋‚˜ ์„œ๋น„์Šค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€์— ๊ด€ํ•œ ์š”์†Œ

6. ๊ฒ€์ƒ‰ ๊ฐ€๋Šฅ์„ฑ(Findable) : ์ฐพ๊ธฐ ์‰ฌ์šด๊ฐ€?

์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‚˜ ์ •๋ณด๋ฅผ ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š”๊ฐ€์— ๊ด€ํ•œ ์š”์†Œ

7. ๊ฐ€์น˜์„ฑ(Valuable) : ๊ฐ€์น˜๋ฅผ ์ œ๊ณตํ•˜๋Š”๊ฐ€?

์œ„์—์„œ ์–ธ๊ธ‰๋œ ๋ชจ๋“  ์š”์†Œ๋“ค์„ ์ดํ•ฉํ•˜์—ฌ ๊ณ ๊ฐ์—๊ฒŒ ๊ฐ€์น˜๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”๊ฐ€์— ๊ด€ํ•œ ์š”์†Œ

๐Ÿ“User Flow(์‚ฌ์šฉ์ž ํ๋ฆ„)

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

User Flow ๋‹ค์ด์–ด๊ทธ๋žจ ์ž‘์„ฑ๋ฒ•

  • ์ง์‚ฌ๊ฐํ˜• : ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ฒŒ ๋  ํ™”๋ฉด ( ex. ํšŒ์› ๊ฐ€์ž… ํŽ˜์ด์ง€, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€ โ€ฆ )
  • ๋‹ค์ด์•„๋ชฌ๋“œ : ์‚ฌ์šฉ์ž๊ฐ€ ์ทจํ•˜๊ฒŒ ๋  ํ–‰๋™ ( ex. ๋กœ๊ทธ์ธ, ๋ฒ„ํŠผ ํด๋ฆญ, ์—…๋กœ๋“œ โ€ฆ )
  • ํ™”์‚ดํ‘œ : ์ง์‚ฌ๊ฐํ˜•(ํ™”๋ฉด)๊ณผ ๋‹ค์ด์•„๋ชฌ๋“œ(ํ–‰๋™)๋ฅผ ์—ฐ๊ฒฐ์‹œ์ผœ์ฃผ๋Š” ํ™”์‚ดํ‘œ

User Flow ๋‹ค์ด์–ด๊ทธ๋žจ์„ ๊ทธ๋ฆฌ๋ฉด ์ข‹์€ ์ด์œ 

  • ์‚ฌ์šฉ์ž ํ๋ฆ„ ์ƒ ์–ด์ƒ‰ํ•˜๊ฑฐ๋‚˜ ๋งค๋„๋Ÿฝ์ง€ ์•Š์€ ๋ถ€๋ถ„์„ ๋ฐœ๊ฒฌํ•ด ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Œ
  • ์ข‹์€ ๊ธฐ๋Šฅ์„ ๋ฐœ๊ฒฌํ•ด ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์—†์–ด๋„ ์ƒ๊ด€์—†๋Š” ๊ธฐ๋Šฅ์„ ๋ฐœ๊ฒฌํ•˜๊ณ  ์‚ญ์ œํ•  ์ˆ˜ ์žˆ์Œ

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

Heuristic(ํœด๋ฆฌ์Šคํ‹ฑ)
'์ฒดํ—˜์ ์ธ'์ด๋ผ๋Š” ๋œป, ์™„๋ฒฝํ•œ ์ง€์‹ ๋Œ€์‹  ์ง๊ด€๊ณผ ๊ฒฝํ—˜์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋ก 

1. ์‹œ์Šคํ…œ ์ƒํƒœ์˜ ๊ฐ€์‹œ์„ฑ (Visibility of system status)

ํ•ฉ๋ฆฌ์ ์ธ ์‹œ๊ฐ„ ๋‚ด์— ์ ์ ˆํ•œ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์ง„ํ–‰ ์ƒํ™ฉ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ํ•ญ์ƒ ์ œ๊ณต

ํ”ผ๋“œ๋ฐฑ์ด ์กด์žฌํ•˜๋‚˜์š”? / ์ฆ‰์‹œ ์ œ๊ณต๋˜๋‚˜์š”? / ๋ช…ํ™•ํ•œ๊ฐ€์š”?

2. ์‹œ์Šคํ…œ๊ณผ ํ˜„์‹ค ์„ธ๊ณ„์˜ ์ผ์น˜ (Match between system and the real world)

๋‚ด๋ถ€ ์ „๋ฌธ์šฉ์–ด๊ฐ€ ์•„๋‹Œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์นœ์ˆ™ํ•œ ๋‹จ์–ด, ๊ตฌ๋ฌธ ๋ฐ ๊ฐœ๋…์„ ์‚ฌ์šฉ

3. ์‚ฌ์šฉ์ž ์ œ์–ด ๋ฐ ์ž์œ  (User control and freedom)

ํ˜„์žฌ ์ง„ํ–‰ ์ค‘์ธ ์ž‘์—…์—์„œ ๋ฒ—์–ด๋‚  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•, ํ˜น์€ ์‹ค์ˆ˜๋กœ ์ˆ˜ํ–‰ํ•œ ์ž‘์—…์„ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ• (โ€™ํƒˆ์ถœ๊ตฌโ€™๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์ œ๊ณต)

4. ์ผ๊ด€์„ฑ ๋ฐ ํ‘œ์ค€ (Consistency and standards)

์™ธ๋ถ€ ์ผ๊ด€์„ฑ : ์ผ๊ด€์ ์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ”Œ๋žซํผ ๋ฐ ์—…๊ณ„์˜ ๊ด€์Šต์„ ๋”ฐ๋ฅธ๋‹ค.

์‚ฌ์šฉ์ž์—๊ฒŒ ์ต์ˆ™ํ•œ UI๋ฅผ ์ œ๊ณตํ•˜์„ธ์š”. ์ž˜ ์•Œ๋ ค์ง„ UI ๋””์ž์ธ ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋‚ด๋ถ€ ์ผ๊ด€์„ฑ : ์‚ฌ์šฉ์ž๊ฐ€ ํ˜ผ๋ž€์Šค๋Ÿฝ์ง€ ์•Š๋„๋ก ์ œํ’ˆ์˜ ์ธํ„ฐํŽ˜์ด์Šค๋‚˜ ์ •๋ณด ์ œ๊ณต์— ์ผ๊ด€์„ฑ์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค.

ex) ํ•œ ์ œํ’ˆ ๋‚ด์—์„œ ๊ฐ™์€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์œ ์ง€(๋ฒ„ํŠผ์˜ ๋ชจ์–‘, ์œ„์น˜, ์•„์ด์ฝ˜ ํฌ๊ธฐ ๋“ฑ)

5. ์˜ค๋ฅ˜ ๋ฐฉ์ง€ (Error prevention)

์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์‰ฌ์šด ์ƒํ™ฉ์„ ๋ฐฉ์ง€ํ•ด ์‚ฌ์šฉ์ž์˜ ์‹ค์ˆ˜๋ฅผ ๋ฐฉ์ง€

6. ๊ธฐ์–ต๋ณด๋‹ค๋Š” ์ง๊ด€ (Recognition rather than recall)

์‚ฌ์šฉ์ž๊ฐ€ ๊ธฐ์–ตํ•ด์•ผ ํ•˜๋Š” ์ •๋ณด๋ฅผ ์ค„์ธ๋‹ค.

ex) ์ตœ๊ทผ ๊ฒ€์ƒ‰ํ–ˆ๋˜ ๋‹จ์–ด ๋ชฉ๋ก์„ ํ™•์ธ

7. ์‚ฌ์šฉ์˜ ์œ ์—ฐ์„ฑ๊ณผ ํšจ์œจ์„ฑ (Flexibility and efficiency of use)

์ดˆ๋ณด์ž์™€ ์ „๋ฌธ๊ฐ€ ๋ชจ๋‘์—๊ฒŒ ๊ฐœ๋ณ„ ๋งž์ถค ๊ธฐ๋Šฅ์„ ์ œ๊ณต (์ปค์Šคํ…€)

8. ๋ฏธํ•™์ ์ด๊ณ  ๋ฏธ๋‹ˆ๋ฉ€ํ•œ ๋””์ž์ธ (Aesthetic and minimalist design)

์ธํ„ฐํŽ˜์ด์Šค์—๋Š” ๊ด€๋ จ์ด ์—†๊ฑฐ๋‚˜ ๋ถˆํ•„์š”ํ•œ ์ •๋ณด๊ฐ€ ํฌํ•จํ•˜์ง€ ์•Š๋„๋ก, ์ฝ˜ํ…์ธ ์™€ ๊ธฐ๋Šฅ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ •ํ•˜๊ณ  ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์€ ๊ฒƒ์„ ์ž˜ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์ธ

ex) ์‚ฌ์šฉ ๋นˆ๋„๊ฐ€ ์ ์€ ๋ฉ”๋‰ด๋ฅผ ๋‹ค ๋ณด์—ฌ์ค„ ํ•„์š”๋Š” ์—†๋‹ค. ํ•„์š”ํ•  ๋•Œ์—๋งŒ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ์ˆจ๊ฒจ๋†“๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋‹ค.

9. ์˜ค๋ฅ˜์˜ ์ธ์‹, ์ง„๋‹จ, ๋ณต๊ตฌ๋ฅผ ์ง€์› (Help users recognize, diagnose, and recover from errors)

์‚ฌ์šฉ์ž๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์ œ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์ •ํ™•ํ•˜๊ฒŒ ํ‘œ์‹œ(ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ œ์•ˆ)

10. ๋„์›€๋ง ๋ฐ ์„ค๋ช… ๋ฌธ์„œ (Help and documentation)

์ถ”๊ฐ€ ์„ค๋ช…์ด ํ•„์š” ์—†๋Š” ๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์ง€๋งŒ, ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ๋ฌธ์„œ๋ฅผ ์ œ๊ณต


โœ๏ธ ๋งˆ์น˜๋ฉฐ

UI / UX์— ๋Œ€ํ•ด ์ƒ๊ฐ ๋ณด๋‹ค ๋งŽ์€ ์‚ฌํ•ญ์„ ๊ณ ๋ คํ•˜๊ณ 
์‚ฌ์šฉ์ž ์ž…์žฅ์—์„œ ์ƒ๊ฐํ•ด ์ œํ’ˆ์„ ์ œ์ž‘ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ ์„ ๋‹ค์‹œ ํ•œ ๋ฒˆ ์ƒ๊ธฐํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๊ฒฐ๊ตญ ์‚ฌ์šฉ์ž๊ฐ€ ์ œํ’ˆ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๊ธฐ์—
์ œ์ž‘์ž๊ฐ€ ํŽธํ•œ ์ œํ’ˆ์ด ์•„๋‹Œ ์‚ฌ์šฉ์ž๊ฐ€ ์ฒ˜์Œ ์ ‘ํ•ด๋„ ์•Œ๊ธฐ ์‰ฝ๊ณ  ํŽธ๋ฆฌํ•œ ์ œํ’ˆ์„ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

profile
๐Ÿ’ป ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๋ชฉํ‘œ๋กœ ์„ฑ์žฅ ์ค‘! (์•Œ์•„๋ดค๋˜ ๋‚ด์šฉ ๋“ฑ์„ ์ •๋ฆฌํ•˜๊ธฐ)

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