๋‹ซ๊ธฐ

์ •๋ณด์ฒ˜๋ฆฌ ๊ธฐ์ถœ๋ฌธ์ œ

์ •๋ณด์ฒ˜๋ฆฌ๊ธฐ์‚ฌ · ์ •๋ณด์ฒ˜๋ฆฌ์‚ฐ์—…๊ธฐ์‚ฌ · ์ •๋ณด์ฒ˜๋ฆฌ๊ธฐ๋Šฅ์‚ฌ


์ฃผ๊ด€์‹ ์—ฐ์Šตํ•˜๊ธฐ


ํ•œ๋ฌธ์ œ์”ฉ ์—ฐ์Šตํ•˜๊ธฐ


CBT ์œ ํ˜•์œผ๋กœ ์—ฐ์Šตํ•˜๊ธฐ


์ •๋‹ต ํ™•์ธํ•˜๊ธฐ
๋‹ค์Œ ๋ฌธ์ œ
๋‹ค์Œ ๋ฌธ์ œ
O X
๋‹ค์Œ ๋ฌธ์ œ

ํ•„์ˆ˜ ์•”๊ธฐ ์ด๋ก 

UI/UX

๋ผ์ด์„ผ์Šค 2023. 1. 17. 08:42

UX๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์‹œ์Šคํ…œ์„ ์ด์šฉํ•˜๋ฉด์„œ ๋А๋ผ๊ฒŒ ๋˜๋Š” ์ด์ฒด์  ๊ฒฝํ—˜์„ ๋งํ•˜๊ณ , UI๋Š” ์‚ฌ์šฉ์ž์™€ ์‹œ์Šคํ…œ ๊ฐ„์— ์ƒํ˜ธ์ž‘์šฉ์ด ์›ํ• ํ•˜๋„๋ก ๋„์™€์ฃผ๋Š” ์„ค๊ณ„ ์ง€์นจ์ด๋‹ค.

UI/UX์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ, ์›์น™์€ ์‹œํ—˜์— ํ•œ๋ฒˆ์€ ๊ผฎ ๋‚˜์˜ค๋Š” ๋‹จ๊ณจ ๋ฌธ์ œ์ด๊ณ , ์ฃผ๊ด€์‹์—๋„ ์ž์ฃผ ๋“ฑ์žฅํ•œ๋‹ค.

ํŠนํžˆ ๊ธฐ๋ณธ ๊ฐœ๋…์€ ์ฃผ๊ด€์‹ ์„œ์ˆ ํ˜•์œผ๋กœ ๋‚˜์˜ฌ ๊ฐ€๋Šฅ์„ฑ๋„ ๋งค์šฐ ๋†’๋‹ค.

๊ฐœ๋…๊ณผ ์ข…๋ฅ˜๋ฅผ ์™„์ „ํžˆ ์™ธ์›Œ์•ผ ํ•œ๋‹ค.

 

UI(User Interface) ์„ค๊ณ„ ์›์น™ โค๏ธ‍๐Ÿ”ฅ

  • ์ง๊ด€์„ฑ : ๋ณ„๋‹ค๋ฅธ ๋…ธ๋ ฅ ์—†์ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ณ  ์ฆ‰์‹œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ •๋„
  • ์œ ํšจ์„ฑ : ์‚ฌ์šฉ์ž์˜ ๋ชฉ์ ์„ ์ •ํ™•ํ•˜๊ฒŒ ๋‹ฌ์„ฑํ•˜๋Š” ์ •๋„
  • ํ•™์Šต์„ฑ : ๋ˆ„๊ตฌ๋‚˜ ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๊ณ  ์ตํž ์ˆ˜ ์žˆ๋Š” ์ •๋„
  • ์œ ์—ฐ์„ฑ : ์‚ฌ์šฉ์ž ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ˆ˜์šฉํ•˜๊ณ  ์˜ค๋ฅ˜๋ฅผ ์ตœ์†Œํ™”ํ•˜๋Š” ์ •๋„

 

