Progressive Web App

PWA(Progressive Web App)๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๊ณ  ๋ฐฐํฌํ•˜๊ธฐ ์œ„ํ•œ ์ ‘๊ทผ ๋ฐฉ์‹๊ณผ ๊ธฐ์ˆ  ์ง‘ํ•ฉ์„ ๊ฐ€๋ฆฌํ‚ค๋Š” ์šฉ์–ด์ž…๋‹ˆ๋‹ค. PWA๋Š” ์›น๊ณผ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์˜ ์ค‘๊ฐ„ ํ˜•ํƒœ๋กœ, ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰ํ•˜๋ฉด์„œ๋„ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ ์œ ์‚ฌํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๊ณผ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์š” ํŠน์ง•

  1. ์•ฑ ์Šคํƒ€์ผ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜: PWA๋Š” ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ ์œ ์‚ฌํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ํ™ˆ ํ™”๋ฉด์— ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜๊ณ , ์˜คํ”„๋ผ์ธ์—์„œ๋„ ์ž‘๋™ํ•˜๋ฉฐ, ํ‘ธ์‹œ ์•Œ๋ฆผ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์ฆ๊ฐ•: โ€œํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒโ€๋ž€, PWA๊ฐ€ ์ ์ง„์ ์œผ๋กœ ํ–ฅ์ƒ๋˜๋Š” ์›น ์•ฑ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์žฅ์น˜ ๊ธฐ๋Šฅ์„ ํ™•์ธํ•˜๊ณ , ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ์ตœ์ ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋‹ค์–‘ํ•œ ๋ธŒ๋ผ์šฐ์ €์™€ ํ”Œ๋žซํผ์—์„œ ๋™์ž‘ํ•˜๋Š” PWA๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
  3. ์˜คํ”„๋ผ์ธ ์ž‘๋™: PWA๋Š” ์ผ๋ถ€ ๋˜๋Š” ๋ชจ๋“  ๋‚ด์šฉ์„ ๋กœ์ปฌ ์บ์‹œ์— ์ €์žฅํ•˜์—ฌ ์˜คํ”„๋ผ์ธ ์ƒํƒœ์—์„œ๋„ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋Š๋ฆฐ ๋˜๋Š” ๋ถˆ์•ˆ์ •ํ•œ ๋„คํŠธ์›Œํฌ ์—ฐ๊ฒฐ์—์„œ๋„ ์•ฑ์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  4. ์•ˆ์ „์„ฑ๊ณผ ๋ณด์•ˆ: HTTPS๋ฅผ ํ†ตํ•ด ์ „์†ก๋˜๋ฉฐ, ์„œ๋น„์Šค ์›Œ์ปค(Service Worker)์™€ ๊ฐ™์€ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ด๋กœ์จ ๋ฐ์ดํ„ฐ ํƒˆ์ทจ ๋ฐ ์ค‘์š” ์ •๋ณด ๋…ธ์ถœ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
  5. ๋ฐฐํฌ ๋ฐ ์—…๋ฐ์ดํŠธ ์šฉ์ด์„ฑ: PWA๋Š” ์•ฑ ์Šคํ† ์–ด์— ์˜์กดํ•˜์ง€ ์•Š๊ณ  ์›น ์„œ๋ฒ„๋ฅผ ํ†ตํ•ด ๋ฐฐํฌ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์—…๋ฐ์ดํŠธ๊ฐ€ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์ด๋ฃจ์–ด์งˆ ์ˆ˜ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ์•ฑ์„ ์—…๋ฐ์ดํŠธํ•  ํ•„์š” ์—†์ด ํ•ญ์ƒ ์ตœ์‹  ๋ฒ„์ „์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์žฅ์ 

  1. ํฌ๋กœ์Šค ํ”Œ๋žซํผ: PWA๋Š” ๋ชจ๋“  ์ฃผ์š” ๋ธŒ๋ผ์šฐ์ € ๋ฐ ํ”Œ๋žซํผ์—์„œ ์‹คํ–‰๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์—ฌ๋Ÿฌ ํ”Œ๋žซํผ์— ๋Œ€ํ•œ ๋ณ„๋„์˜ ์•ฑ์„ ๊ฐœ๋ฐœํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  2. ์ €๋น„์šฉ: ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์œ ์ง€ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค PWA๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ ๋” ์ ์€ ๋น„์šฉ์ด ๋“ญ๋‹ˆ๋‹ค.
  3. ์„ฑ๋Šฅ ๊ฐœ์„ : PWA๋Š” ๋น ๋ฅธ ๋กœ๋”ฉ ์†๋„์™€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฏ€๋กœ ์‚ฌ์šฉ์ž ์ดํƒˆ๋ฅ ์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  4. SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”): PWA๋Š” ์›น ํŽ˜์ด์ง€๋กœ ์ธ์‹๋˜๋ฏ€๋กœ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)์— ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.
  5. ์˜คํ”„๋ผ์ธ ๊ธฐ๋Šฅ: PWA๋Š” ์˜คํ”„๋ผ์ธ์—์„œ๋„ ์ž‘๋™ํ•˜๋ฏ€๋กœ ๋Š๋ฆฐ ๋˜๋Š” ๋ถˆ์•ˆ์ •ํ•œ ์ธํ„ฐ๋„ท ์—ฐ๊ฒฐ ํ™˜๊ฒฝ์—์„œ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

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