์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ(์•ฑ ๊ฐœ๋ฐœ ์ฐฝ์—…)/์•ฑ ๊ฐœ๋ฐœ ์ฐฝ์—…

[์•ฑ๊ฐœ๋ฐœ/์•ฑ์ฐฝ์—… ๊ธฐ์ดˆ ์šฉ์–ด ์ •๋ฆฌ] ์™€์ด์–ดํ”„๋ ˆ์ž„์ด๋ž€? UI/UX ๋””์ž์ธ ์ „์— ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ์ด์œ !

๋ชฝ๋ฌผ๊ณ ๊ธฐ๐“†œ 2025. 2. 12. 01:43
728x90
728x90

 

 


โ… . ์„œ๋ก 

 

๐Ÿ“Œ ์™€์ด์–ดํ”„๋ ˆ์ž„(Wireframe)์ด๋ž€?

 

์™€์ด์–ดํ”„๋ ˆ์ž„(Wireframe)์€

์›น์‚ฌ์ดํŠธ๋‚˜ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์ „์—

ํ™”๋ฉด์˜ ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ตฌ์กฐ๋ฅผ

์‹œ๊ฐ์ ์œผ๋กœ ํ‘œํ˜„ํ•œ ์ดˆ์•ˆ(์„ค๊ณ„๋„)์ž…๋‹ˆ๋‹ค.

 

์™€์ด์–ดํ”„๋ ˆ์ž„์€

๋””์ž์ธ ์š”์†Œ(์ƒ‰์ƒ, ์ด๋ฏธ์ง€ ๋“ฑ) ์—†์ด

๊ธฐ๋Šฅ๊ณผ ๋ฐฐ์น˜๋ฅผ ์ค‘์‹ฌ์œผ๋กœ

ํ™”๋ฉด ๊ตฌ์„ฑ์„ ๋ฏธ๋ฆฌ ๊ณ„ํšํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

 

์ฆ‰, ์–ด๋–ค ๊ธฐ๋Šฅ์ด ์–ด๋””์— ๋ฐฐ์น˜๋ ์ง€,

์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ป๊ฒŒ ์ด๋™ํ• ์ง€๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค.

 


๐Ÿ“Œ ์™€์ด์–ดํ”„๋ ˆ์ž„์˜ ํ•ต์‹ฌ ๊ฐœ๋…

 

โœ… ์™€์ด์–ดํ”„๋ ˆ์ž„์˜ ํ•ต์‹ฌ ๊ฐœ๋…

โœ” ์›น์‚ฌ์ดํŠธ/์•ฑ์˜ ์ „์ฒด์ ์ธ ๊ตฌ์กฐ๋ฅผ ๊ณ„ํš
โœ” ๋ฒ„ํŠผ, ๋ฉ”๋‰ด, ์ฝ˜ํ…์ธ  ๋ฐฐ์น˜ ๋“ฑ์„ ์‹œ๊ฐ์ ์œผ๋กœ ์ •๋ฆฌ
โœ” ์‚ฌ์šฉ์ž์˜ ์ด๋™ ๊ฒฝ๋กœ(๋„ค๋น„๊ฒŒ์ด์…˜) ์„ค๊ณ„
โœ” UI/UX ๋””์ž์ธ ๋ฐ ๊ฐœ๋ฐœ ์ „์— ๋ ˆ์ด์•„์›ƒ์„ ์ ๊ฒ€


โ…ก. ๋ณธ๋ก 

 

๐Ÿ“Œ ์™€์ด์–ดํ”„๋ ˆ์ž„์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ ์ด์œ 

 

๐ŸŽฏ ์™œ ์™€์ด์–ดํ”„๋ ˆ์ž„์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ๊ฐ€์š”?

 

์™€์ด์–ดํ”„๋ ˆ์ž„์„ ๋จผ์ € ๋งŒ๋“ค์ง€ ์•Š๊ณ 

๋ฐ”๋กœ UI ๋””์ž์ธ์„ ์‹œ์ž‘ํ•˜๋ฉด,


โœ” ๋ ˆ์ด์•„์›ƒ์ด ์—‰์„ฑํ•ด์ง€๊ณ 
โœ” ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ๋นˆ๋ฒˆํ•œ ์ˆ˜์ •์ด ๋ฐœ์ƒํ•˜๋ฉฐ
โœ” ๊ฒฐ๊ณผ์ ์œผ๋กœ ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์ด ์ฆ๊ฐ€ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Šต๋‹ˆ๋‹ค.

 


๐Ÿ”น 1. ์ „์ฒด์ ์ธ ํ™”๋ฉด ๊ตฌ์กฐ๋ฅผ ํ•œ๋ˆˆ์— ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์Œ

 

์™€์ด์–ดํ”„๋ ˆ์ž„์„ ์ œ์ž‘ํ•˜๋ฉด

์›น์‚ฌ์ดํŠธ๋‚˜ ์•ฑ์˜ ์ „์ฒด์ ์ธ ๊ตฌ์„ฑ๊ณผ

ํ๋ฆ„์„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 


