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

ํ”„๋ŸฐํŠธ์—”๋“œ ์ ์ง„์  ํ–ฅ์ƒ์„ ์‚ฌ์šฉํ•  ๋•Œ ๊ฐœ๋ฐœ์ž๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ•ต์‹ฌ ์ฝ˜ํ…์ธ ์™€ ํ•„์ˆ˜ ๊ธฐ๋Šฅ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ์ง€์ •ํ•˜๊ณ  ๋””์ž์ธ์„ ์œ„ํ•œ CSS, ์ƒํ˜ธ ์ž‘์šฉ์„ ์œ„ํ•œ JavaScript, AJAX ๋˜๋Š” ์›น API์™€ ๊ฐ™์€ ์ตœ์‹  ์›น ๊ธฐ์ˆ ๊ณผ ๊ฐ™์€ ์ถ”๊ฐ€ ๋ ˆ์ด์–ด๋ฅผ ์ถ”๊ฐ€๋กœ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์„ฑ๋Šฅ์ด ๋–จ์–ด์ง€๋Š” ์žฅ์น˜๋‚˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž๋„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๊ณ„์† ์•ก์„ธ์Šคํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ณ ๊ธ‰ ์†Œํ”„ํŠธ์›จ์–ด ๋ฐ ํ•˜๋“œ์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ๋”์šฑ ํ’๋ถ€ํ•˜๊ณ  ๋Œ€ํ™”ํ˜• ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ ์‘ํ˜• ๋””์ž์ธ ์ ‘๊ทผ ๋ฐฉ์‹์€ ์‚ฌ์šฉ์ž์˜ ๊ธฐ์ˆ ์  ๋Šฅ๋ ฅ์ด๋‚˜ ํ•œ๊ณ„์— ๊ด€๊ณ„์—†์ด ์ฝ˜ํ…์ธ ๊ฐ€ ๋ณดํŽธ์ ์œผ๋กœ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ณ  ๊ธฐ๋Šฅ์ ์ž„์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

์—ฐ๊ตฌ ๋ฐ ํ†ต๊ณ„์— ๋”ฐ๋ฅด๋ฉด ์ ์ง„์ ์ธ ํ–ฅ์ƒ์„ ์‚ฌ์šฉํ•˜๋ฉด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„ฑ๋Šฅ์ด ํฌ๊ฒŒ ํ–ฅ์ƒ๋˜์–ด ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ๋นจ๋ผ์ง€๊ณ  ์ „๋ฐ˜์ ์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ํ–ฅ์ƒ๋  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค. 2018๋…„ Google Developers์˜ ์—ฐ๊ตฌ์— ๋”ฐ๋ฅด๋ฉด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ ์ง„์ ์ธ ํ–ฅ์ƒ์„ ์ ์šฉํ•˜๋ฉด ๋กœ๋”ฉ ์†๋„๊ฐ€ ํ‰๊ท  68% ์ฆ๊ฐ€ํ•˜๋Š” ๋™์‹œ์— ์‚ฌ์šฉ์ž ์ดํƒˆ์ด ํฌ๊ฒŒ ๊ฐ์†Œํ–ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Akamai Technologies๊ฐ€ ์‹ค์‹œํ•œ 2020๋…„ ์—ฐ๊ตฌ์— ๋”ฐ๋ฅด๋ฉด ์ ์ง„์ ์ธ ํ–ฅ์ƒ์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์ดํŠธ์—์„œ๋Š” ๋กœ๋“œ ์‹œ๊ฐ„์ด ์ตœ๋Œ€ 70% ๊ฐ์†Œํ•˜์—ฌ ์‚ฌ์šฉ์ž ์œ ์ง€์œจ์ด ๋†’์•„์ง€๊ณ  ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO) ์ˆœ์œ„๊ฐ€ ํ–ฅ์ƒ๋˜๋Š” ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ์˜ ์ ์ง„์ ์ธ ํ–ฅ์ƒ์˜ ํ•ต์‹ฌ์€ ์žฅ์น˜๋‚˜ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋Šฅ์— ๊ด€๊ณ„์—†์ด ๋ชจ๋“  ์‚ฌ์šฉ์ž๊ฐ€ ํ•ต์‹ฌ ์ฝ˜ํ…์ธ ์™€ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์— ํ•ญ์ƒ ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ๋ฏฟ์Œ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ๋ฐ˜ ์œ„์— ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ๊ณผ ์ตœ์ ํ™” ๊ธฐ์ˆ ์„ ๊ณ„์ธตํ™”ํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ์ž๋Š” ๋œ ์ง„๋ณด๋œ ๊ธฐ์ˆ ์„ ๋ณด์œ ํ•œ ์‚ฌ์šฉ์ž๋ฅผ ๋ฐฐ์ œํ•˜์ง€ ์•Š๊ณ ๋„ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ ์ง„์ ์œผ๋กœ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์ค‘ ์žฅ์น˜ ์‚ฌ์šฉ์ž์˜ ์„ธ๊ณ„์—์„œ ์ด ๋ฐฉ๋ฒ•๋ก ์€ ๊ด‘๋ฒ”์œ„ํ•œ ํ˜ธํ™˜์„ฑ๊ณผ ๊ฐ•๋ ฅํ•œ ์ ‘๊ทผ์„ฑ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

