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 ํ”Œ๋žซํผ์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ๋Š” ๋ฌดํ•œ ์Šคํฌ๋กค์„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์›ํ™œํ•˜๊ฒŒ ํ†ตํ•ฉํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ตœ์ ์˜ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ๊ฒฝํ—˜์„ ๋ณด์žฅํ•˜๋Š” ๋™์‹œ์— ๊ธฐ์ˆ ์  ๋ถ€์ฑ„๋ฅผ ์ตœ์†Œํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.