์น์ฌ์ดํธ ๊ฐ๋ฐ ๋งฅ๋ฝ์์ "ํ๋ฐํธ์๋"๋ผ๋ ์ฉ์ด๋ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ์๊ฐ ์น ๋ธ๋ผ์ฐ์ ์์ ์ง์ ๊ฒฝํํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI) ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ(UX) ์ธก๋ฉด์ ์๋ฏธํฉ๋๋ค. ํ๋ฐํธ์๋์๋ ์๊ฐ์ ๋์์ธ ์์, ์ธํฐํ์ด์ค ๊ตฌ์ฑ ์์, ํ์ ๋ฉ๋ด, ์์, ์ด๋ฏธ์ง, ์ ๋๋ฉ์ด์ ๋ฐ ๋ค์ํ ์ฅ์น์ ๋ธ๋ผ์ฐ์ ์์์ ์ ๋ฐ์ ์ธ ํ๋ ์ ํ ์ด์ ๊ณผ ์ํธ ์์ฉ์ ๊ธฐ์ฌํ๋ ์น ์ฌ์ดํธ์ ๊ธฐํ ์ธก๋ฉด ๋ฑ ์ฌ์ฉ์๊ฐ ์ํธ ์์ฉํ๋ ๋ชจ๋ ๊ฒ์ด ํฌํจ๋ฉ๋๋ค.
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ๋์์ธ์ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ธ์ง๋ ํ์ง, ์ ๊ทผ์ฑ ๋ฐ ์ ์ฉ์ฑ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์น๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ ์ค๊ณ๋ ํ๋ฐํธ์๋๋ ์ฌ์ฉ์์๊ฒ ๊ธ์ ์ ์ด๊ณ ์ํํ ๊ฒฝํ์ ๋ณด์ฅํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ๋์ด๊ณ ์ฐธ์ฌ๋๋ฅผ ๋์ด๋ฉฐ ๊ถ๊ทน์ ์ผ๋ก ๋ ๋์ ๋น์ฆ๋์ค ๊ฒฐ๊ณผ๋ก ์ด์ด์ง๋๋ค. ์น ์ฌ์ดํธ ๊ฐ๋ฐ๊ณผ ๊ด๋ จํ์ฌ ํ๋ฐํธ์๋ ์ฐ์ ์ ๊ฐ๋ฐ ๋๊ตฌ, ํ๋ ์์ํฌ ๋ฐ ๊ดํ์ด ํฌ๊ฒ ๊ฐ์ ๋๋ฉด์ ๋น ๋ฅด๊ฒ ๋ฐ์ ํด ์์ต๋๋ค.
no-code ๋ฐ low-code ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ต์ฒจ๋จ ๊ธฐ์ ์ ํ์ฉํ๋ AppMaster ํ๋ซํผ์ ๊ฐ๋ ฅํ drag-and-drop UI ๋น๋๋ฅผ ํตํด ๊ณ ๊ฐ์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ๊ธฐ๋ฅ์ด ๋ฐ์ด๋ ํ๋ฐํธ์๋ ๋์์ธ์ ์์ฑํ ์ ์๋๋ก ์ง์ํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ์ฝ๋๋ฅผ ์์ฑํ ํ์ ์์ด ์๊ฐ์ ๋ฐฉ์์ผ๋ก ๊ตฌ์ฑ ์์๋ฅผ ์กฐ๋ฆฝํ๊ณ ์ฌ์ฉ์ ์ ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค. AppMaster ์น ์ ํ๋ฆฌ์ผ์ด์ ์ฉ Vue3 ํ๋ ์์ํฌ๋ฅผ ์ง์ํ์ฌ ์์ฑ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ต์ ์ ๊ณ ํ์ค ๊ธฐ์ ์ ๊ธฐ๋ฐ์ผ๋ก ํ๊ณ ๋ฐ์ด๋ ์ฑ๋ฅ, ๋ณด์ ๋ฐ ์ ์ฐ์ฑ์ ์ ๊ณตํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
์น์ฌ์ดํธ ๊ฐ๋ฐ์ ๊ณ ํ์ง ํ๋ฐํธ์๋ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด ํ๋ก๊ทธ๋๋ฐ ์ธ์ด, ํ๋ ์์ํฌ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ๋๊ตฌ์ ์กฐํฉ์ ์์กดํฉ๋๋ค. ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ์ฌ์ฉ๋๋ ์ธ๊ธฐ ์๋ ๊ธฐ์ ๋ก๋ HTML(Hypertext Markup Language), CSS(Cascading Style Sheets) ๋ฐ JavaScript(JS)๊ฐ ์์ต๋๋ค. HTML์ ์น ํ์ด์ง์ ๊ตฌ์กฐ์ ๋ ์ด์์์ ์์ฑํ๊ธฐ ์ํ ๊ธฐ๋ณธ ์ธ์ด์ธ ๋ฐ๋ฉด, CSS๋ ์๊ฐ์ ์คํ์ผ๊ณผ ํํ ์ธก๋ฉด์ ์ ์ํ๋ ์ญํ ์ ๋ด๋นํฉ๋๋ค. ๋ฐ๋ฉด JavaScript๋ ๊ฐ๋ฐ์๊ฐ ์ฌ์ฉ์ ์ ๋ ฅ ๋ฐ ์ด๋ฒคํธ์ ์๋ตํ์ฌ ๋์ ์น ํ์ด์ง ์์์ ๋ํํ ๋์์ ์์ฑํ ์ ์๋ ๊ฐ๋ ฅํ ์คํฌ๋ฆฝํ ์ธ์ด์ ๋๋ค.
์์์ ์ธ๊ธํ ํต์ฌ ๊ธฐ์ ์ธ์๋ ํ๋ฐํธ์๋ ๊ฐ๋ฐ์๋ ๋ค์ํ ์ถ๊ฐ ๋๊ตฌ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ๋ฆ์ ๊ฐ์ํํ๊ณ ์ฑ๋ฅ์ ์ต์ ํํ๋ฉฐ ์ ์ง ๊ด๋ฆฌ์ฑ์ ํฅ์์ํต๋๋ค. ์ผ๋ถ ์ธ๊ธฐ ์๋ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ ๋ณต์กํ ํ๋ฐํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ๊ณ ๊ตฌ์ถํ๊ธฐ ์ํ ๊ตฌ์กฐ์ ๋ชจ๋ฒ ์ฌ๋ก ์ธํธ๋ฅผ ์ ๊ณตํ๋ React, Angular ๋ฐ Vue.js๊ฐ ํฌํจ๋ฉ๋๋ค. ์ต์ ํ๋ฐํธ์๋ ๊ฐ๋ฐ์๋ ์ฌ์ฉ ์ค์ธ ๋ธ๋ผ์ฐ์ , ์ฅ์น ๋๋ ํ๋ฉด ํฌ๊ธฐ์ ๊ด๊ณ์์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ธฐ๋ฅํ๊ณ ๋ฉ์ง๊ฒ ๋ณด์ด๋๋ก ๋ณด์ฅํ๋ ๋ฐ์ํ ๋์์ธ์ ์ค์ ์ ๋๋ ๊ฒฝ์ฐ๋ ๋ง์ต๋๋ค.
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํจ์ ๋ฐ๋ผ ์ ๋ฌธ ๊ธฐ์ ๊ณผ ์ ๋ฌธ ์ง์์ ๊ฐ์ถ ํ๋ฐํธ์๋ ๊ฐ๋ฐ์์ ํ์์ฑ๋ ์ปค์ก์ต๋๋ค. ์ด๋ฌํ ์ ๋ฌธ๊ฐ๋ UI ๊ตฌ์ฑ์์ ์ค๊ณ ๋ฐ ๊ตฌํ๋ถํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ์ต์ ํ, ๋ชจ๋ ํ๋ฐํธ์๋ ์์๊ฐ ๋ค์ํ ๋ธ๋ผ์ฐ์ ๋ฐ ์ฅ์น์์ ์ํํ๊ฒ ์๋ํ๋์ง ํ์ธํ๋ ๊ฒ๊น์ง ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ฐํธ์๋ ์์ฑ ๋ฐ ์ ์ง ๊ด๋ฆฌ์ ๋ชจ๋ ์ธก๋ฉด์ ๋ด๋นํฉ๋๋ค.
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ๋ํ๋ ์๋ฒ ์ธก ๋ ผ๋ฆฌ ๋ฐ ์ธํ๋ผ ์์ฑ์ ๋ด๋นํ๋ ๋ฐฑ์๋ ๊ฐ๋ฐ์์ ๊ธด๋ฐํ๊ฒ ํ๋ ฅํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ๋ฐฑ์๋ ๊ฐ๋ฐ์๋ ํ๋ฐํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฌ์ฉํ๋ ์๋ฒ์ธก API(์ ํ๋ฆฌ์ผ์ด์ ํ๋ก๊ทธ๋๋ฐ ์ธํฐํ์ด์ค)๋ ๋ฌผ๋ก ์๋ฒ์ธก ๋ฐ์ดํฐ ์ ์ฅ ๋ฐ ์ฒ๋ฆฌ ์์คํ ์ ๋ง๋ค๊ณ ๊ด๋ฆฌํฉ๋๋ค. ๋ง์ ๊ฒฝ์ฐ ํ๋ฐํธ์๋ ๊ฐ๋ฐ์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ธฐ๋ฅ์ , ์๊ฐ์ ๋์์ธ์ ์๋ดํ๋ ์์ด์ดํ๋ ์, ๋ชจํ, ํ๋กํ ํ์ ์ ์์ ๋ด๋นํ๋ UX(์ฌ์ฉ์ ๊ฒฝํ) ๋์์ด๋์ ๊ธด๋ฐํ๊ฒ ํ๋ ฅํฉ๋๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก ํ๋ฐํธ์๋๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฉ๋ฌธํ ๋ ์ฌ์ฉ์๊ฐ ๋ณด๊ณ , ์ํธ ์์ฉํ๊ณ , ๊ฒฝํํ๋ ๋ชจ๋ ๊ฒ์ ํฌํจํ๋ ์น ์ฌ์ดํธ ๊ฐ๋ฐ์ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ๋ค์ํ ๊ธฐ์ , ๋๊ตฌ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ฒฐํฉํ์ฌ ๋ค์ํ ์ฅ์น์ ๋ธ๋ผ์ฐ์ ์ ๊ฑธ์ณ ํ์ฅํ ์ ์๋ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์น ์ฌ์ดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ฐ๋ ฅํ no-codeAppMaster ํ๋ซํผ๊ณผ Vue3์ ๊ฐ์ ์ต์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ฅผ ํ์ฉํ๋ฉด ์ฌ์ฉ์๋ ์ฝ๋ ํ ์ค๋ ์์ฑํ ํ์ ์์ด ๊ณ ํ์ง ํ๋ฐํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น ๋ฅด๊ฒ ์์ฑํ๊ณ ๋ฐฐํฌํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ํฌ๊ฒ ๋จ์ํํ๊ณ ๊ฐ์ํํ์ฌ ์ค์๊ธฐ์ ์์ ๋๊ธฐ์ ์ ์ด๋ฅด๊ธฐ๊น์ง ๊ด๋ฒ์ํ ๊ณ ๊ฐ๊ณผ ์ฌ์ฉ์๊ฐ ๋ ์ฝ๊ฒ ์ก์ธ์คํ ์ ์๋๋ก ํด์ค๋๋ค.