๊ฒฌ๊ณ ํ•˜๊ณ  ๊ฐ•๋ ฅํ•œ no-code ํ”Œ๋žซํผ์ธ AppMaster ์‚ฌ์šฉํ•˜๋ฉด ์‚ฌ์šฉ์ž๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ๋•Œ ํ”„๋ŸฐํŠธ์—”๋“œ ์ ์ง„์  ํ–ฅ์ƒ ์›์น™์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํ”Œ๋žซํผ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋Š” drag-and-drop ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹œ๊ฐ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ ๋ชจ๋ธ์„ ์ƒ์„ฑํ•˜๊ณ , REST API๋ฅผ ์„ค๊ณ„ํ•˜๊ณ , ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์ ์šฉํ•˜๊ณ , UI๋ฅผ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋ŸฐํŠธ์—”๋“œ ์•„ํ‚คํ…์ฒ˜๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก๊ณผ ์„œ๋ฒ„ ์ธก ๋ชจ๋‘์—์„œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ์ง„๋ณด์ ์ธ ํŠน์„ฑ๊ณผ ๊ธฐ๋Šฅ์œผ๋กœ ์ž˜ ์•Œ๋ ค์ง„ ๋‹ค์žฌ๋‹ค๋Šฅํ•˜๊ณ  ์ธ๊ธฐ ์žˆ๋Š” JavaScript ํ”„๋ ˆ์ž„์›Œํฌ์ธ Vue.js๋ฅผ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค.

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

๋ณดํŽธ์ ์ธ ์ ‘๊ทผ์„ฑ์„ ๋†’์ด๋Š” ๊ฒƒ ์™ธ์—๋„ ์ ์ง„์ ์ธ ํ–ฅ์ƒ ์ ‘๊ทผ ๋ฐฉ์‹์€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋‹ค๋ฅธ ์ด์ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ฝ”๋“œ ํ’ˆ์งˆ๊ณผ ๋ชจ๋“ˆ์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋ฏ€๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„์„ ํฌ๊ฒŒ ์ค‘๋‹จํ•˜์ง€ ์•Š๊ณ  ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€, ์ œ๊ฑฐ ๋˜๋Š” ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ ์ง„์ ์ธ ํ–ฅ์ƒ์„ ํ†ตํ•ด ์˜๋ฏธ๋ก ์  HTML ๋งˆํฌ์—…, ์ ์ ˆํ•œ ์ฝ˜ํ…์ธ  ๊ณ„์ธต ๊ตฌ์กฐ, WAI-ARIA ์†์„ฑ์˜ ์ ์ ˆํ•œ ์‚ฌ์šฉ ๋“ฑ ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€์˜ ์‚ฌ์šฉ์„ ์žฅ๋ คํ•˜์—ฌ ์žฅ์• ๋‚˜ ๋ณด์กฐ ๊ธฐ์ˆ ์ด ์žˆ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

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