UI(User Interface) ์ข…๋ฅ˜

  • CLI(Command Line Interface) : ๋ช…๋ น ๋ฌธ์ž์—ด์„ ํ†ตํ•ด ์‹œ์Šคํ…œ๊ณผ ์ƒํ˜ธ์ž‘์šฉ
  • GUI(Graphic User Interface) : ๋ฉ”๋‰ด, ์•„์ด์ฝ˜ ๋“ฑ์˜ ๊ทธ๋ž˜ํ”ฝ ์š”์†Œ๋ฅผ ํ†ตํ•ด ์ƒํ˜ธ์ž‘์šฉ
  • NUL(Natural User Interface) : ์‚ฌ๋žŒ์˜ ์Œ์„ฑ, ์ด‰๊ฐ ๋“ฑ์„ ํ†ตํ•ด ์ƒํ˜ธ์ž‘์šฉ

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(20๋…„1ํšŒ)

UI ์„ค๊ณ„ ์›์น™์—์„œ ๋ˆ„๊ตฌ๋‚˜ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์€?

  1. ์ง๊ด€์„ฑ
  2. ์œ ํšจ์„ฑ
  3. ์œ ์—ฐ์„ฑ
  4. ๋ฌด๊ฒฐ์„ฑ

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(21๋…„2ํšŒ)

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)์˜ ํŠน์ง•์œผ๋กœ ํ‹€๋ฆฐ ๊ฒƒ์€?

  1. ์‚ฌ์šฉ์ž์˜ ํŽธ์˜์„ฑ์„ ๋†’์ž„์œผ๋กœ์จ ์ž‘์—…์‹œ๊ฐ„์„ ์ฆ๊ฐ€์‹œํ‚จ๋‹ค.
  2. ๊ตฌํ˜„ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒฐ๊ณผ์˜ ์˜ค๋ฅ˜๋ฅผ ์ตœ์†Œํ™”ํ•œ๋‹ค.
  3. ๋ง‰์—ฐํ•œ ์ž‘์—… ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ๊ตฌ์ฒด์ ์ธ ๋ฐฉ๋ฒ•์„ ์ œ์‹œํ•˜์—ฌ ์ค€๋‹ค.
  4. ์‚ฌ์šฉ์ž ์ค‘์‹ฌ์˜ ์ƒํ˜ธ ์ž‘์šฉ์ด ๋˜๋„๋ก ํ•œ๋‹ค.

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(21๋…„3ํšŒ)

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(User Interface)์— ๋Œ€ํ•œ ์„ค๋ช…์œผ๋กœ ํ‹€๋ฆฐ ๊ฒƒ์€?

  1. ํŽธ๋ฆฌํ•œ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์œ„ํ•ด ๊ฐœ๋ฐœ์ž ์ค‘์‹ฌ์œผ๋กœ ์„ค๊ณ„๋˜์–ด์•ผ ํ•œ๋‹ค.
  2. ์‚ฌ์šฉ์ž์™€ ์‹œ์Šคํ…œ์ด ์ •๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ์ƒํ˜ธ์ž‘์šฉ์ด ์ž˜ ์ด๋ฃจ์–ด์ง€๋„๋ก ํ•˜๋Š” ์žฅ์น˜๋‚˜ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
  3. ๋ฐฐ์šฐ๊ธฐ๊ฐ€ ์šฉ์ดํ•˜๊ณ  ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ ธ์•ผ ํ•œ๋‹ค.
  4. ์‚ฌ์šฉ์ž ์š”๊ตฌ์‚ฌํ•ญ์ด UI์— ๋ฐ˜์˜๋  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•ด์•ผ ํ•œ๋‹ค.

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(21๋…„3ํšŒ)

