DOM(Document Object Model)์ XML, HTML, XHTML ๋ฌธ์์ ์ฝํ ์ธ , ์์ฑ, ๋ ์ด์์์ ํ๋ซํผ๊ณผ ์ธ์ด ์ค๋ฆฝ์ ์ธ ๋ฐฉ์์ผ๋ก ํํํ๋ ๊ด๋ก์ ์ผ๋ก ์ ์๋ ๊ตฌ์กฐ๋ฅผ ๋งํฉ๋๋ค. DOM์ ๊ฐ๋ฐ์๊ฐ ๋ณ๋์ ์์ ์์ด ์ค์๊ฐ์ผ๋ก ์น ํ์ด์ง์ ์ฝํ ์ธ ์ ์ก์ธ์คํ๊ณ , ์กฐ์ํ๊ณ , ์์ ํ ์ ์๋๋ก ํ๋ ๊ฐ์ฒด ์งํฅ API(์์ฉ ํ๋ก๊ทธ๋๋ฐ ์ธํฐํ์ด์ค)๋ฅผ ์ ๊ณตํจ์ผ๋ก์จ ์น ์์ฉ ํ๋ก๊ทธ๋จ๊ณผ ๊ธฐ๋ณธ ๋ฌธ์ ๋งํฌ์ ์ฌ์ด์ ์ค๊ฐ์ ์ญํ ์ ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ก ๊ณ ์น๊ฑฐ๋ ๋ค์ ๋ก๋ํ์ธ์.
์น ๊ฐ๋ฐ ๋งฅ๋ฝ์์ DOM์ ๋ ธ๋ ์งํฉ์ ํฌํจํ๋ ๊ณ์ธต์ ํธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๋ํ๋ ๋๋ค. ์ฌ๊ธฐ์ ๊ฐ ๋ ธ๋๋ HTML ๋๋ XML ๋ฌธ์ ๋ด์ ์์๋ ์์ฑ์ ํด๋นํฉ๋๋ค. ์ด ํธ๋ฆฌ์ ๋ฃจํธ ๋ ธ๋๋ ์ ์ฒด ๋ฌธ์๋ฅผ ๋ํ๋ด๋ Document ๊ฐ์ฒด์ด๋ฉฐ, ์ ๋ชฉ, ์ด๋ฏธ์ง, ๋จ๋ฝ, ๋งํฌ์ ๊ฐ์ ๋ค๋ฅธ ๋ชจ๋ ๋ ธ๋๋ ์์๋ DOM ๊ตฌ์กฐ ๋ด์ ๊ฐ๊ฐ์ ๊ฐ์ฒด๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋ํ DOM์ ์ผ๋ฐ์ ์ผ๋ก JavaScript๋ก ์์ฑ๋๋ ์คํฌ๋ฆฝํธ ํ์์ผ๋ก ๋ฌธ์์ ์ฝํ ์ธ ์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ์ก์ธ์คํ๊ณ ์กฐ์ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ์์ฑ, ๋ฉ์๋ ๋ฐ ์ด๋ฒคํธ ์งํฉ์ ์ ์ํฉ๋๋ค.
DOM์ ๋จ์ํ HTML์ด๋ XML ๋ฌธ์๋ฅผ ํํํ๋ ๊ฒ์ด ์๋๋ผ๋ ์ ์ ๊ธฐ์ตํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด๋ ์คํฌ๋ฆฝํธ์ ๋ธ๋ผ์ฐ์ ์ ์ฌ์ฉ์ ์์ด์ ํธ์ ์ํ ๋ณ๊ฒฝ ์ฌํญ์ ๋ฐ์ํ๋ ์ด์ ์๊ณ ์ญ๋์ ์ธ ๊ตฌ์กฐ์ ๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ HTML ๋๋ XML ๋ฌธ์๋ฅผ ๊ตฌ๋ฌธ ๋ถ์ํ ๋ ๋ฉ๋ชจ๋ฆฌ์ ํด๋น DOM์ ์์ฑํ๋ฉฐ, ์ด๋ ๋ฐํ์ ์ JavaScript ๋๋ ๊ธฐํ ์คํฌ๋ฆฝํ ์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์กฐ์ํ ์ ์์ต๋๋ค. ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ณ Angular, React ๋ฐ Vue.js์ ๊ฐ์ ์ต์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI) ํ๋ ์์ํฌ์ ๊ธฐ๋ฐ์ ์ ๊ณตํ๋ ๊ฒ์ด ๋ฐ๋ก ์ด๋ฌํ ์ญ๋์ฑ์ ๋๋ค.
AppMaster ๋ก ์์ ํ๋ ์น ๊ฐ๋ฐ์๋ ํ๋ซํผ์ ๊ฐ๋ ฅํ drag-and-drop UI ๊ตฌ์ฑ ์์์ ์๊ฐ์ BP(๋น์ฆ๋์ค ํ๋ก์ธ์ค) ๋์์ด๋๋ฅผ ์ฌ์ฉํ์ฌ DOM์ ์ต๋ํ ํ์ฉํ์ฌ ๋ํํ, ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ๋์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฆ์ ๋ง๋ค ์ ์์ต๋๋ค. ์์ฑ๋ Vue3 ์น ์ ํ๋ฆฌ์ผ์ด์ ์ DOM ๊ตฌ์กฐ์ ์๋ฒฝํ๊ฒ ํตํฉ๋์ด ํจ์จ์ ์ธ DOM ์กฐ์ ๋ฐ ์ ๋ฐ์ดํธ๊ฐ ๊ฐ๋ฅํฉ๋๋ค. AppMaster ์ web BP Designer๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ ๋ฐ์ํ ํ๋ก๊ทธ๋๋ฐ, ์ด๋ฒคํธ ๊ธฐ๋ฐ ์์ ๋ฐ ๋ฐ์ดํฐ ๋ฐ์ธ๋ฉ์ ์ฌ์ฉํ์ฌ DOM ์ํธ ์์ฉ ์ธก๋ฉด์์ ์ ํ๋ฆฌ์ผ์ด์ ๋์์ ์๊ฐ์ ์ผ๋ก ๋์์ธํ๊ณ ๊ตฌ์ฑํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ์ ํตํด ๊ฐ๋ฐ์๋ ๊ฐ๋ ฅํ๊ณ ์ ์ง ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ฌ UI ์ํ๋ฅผ ๊ธฐ๋ณธ ๋ฐ์ดํฐ ๋ชจ๋ธ๊ณผ ๋๊ธฐํํ๋ ํ๋ก์ธ์ค๋ฅผ ๋จ์ํํ๊ณ ๋ณ๊ฒฝ ์ฌํญ์ ๋ฐฑ์๋์์ ํ๋ฐํธ์๋๋ก ์ฝ๊ฒ ์ ํํ ์ ์์ต๋๋ค.
์ต์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์์ ๊ธด๋ฐํ ํตํฉ์ ์ด์งํ๋ ๊ฒ ์ธ์๋ DOM์ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ AppMaster ์ ์๋ฒ ๊ธฐ๋ฐ ์ ๊ทผ ๋ฐฉ์๊ณผ๋ ์ ์๋ํฉ๋๋ค. ์ด ํ๋ซํผ์ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ ๊ฐ ์ฑ ์คํ ์ด์ ์ ์ํํธ์จ์ด ๋ฒ์ ์ ์ ์ถํ์ง ์๊ณ ๋ Kotlin ๋ฐ Jetpack Compose (Android) ๋๋ SwiftUI (iOS) ๊ธฐ๋ฐ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ํ UI ๋ฐ ๋ ผ๋ฆฌ ์ ๋ฐ์ดํธ๋ฅผ ํด๋ผ์ด์ธํธ์ ํธ์ํ ์ ์์ต๋๋ค. ์ด ๊ธฐ๋ฅ์ ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ์ ์, ๋ฐ๋ณต ๋ฐ ์คํ ๊ฐ๋ฅ์ฑ์ ํฌ๊ฒ ํ์ฅํ์ฌ ๋ฐฐํฌ ์ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํต๋๋ค.
๊ถ๊ทน์ ์ผ๋ก DOM์ ํ๋ ์น ๊ฐ๋ฐ์์ ์น ํ์ด์ง ๊ตฌ์ฑ ๋ฐ ์กฐ์์ ์ํ ๋ฐฑ๋ณธ ์ญํ ์ ํ๋ฉฐ ๋ชจ๋ ์น ๊ฐ๋ฐ์ ํดํท์ ์ค์ํ ๊ตฌ์ฑ ์์๊ฐ ๋ฉ๋๋ค. AppMaster ๊ฐ๋ฐ ํ๋ซํผ์ผ๋ก ์ ํํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ DOM์ ์ ์ฌ๋ ฅ์ ์ต๋ํ ํ์ฉํ์ฌ ํจ์จ์ ์ด๊ณ ํจ๊ณผ์ ์ผ๋ก ํ์ฅํ์ฌ ๋์์ฑ, ๋ฐ์ดํฐ ์ง์ฝ์ ๋๋ ๊ธฐ์ ์ ๊ฐ์ฅ ๊น๋ค๋ก์ด ์๊ตฌ ์ฌํญ๋ ์ถฉ์กฑํ๋ ๊ฐ๋ ฅํ ์น, ๋ชจ๋ฐ์ผ ๋ฐ ๋ฐฑ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋ฑ๊ธ ์ฌ์ฉ ์ฌ๋ก. AppMaster ์ no-code ํ๋ซํผ์ด ์ ๊ณตํ๋ ์ฌ์ฉ ์ฉ์ด์ฑ, ์ ์ฐ์ฑ ๋ฐ ์ ์์ฑ์ DOM์ด ์ ๊ณตํ๋ ๋ฏผ์ฒฉ์ฑ๊ณผ ๊ฒฐํฉ๋์ด ๊ฐ๋ฐ ์ฃผ๊ธฐ๋ฅผ ๋จ์ถํ๊ณ ํํํ์ง ์๊ณ ์ธ์ ๋ฐ ์ฌ์ ์ ์์์ ๋ชจ๋ ์ต์ ํํ๋ ค๋ ๊ธฐ์ ์๊ฒ ์ด ํ๋ซํผ์ ๋งค๋ ฅ์ ์ธ ์ ํ์ผ๋ก ๋ง๋ญ๋๋ค. ํ์ง, ์ฑ๋ฅ ๋๋ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅ์ฑ์ ๋ํด.