Investor's wiki

프로그레시브 웹 애플리케이션(PWA)

프로그레시브 웹 애플리케이션(PWA)

PWA(Progressive Web Application)๋ผ๋Š” ์šฉ์–ด๋Š” ์ตœ์‹  ์›น ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งŒ๋“ค์–ด์ง€๊ณ  ๊ธฐ๋ณธ ์›น ํ‘œ์ค€์„ ๋”ฐ๋ฅด๋Š” ํŠน์ˆ˜ํ•œ ์ข…๋ฅ˜์˜ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ PWA๋Š” ๊ธฐ๋ณธ ์•ฑ๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•˜๊ฒŒ ์ž‘๋™ํ•˜๋Š” ์›น ์•ฑ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๋„ค์ดํ‹ฐ๋ธŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์›น ์•ฑ๊ณผ ๊ธฐ๋ณธ ์•ฑ

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

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

ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(PWA)

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

์ผ๋ฐ˜์ ์œผ๋กœ PWA๋Š” HTML, CSS ๋ฐ JavaScript์™€ ๊ฐ™์€ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ–ฅ์ƒ๋œ ์†๋„์™€ ํ›จ์”ฌ ๋” ๋งŽ์€ ๊ธฐ๋Šฅ์œผ๋กœ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฆ„์—์„œ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด PWA๋Š” ์ „์ฒด ์ˆ˜๋ช… ๋™์•ˆ ์ ์ง„์ ์œผ๋กœ ๊ฐœ์„ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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