๋Œ€ํ‘œ์ ์œผ๋กœ DOS ๋ฐ Unix ๋“ฑ์˜ ์šด์˜์ฒด์ œ์—์„œ ์กฐ์ž‘์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋˜ ๊ฒƒ์œผ๋กœ, ์ •ํ•ด์ง„ ๋ช…๋ น๋ฌธ์ž์—ด์„ ์ž…๋ ฅํ•˜์—ฌ ์‹œ์Šคํ…œ ์กฐ์ž‘ํ•˜๋Š” ์‚ฌ์šฉ์ž์ธํ„ฐํŽ˜์ด์Šค(User Interface)๋Š”?

  1. CLI(Command Line Interface)
  2. GUI(Graphical User Interface)
  3. CUI(Cell User Interface)
  4. MUI(Mobile User Interface)

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(22๋…„1ํšŒ)

User Interface ์„ค๊ณ„ ์‹œ ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€๋‚˜ ๊ฒฝ๊ณ ์— ๊ด€ํ•œ ์ง€์นจ์œผ๋กœ ๊ฐ€์žฅ ๊ฑฐ๋ฆฌ๊ฐ€ ๋จผ ๊ฒƒ์€?

  1. ์†Œ๋ฆฌ๋‚˜ ์ƒ‰์˜ ์‚ฌ์šฉ์„ ์ค„์ด๊ณ  ํ…์ŠคํŠธ๋กœ๋งŒ ์ „๋‹ฌํ•˜๋„๋ก ํ•œ๋‹ค.
  2. ๋ฉ”์‹œ์ง€๋Š” ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์›Œ์•ผ ํ•œ๋‹ค.
  3. ์˜ค๋ฅ˜๋กœ๋ถ€ํ„ฐ ํšŒ๋ณต์„ ์œ„ํ•œ ๊ตฌ์ฒด์ ์ธ ์„ค๋ช…์ด ์ œ๊ณต๋˜์–ด์•ผ ํ•œ๋‹ค.
  4. ์˜ค๋ฅ˜๋กœ ์ธํ•ด ๋ฐœ์ƒ ๋  ์ˆ˜ ์žˆ๋Š” ๋ถ€์ •์ ์ธ ๋‚ด์šฉ์„ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ์•Œ๋ ค์•ผ ํ•œ๋‹ค.

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(22๋…„1ํšŒ)

๋””์ž์ธ, ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ์„ค๋ช…, ํ‰๊ฐ€ ๋“ฑ์„ ์œ„ํ•ด ์‹ค์ œ ํ™”๋ฉด๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ ๋งŒ๋“  ์ •์ ์ธ ํ˜•ํƒœ์˜ ๋ชจํ˜•์ด๋ฉฐ, ์‹œ๊ฐ์ ์œผ๋กœ๋งŒ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ผ๋ฐ˜์ ์œผ๋กœ ์‹ค์ œ๋กœ ๊ตฌํ˜„๋˜์ง€ ์•Š๋Š” UI์„ค๊ณ„ ๋„๊ตฌ๋Š”?

  1. ๋ชฉ์—…(Mockup)
  2. ์Šคํ† ๋ฆฌ๋ณด๋“œ(Storyboard)
  3. ํ”„๋กœํ† ํƒ€์ž…(Prototype)
  4. ์œ ์Šค์ผ€์ด์Šค(Usecase)

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(22๋…„2ํšŒ)

UI์˜ ์„ค๊ณ„ ์ง€์นจ์œผ๋กœ ํ‹€๋ฆฐ ๊ฒƒ์€?

  1. ์น˜๋ช…์ ์ธ ์˜ค๋ฅ˜์— ๋Œ€ํ•œ ๋ถ€์ •์ ์ธ ์‚ฌํ•ญ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ธ์ง€ ํ•  ์ˆ˜ ์—†๋„๋ก ํ•œ๋‹ค.
  2. ์ดํ•ดํ•˜๊ธฐ ํŽธํ•˜๊ณ  ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค.
  3. ์ฃผ์š” ๊ธฐ๋Šฅ์„ ๋ฉ”์ธ ํ™”๋ฉด์— ๋…ธ์ถœํ•˜์—ฌ ์กฐ์ž‘์ด ์‰ฝ๋„๋ก ํ•˜์—ฌ์•ผ ํ•œ๋‹ค.
  4. ์‚ฌ์šฉ์ž์˜ ์ง๋ฌด, ์—ฐ๋ น, ์„ฑ๋ณ„ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ณ„์ธต์„ ์ˆ˜์šฉํ•˜์—ฌ์•ผ ํ•œ๋‹ค.

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(22๋…„2ํšŒ)

