๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์ž๊ฒฉ์ฆ๐Ÿชช/์ •๋ณด์ฒ˜๋ฆฌ๊ธฐ์‚ฌ ๐Ÿ“š

์ •๋ณด์ฒ˜๋ฆฌ๊ธฐ์‚ฌ ์‹ค๊ธฐ_ํ™”๋ฉด์„ค๊ณ„ 3[์ข…ํ•ฉ]๐Ÿ“š

by @ENFJ 2022. 3. 16.

2. UI ์„ค๊ณ„ ์›์น™ ์ค‘ ์œ ์—ฐ์„ฑ(flexibility) ๋ž€ ๋ฌด์—‡์ธ์ง€ ์„œ์ˆ ํ•˜์‹œ์˜ค.

: ์‚ฌ์šฉ์ž์˜ ์ธํ„ฐ๋ž™์…˜์„ ์ตœ๋Œ€ํ•œ ํฌ์šฉํ•˜๊ณ , ์‹ค์ˆ˜๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ์ž‘ํ•ด์•ผ ํ•˜๋Š” UI ์„ค๊ณ„์›์น™์ด๋‹ค.

 

3. ISO/IEC 9126 ๊ธฐ๋ฐ˜ UI ํ’ˆ์งˆ ์š”๊ตฌ์‚ฌํ•ญ ์ค‘ ์ด์‹์„ฑ ์ƒ์„ธ ํ’ˆ์งˆ ์š”๊ตฌ์‚ฌํ•ญ์œผ๋กœ ๊ณ ๋ ค๋œ ์†Œํ”„ํŠธ์›จ์–ด์˜ ๋ชฉ์ ์„ ์œ„ํ•ด ์ œ๊ณต๋œ ์ˆ˜๋‹จ์ด๋‚˜ ๋‹ค๋ฅธ ์กฐ์น˜ ์—†์ด ํŠน์ • ํ™˜๊ฒฝ์œผ๋กœ ์ „ํ™˜๋˜๋Š” ๋Šฅ๋ ฅ์— ๋”ฐ๋ฅธ ์†Œํ”„ํŠธ์›จ์–ด ํŠน์„ฑ์€ ๋ฌด์—‡์ธ์ง€ ์ž‘์„ฑํ•˜์‹œ์˜ค.

: ์ ์šฉ์„ฑ

 

* ์ƒ์„ธํ’ˆ์งˆ ์š”๊ตฌ์‚ฌํ•ญ์—๋Š” ์ ์šฉ์„ฑ, ์„ค์น˜์„ฑ, ๋Œ€์ฒด์„ฑ ์ด ์žˆ๋‹ค.

 

4. UI ์„ค๊ณ„ ์ง€์นจ์ค‘ (๊ฐ€์‹œ์„ฑ) ์€ ์ฃผ์š” ๊ธฐ๋Šฅ์„ ๋ฉ”์ธ ํ™”๋ฉด์— ๋…ธ์ถœํ•˜์—ฌ ์‰ฌ์šด ์กฐ์ž‘์ด ๊ฐ€๋Šฅํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ง€์นจ์ด๋‹ค.

 

5. UX ๋ž€ ์ œํ’ˆ๊ณผ ์‹œ์Šคํ…œ,์„œ๋น„์Šค ๋“ฑ์„ ์‚ฌ์šฉ์ž๊ฐ€ ์ง.๊ฐ„์ ‘์ ์œผ๋กœ ๊ฒฝํ—˜ํ•˜๋ฉด์„œ ๋А๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์ด์ œ์  ๊ฒฝํ—˜์ด๋‹ค.

 

6. ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ์˜ ์„ฑ๊ณต์ ์ธ ์ˆ˜ํ–‰์„ ์œ„ํ•ด์„œ ๋‚ด๋ถ€ ๊ด€๊ณ„์ž์—๊ฒŒ UI๊ฐœ๋ฐœ ํ•„์š”์„ฑ ๋ฐ ๋ชฉํ‘œ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ๊ฐœ๋ฐœ ๋ฒ”์œ„๋ฅผ ์ˆ˜๋ฆฝํ•˜๊ธฐ ์œ„ํ•œ ์ฃผ์š” ๊ธฐ๋ฒ•๋“ค ์ค‘ ๋ถˆํ™•์‹ค์„ฑ์ด ๋†’์€ ์ƒํ™ฉ ๋ณ€ํ™”๋ฅผ ์‚ฌ์ „์— ์˜ˆ์ธกํ•˜๊ณ  ๋‹ค์–‘ํ•œ ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋ถˆ ํ™•์‹ค์„ฑ์„ ์ œ๊ฑฐํ•ด๋‚˜๊ฐ€๋ ค๋Š” ๊ฒฝ์˜ ์ „๋žต ๊ธฐ๋ฒ•์€ ๋ฌด์—‡์ธ๊ฐ€?

: ์‹œ๋‚˜๋ฆฌ์˜ค ํ”Œ๋ž˜๋‹

 

7. UI ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ์ฃผ์š” ๊ธฐ๋ฒ•์ค‘ SWOT ๋ถ„์„์ด๋ž€ ๋ฌด์–ธ์ธ์ง€ ์„œ์ˆ ํ•˜์‹œ์˜ค.

: ๊ธฐ์—…์˜ ๋‚ด๋ถ€ ํ™˜๊ฒฝ๊ณผ ์™ธ๋ถ€ํ™˜๊ฒฝ์„ ๋ถ„์„ํ•˜์—ฌ Strength(๊ฐ•์ ), weakness(์•ฝ์ ),opportunity(๊ธฐํšŒ), threat(์œ„ํ˜‘) ์š”์ธ์„ ๊ทœ์ •ํ•˜๊ณ  ์ด๋ฅผ ํ† ๋Œ€๋กœ ๊ฒฝ์˜ ์ „๋žต์„ ์ˆ˜๋ฆฝํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

 

8. UI ์ง€์นจ(Guideline)์— ์„ค๋ช…ํ•˜๊ณ  ์žˆ๋Š” ์‚ฌ์šฉ์ž ์š”๊ตฌ์‚ฌํ•ญ ๋„์ถœ ์ˆœ์„œ๋ฅผ ์•Œ๋งž๊ฒŒ ๋‚˜์—ดํ•˜์‹œ์˜ค.

 -. UI์ปจ์…‰์…˜, ์ฝ˜์„ผํŠธ ๋ชจ๋ธ์ •์˜, ์‚ฌ์šฉ์ž ์š”๊ตฌ์‚ฌํ•ญ ์ •์˜

 

a. ํŽ˜๋ฅด์†Œ๋‚˜ ์ •์˜ ( ์ž ์žฌ์  ์‚ฌ์šฉ์ž์ด ๋‹ค์–‘ํ•œ ๋ชฉ์ ๊ณผ ๊ด€์ฐฐ๋œ ํ–‰๋™ ํŒจํ„ด์„ ์‘์ง‘์‹œ์ผœ ๋†“์€ ๊ฐ€์ƒ์˜ ์‚ฌ์šฉ์ž)

b. ์ฝ˜์…‰ํŠธ ๋ชจ๋ธ ์ •์˜ ( ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ถ”์ƒ์ ์ธ ์ฝ˜์…‰ํŠธ๋“ค ์‚ฌ์ด์˜ ๊ด€๊ณ„๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋‹ค์ด์–ด๊ทธ๋žจ,

๋‹ค์–‘ํ•œ ์•„์ด๋””์–ด๋“ค์„ ๊ฐ„ํŽธํ•˜๊ฒŒ ์‹œ๊ฐํ™” ํ•˜์—ฌ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์šฉํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ์•„์ด๋””์–ด๋ฅผ ์ž˜ ์ „๋‹ฌํ•˜๊ณ  ์ƒ๊ฐ์˜ ๊ณผ์ •์„ ํšจ์œจ์ ์œผ๋กœ ์ด๋Œ์–ด ์คŒ)

