ABOUT ME

-

  • โ“…โ’ถโ“‡โ“‰ โ‘ฃใ€€2์ฃผ์ฐจ ํ•™์Šต์ผ์ง€ ์ฒซ๋ฒˆ์งธ | ํ”„๋ฆฌ์Šค์ฟจ UI ๊ธฐ์ดˆ | Chapter 1~2 ์ •๋ฆฌ | UX์ด๋ก โ€ข๊ธฐ์ดˆ ํŒŒํŠธ 2 | Chapter 0~12 ์ˆ˜๊ฐ• | Chapter 0~12 ์ •๋ฆฌ
    ๐™ฏ๐™š๐™ง๐™ค ๐™—๐™–๐™จ๐™š/๐š“๐š˜๐šž๐š›๐š—๐šŠ๐š• 2024. 10. 9. 18:29

     

    ๐Ÿ“‹ ์˜ค๋Š˜์˜ ํ•  ์ผ ๐Ÿ“‹

    ๐Ÿ’ป UX์ด๋ก โ€ข๊ธฐ์ดˆ ํŒŒํŠธ 2 Chapter 0~12 ์ˆ˜๊ฐ•

    ๐Ÿ’ป UX์ด๋ก โ€ข๊ธฐ์ดˆ ํŒŒํŠธ 2 Chapter 0~12 ์ •๋ฆฌ

    ๐Ÿ’ป ํ”„๋ฆฌ์Šค์ฟจ UI ๊ธฐ์ดˆ Chapter 1~2 ์ •๋ฆฌ

     

     


     

     

    ๐Ÿ’ป UX์ด๋ก โ€ข๊ธฐ์ดˆ ํŒŒํŠธ 2 Chapter 0~12 

     

    โšก๏ธUX๋ž€?

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

     

     

    โšก๏ธUX Research?

    โˆ— ์‚ฌ์šฉ์ž๊ฐ€ ๋Š๋ผ๋Š” ๊ฒฝํ—˜์„ ๊ด€์ฐฐํ•˜๊ณ  ๋ถ„์„ํ•˜์—ฌ ๊ณ ๊ฐ์˜ ์ง„์งœ ๋ฌธ์ œ (pain point)๋ฅผ ์ฐพ์•„๋‚ด๋Š” ๊ฒƒ

     

     

    โšก๏ธUsability?

    โˆ— ์‚ฌ์šฉ์„ฑ : ์‚ฌ์šฉ ๊ฒฝํ—˜์„ ์–ป๊ฒŒ ๋˜๋Š” โ€˜์‚ฌ์šฉ์ž์˜ ํŽธ์˜์„ฑโ€™

    โˆ— ํ‰๊ท ์ ์ธ (ํ˜น์€ ํ‰๊ท  ์ดํ•˜์˜) ๋Šฅ๋ ฅ๊ณผ ๊ฒฝํ—˜์„ ์ง€๋‹Œ ์‚ฌ๋žŒ์ด ์–ด๋– ํ•œ ๋„๊ตฌ๋ฅผ ํ†ตํ•ด ๋ฌด์—‡์„ ์ˆ˜ํ–‰ํ•˜๊ณ ์ž ํ•  ๋•Œ, ์Šค์Šค๋กœ ์‚ฌ์šฉ๋ฒ•์„ ์•Œ ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

     

     

    โšก๏ธUX ๋ฆฌ์„œ์ฒ˜์˜ ๋‹จ๊ณ„๋ณ„ ์ƒ๊ฐํ•˜๋Š” ๋ฐฉ์‹

     

    โถ ๋ฌธ์ œ ์ดํ•ด : ํ•ญ์ƒ ๊ทผ๊ฑฐ๋ฅผ ๊ฐ€์ง€๊ณ  ๋ฌธ์ œ๋ฅผ ์ดํ•ดํ•˜๋ ค๊ณ  ํ•  ๊ฒƒ

    โˆ— ๋ฐ์ดํ„ฐ๋ฅผ ์–ป๊ธฐ ์ „์— ์ด๋ก /๊ฐ€์ •์„ ์„ธ์šฐ๋Š” ๊ฒƒ์€ ํฐ ์‹ค์ˆ˜ = ์•„๋ฌด๊ฒƒ๋„ ์ถ”์ธกํ•˜์ง€ ๋ง๋ผ

    โˆ— ์‚ฌ๋žŒ๋“ค์€ ์‚ฌ์‹ค์— ๋งž์ถฐ ์ด๋ก ์„ ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ด๋ก ์— ๋งž๊ฒŒ ์‚ฌ์‹ค์„ ์™œ๊ณกํ•œ๋‹ค = ์ธ์ง€๋ถ€์กฐํ™”

     

    โž‹ ์ •๋ณด ์ˆ˜์ง‘ (๊ด€์ฐฐ) : ๊ด€์ฐฐ์€ UX๋ฆฌ์„œ์น˜์— ํ•„์ˆ˜

    โˆ— ์‚ฌ๋žŒ๋“ค์ด ์–ด๋–ป๊ฒŒ ํ–‰๋™ํ•˜๋Š”์ง€ ๋งฅ๋ฝ์„ ์ดํ•ดํ•˜๋Š”๋ฐ ๋„์›€์„ ์ฃผ๋ฉฐ, ์‚ฌ์šฉ์ž ๋‹ˆ์ฆˆ ํŒŒ์•…์˜ ํ•ต์‹ฌ์ด๋‹ค.

    โˆ— ์ข‹์€ ๊ด€์ฐฐ์€ ์ˆ˜์ง‘ํ•˜๊ณ  ์žˆ๋Š” ์ •๋ณด์™€ ์—ฐ๊ด€๋œ ๊ฒƒ๋“ค์„ ์„ฃ๋ถˆ๋ฆฌ ์—ฐ๊ด€์ง€์–ด ํŒ๋‹จํ•˜์ง€ ์•Š๋Š” ๊ฒƒ

    โˆ— ์„ ์ž…๊ฒฌ์€ ๊ธˆ๋ฌผ์ด๋‹ค

     

    โžŒ ๊ฐ€์„ค ์„ค์ • : ํ•ญ์ƒ ๊ฐ€์„ค์„ ์„ธ์šฐ์ž

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

    โˆ— ๊ฐ€์„ค ์„ค์ • ์‹œ ํŒŒ์•…ํ•ด์•ผ ํ•˜๋Š” ์ •๋ณด : ์‚ฌ์šฉ์ž์˜ ์ฃผ์š” ๋ชฉํ‘œ, ์ˆ˜ํ–‰ํ•˜๋Š” ํƒœ์Šคํฌ์˜ ์ž‘์—… ํ๋ฆ„, ๋ฉ˜ํƒˆ ๋ชจ๋ธ, ์‚ฌ์šฉํ•˜๋Š” ๋„๊ตฌ, ์ผํ•˜๋Š” ํ™˜๊ฒฝ, ์‚ฌ์šฉํ•˜๋Š” ์šฉ์–ด

     

    โž ๊ฐ€์„ค ์šฐ์„  ์ˆœ์œ„ ์„ค์ • & ์†”๋ฃจ์…˜ ๋„์ถœ : ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ฌธ์ œ์— ์ง‘์ค‘ํ•  ๊ฒƒ

    โˆ— ์„ฑ๊ณต์ ์ธ ์†”๋ฃจ์…˜์„ ์œ„ํ•ด์„œ๋Š” ์†Œ๊ฑฐ๋ฒ•์„ ์‚ฌ์šฉํ•ด ์•„์ด๋””์–ด ์ œ๊ฑฐ.

    โˆ— ์†Œ๊ฑฐ๋ฒ•์„ ํ†ตํ•œ ์†”๋ฃจ์…˜ ๋„์ถœ

    - ๊ฐ€์„ค์„ ํ†ตํ•ด ๋„์ถœ๋œ ์†”๋ฃจ์…˜์ด ์‹ค์ œ ์กฐ์‚ฌ ๊ฒฐ๊ณผ์— ๋ถ€ํ•ฉํ•˜๋Š” ์ง€ ํ™•์ธ

    - ๊ด€์ฐฐํ•œ ๋ชจ๋“  ๊ฒƒ์„ ์ œ๋Œ€๋กœ ์„ค๋ช…ํ•˜์ง€ ๋ชปํ•˜๋Š” ๋ถ€์‹คํ•œ ์†”๋ฃจ์…˜์„ ์ œ๊ฑฐ

    - ์ง€๋‚˜์น˜๊ฒŒ ๋ณต์žกํ•˜๊ฑฐ๋‚˜ ๋ถ€์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ฐ์ดํ„ฐ์— ๋ผ์›Œ ๋งž์ถ˜ ์†”๋ฃจ์…˜์„ ์ œ๊ฑฐ

    - ์†”๋ฃจ์…˜ ์„ ๋ณ„์€ ํ•ญ์ƒ ๊ทผ๊ฑฐ๊ฐ€ ์žˆ์„ ๊ฒƒ

    - ์†”๋ฃจ์…˜ ๊ฒฐ์ •์— ๋Œ€ํ•œ ๊ทผ๊ฑฐ๋Š” ํƒ€๋‹นํ•˜๋ฉฐ ํŽธํ–ฅ์ด ์—†์–ด์•ผ ํ•œ๋‹ค.

     

    โžŽ ์†”๋ฃจ์…˜ ๋„์ถœ ์ดํ›„ : ํ•ญ์ƒ ๊ฒฐ๊ณผ๋ฅผ ๋„์ถœํ•˜๊ณ  ๋‚ด๋ถ€ ๊ณต์œ 

    โˆ— ๋ฆฌ๋ทฐ ์„ธ์…˜์„ ๋งˆ๋ จํ•ด์„œ ๋ฌด์—‡์„ ์–ด๋–ป๊ฒŒ ๋ฐœ๊ฒฌํ–ˆ๋Š”์ง€ ์„ค๋ช…ํ•˜๊ณ , ์–ป์–ด์ง„ ์ธ์‚ฌ์ดํŠธ์™€ ์†”๋ฃจ์…˜์„ ์ „๋‹ฌํ•œ๋‹ค.

    โˆ— ๊ตฌ์ฒด์ ์ด๊ณ  ์‹คํ˜„ ๊ฐ€๋Šฅํ•œ ๋””์ž์ธ ์ œ์•ˆ์‚ฌํ•ญ์„ ์ œ๊ณตํ•œ๋‹ค.

     

     

    โšก๏ธ์‚ฌ์šฉ์ž๋Š” ๋‹น์‹ ์ฒ˜๋Ÿผ ์ƒ๊ฐํ•˜์ง€ ์•Š๋Š”๋‹ค

    โˆ— ์‚ฌ์šฉ์ž์— ๋Œ€ํ•œ 4๊ฐ€์ง€ ์›์น™

    โž€ ์‚ฌ์šฉ์ž๋Š” ๋‹น์‹ ์ฒ˜๋Ÿผ ์ƒ๊ฐํ•˜์ง€ ์•Š๋Š”๋‹ค.

    โž ์‚ฌ์šฉ์ž๋Š” ์ž์‹ ์˜ ํ–‰๋™์— ๋Œ€ํ•œ ์ด์œ ๋ฅผ ์ž˜ ์•Œ์ง€ ๋ชปํ•œ๋‹ค.

    โž‚ ์‚ฌ์šฉ์ž์˜ ๋ฏธ๋ž˜ ํ–‰๋™์„ ๊ฐ€์žฅ ์ž˜ ์˜ˆ์ธกํ•˜๋Š” ๊ฒƒ์€ ๊ทธ๋“ค์˜ ๊ณผ๊ฑฐ ํ–‰๋™์ด๋‹ค.

    โžƒ ์‚ฌ์šฉ์ž์˜ ํ–‰๋™์€ ๋งฅ๋ฝ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๋‹ค. (๋™์ผํ•œ ์‚ฌ๋žŒ์ด๋ผ๋„ ํ™˜๊ฒฝ์ด ๋ฐ”๋€Œ๋ฉด ๋‹ค๋ฅด๊ฒŒ ํ–‰๋™ํ•œ๋‹ค)

     

     

    โšก๏ธ๋น„์ฆˆ๋‹ˆ์Šค ๊ด€์ ๊ณผ ์‚ฌ์šฉ์ž ๊ด€์ 

    โˆ— ์ œ๊ณต์ž ๊ด€์  : ๋น„์ฆˆ๋‹ˆ์Šค ์ด์Šˆ or ํ˜„ ๊ฐœ๋ฐœ ์ด์Šˆ ๋“ฑ์˜ ์ „ํ›„ ๋งฅ๋ฝ์„ ๊ณ ๋ คํ•˜์—ฌ ํ˜„์žฌ์˜ ๋ฐฉ์‹์„ ๋„์ž…ํ•˜์˜€๋Š”๊ฐ€?

    โˆ— ์‚ฌ์šฉ์ž ๊ด€์  : ํ’€ ๋‹ค์šด ๋ฉ”๋‰ด๋ฅผ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€? ์ด๊ฒƒ(this)์ด ๋ฌด์—‡์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š”๊ฐ€? ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ชฉ์ ์„ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?

     

     

    โšก๏ธ๋”๋ธ” ๋‹ค์ด์•„๋ชฌ๋“œ ๋ฐฉ๋ฒ•๋ก ๊ณผ ๋ฆฌ์„œ์น˜

    โˆ— ๋”๋ธ” ๋‹ค์ด์•„๋ชฌ๋“œ ๋ฐฉ๋ฒ•๋ก ? 

    - Discover (๋ฐœ๊ฒฌ), Define (์ •์˜), Develop (๊ฐœ๋ฐœ), Deliver (์ „๋‹ฌ)

    - ์ฒซ๋ฒˆ์งธ ๋‹ค์ด์•„๋ชฌ๋“œ๋Š” โ€œ๋งฅ๋ฝ์  ์‚ฌ์šฉ์ž ๋ฆฌ์„œ์น˜โ€ ๋ฅผ ํ•˜๋ฉฐ ๊ด€์ฐฐ, ๊ณต๊ฐ, ํ•ด์„์„ ํ•œ๋‹ค.

    - ๋‘๋ฒˆ์งธ ๋‹ค์ด์•„๋ชฌ๋“œ๋Š” โ€œ๋ฐ˜๋ณต์  ๋””์ž์ธโ€ ์„ ํ•˜๋ฉฐ ๊ฐœ๋ฐœ, ์ธก์ •, ํ•™์Šต์„ ํ•œ๋‹ค.

     

    โถ Discover (๋ฐœ๊ฒฌ)

    โˆ— ๋ฆฌ์„œ์น˜, ์ธํ„ฐ๋ทฐ๋ฅผ ํ†ตํ•ด ๋ฌธ์ œ๋ฅผ ํƒ์ƒ‰ํ•˜๊ณ  ๋ฐœ๊ฒฌํ•˜๋Š” ๋‹จ๊ณ„

     

    โž‹ Define (์ •์˜)

    โˆ— ๋ฐœ๊ฒฌํ•œ ๋ฌธ์ œ ์ค‘ ์ง„์งœ ๋ฌธ์ œ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์ดํ•ดํ•˜๊ณ  ์šฐ์„  ์ˆœ์œ„๋ฅผ ๊ฒฐ์ •

    โˆ— ํผ์†Œ๋‚˜, ๊ณ ๊ฐ์—ฌ์ •์ง€๋„ ๋“ฑ์„ ํ™œ์šฉํ•ด ์‚ฌ์šฉ์ž๋“ค์„ ์ดํ•ดํ•ด๋ณธ๋‹ค.

     

    โžŒ Develop (๋ฐœ์ „)

    โˆ— ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๋†’์€ ๋ฌธ์ œ ํ•ด๊ฒฐ์„ ์œ„ํ•ด ๊ตฌ์ฒด์ ์ธ ๊ฐœ์„ ์„ ์œ„ํ•œ ์•„์ด๋””์–ด๋ฅผ ๋…ผ์˜

    โˆ— ๋””์ž์ธ ์ปจ์…‰, ๋””์ž์ธ ๊ตฌ์ฒดํ™”, ํ”„๋กœํ† ํƒ€์ž… ์ œ์ž‘ ๋ฐ ๊ฒ€์ฆ

     

    โž Deliver (์ „๋‹ฌ)

    โˆ— ๊ฐœ์„  ์•„์ด๋””์–ด ์ค‘ ์‹คํ˜„ ๊ฐ€๋Šฅํ•œ ๊ฒƒ์„ ์ตœ์ข…์œผ๋กœ ์ •๋ฆฌ

     

     

    โšก๏ธ๋ฆฌ์„œ์น˜์˜ ๋ฐฉ๋ฒ•๋ก 

    โˆ— ์ •๋Ÿ‰์  (์–ผ๋งˆ๋‚˜ ๋งŽ์€ ํ˜„์ƒ์ด ๋ฐœ์ƒํ•˜๋Š”๊ฐ€?)

    - A/B ํ…Œ์ŠคํŠธ, Card sorting, Eyetracking

    โˆ— ์ •์„ฑ์  (์–ด๋–ป๊ฒŒ ๋ฌธ์ œ๋ฅผ ๊ณ ์น  ๊ฒƒ์ธ๊ฐ€?)

    - ๊ด€์ฐฐ, ์ธํ„ฐ๋ทฐ ์ง„ํ–‰, ํฌ์ปค์Šค ๊ทธ๋ฃน ์ธํ„ฐ๋ทฐ

     

     

    โšก๏ธํผ์†Œ๋‚˜๋ž€?

    โˆ— ์šฐ๋ฆฌ์˜ ์ œํ’ˆ์ด๋‚˜ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ณ ๊ฐ๊ตฐ์„ ๋Œ€ํ‘œํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ€์ƒ์œผ๋กœ ๋งŒ๋“  ์ธ๋ฌผ

     

     

    โšก๏ธ๋ฌธ์ œ๊ธฐ์ˆ  3์š”์†Œ

    โถ ์„œ๋น„์Šค์˜ ํ˜„์žฌ [๋ชฉํ‘œ]

    โž‹ ์„œ๋น„์Šค์— ๋Œ€ํ•ด ์‚ฌ์—…์˜ ์ดํ•ด๊ด€๊ณ„์ž๊ฐ€ ๋‹ค๋ฃจ๊ณ ์ž ํ•˜๋Š” [๋ฌธ์ œ]

    โžŒ ์„œ๋น„์Šค์˜ ๊ตฌ์ฒด์ ์ธ ์†”๋ฃจ์…˜์ด ์•„๋‹Œ [๊ฐœ์„ ์„ ์œ„ํ•œ ๋ช…ํ™•ํ•œ ์š”๊ตฌ์‚ฌํ•ญ]

     

     

    โšก๏ธ๋น„์ฆˆ๋‹ˆ์Šค ๊ฐ€์ •

    โˆ— ์šฐ๋ฆฌ ๊ณ ๊ฐ๋“ค์€ ~ํ•˜๋ ค๋Š” ๋‹ˆ์ฆˆ๊ฐ€ ์žˆ๋‹ค.

    โˆ— ์ด๋Ÿฌํ•œ ๋‹ˆ์ฆˆ๋Š” ~์œผ๋กœ ํ•ด๊ฒฐ๋  ์ˆ˜ ์žˆ๋‹ค.

    โˆ— ์šฐ๋ฆฌ์˜ ์ดˆ๊ธฐ ๊ณ ๊ฐ์€ ~์ด๋‹ค. (~์ผ ๊ฒƒ์ด๋‹ค.)

    โˆ— ๊ณ ๊ฐ๋“ค์ด ์šฐ๋ฆฌ ์„œ๋น„์Šค์—์„œ ์–ป์–ด๋‚ด๋ ค๋Š” ๊ฐ€์žฅ ํฐ ๊ฐ€์น˜๋Š” ~์ด๋‹ค.

    โˆ— ๊ณ ๊ฐ๋“ค์€ ๋ถ€๊ฐ€์ ์ธ ์ด๋“์œผ๋กœ ~ ๋˜ํ•œ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

    โˆ— ์šฐ๋ฆฌ๋Š” ~๋ฅผ ํ†ตํ•ด ์ฃผ ๊ณ ๊ฐ์ธต์„ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

    โˆ— ์šฐ๋ฆฌ๋Š” ~์œผ๋กœ ๋ˆ์„ ๋ฒŒ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

    โˆ— ์‹œ์žฅ์—์„œ ์šฐ๋ฆฌ์˜ ์ฃผ ๊ฒฝ์Ÿ์ž๋Š” ~์ด ๋  ๊ฒƒ์ด๋‹ค.

    โˆ— ์šฐ๋ฆฌ๋Š” ~์œผ๋กœ ๊ทธ๋“ค์„ ์ด๊ธธ ๊ฒƒ์ด๋‹ค.

    โˆ— ์šฐ๋ฆฌ์˜ ๊ฐ€์žฅ ํฐ ์ œํ’ˆ ์œ„ํ˜‘์„ ~์ด๋‹ค.

    โˆ— ์šฐ๋ฆฌ๋Š” ~์„ ํ†ตํ•ด ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ๊ฒƒ์ด๋‹ค.

     

     

    โšก๏ธ์‚ฌ์šฉ์ž ๊ฐ€์ •

    โˆ— ์‚ฌ์šฉ์ž๋Š” ๋ˆ„๊ตฌ์ธ๊ฐ€?

    โˆ— ๊ทธ๋“ค์ด ์ผ์ด๋‚˜ ์‚ถ์— ์žˆ์–ด์„œ ์šฐ๋ฆฌ ์ œํ’ˆ์ด ์ ํ•ฉํ•œ ๊ณณ์€ ์–ด๋””์ธ๊ฐ€?

    โˆ— ์šฐ๋ฆฌ ์ œํ’ˆ์ด ํ’€์–ด์•ผ ํ•  ๋ฌธ์ œ๋Š” ๋ฌด์—‡์ธ๊ฐ€?

    โˆ— ์–ธ์ œ ๊ทธ๋ฆฌ๊ณ  ์–ด๋–ป๊ฒŒ ์šฐ๋ฆฌ ์ œํ’ˆ์ด ํ™œ์šฉ๋˜๋Š”๊ฐ€?

    โˆ— ์–ด๋–ค ๊ธฐ๋Šฅ์ด ์ค‘์š”ํ•œ๊ฐ€?

    โˆ— ์šฐ๋ฆฌ ์ œํ’ˆ์€ ์–ด๋–ป๊ฒŒ ๋ณด์ด๊ณ  ํ™œ์šฉ๋˜์–ด์•ผ ํ•˜๋Š”๊ฐ€?

     

     

    โšก๏ธํผ์†Œ๋‚˜ ๋งŒ๋“œ๋Š” ๊ณผ์ •

    โถ ๊ฐ€์„ค ์„ค์ • ์ดํ›„, ๋ฆฌ์„œ์น˜๋ฅผ ํ†ตํ•ด ์ž…์ฆํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.

    โ†’ โž‹ ๊ฐ€์ • ๋‹จ๊ณ„์—์„œ โ€˜ํ”„๋กœํ†  ํผ์†Œ๋‚˜โ€™๋ฅผ ์ •์˜

    โˆ— ํ”„๋กœํ†  ํผ์†Œ๋‚˜ : ๋ˆ„๊ฐ€ ์™œ ์šฐ๋ฆฌ ์ œํ’ˆ์„ ์‚ฌ์šฉํ•˜๋Š”์ง€, ํ• ์ง€์— ๋Œ€ํ•ด ํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ์„ ์˜ ์ถ”์ •

    โˆ— ์‹ค์ œ ์‚ฌ์šฉ์ž์˜ ํ–‰๋™, ์˜ˆ์ธก๋˜๋Š” ํ–‰๋™ / pain point & needs / ํ•ด๊ฒฐ๋ฐฉ์•ˆ ์ž‘์„ฑ

    โ†’ ์ด๊ฒƒ์„ ๋‹ค๋“ฌ์–ด โ€˜ํƒ€๊ฒŸ ํผ์†Œ๋‚˜โ€™ ์™„์„ฑ

    โ†’ โžŒ ๊ฐ€๋ณ๊ฒŒ ํ”„๋กœํ†  ํผ์†Œ๋‚˜๋ฅผ ์ž‘์„ฑ

    โ†’ โž ์‚ฌ์šฉ์ž ์กฐ์‚ฌ๋ฅผ ํ†ตํ•ด ๊ฐ€์ •์„ ์ž…์ฆํ•˜๋ฉด์„œ ํ”„๋กœํ†  ํผ์†Œ๋‚˜๋ฅผ ์ˆ˜์ •

    โˆ— ํ”„๋กœํ†  ํผ์†Œ๋‚˜๋Š” ์กฐ์ •๋  ์—ฌ์ง€๊ฐ€ ์žˆ๊ณ , ์•„๋‹ˆ๋‹ค ์‹ถ์œผ๋ฉด ๋ฒ„๋ฆด ์ˆ˜๋„ ์žˆ๋‹ค.

    โˆ— ๋งŒ๋“ค์–ด์ง„ ํผ์†Œ๋‚˜๋Š” ํ™”๋ คํ•˜๊ฒŒ ๊พธ๋ฏธ๋Š” ๊ฒƒ์— ์‹œ๊ฐ„์„ ๋“ค์ด์ง€ ๋ง๋ผ.

    โˆ— ํผ์†Œ๋‚˜๋Š” ํ•œ ๋ฒˆ ์ƒ์„ฑํ•ด์„œ ์˜์›ํžˆ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค. (๋ฆฌ์„œ์น˜ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ง€์†์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ)

     

     

    โšก๏ธ์‚ฌ์šฉ์„ฑ ํ…Œ์ŠคํŠธ (UT)

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

    โˆ— ์‚ฌ์šฉ์„ฑ ํ‰๊ฐ€ (Usability Test) โ‰  ์œ ์ € ํ…Œ์ŠคํŠธ (User Test)

    - ์‚ฌ์šฉ์ž๊ฐ€ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๋‹ค์Œ ๋‹จ๊ณ„ ์ง„ํ–‰์„ ํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?

    - ๊ณ ๊ฐ์ด ์šฐ๋ฆฌ๊ฐ€ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š” ์„œ๋น„์Šค ๊ตฌ์กฐ์™€ ๊ธฐ๋Šฅ์„ ์˜๋„ํ•œ ๋Œ€๋กœ ์ธ์ง€ / ์ดํ•ด / ์˜ˆ์ธก / ์‹คํ–‰ ํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?

    โˆ— ์ •์„ฑ์  ํ…Œ์ŠคํŠธ, ๋ฌด์–ธ๊ฐ€๋ฅผ ์ฆ๋ช…ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค. (๊ผญ ์ •์„์ ์ด์ง€ ์•Š์•„๋„ ๋œ๋‹ค๋Š” ๋œป)

    โˆ— ํ”„๋กœ๋•ํŠธ ์‚ฌ์šฉ์„ฑ ๋ฌธ์ œ๋Š” ๋งŒ๋“œ๋Š” ์‚ฌ๋žŒ์€ ์Šค์Šค๋กœ ๋ฐœ๊ฒฌํ•˜๊ธฐ ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— ๊ด€๋ จ ์—†๋Š” ์‚ฌ๋žŒ๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ํ…Œ์ŠคํŠธํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

     

     

    โšก๏ธ์‚ฌ์šฉ์„ฑ ํ…Œ์ŠคํŠธ (UT) ๋ฌธ์ œ ์ •์˜

    โˆ— ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ถ€๋ถ„ (๋ฌด์—‡์— ๋Œ€ํ•ด ํ…Œ์ŠคํŠธ ํ• ์ง€, ๋ˆ„๊ตฌ์—๊ฒŒ ์–ด๋–ป๊ฒŒ ์งˆ๋ฌธํ• ์ง€ ๊ณ ๋ คํ•˜๋Š” ๋‹จ๊ณ„)

    โˆ— ์ ˆ๋Œ€ ํ•˜์ง€ ๋ง์•„์•ผ ํ•  ์‹ค์ˆ˜ : ๊นŠ์€ ๋ถ„์„ ์—†์ด ์ผ๋ฐ˜์ ์ธ ์งˆ๋ฌธ, ๋‹ค๋“ค ์•Œ๊ณ  ์žˆ๋Š” ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ

    โˆ— ํ•ด๊ฒฐํ•ด์•ผ ํ•  ๋ฌธ์ œ์˜ ๊ตฌ์กฐ๋ฅผ ๋ถ„ํ•ดํ•˜๊ณ , ์ง์ ‘ ์—ฐ๊ด€๋œ ์‚ฌ๋žŒ๋“ค์„ ๋งŒ๋‚˜์„œ ์ธํ„ฐ๋ทฐ๋ฅผ ํ•˜์ž. ๋ฌธ์ œ๋ฅผ ๋ถ„์„ํ•˜๊ธฐ์— ์•ž์„œ ๊ณ ๊ฐ์˜ ์ƒํ™ฉ ์‹œ๋ฎฌ๋ ˆ์ด์…˜๋„ ํ•„์š”.

     

     

    โšก๏ธ์‚ฌ์šฉ์„ฑ ํ…Œ์ŠคํŠธ (UT) ๋ฐ์Šคํฌ ๋ฆฌ์„œ์น˜

    โˆ— ์„œ๋น„์Šค์™€ ๊ด€๋ จ๋œ ์™ธ๋ถ€ ์ƒํ™ฉ๋ถ€ํ„ฐ ๋‚ด๋ถ€ ์ƒํ™ฉ๊นŒ์ง€ ๋‹ค๋ฐฉ๋ฉด์œผ๋กœ ์ƒํ™ฉ์„ ํŒŒ์•…ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•๋ก . ๊ฐœ์„ ํ•˜๊ณ ์ž ํ•˜๋Š” ์„œ๋น„์Šค์— ๋Œ€ํ•ด ๋ถ„์„ ๋ฐ ํ‰๊ฐ€๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•œ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๋ฆฌ์„œ์น˜๋ฅผ ์ฐพ๊ณ  ๊ฒ€ํ† , ๋ฆฌํฌํŠธ ์ž๋ฃŒ ์ฐพ๊ธฐ.

    โˆ— ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž๋Š” ๋ˆ„๊ตฌ์ธ์ง€, ๊ทธ ์‚ฌ์šฉ์ž๊ฐ€ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ™˜๊ฒฝ๊ณผ ๋งฅ๋ฝ์€ ๋ฌด์—‡์ธ์ง€, ๋ชฉํ‘œ๋กœ ํ•˜๋Š” ๊ฒƒ์€ ๋ฌด์—‡์ธ์ง€ ํŒŒ์•…ํ• ๊ฒƒ. ์ด ์„ธ ๊ฐ€์ง€ ๊ด€์ ์ด ๊ฒน์น˜๋Š” ์ง€์ ์ด ์ตœ์ƒ์˜ ๋ฆฌ์„œ์น˜.

    โˆ— ์ดํ•ด๊ด€๊ณ„์ž ์ธํ„ฐ๋ทฐ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ, issue ๋ชฉ๋ก ์ž‘์„ฑ์„ ์š”์ฒญํ•˜๊ณ , ํ•จ๊ป˜ ๊ณต์œ ๋˜์–ด์•ผ ํ•œ๋‹ค. ๋ฏธ๋ฆฌ ์ฃผ์ œ๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๊ณ , ์ถ”๋ ค์ง„ ์ด์Šˆ ์ค‘์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์„ ํ•จ๊ป˜ ๋…ผ์˜. โ€œํŠนํžˆ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋ฐฉ์‹ ์ฃผ์˜โ€

     

     

    โšก๏ธ์‚ฌ์šฉ์„ฑ ํ…Œ์ŠคํŠธ (UT) ํƒœ์Šคํฌ ์ž‘์„ฑ

    โˆ— ๊ฐ ํ™”๋ฉด ์„ธ๋ถ€์˜์—ญ ๋ณ„๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๋Š” task๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ.

    โˆ— ํ™”๋ฉด > ์„ธ๋ถ€์˜์—ญ > ์‚ฌ์šฉ์ž๊ฐ€ ~์„ ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

     

     

    โšก๏ธResearcher์˜ ํฌํŠธํด๋ฆฌ์˜ค

    โˆ— ์‹œ๊ฐ์ ์ธ ์ธํ„ฐํŽ˜์ด์Šค ๋ณด๋‹ค๋Š” ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์Šคํ‚ฌ์„ ์–ดํ•„ํ•ด์•ผ ํ•œ๋‹ค.

    โˆ— ๋””์ž์ด๋„ˆ๊ฐ€ ์•„๋‹ˆ๋ผ ๊ฒฝํ—˜์„ ๋””์ž์ธ์„ ํ•˜๋Š” ์‚ฌ๋žŒ์ด๊ธฐ ๋–„๋ฌธ์— ๊ทธ์— ์ค‘์ ์„ ๋งž์ถœ ๊ฒƒ.

    โˆ— ๋„์ถœ๋œ ๋””์ž์ธ์€ ๋ฆฌ์„œ์น˜ ๊ฒฐ๊ณผ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ ์šฉ๋˜์—ˆ๋Š”์ง€ ๋ณด์—ฌ์ ธ์•ผ ํ•œ๋‹ค.

     

     

     

     


     

     

     

     

    ๐Ÿ’ป ํ”„๋ฆฌ์Šค์ฟจ UI ๊ธฐ์ดˆ Chapter 1~2 ์ •๋ฆฌ

     

     ๐Ÿ—๏ธFoundation

     

    โถ Font

    โˆ— Headline, Body, Flag ๋กœ ํฐํŠธ ์†์„ฑ ๊ตฌ๋ถ„.

    โˆ— ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ํฐํŠธ๊ฐ€ ์žˆ์œผ๋‹ˆ ๋””ํดํŠธ๋กœ ์‚ฌ์šฉ ํ•„์š”.

     

    โž‹ Color

    โˆ— ์™„์ „ํžˆ hex 000000์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค 111111 ์‚ฌ์šฉ์„ ๊ถŒ์žฅ.

    โˆ— ๋„ˆ๋ฌด ๋‹ค์–‘ํ•œ ์ปฌ๋Ÿฌ ๋ณด๋‹ค๋Š” ๋ช…๋„ ์ฐจ์ด๋ฅผ ์ฃผ๊ณ , ํฌ์ธํŠธ ์ปฌ๋Ÿฌ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅ

    โˆ— ์ปฌ๋Ÿฌ์นฉ์„ ๋งŒ๋“ค์–ด ์šฉ๋„์— ๋”ฐ๋ฅธ ์ปฌ๋Ÿฌ ๊ด€๋ฆฌ

     

    โžŒ Grid

    โˆ— ํ™”๋ฉด์—์„œ ๋ณด์ด๋Š” ๊ธ€์˜ ๋‹จ ์ˆ˜๋ฅผ ์–ด๋–ป๊ฒŒ ์ง€์ •ํ•˜๋ƒ์— ๋”ฐ๋ผ ์„ค์ •์ด ๋‹ฌ๋ผ์ง„๋‹ค.

    โˆ— ํ™•์ธํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์€ column, margin, gap.

     

    โž Icon

    โˆ— ๊ธฐ๋ณธ ์˜์—ญ 24px*24px. ์ฃผ๋ณ€ ํฌ๊ธฐ์— ๋”ฐ๋ผ 20px*20px๋„ ๊ฐ€๋Šฅ.

     

     

     ๐Ÿ—๏ธElement

     

    โถ Button

    โˆ— ์ฃผ ๋ฒ„ํŠผ, ๊ธฐ๋Šฅ ๋ฒ„ํŠผ์œผ๋กœ ๋ถ„๋ฅ˜๋˜๋ฉฐ, ์ƒํƒœ๋Š” N(normal), O(pressed), D(disabled) ๋กœ ๋‚˜๋‰œ๋‹ค.

    โˆ— normal ์ƒํƒœ์—์„œ pressed ์ƒํƒœ๋กœ ๋ณ€ํ™”ํ•  ๋•Œ, ์ธํ„ฐ๋ž™์…˜์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

     

    โž‹ Selection Control

    โˆ— Check Box : ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด ํ•˜๋‚˜ ์ด์ƒ์ผ ๋•Œ ์‚ฌ์šฉ. ๋ณต์ˆ˜ ์„ ํƒ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

    โˆ— Radio Button : ๋ฏธ๋ฆฌ ์ •์˜๋œ ์˜ต์…˜์ด ํ•˜๋‚˜ ์žˆ์„ ๋•Œ ์‚ฌ์šฉ. ๋‹ค๋ฅธ radio button ์„ ํƒ ์‹œ, ๊ธฐ์กด์— ์„ ํƒ๋˜์–ด ์žˆ์—ˆ๋˜ ๋ฒ„ํŠผ์ด ์„ ํƒ ํ•ด์ œ.

    โˆ— Switches Control : ํŠน์ • ์˜ต์…˜์„ ์ผœ๊ณ  ๋Œ ์ˆ˜ ์žˆ๋Š” ์ปจํŠธ๋กค. 

    โˆ— ์ด์™ธ์—๋„ Slider, Toggle Switch, Drop down ๋“ฑ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ์˜ ์„ ํƒ UI๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

     

    โžŒ Badge

    โˆ— ์ƒˆ๋กœ์šด ์—…๋ฐ์ดํŠธ์™€ ์•Œ๋ฆผ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ.

    โˆ— ํ‘œ์‹œ ๋ฐฉ์‹์— ๋”ฐ๋ผ New badge, Dot badge, Flag, Number Badge ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.

     

    โž Dialog

    โˆ— ์‚ฌ์šฉ์ž์˜ ์ง€์‹œ ์‚ฌํ•ญ์ด๋‚˜ ๊ฒฐ์ •์„ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ๋Œ€ํ™” ํ˜•ํƒœ๋กœ ๋„์›Œ์ง€๋Š” ์ฐฝ.

    โˆ— tooltip, snackbar ์ฒ˜๋Ÿผ ์šฉ๋„๋กœ ๋‚˜๋‰˜์–ด์ง€๊ฑฐ๋‚˜, toast ์ฒ˜๋Ÿผ ํ˜•ํƒœ๋กœ ๋‚˜๋‰˜์–ด์ง„๋‹ค.

     

    โžŽ Tab

    โˆ— ํŽ˜์ด์ง€ ๋‚ด ์œ ์‚ฌํ•œ ์ •๋ณด๋ฅผ ๊ทธ๋ฃนํ•‘ํ•˜์—ฌ ์ฝ˜ํ…์ธ ๋ฅผ ์ •๋ฆฌํ•  ๋•Œ ์‚ฌ์šฉ.

    โˆ— ํƒญ์ด ํ‘œํ˜„ํ•˜๋Š” ์ •๋ณด์˜ ๋ณผ๋ฅจ์— ๋”ฐ๋ผ depth๋ผ๋Š” ์œ„๊ณ„๊ฐ€ ์ƒ๊ธฐ๋ฉฐ, ํ•ด๋‹น ์œ„๊ณ„๋ฅผ ํƒญ์—์„œ๋„ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œํ˜„ ๊ฐ€๋Šฅ.

     

    โž Image Box

    โˆ— ๋ฐฐ๋„ˆ๋‚˜ ํ”„๋กœ๋ชจ์…˜ ๋“ฑ์— ์ด๋ฏธ์ง€ ์˜์—ญ๊ณผ ํ…์ŠคํŠธ ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•˜์—ฌ ์‚ฌ์šฉ.

    โˆ— ์‚ฌ์ด์ฆˆ ๋ฐ ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜์—ฌ ํ†ต์ผ๊ฐ์„ ๋ถ€์—ฌํ•œ๋‹ค.

Designed by Tistory.