์˜ˆ๋ฅผ ๋“ค์–ด,

  • ๋„ค๋น„๊ฒŒ์ด์…˜(๋ฉ”๋‰ด)์ด ์–ด๋””์— ๋ฐฐ์น˜๋ ์ง€
  • ์ฃผ์š” ๋ฒ„ํŠผ์ด ์–ด๋–ค ์œ„์น˜์— ์žˆ์–ด์•ผ ํ•˜๋Š”์ง€
  • ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ์‰ฝ๊ฒŒ ์ฐพ์„ ์ˆ˜ ์žˆ๋Š”์ง€

์ด๋Ÿฌํ•œ ์š”์†Œ๋“ค์„ ์ดˆ๊ธฐ ๋‹จ๊ณ„์—์„œ ๋ฏธ๋ฆฌ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ”น 2. ๋””์ž์ธ๊ณผ ๊ธฐ๋Šฅ์„ ํšจ๊ณผ์ ์œผ๋กœ ๊ณ„ํšํ•  ์ˆ˜ ์žˆ์Œ

 

 

UI/UX ๋””์ž์ธ์„ ํ•˜๊ธฐ ์ „์—

์–ด๋–ค ๊ธฐ๋Šฅ์ด ํฌํ•จ๋ ์ง€,

์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ• ์ง€๋ฅผ

์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

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


๐Ÿ”น 3. ํŒ€์› ๊ฐ„ ์›ํ™œํ•œ ํ˜‘์—…์ด ๊ฐ€๋Šฅํ•จ

 

โœ” ๊ฐœ๋ฐœ์ž, ๋””์ž์ด๋„ˆ, ๊ธฐํš์ž๊ฐ€ ๋™์ผํ•œ ๋ฐฉํ–ฅ์„ ๋ฐ”๋ผ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์ •๋ฆฌํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.
โœ” ์™€์ด์–ดํ”„๋ ˆ์ž„์„ ํ†ตํ•ด ํŒ€์›๋“ค๊ณผ ์ดˆ๊ธฐ ๊ธฐํš์„ ๊ณต์œ ํ•˜๋ฉด, ๋ถˆํ•„์š”ํ•œ ์ˆ˜์ •์ด ์ค„์–ด๋“ค๊ณ  ๊ฐœ๋ฐœ ์†๋„๊ฐ€ ๋นจ๋ผ์ง‘๋‹ˆ๋‹ค.
โœ” ํด๋ผ์ด์–ธํŠธ์™€ ํ˜‘์—…ํ•  ๋•Œ๋„ ์‹œ๊ฐ์ ์œผ๋กœ ๊ฐœ๋…์„ ์„ค๋ช…ํ•˜๊ธฐ ์‰ฌ์›Œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ์›ํ™œํ•ด์ง‘๋‹ˆ๋‹ค.


๐Ÿ”น 4. ๋””์ž์ธ ๋ฐ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ์ˆ˜์ • ๋น„์šฉ์„ ์ค„์ผ ์ˆ˜ ์žˆ์Œ

 

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


๐Ÿ“Œ ์™€์ด์–ดํ”„๋ ˆ์ž„์˜ ์˜ˆ์‹œ

 

โœ… ๋กœ์šฐํŒŒ์ด(Lo-Fi) ์™€์ด์–ดํ”„๋ ˆ์ž„ (๊ธฐ๋ณธ์ ์ธ ์Šค์ผ€์น˜)

๐Ÿ‘‰ ์—ฐํ•„์ด๋‚˜ ๊ฐ„๋‹จํ•œ ๋„๊ตฌ๋กœ ํ™”๋ฉด์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋Œ€๋žต์ ์œผ๋กœ ์Šค์ผ€์น˜
๐Ÿ‘‰ ๋ฒ„ํŠผ, ์ž…๋ ฅ ํ•„๋“œ, ๋„ค๋น„๊ฒŒ์ด์…˜ ๋“ฑ์ด ์–ด๋””์— ๋ฐฐ์น˜๋ ์ง€ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œํ˜„
๐Ÿ‘‰ ์„ธ๋ถ€์ ์ธ ๋””์ž์ธ ์š”์†Œ ์—†์ด ๊ตฌ์กฐ๋งŒ ์ •๋ฆฌํ•˜๋Š” ํ˜•ํƒœ

 

โœ… ํ•˜์ดํŒŒ์ด(Hi-Fi) ์™€์ด์–ดํ”„๋ ˆ์ž„ (์ •๊ตํ•œ ํ”„๋กœํ† ํƒ€์ž…)

๐Ÿ‘‰ Figma, Adobe XD, Sketch ๋“ฑ์˜ ํˆด์„ ํ™œ์šฉํ•˜์—ฌ ์ •๊ตํ•œ ์™€์ด์–ดํ”„๋ ˆ์ž„ ์ œ์ž‘
๐Ÿ‘‰ ํด๋ฆญ์ด ๊ฐ€๋Šฅํ•œ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ํ”„๋กœํ† ํƒ€์ž… ์ œ์ž‘ ๊ฐ€๋Šฅ
๐Ÿ‘‰ ์‹ค์ œ ๋””์ž์ธ๊ณผ ์œ ์‚ฌํ•œ ํ˜•ํƒœ๋กœ ์ œ์ž‘ํ•˜์—ฌ ์‚ฌ์šฉ์ž ํ…Œ์ŠคํŠธ ๊ฐ€๋Šฅ

 