UI์™€ ๊ด€๋ จ๋œ ๊ธฐ๋ณธ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜๋กœ, ์‹œ์Šคํ…œ์˜ ์ƒํƒœ์™€ ์‚ฌ์šฉ์ž์˜ ์ง€์‹œ์— ๋Œ€ํ•œ ํšจ๊ณผ๋ฅผ ๋ณด์—ฌ์ฃผ์–ด ์‚ฌ์šฉ์ž๊ฐ€ ๋ช…๋ น์— ๋Œ€ํ•œ ์ง„ํ–‰ ์ƒํ™ฉ๊ณผ ํ‘œ์‹œ๋œ ๋‚ด์šฉ์„ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๊ฒƒ์€?

  1. Feedback
  2. Posture
  3. Module
  4. Hash

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(22๋…„2ํšŒ)

UI์™€ ๊ด€๋ จ๋œ ๊ธฐ๋ณธ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜๋กœ, ์‹œ์Šคํ…œ์˜ ์ƒํƒœ์™€ ์‚ฌ์šฉ์ž์˜ ์ง€์‹œ์— ๋Œ€ํ•œ ํšจ๊ณผ๋ฅผ ๋ณด์—ฌ์ฃผ์–ด ์‚ฌ์šฉ์ž๊ฐ€ ๋ช…๋ น์— ๋Œ€ํ•œ ์ง„ํ–‰ ์ƒํ™ฉ๊ณผ ํ‘œ์‹œ๋œ ๋‚ด์šฉ์„ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๊ฒƒ์€?

  1. NUI(Natural User Interface)
  2. GUI(Graphical User Interface)
  3. OUI(Organic User Interface)
  4. CLI(Command Line Interface)

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(21๋…„3ํšŒ) ์‹ค๊ธฐ

์ดˆ๋ณด์ž๋„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ”๋‰ด๋‚˜ ๊ธฐ๋Šฅ์„ ๋งˆ์šฐ์Šค๋กœ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ ์šฉํ•œ ๊ฒƒ์„ ๋งํ•œ๋‹ค. ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์˜ Windows, ์• ํ”Œ์˜ mac OS ๋“ฑ์—์„œ ํ•ด์šฉํ•œ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๋ฉ”๋‰ด, ์•„์ด์ฝ˜ ๋“ฑ์˜ ๊ทธ๋ž˜ํ”ฝ ์š”์†Œ๋ฅผ ํ†ตํ•ด ์‹œ์Šคํ…œ๊ณผ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” UI์ด๋‹ค.

GUI

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(22๋…„1ํšŒ) ์‹ค๊ธฐ

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ์ค‘, ์•„๋ž˜ ์„ค๋ช…์— ํ•ด๋‹นํ•˜๋Š” ์šฉ์–ด๋ฅผ ์˜๋ฌธ ์•ฝ์–ด๋กœ ์ž‘์„ฑํ•˜์‹œ์˜ค.

์‚ฌ๋žŒ์˜ ์Œ์„ฑ์ด๋‚˜ ํ–‰๋™, ์ด‰๊ฐ ๋“ฑ์„ ํ†ตํ•ด ์ปดํ“จํ„ฐ์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ํ™˜๊ฒฝ

NUI

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(20๋…„2ํšŒ) ์‹ค๊ธฐ