c. ์‚ฌ์šฉ์ž ์š”๊ตฌ์‚ฌํ•ญ ์ •์˜ ( ๋ฆฌ์„œ์น˜ ๋ฐ ํŽ˜๋ฅด์†Œ๋‚˜ ๊ฒฐ๊ณผ๋ฌผ์„ ํ† ๋Œ€๋กœ ์š”๊ตฌ์‚ฌํ•ญ์„ ๋„์ถœํ•˜๊ณ , ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ •ํ•จ)

d. UI ์ปจ์…‰์…˜ (์ •๋ฆฌ๋œ ์š”๊ตฌ์‚ฌํ•ญ์„ ๊ตฌ์ฒดํ™”ํ•˜๋Š” ๋‹จ๊ณ„๋กœ ํ™”๋ฉด ๋””์ž์ธ ๋‹จ๊ณ„ ์ „์— ๋Œ€ํ‘œ ํ™”๋ฉด์„ค๊ณ„๋ฅผ ์ง„ํ–‰ํ•˜๋Š” ๋‹จ๊ณ„ )

 

9. UI ๊ฒ€์ฆ ์‹œ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ œํ’ˆ์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๋ฏธ๋ฆฌ ์ž‘์„ฑ๋œ ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋งž์ถ”์–ด ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ•œ ํ›„ ์งˆ๋ฌธ์— ๋‹ตํ•˜๋„๋ก ํ•˜๋Š” ํ…Œ์ŠคํŠธ!!

 ํ˜„ ์ œํ’ˆ์— ๋Œ€ํ•œ ์‚ฌ์šฉ์ž์˜ ์š”๊ตฌ์‚ฌํ•ญ๊ณผ ํ–‰๋™์„ ๊ด€์ฐฐ ํ•  ์ˆ˜์žˆ๋Š” ์œ ์šฉํ•œ ์ง„๋‹จ๋ฐฉ๋ฒ•์ด๋‹ค.

=> ์‚ฌ์šฉ์„ฑ ํ…Œ์ŠคํŠธ(usability test)

 

10. ์Šคํ† ๋ฆฌ๋ณด๋“œ(story board)๋Š” UI ํ™”๋ฉด ์„ค๊ณ„๋ฅผ ์œ„ํ•ด์„œ ์ •์ฑ…์ด๋‚˜ ํ”„๋กœ์„ธ์Šค ๋ฐ ์ฝ˜ํ…์ธ ์˜ ๊ตฌ์„ฑ, ์™€์ด์–ดํ”„๋ ˆ์ž„(UI,UX) , ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์ •์˜, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ์—ฐ๋™ ๋“ฑ ๊ตฌ์ถ•ํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ์œ„ํ•œ ๋Œ€๋ถ€๋ถ„ ์ •๋ณด๊ฐ€ ์ˆ˜๋ฃฉ๋œ ๋ฌธ์„œ๋กœ์„œ, ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ตœ์ข…์ ์œผ๋กœ ์ฐธ๊ณ ํ•˜๋Š” ์‚ฐ์ถœ ๋ฌธ์„œ์ด๋‹ค. 

 

11. UI ์‹œ๋‚˜๋ฆฌ์˜ค ๋ฌธ์„œ์˜ ์ž‘์„ฑ ์š”๊ฑด์ค‘!!!  UI ์‹œ๋‚˜๋ฆฌ์˜ค๋Š” ๋ˆ„๋ฝ์ด ์—†์–ด์•ผ ํ•˜๊ณ , ์ตœ๋Œ€ํ•œ ๋น ์ง์—†์ด ๊ฐ€๋Šฅํ•œ ์ƒ์„ธํ•˜๊ฒŒ ๊ธฐ์ˆ ํ•˜๋ฉฐ ์‹œ์Šคํ…œ ๊ธฐ๋Šฅ๋ณด๋‹ค ์‚ฌ์šฉ์ž์ด ํƒœ์Šคํฌ์— ์ดˆ์ ์„ ๋งž์ถฐ ๊ธฐ์ˆ ํ•ด์•ผ ํ•˜๋Š” ์š”๊ฑด์€ ๋ฌด์—‡์ธ๊ฐ€?

 