โ…ข. ๊ฒฐ๋ก 

 

โœ” ์™€์ด์–ดํ”„๋ ˆ์ž„์€ UI/UX ๋””์ž์ธ ๋ฐ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ํ•„์ˆ˜์ ์ธ ๊ธฐ์ดˆ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค.
โœ” ์ „์ฒด์ ์ธ ํ™”๋ฉด ๊ตฌ์กฐ๋ฅผ ์ •๋ฆฌํ•˜๊ณ , ํŒ€์› ๊ฐ„ ํ˜‘์—…์„ ์›ํ™œํ•˜๊ฒŒ ํ•˜๋ฉฐ, ์ˆ˜์ • ๋น„์šฉ์„ ์ ˆ๊ฐํ•˜๋Š” ํšจ๊ณผ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
โœ” ๋กœ์šฐํŒŒ์ด(๊ธฐ๋ณธ ์Šค์ผ€์น˜) → ํ•˜์ดํŒŒ์ด(์ •๊ตํ•œ ๋””์ž์ธ) ๊ณผ์ •์œผ๋กœ ๋ฐœ์ „ํ•˜๋ฉด์„œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿ’ก ์ข‹์€ ์™€์ด์–ดํ”„๋ ˆ์ž„์ด

์ข‹์€ UI/UX ๋””์ž์ธ์„ ๋งŒ๋“ค๊ณ ,

์ข‹์€ UI/UX ๋””์ž์ธ์ด

์„ฑ๊ณต์ ์ธ ์ œํ’ˆ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค!

 

#์™€์ด์–ดํ”„๋ ˆ์ž„ #UIUX #UX๋””์ž์ธ #์ œํ’ˆ๊ฐœ๋ฐœ #์Šคํƒ€ํŠธ์—…์ „๋žต #IT์šฉ์–ด #์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ #์ฝ”๋”ฉ๋ถ€ํŠธ์บ ํ”„

728x90
728x90

'์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ(์•ฑ ๊ฐœ๋ฐœ ์ฐฝ์—…) > ์•ฑ ๊ฐœ๋ฐœ ์ฐฝ์—…' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[์•ฑ๊ฐœ๋ฐœ/์•ฑ์ฐฝ์—… ๊ธฐ์ดˆ ์šฉ์–ด ์ •๋ฆฌ] ๋กœ๋“œ๋งต(Roadmap)์ด๋ž€? ๊ธฐ์—… ์„ฑ์žฅ๊ณผ ๋ชฉํ‘œ ๋‹ฌ์„ฑ์„ ์œ„ํ•œ ํ•„์ˆ˜ ์ „๋žต  (1) 2025.02.12
[์•ฑ๊ฐœ๋ฐœ/์•ฑ์ฐฝ์—… ๊ธฐ์ดˆ ์šฉ์–ด ์ •๋ฆฌ] ๋งˆ์ผ์Šคํ†ค(Milestone)์ด๋ž€? ๊ธฐ์—… ์„ฑ์žฅ๊ณผ ๋ชฉํ‘œ ๋‹ฌ์„ฑ์„ ์œ„ํ•œ ํ•„์ˆ˜ ์ „๋žต  (1) 2025.02.12
[์•ฑ๊ฐœ๋ฐœ/์•ฑ์ฐฝ์—… ๊ธฐ์ดˆ ์šฉ์–ด ์ •๋ฆฌ] UI/UX๋ž€? ๋„ทํ”Œ๋ฆญ์Šค ์‚ฌ๋ก€๋กœ ๋ฐฐ์šฐ๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ํ˜์‹ ๊ณผ ๋””์ž์ธ ๊ฐœ์„  ์ „๋žต  (0) 2025.02.11
[์•ฑ๊ฐœ๋ฐœ/์•ฑ์ฐฝ์—… ๊ธฐ์ดˆ ์šฉ์–ด ์ •๋ฆฌ] UI vs. UX ์ฐจ์ด์ ์€? ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์™€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์˜ ํ•ต์‹ฌ ๊ฐœ๋… ์ •๋ฆฌ  (1) 2025.02.11
[์•ฑ๊ฐœ๋ฐœ/์•ฑ์ฐฝ์—… ๊ธฐ์ดˆ ์šฉ์–ด ์ •๋ฆฌ] ํ”„๋กœํ† ํƒ€์ž…๊ณผ MVP์˜ ์ฐจ์ด์ ์€? ํ…Œ์Šฌ๋ผ ์ „๊ธฐ์ฐจ ์‚ฌ๋ก€๋กœ ๋ฐฐ์šฐ๋Š” ์ œํ’ˆ ๊ฐœ๋ฐœ ์ „๋žต  (1) 2025.02.11