์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ๋งฅ๋ฝ์์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ ๊ฐ๋ฐ์๊ฐ ์น ํ๋ซํผ์ ์ํ ์๋ต์ฑ์ด ๋ฐ์ด๋๊ณ ์ ์ฐํ๋ฉฐ ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ ๊ฒฌ๊ณ ํ ๊ธฐ๋ฐ์ ์ ๊ณตํ๋ ์ฌ์ ๊ตฌ์ถ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, ๋๊ตฌ ๋ฐ ํ ํ๋ฆฟ ๋ชจ์์ ์๋ฏธํฉ๋๋ค. ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์ ์ฃผ์ ๋ชฉ์ ์ ๊ฐ๋ฐ์๊ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ค์ํ๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ํจ๊ณผ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ๋ฐ ๋์์ด ๋๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ชจ๋์ ๊ตฌ์ฑ ์์ ์ธํธ๋ฅผ ์ ๊ณตํ์ฌ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํด๋ผ์ด์ธํธ์ธก(๋๋ "ํ๋ฐํธ์๋")์ ์ค๊ณํ๊ณ ๊ฐ๋ฐํ๋ ํ๋ก์ธ์ค๋ฅผ ๊ฐ์ํํ๋ ๊ฒ์ ๋๋ค. ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์ฑ ํจ์จ์ ์ด๊ณ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํ๊ณ ํ๋์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ๋ํ ์๊ตฌ๋ก ์ธํด ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์ ์ธ๊ธฐ๊ฐ ๋์์ก์ต๋๋ค. ์ต๊ทผ ํต๊ณ์ ๋ฐ๋ฅด๋ฉด ์ธํฐ๋ท ์น์ฌ์ดํธ์ 95% ์ด์์ด ์ต์ํ ํ๋์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ฅผ ํฌํจํ๊ณ ์์ต๋๋ค. ์ด๋ฌํ ํ๋ ์์ํฌ ์ค ๋ค์์๋ ์ฑ๋ฅ ์ต์ ํ, ๋ธ๋ผ์ฐ์ ๊ฐ ํธํ์ฑ, ์ ๊ทผ์ฑ, ๊ตญ์ ํ ๋ฑ ํน์ ์๊ตฌ ์ฌํญ๊ณผ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ํด๊ฒฐํ๋ ๊ธฐ๋ฅ์ด ํฌํจ๋์ด ์์ด ํ๋ ์น ๊ฐ๋ฐ์์๊ฒ ์์ด์๋ ์ ๋ ๋๊ตฌ์ ๋๋ค.
์ด๋ฌํ ํ๋ ์์ํฌ๋ HTML, CSS, JavaScript๋ฅผ ๋น๋กฏํ ๋ค์ํ ๊ตฌ์ฑ ์์๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ ํจ๊ป ์๋ํ์ฌ ์ผ๊ด๋๊ณ ์ ์ง ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ฉฐ ๊ณ ํ์ง ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํฉ๋๋ค. ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ฅผ ํ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๊ฐ๊ฐ์ ์๋ก์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํด ๋ฐํด๋ฅผ ๋ค์ ๋ง๋๋ ๊ฒ์ ํผํ๊ณ ๋์ ๋ค๋ฅธ ์ฌ๋์ ์์ ์ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ถํ์ฌ ํ๋ก์ธ์ค์์ ์๊ฐ๊ณผ ๋ฆฌ์์ค๋ฅผ ์ ์ฝํ ์ ์์ต๋๋ค. ์ด๋ ๊ฐ๋ฐ ์๊ฐ๊ณผ ๋ณต์ก์ฑ์ด ์ค์ด๋ค์ด ์ ํ๋ฆฌ์ผ์ด์ ์ถ์ ์๊ฐ์ด ๋จ์ถ๋๊ณ ๋น์ฉ์ด ์ ๊ฐ๋๋ฉฐ ์ฌ์ฉ์ ๊ฒฝํ์ด ๋์ฑ ์ฆ๊ฑฐ์์ง๋ฏ๋ก ๊ฐ๋ฐ ํ๊ณผ ์ต์ข ์ฌ์ฉ์ ๋ชจ๋์๊ฒ ์ด์ต์ด ๋ฉ๋๋ค.
๋ ๊ฐ์ง ์ฃผ์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ ๋ฒ์ฃผ๊ฐ ์กด์ฌํฉ๋๋ค: CSS ํ๋ ์์ํฌ์ JavaScript ํ๋ ์์ํฌ. Bootstrap ๋ฐ Foundation๊ณผ ๊ฐ์ CSS ํ๋ ์์ํฌ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ์ด์์ ๊ตฌ์ฑ์ ๋์์ด ๋๋ ๋ฏธ๋ฆฌ ๋์์ธ๋ UI ๊ตฌ์ฑ ์์์ ๊ทธ๋ฆฌ๋ ์์คํ ์ ์ ๊ณตํ๋ฏ๋ก ๊ฐ๋ฐ์๋ ๋ฐ์ํ ๋ชจ๋ฐ์ผ ์ฐ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฝ๊ฒ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ๋ฐ๋ฉด React, Angular ๋ฐ Vue.js์ ๊ฐ์ JavaScript ํ๋ ์์ํฌ๋ ๋ณต์กํ UI ์ํธ ์์ฉ, AJAX ์์ฒญ, ํด๋ผ์ด์ธํธ ์ธก ์ํ ๊ด๋ฆฌ๋ฅผ ์ฒ๋ฆฌํ๊ณ ์ฌ์ฉ์ ์ ๋ ฅ ๋๋ ๋ฐ์ดํฐ์ ๋ํ ์๋ต์ผ๋ก DOM์ ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํ๊ธฐ ์ํ ๋ณด๋ค ๊ด๋ฒ์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ๋ณํ. AppMaster ์ ๊ฒฝ์ฐ ์์ฑ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ JavaScript์ฉ Vue3 ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ง์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํด๋น ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์๊ตฌ ์ฌํญ๊ณผ ์ํ๋ ๊ธฐ๋ฅ์ ๋ฐ๋ผ CSS์ JavaScript ํ๋ ์์ํฌ์ ์กฐํฉ์ ํ์ฉํฉ๋๋ค.
ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ ๋ชจ๋๋ฆฌ์ ํ๋ ์์ํฌ์ ๋ง์ดํฌ๋ก ํ๋ ์์ํฌ๋ก ๋ ๋ถ๋ฅ๋ ์๋ ์์ต๋๋ค. ๋ชจ๋๋ฆฌ์ ํ๋ ์์ํฌ๋ UI ๊ตฌ์ฑ ์์์ ๊ธฐ๋ณธ JavaScript ์ ํ๋ฆฌ์ผ์ด์ ๋ ผ๋ฆฌ๋ฅผ ๋ชจ๋ ํฌํจํ๋ ํฌ๊ด์ ์ธ ๊ธฐ๋ฅ ์ธํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์๋ก๋ Angular ๋ฐ Ember.js๊ฐ ์์ต๋๋ค. ์ด๋ฌํ ํ๋ ์์ํฌ๋ ์ข ์ข MVC(Model-View-Controller)์ ๊ฐ์ ํน์ ์ํคํ ์ฒ ๋๋ ๋์์ธ ํจํด์ ๋ฐ๋ฅด๋ฏ๋ก ๊ฐ๋ฐ์๊ฐ ์ฌ์ด ์ ์ง ๊ด๋ฆฌ, ํ์ฅ์ฑ ๋ฐ ์ฌ์ฌ์ฉ์ ์ํด ํน์ ๋ฐฉ์์ผ๋ก ์ฝ๋๋ฅผ ๊ตฌ์ฑํ๋๋ก ๊ถ์ฅํฉ๋๋ค. ๋ฐ๋ฉด์ ๋ง์ดํฌ๋ก ํ๋ ์์ํฌ๋ ๋ฒ์๊ฐ ๋ ์์ผ๋ฉฐ ๋จ์ผ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ฑฐ๋ UI ๊ตฌ์ฑ์์ ๋๋ ์ํ ๊ด๋ฆฌ์ ๊ฐ์ ํน์ ๊ธฐ๋ฅ ์ธํธ๋ฅผ ์ ๊ณตํ๋ ๋ฐ ์ค์ ์ ๋ก๋๋ค. ์ด๋ฌํ ์๋ก๋ ์์ ์ธ๊ธํ React ๋ฐ Vue.js ํ๋ ์์ํฌ๊ฐ ์์ต๋๋ค. ๋ง์ดํฌ๋ก ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ ์ฌ์ฉํ ๊ตฌ์ฑ ์์์ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ฑ ๋ฐฉ๋ฒ์ ๋ ์์ ๋กญ๊ฒ ์ ํํ ์ ์์ผ๋ฏ๋ก ์ต์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๋ณด๋ค ๋ง์ถคํ๋ ์ ๊ทผ ๋ฐฉ์์ด ๊ฐ๋ฅํฉ๋๋ค.
๋์์์ด ์งํํ๋ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ ํ๊ฒฝ์ ์๋ก์ด ํ๋ ์์ํฌ๊ฐ ์์ฃผ ๋ฑ์ฅํ๊ณ ๋ค๋ฅธ ํ๋ ์์ํฌ๋ ์ค๋๋๊ฑฐ๋ ์ค๋จ๋๋ ๋ฑ ๊ฐ๋ฐ์์๊ฒ ๋ถ๋ด์ค๋ฌ์ ๋ณด์ผ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋ณํ์ ๋ณด์กฐ๋ฅผ ๋ง์ถ๊ณ ๊ณ ํ์ง ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ณ์ ์ ๊ณตํ๋ ค๋ฉด ๊ฐ๋ฐ์๋ ์ต์ ์ ๋ณด๋ฅผ ์ป๊ณ ๋ฆฌ์์ค, ๊ธฐ์ฌ ๋ฐ ํ ๋ก ์ ์ฐพ๊ณ ์ฌ์ฉ ๊ฐ๋ฅํ ๋ค์ํ ์ต์ ์ ๋ํด ๋์์์ด ๋ฐฐ์์ผ ํฉ๋๋ค.
AppMasterno-code ํ๋ซํผ์ ์ฌ์ฉํ๋ฉด ๊ณ ๊ฐ์ drag and drop UI ๊ตฌ์ฑ ์์๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ ๋ํํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑํ๊ณ , Web BP(๋น์ฆ๋์ค ํ๋ก์ธ์ค) ๋์์ด๋์์ ๊ฐ ๊ตฌ์ฑ ์์์ ๋ํ ๋น์ฆ๋์ค ๋ก์ง์ ์์ฑํ๊ณ , Vue3 JavaScript ํ๋ ์์ํฌ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑํ ์ ์์ต๋๋ค. ๊ฐ๋ ฅํ ํ๋ซํผ ๋๋ถ์ AppMaster ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๊ฐ ์๋ ์ฌ๋์ด๋ผ๋ ๋ณต์กํ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ ์ ํ ๋ฐ ๊ตฌํ ์์ฒด๋ฅผ ๊น์ด ํ๊ณ ๋ค ํ์ ์์ด ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ ํ๋ ์น ๊ฐ๋ฐ์์๊ฒ ํ์์ ์ธ ๋๊ตฌ๋ก, ์ด์ ์ ํ์ํ๋ ์๊ฐ๊ณผ ๋ ธ๋ ฅ์ ์ผ๋ถ๋ง์ผ๋ก ์ ๊ตํ ๊ณ ์ฑ๋ฅ ๋ฐ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๊ฒ ํด์ค๋๋ค. ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ํ์คํํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ํํ๋ฉฐ ๋ธ๋ผ์ฐ์ ๊ฐ ํธํ์ฑ๊ณผ ์ ๊ทผ์ฑ์ ๋ณด์ฅํ์ฌ ๋ค์ํ ์ฅ์น์ ํ๋ซํผ์์ ์ผ๊ด๋๊ณ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. AppMaster ์์ ์ ๊ณตํ๋ ๊ฒ๊ณผ ๊ฐ์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ฅผ ํ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๊ธฐ์ ์ ๋ถ์ฑ๋ฅผ ์ต์ํํ๊ณ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅ์ฑ๊ณผ ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ๋ฉด์ ๋ฐ์ด๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋๋ ๋ฐ ์ง์คํ ์ ์์ต๋๋ค.