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

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

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

AppMasterno-code ํ”Œ๋žซํผ์˜ ํ•ต์‹ฌ์ธ Scroll View UI ๊ตฌ์„ฑ ์š”์†Œ๋Š” ๊ณ ๊ฐ์ด ์ฝ”๋”ฉ ์ „๋ฌธ ์ง€์‹ ์—†์ด๋„ ํ’๋ถ€ํ•˜๊ณ  ์ง๊ด€์ ์ด๋ฉฐ ์‹œ๊ฐ์ ์œผ๋กœ ๋›ฐ์–ด๋‚œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ์ „๋ฌธ์ ์œผ๋กœ ๋””์ž์ธ๋œ ํ…œํ”Œ๋ฆฟ๊ณผ ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ€๋Šฅํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž๋Š” drag-and-drop ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›ํ•˜๋Š” ๋ ˆ์ด์•„์›ƒ์„ ์‹ ์†ํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ฝ˜ํ…์ธ ๋ฅผ ์ตœ์ ์œผ๋กœ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์Šคํฌ๋กค ๋ณด๊ธฐ ์š”์†Œ๋ฅผ ๋„์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

AppMaster ํ”Œ๋žซํผ ์‚ฌ์šฉ์ž๋Š” ๊ณ ์œ ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ์— ๋งž๊ฒŒ ์Šคํฌ๋กค ๋ณด๊ธฐ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๊ธฐ ์œ„ํ•œ ๊ด‘๋ฒ”์œ„ํ•œ ๊ธฐ๋Šฅ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์—๋Š” ์Šคํฌ๋กค ๋ฐฉํ–ฅ, ์Šคํฌ๋กค ๋ง‰๋Œ€, ์Šคํฌ๋กค ์†๋„ ๋“ฑ๊ณผ ๊ฐ™์€ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฏธ์„ธ ์กฐ์ •ํ•˜๋Š” ๊ธฐ๋Šฅ๊ณผ ์ธํ„ฐํŽ˜์ด์Šค ๋‚ด์˜ ๋‹ค๋ฅธ UI ๊ตฌ์„ฑ์š”์†Œ์™€์˜ ์›ํ™œํ•œ ํ†ตํ•ฉ์„ ํ—ˆ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ AppMaster ์‚ฌ์šฉ์ž ํ”ผ๋“œ๋ฐฑ๊ณผ ์—…๊ณ„ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์Šคํฌ๋กค ๋ณด๊ธฐ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ์™€ ๊ฐœ์„  ์‚ฌํ•ญ์„ ์ง€์†์ ์œผ๋กœ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด AppMaster ํ”Œ๋žซํผ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์ถ•๋œ ์•ฑ์€ ์‹œ๊ฐ์ ์œผ๋กœ๋‚˜ ๊ธฐ๋Šฅ์ ์œผ๋กœ ์ตœ์‹  ์•ฑ๊ณผ ๋™๋“ฑํ•˜๊ฒŒ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์ƒ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ Vue3(JS/TS ํ•ด์„), Android์šฉ Jetpack Compose ํฌํ•จ๋œ Kotlin, ๋ชจ๋ฐ”์ผ ์•ฑ์˜ ๊ฒฝ์šฐ iOS์šฉ SwiftUI ์™€ ๊ฐ™์€ ์ตœ์‹  ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์ถ•๋ฉ๋‹ˆ๋‹ค.

AppMaster ํ”Œ๋žซํผ ๋‚ด์—์„œ Scroll View ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋˜ ๋‹ค๋ฅธ ์ฃผ์š” ์ด์ ์€ ๋‹ค์–‘ํ•œ ํผ ํŒฉํ„ฐ์™€ ํ•ด์ƒ๋„์— ๋Œ€ํ•œ ์›ํ™œํ•œ ์ ์‘์„ฑ์ž…๋‹ˆ๋‹ค. ์ฆ‰, UI๋Š” ๊ธฐ๊ธฐ ๋ฐฉํ–ฅ, ํ™”๋ฉด ํฌ๊ธฐ ๋˜๋Š” ๋””์Šคํ”Œ๋ ˆ์ด ๋ฐ€๋„์˜ ๋ณ€ํ™”์— โ€‹โ€‹๋”ฐ๋ผ ์ž๋™์œผ๋กœ ์กฐ์ •๋˜๋ฏ€๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํ™”๋ฉด ๊ณต๊ฐ„์— ๊ด€๊ณ„์—†์ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ผ๊ด€๋˜๊ณ  ์œ ๋™์ ์œผ๋กœ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

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

๋˜ํ•œ ์ด ํ”Œ๋žซํผ์€ ์„œ๋ฒ„ endpoints ๋ฐ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์Šคํ‚ค๋งˆ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์œ„ํ•œ Swagger(๊ฐœ๋ฐฉํ˜• API)์™€ ๊ฐ™์€ ๋ฌธ์„œ์˜ ์ž๋™ ์ƒ์„ฑ์„ ์ œ๊ณตํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ตœ์‹  ์ƒํƒœ๋กœ ์œ ์ง€๋˜๊ณ  ์ฒญ์‚ฌ์ง„์— ๋„์ž…๋œ ๋ชจ๋“  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์™„์ „ํžˆ ๋ฌธ์„œํ™”๋˜๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

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