: ์™„์ „์„ฑ

 

 

12.

์™€์ด์–ด ํ”„๋ ˆ์ž„ : ์ดํ•ด ๊ด€๊ณ„์ž๋“ค๊ณผ์˜ ํ™”๋ฉด๊ตฌ์„ฑ์„ ํ˜‘์˜ํ•˜๊ฑฐ๋‚˜ ์„œ๋น„์Šค์˜ ๊ฐ„๋žตํ•œ ํ๋ฆ„์„ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•ด

ํ™”๋ฉด ๋‹จ์œ„์˜ ๋ ˆ์ด์•„์›ƒ์„ ์„ค๊ณ„ํ•˜๋Š” ์ž‘์—…

 

ํ”„๋กœํ† ํƒ€์ž…: ์ปดํ“จํ„ฐ ์‹œ์Šคํ…œ์ด๋‚˜ ์†Œํ”„ํŠธ์›จ์–ด์˜ ์„ค๊ณ„ ๋˜๋Š” ์„ฑ๋Šฅ, ๊ตฌํ˜„ ๊ฐ€๋Šฅ์„ฑ, ์šด์šฉ ๊ฐ€๋Šฅ์„ฑ์„ ํ‰๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์š”๊ตฌ์‚ฌํ•ญ์„ ์ข€ ๋” ์ž˜ ์ดํ•ดํ•˜๊ณ  ๊ฒฐ์ •ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์ „์ฒด์ ์ธ ๊ธฐ๋Šฅ์„ ๊ฐ„๋žตํ•œ ํ˜•ํƒœ๋กœ ๊ตฌํ˜„ํ•œ ์‹œ์ œํ’ˆ.

 

 

13.

UI ์„ค๊ณ„์•ˆ์˜ ์ ์ •์„ฑ ํ™•์ธ ->

ํ™”๋ฉด์— ํ‘œํ˜„๋˜์–ด์•ผ ํ•  ๊ธฐ๋Šฅ ๋ฐ ๋น„๊ธฐ๋Šฅ์  ์š”๊ตฌ์‚ฌํ•ญ ๊ฒ€ํ†  ->

ํ™”๋ฉด์˜ ์ž…๋ ฅ์š”์†Œ๋ฅผ ํ†ตํ•œ UI ์š”๊ตฌ์‚ฌํ•ญ ํ™•์ธ ->

์œ ์Šค์ผ€์ด์Šค๋ฅผ ํ†ตํ•œ UI ์š”๊ตฌ์‚ฌํ•ญ ํ™•์ธ ->

( ์œ ์Šค์ผ€์ด์Šค )์„ค๊ณ„ ->

๊ธฐ๋Šฅ ๋ฐ ์–‘์‹ ํ™•์ธ

 

15. UML(unfied modeling langauage) ๋ฌด์—‡์ธ์ง€ ์„œ์ˆ ํ•˜์‹œ์˜ค.

:UML์€ ๊ฐ์ฒด์ง€ํ–ฅ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ์‚ฐ์ถœ๋ฌผ์„ ๋ช…์„ธํ™”, ์‹œ๊ฐํ™”, ๋ฌธ์„œํ™” ํ• ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋ธ๋ง ๊ธฐ์ˆ ๊ณผ ๋ฐฉ๋ฒ•๋ก ์„ ํ†ตํ•ฉํ•ด์„œ ๋งŒ๋“  ํ‘œ์ค€ํ™”๋œ ๋ฒ”์šฉ ๋ชจ๋ธ๋ง ์–ธ์–ด์ด๋‹ค.

 

16. ํ‘œ์ค€ํ™”๋œ ๋ฒ”์šฉ ๋ชจ๋ธ๋ง ์–ธ์–ด์ธ UML ์˜ ๊ตฌ์„ฑ์š”์†Œ

