UI(์ฌ์ฉ์ ์ธํฐํ์ด์ค) ์์์ ๋งฅ๋ฝ์์ ๋ฌดํ ์คํฌ๋กค์ ์ฌ์ฉ์๊ฐ ํ์ด์ง ๋งค๊น ๋ฒํผ์ ํด๋ฆญํ๋๋ก ์๊ตฌํ๋ ๋์ ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์๋๋ก ์คํฌ๋กคํ ๋ ์น ๋๋ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ก์ด ์ฝํ ์ธ ๋ฅผ ์ง์์ ์ผ๋ก ๋ก๋ํ๊ณ ํ์ํ๋ ๋๋ฆฌ ์ฌ์ฉ๋๋ ๋์์ธ ํจํด์ ๋ํ๋ ๋๋ค. ๋๋ "์ถ๊ฐ ๋ก๋" ๋งํฌ. Infinite Scroll ๊ตฌํ์ ์ฃผ์ ๋ชฉํ๋ ์ํํ๊ณ ์ ๋์ ์ธ ์ฌ์ฉ์ ํ๊ฒฝ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์๊ฐ ๋์ ๋๋ ์ง์ฐ์ด๋ ์ค๋จ ์์ด ์ ์ ํ๊ณ ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ์ ์ก์ธ์คํ ์ ์๋๋ก ํ๋ ๊ฒ์ ๋๋ค.
Infinite Scroll์ ์ง๋ ๋ช ๋ ๋์ ์ฌ๋ฌ ์์ ๋ฏธ๋์ด ํ๋ซํผ, ๋ฏธ๋์ด ํฌํธ ๋ฐ ์ฝํ ์ธ ์ค์ฌ ์น์ฌ์ดํธ์์ ์ด ์ ๊ทผ ๋ฐฉ์์ ์ฑํํ์ฌ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๋ฉด์ ์๋นํ ์ธ๊ธฐ๋ฅผ ์ป์์ต๋๋ค. ์ด๋ฌํ ์ฑํ ๊ธ์ฆ์ ์ฃผ๋ ์ด์ ๋ ์ฝํ ์ธ ์๋น๋ฅผ ์ํ ๋ชจ๋ฐ์ผ ์ฅ์น์ ์ฌ์ฉ์ด ์ฆ๊ฐํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ต๊ทผ ํต๊ณ์ ๋ฐ๋ฅด๋ฉด ๋ชจ๋ฐ์ผ ์ธํฐ๋ท ์ฌ์ฉ๋์ด ์ ์ฒด ์ธํฐ๋ท ์ฌ์ฉ๋์ 55%๋ฅผ ์ด๊ณผํ๋ฏ๋ก ์์ ํ๋ฉด๊ณผ ํฐ์น ์ธํฐํ์ด์ค์ ๋ง๊ฒ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. Infinite Scroll์ ์ฌ์ฉ์๊ฐ ๊ฐ๋จํ ์๊ฐ๋ฝ ์ค์์ดํ๋ง์ผ๋ก ์๋ก์ด ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ์ฐพ์ ์ ์๋๋ก ํด์ฃผ๊ธฐ ๋๋ฌธ์ ํนํ ์ฝํ ์ธ ๊ฐ ๋ง์ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ์ ์ฐธ์ฌ๋ฅผ ํฅ์์ํค๋ ๊ฒ์ผ๋ก ๋ํ๋ฌ์ต๋๋ค.
๊ธฐ์ ์ ์ธ ๊ด์ ์์ ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํ๋ ค๋ฉด ์ฌ๋ฌ UI ๋ฐ ๋ฐฑ์๋ ๊ตฌ์ฑ ์์์ ํตํฉ์ด ํ์ํฉ๋๋ค. AppMasterno-code ํ๋ซํผ์ ๋งฅ๋ฝ์์ ๊ฐ๋ฐ์๋ ๋ฐฑ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๋ฐ์ดํฐ ๋ชจ๋ธ, ๋น์ฆ๋์ค ๋ก์ง ๋ฐ REST API endpoints ์๊ฐ์ ์ผ๋ก ๋์์ธํ ์ ์์ต๋๋ค. ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ Web BP ๋์์ด๋๋ฅผ ์ฌ์ฉํ์ฌ ๋์์ธ๋ ๋น์ฆ๋์ค ๋ก์ง๊ณผ ํจ๊ป drag-and-drop ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ UI ๊ตฌ์ฑ ์์๋ฅผ ์ฝ๊ฒ ์์ฑํ ์ ์์ต๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐฑ์๋ ๋ก์ง ์ ์์ ์ํด ๋ชจ๋ฐ์ผ BP ๋์์ด๋๋ฅผ ํ์ฉํ ์ ์์ผ๋ฉฐ, drag-and-drop ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ UI๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
๋ฌดํ ์คํฌ๋กค์ ๊ธฐ๋ณธ ๋ฉ์ปค๋์ฆ์๋ ์ฌ์ฉ์ ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ๋ชจ๋ํฐ๋งํ๊ณ ์ฌ์ฉ์๊ฐ ํ์๋ ์ฝํ ์ธ ๋ ๋ถ๋ถ์ ๋ฏธ๋ฆฌ ์ ์๋ ์๊ณ๊ฐ์ ๋๋ฌํ ๋ ์๋ฒ์์ ์ ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ๊ฐ์ ธ์ค๋ ์์ ์ด ํฌํจ๋ฉ๋๋ค. ์ด ์๊ณ๊ฐ์ ์ผ๋ฐ์ ์ผ๋ก ํ๋ฉด์ ์๋ ๋๋ ์ ๋ ์์น ๋๋ ๋๋จธ์ง ์ฝํ ์ธ ์ ๋น์จ๋ก ์ ์๋ฉ๋๋ค.
์ต์ ์ ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ๊ฐ๋ฐ์๋ ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํ๋ ๋์ ์ฌ๋ฌ ๊ธฐ์ ์ ์์๋ฅผ ์ ์คํ๊ฒ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. ์ด๋ฌํ ์์์๋ ํจ์จ์ ์ธ ๋ฐ์ดํฐ ๋ก๋ฉ ์ ๋ต, ์ํํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ์ ํ, ๋คํธ์ํฌ ์ค๋ฅ๋ ๋๋ฆฐ ์๋ฒ ์๋ต๊ณผ ๊ฐ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ์ค๋ฅ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ด ํฌํจ๋ฉ๋๋ค. ๋ํ UX ๋์์ด๋๋ ์ฌ์ฉ์๊ฐ ํ๋ฉด์ ์ด์ ์์น๋ก ๋น ๋ฅด๊ฒ ๋์๊ฐ ์ ์๋ ์ต์ ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํด์ผ ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ธํฐํ์ด์ค์ ์ ๋ฐ์ ์ธ ์ ์ฉ์ฑ์ด ํฌ๊ฒ ํฅ์๋ ์ ์์ต๋๋ค.
๋ค์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ฌ ์น ๋ฐ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฌดํ ์คํฌ๋กค์ ๊ตฌํํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, AppMaster ํ๋ซํผ์์ ์ง์๋๋ Vue3 ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ๊ฐ๋ฐ์๋ ์ฌ๋ฌ ๋ฌดํ ์คํฌ๋กค ํ๋ฌ๊ทธ์ธ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํฌํจ๋ Vue.js ์ํ๊ณ๋ฅผ ํ์ฉํ ์ ์์ต๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก Kotlin ๊ฐ๋ฐ์๋ Android ์ ํ๋ฆฌ์ผ์ด์ ์ฉ Jetpack Compose ScrollView๋ฅผ ํ์ฉํ ์ ์๊ณ SwiftUI ๊ฐ๋ฐ์๋ iOS ์ ํ๋ฆฌ์ผ์ด์ ์์ ScrollView ๋ฐ List๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ฌดํ ์คํฌ๋กค์ ํน์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑํํ๊ธฐ ์ ์ ๊ตฌํ์ ์ฅ๋จ์ ์ ๋น๊ตํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ชจ๋ ์ฌ์ฉ ์ฌ๋ก์ ํญ์ ์ต์ ์ ์๋ฃจ์ ์ด ์๋ ์๋ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์๋ฅผ ๋ค์ด, Infinite Scroll์ ๋ด์คํผ๋ ๋ฐ ์ ํ ์นดํ๋ก๊ทธ์ ๊ฐ์ด ์ฝํ ์ธ ๊ฐ ๋ง์ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ง๋ง ์ฐํธ ์ฃผ์๋ก์ด๋ ์ ์ ๋ฉ์ผ๊ณผ ๊ฐ์ด ์ ์ ์๋๊ณ ๊ตฌ์กฐํ๋ ์ฝํ ์ธ ๊ฐ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์๋ ์ ํฉํ์ง ์์ ์ ์์ต๋๋ค. -์๊ฑฐ๋ ์ฅ๋ฐ๊ตฌ๋. ์ด๋ฌํ ๊ฒฝ์ฐ ํ์ด์ง ๋งค๊น ๋๋ ์ถ๊ฐ ๋ก๋ ๋ฒํผ๊ณผ ๊ฐ์ ๋์์ด ๋ ์ ์ ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ์ฝํ ์ธ ์ ์ฝํ ์ธ ๋ด ์์น๋ฅผ ๋ ํจ๊ณผ์ ์ผ๋ก ์ ์ดํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก, Infinite Scroll์ ์ฝํ ์ธ ๊ฐ ๋ง์ ์ ํ๋ฆฌ์ผ์ด์ , ํนํ ๋ชจ๋ฐ์ผ ์ฅ์น์์ ์ฌ์ฉ์ ์ฐธ์ฌ์ ์ ์ง๋ฅผ ํฌ๊ฒ ํฅ์์ํฌ ์ ์๋ ๋ค์ฌ๋ค๋ฅํ๊ณ ๋งค๋ ฅ์ ์ธ UI ๋์์ธ ํจํด์ ๋๋ค. AppMasterno-code ํ๋ซํผ์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ํ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์์ ๋์์ด๋๋ ๋ฌดํ ์คํฌ๋กค์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํํ๊ฒ ํตํฉํ์ฌ ์ฌ์ฉ์์๊ฒ ์ต์ ์ ์ฌ์ฉ์ ์นํ์ ์ธ ๊ฒฝํ์ ๋ณด์ฅํ๋ ๋์์ ๊ธฐ์ ์ ๋ถ์ฑ๋ฅผ ์ต์ํํ ์ ์์ต๋๋ค.