UI ์„ค๊ณ„์˜ ๊ธฐ๋ณธ ์›์น™ ์ค‘, ์‚ฌ์šฉ์ž์˜ ๋ชฉ์ ์„ ์ •ํ™•ํ•˜๊ณ  ๋น ๋ฅด๊ฒŒ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ํŠน์„ฑ์„ ๋ฌด์—‡์ด๋ผ ํ•˜๋Š”์ง€ ์ž‘์„ฑํ•˜์‹œ์˜ค.

์œ ํšจ์„ฑ, ํšจ์œจ์„ฑ

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(20๋…„3ํšŒ) ์‹ค๊ธฐ

UI(User Interface)์˜ ์„ค๊ณ„ ์›์น™ ์ค‘ ์ง๊ด€์„ฑ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜์‹œ์˜ค.

UI๋Š” ๊ฐ€๊ธ‰์  ๋ณ„๋‹ค๋ฅธ ์ดํ•ด ์—†์ด ์ฆ‰์‹œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(21๋…„2ํšŒ) ์‹ค๊ธฐ

( โ‘  )๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์‹œ์Šคํ…œ์„ ์ด์šฉํ•˜๋ฉด์„œ ๋А๋ผ๊ฒŒ ๋˜๋Š” ์ด์ฒด์ ์ธ ๊ฒฝํ—˜์„ ์˜๋ฏธํ•œ๋‹ค. ๊ธฐ์ˆ ์„ ํšจ์šฉ์„ฑ ์ธก๋ฉด์ด ์•„๋‹Œ ์‚ฌ์šฉ์ž์˜ ๋งŒ์กฑ๊ฐ์ด๋‚˜ ๊ฐ์ • ๋“ฑ์˜ ์‚ถ์˜ ์งˆ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ๋ณด๋Š” ์ƒˆ๋กœ์šด ๊ฐœ๋…์ด๋‹ค.
( โ‘ก )๋Š” ์‚ฌ์šฉ์„ฑ๊ณผ ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ์„ ์œ„ํ•ด ์‚ฌ์šฉ์ž์™€ ์‹œ์Šคํ…œ ๊ฐ„์˜ ์ƒํ˜ธ์ž‘์šฉ์ด ์›ํ™œํ•˜๋„๋ก ๋„์™€์ฃผ๋Š” ํ•˜๋“œ์›จ์–ด ๋ฐ ์†Œํ”„ํŠธ์›จ์–ด๋กœ์„œ, ๊ฐ€๋…์„ฑ๊ณผ ํŽธ๋ฆฌ์„ฑ์ด ํ–ฅ์ƒ๋˜๋ฉฐ ์‚ฌ์šฉ์ž์˜ ์†Œํ”„ํŠธ์›จ์–ด ๋งŒ์กฑ๋„์— ๊ฐ€์žฅ ํฐ ์˜ํ–ฅ์„ ์ค€๋‹ค.

โ‘ : UX โ‘ก: UI

 

 

 

๊ธฐ์ถœ๋ฌธ์ œ(22๋…„1ํšŒ)

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์„ค๊ณ„ํ•  ๊ฒฝ์šฐ ๊ณ ๋ คํ•ด์•ผ ํ•  ๊ฐ€์ด๋“œ๋ผ์ธ๊ณผ ๊ฐ€์žฅ ๊ฑฐ๋ฆฌ๊ฐ€ ๋จผ ๊ฒƒ์€?

  1. ์‹ฌ๋ฏธ์„ฑ์„ ์‚ฌ์šฉ์„ฑ๋ณด๋‹ค ์šฐ์„ ํ•˜์—ฌ ์„ค๊ณ„ํ•ด์•ผ ํ•œ๋‹ค.
  2. ํšจ์œจ์„ฑ์„ ๋†’์ด๊ฒŒ ์„ค๊ณ„ํ•ด์•ผ ํ•œ๋‹ค.
  3. ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜๋ฅผ ์‰ฝ๊ฒŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.
  4. ์‚ฌ์šฉ์ž์—๊ฒŒ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค.
๋‹ซ๊ธฐ