a. ์‚ฌ๋ฌผ : ์ถ”์ƒ์ ์ธ ๊ฐœ๋…์œผ๋กœ ์ฃผ์ œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์š”์†Œ, ๋‹จ์–ด ๊ด€์ ์—์„œ ๋ช…์‚ฌ ๋˜๋Š” ๋™์‚ฌ๋ฅผ ์˜๋ฏธ

b. ๊ด€๊ณ„ : ์‚ฌ๋ฌผ์˜ ์˜๋ฏธ๋ฅผ ํ™•์žฅํ•˜๊ณ  ๋ช…ํ™•ํžˆ ํ•˜๋Š” ์š”์†Œ, ์‚ฌ๋ฌผ๊ณผ ์‚ฌ๋ฌผ์„ ์—ฐ๊ฒฐํ•˜๋Š” ์š”์†Œ, ๋‹จ์–ด ๊ด€์ ์—์„œ ํ˜•์šฉ์‚ฌ, ๋ถ€์‚ฌ ์˜๋ฏธ

c. ๋‹ค์ด์–ด๊ทธ๋žจ: ์‚ฌ๋ฌผ๊ณผ ๊ด€๊ณ„๋ฅผ ๋ชจ์•„ ๊ทธ๋ฆผ์œผ๋กœ ํ‘œํ˜„ํ•œ ํ˜•ํƒœ, ํ˜•์‹๊ณผ ๋ชฉ์ ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•˜๊ฒŒ ์ •์˜.

 

17. ๋™์  ๋‹ค์ด์–ด๊ทธ๋žจ์ค‘ ์‹œ์Šคํ…œ์ด ์–ด๋–ค ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š”์ง€๋ฅผ ๊ฐ์ฒด์˜ ์ฒ˜๋ฆฌ ๋กœ์ง์ด๋‚˜ ์กฐ๊ฑด์— ๋”ฐ๋ฅธ ์ฒ˜๋ฆฌ์˜ ํ๋ฆ„์œผ๋กœ ์ˆœ์„œ๋Œ€๋กœ ํ‘œํ˜„ํ•˜๋Š” ๋‹ค์ด์–ด๊ทธ๋žจ 

: ํ™œ๋™ ๋‹ค์ด์–ด๊ทธ๋žจ

 

18. ํด๋ž˜์Šค ๋‹ค์ด์–ด๊ทธ๋žจ ์—์„œ ํด๋ž˜์Šค์˜ ๊ตฌ์กฐ์  ํŠน์„ฑ์— ์ด๋ฆ„์„ ๋ถ™์ธ๊ฒƒ์œผ๋กœ ํŠน์„ฑ์— ํ•ด๋‹นํ•˜๋Š” ์ธ์Šคํ„ด์Šค๊ฐ€ ๋ณด์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ’์˜ ๋ฒ”์œ„๋ฅผ ๊ธฐ์ˆ ํ•˜๋Š” ๊ตฌ์„ฑ์š”์†Œ๋Š” ( ์†์„ฑ ) ์ด๋‹ค.

 

19. (๋ณตํ•ฉ ๊ด€๊ณ„==ํฌํ•จ๊ด€๊ณ„)๋Š” ์ง‘ํ•ฉ๊ด€๊ณ„์˜ ํŠน์ˆ˜ํ•œ ํ˜•ํƒœ๋กœ, ํฌํ•จํ•˜๋Š” ์‚ฌ๋ฌผ์˜ ๋ณ€ํ™”๊ฐ€ ํฌํ•จ๋˜๋Š” ์‚ฌ๋ฌผ์—๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๊ด€๊ณ„๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค.

 

20. ์‹œํ€€์Šค ๋‹ค์ด์–ด๊ทธ๋žจ ๊ตฌ์„ฑ์š”์†Œ : ๊ฐ์ฒด, ์ƒ๋ช…์„ , ํ™œ์„ฑํ™”, ๋ฉ”์‹œ์ง€