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 ํ๋ซํผ์ ์ฌ์ฉํ๋ฉด ์คํฌ๋กค ๋ทฐ ์์๋ฅผ ๊ตฌํํ๋ ๊ฒ์ด ์ฝ๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ผ ๋ฟ๋ง ์๋๋ผ ๋ค์ํ ํผ ํฉํฐ์ ํด์๋์ ๋ง๋ ๊ฐ๋ ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ์ํคํ ์ฒ๋ฅผ ๋ณด์ฅํฉ๋๋ค. ๋ฐ๋ผ์ ๊ธฐ์ ๊ณผ ๊ฐ๋ฐ์ ๋ชจ๋ ๋ค์ํ ์ฌ์ฉ ์ฌ๋ก์ ๋ง๋ ํ๋์ ์ธ ๊ณ ์ฑ๋ฅ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ฉด์ ์๊ฐ, ๋น์ฉ, ๋ ธ๋ ฅ์ ์ ์ฝํ ์ ์์ต๋๋ค.