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

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

์ƒํƒœ ๊ด€๋ฆฌ๋Š” ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด๋ง์—์„œ ์ƒˆ๋กœ์šด ์ฃผ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ”„๋ŸฐํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ณต์žก์„ฑ์ด ์ฆ๊ฐ€ํ•จ์— ๋”ฐ๋ผ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋ณด๋‹ค ์ฒด๊ณ„์ ์ธ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ฑ„ํƒํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌํ•œ ์ ‘๊ทผ ๋ฐฉ์‹ ์ค‘ ํ•˜๋‚˜๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ฝ”๋“œ๋ฒ ์ด์Šค์˜ ํ™•์žฅ์„ฑ, ์œ ์ง€ ๊ด€๋ฆฌ์„ฑ ๋ฐ ์žฌ์‚ฌ์šฉ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ํŒจํ„ด๊ณผ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์ œ๊ณตํ•˜๋ฉด์„œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๋„๋ก ์„ค๊ณ„๋œ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ธ๊ธฐ ์žˆ๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ๋Š” Redux, Vuex, MobX, NgRx ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

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

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

๋น„๋™๊ธฐ ์ž‘์—… ์ฒ˜๋ฆฌ๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ ์ƒํƒœ ๊ด€๋ฆฌ ์†”๋ฃจ์…˜์˜ ์ค‘์š”ํ•œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ JavaScript์™€ ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋ŸฐํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ณธ์งˆ์ ์ธ ๋น„๋™๊ธฐ ํŠน์„ฑ์„ ๊ณ ๋ คํ•  ๋•Œ ๋”์šฑ ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค. ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ •์˜๋œ ํŒจํ„ด ๋ฐ ๊ทœ์น™์„ ํ†ตํ•ด ์ผ๊ด€๋˜๊ณ  ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๋ฉด์„œ ์„œ๋ฒ„ ์ธก API ํ˜ธ์ถœ ๋˜๋Š” ํƒ€์ด๋จธ ๊ธฐ๋ฐ˜ ๊ธฐ๋Šฅ๊ณผ ๊ฐ™์€ ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์›ํ™œํ•œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด์„œ๋Š” ๋‹ค์–‘ํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€์˜ ํ†ตํ•ฉ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค. ์ƒํƒœ ๊ด€๋ฆฌ ์†”๋ฃจ์…˜์€ ๊ฐœ๋ฐœ์ž๊ฐ€ React, Angular ๋˜๋Š” Vue.js์™€ ๊ฐ™์ด ์„ ํƒํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์˜ ์ปจํ…์ŠคํŠธ ๋‚ด์—์„œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๊ฐ„์†Œํ™”ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํ†ตํ•ฉ, ๋ฏธ๋“ค์›จ์–ด ๋˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ ํ”„๋ŸฐํŠธ์—”๋“œ ์ƒํƒœ ๊ด€๋ฆฌ๋Š” ์ตœ์‹  ํ”„๋ŸฐํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์—์„œ ์ค‘์š”ํ•œ ์ฃผ์ œ์ž…๋‹ˆ๋‹ค. ์ตœ์‹  UI ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ณต์žก์„ฑ๊ณผ ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ ๋ฐ ์›ํ™œํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ๋Œ€ํ•œ ์š”๊ตฌ๋กœ ์ธํ•ด ํŒจํ„ด, ๋ชจ๋ฒ” ์‚ฌ๋ก€ ๋ฐ ์ •๊ตํ•œ ๋„๊ตฌ๋ฅผ ํ†ตํ•ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•˜๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฐ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. AppMaster ํ”Œ๋žซํผ์€ Web BP(์›น ๋น„์ฆˆ๋‹ˆ์Šค ํ”„๋กœ์„ธ์Šค) ๋””์ž์ด๋„ˆ๋ฅผ ํ†ตํ•ด ํ”„๋ŸฐํŠธ์—”๋“œ ์ƒํƒœ ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ์‹œ๊ฐ์  ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ œ๊ณตํ•˜๋ฏ€๋กœ ๊ฐœ๋ฐœ์ž๋Š” ๋ณต์žกํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ ์œ ์ง€์™€ ๊ด€๋ จ๋œ ๋ฌธ์ œ๋ฅผ ํšจ์œจ์ ์ด๊ณ  ํšจ๊ณผ์ ์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.