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์ด ์ œ๊ณตํ•˜๋Š” ๋ฏผ์ฒฉ์„ฑ๊ณผ ๊ฒฐํ•ฉ๋˜์–ด ๊ฐœ๋ฐœ ์ฃผ๊ธฐ๋ฅผ ๋‹จ์ถ•ํ•˜๊ณ  ํƒ€ํ˜‘ํ•˜์ง€ ์•Š๊ณ  ์ธ์  ๋ฐ ์žฌ์ •์  ์ž์›์„ ๋ชจ๋‘ ์ตœ์ ํ™”ํ•˜๋ ค๋Š” ๊ธฐ์—…์—๊ฒŒ ์ด ํ”Œ๋žซํผ์„ ๋งค๋ ฅ์ ์ธ ์„ ํƒ์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ํ’ˆ์งˆ, ์„ฑ๋Šฅ ๋˜๋Š” ์œ ์ง€ ๊ด€๋ฆฌ ๊ฐ€๋Šฅ์„ฑ์— ๋Œ€ํ•ด.