์น์์ ๋ค์ดํฐ๋ธ ์ฑ ๊ฒฝํ์ ์ ๊ณตํ๋ Progressive Web App ๊ฐ๋ฐ. ์คํ๋ผ์ธ ์ฌ์ฉ ๊ฐ๋ฅํ๋ฉฐ, ์ค์น ๊ฐ๋ฅํ๊ณ , ๋ชจ๋ ํ๋ซํผ์์ ๋น ๋ฅด๊ฒ ์๋ํ๋ PWA๋ฅผ ๊ตฌ์ถํฉ๋๋ค.
์์ํ๊ธฐ
PWA๋ ์ค์น ๊ฐ๋ฅํ๊ณ ๋น ๋ฅด๋ฉฐ ์คํ๋ผ์ธ์์๋ ์๋ํ๋ ๋ค์ดํฐ๋ธ ์ฑ ๊ฒฝํ๊ณผ ์น์ ์ ๊ทผ์ฑ์ ์ ๊ณตํฉ๋๋ค. ์ ํฌ๋ Lighthouse์์ ์๋ฒฝํ ์ ์๋ฅผ ๋ฐ๊ณ , 3G ๋คํธ์ํฌ์์ ์ฆ์ ๋ก๋๋๋ฉฐ, ํธ์ ์๋ฆผ ๋ฐ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ๋ฅผ ์ ๊ณตํ๋ PWA๋ฅผ ๊ตฌ์ถํฉ๋๋ค. ๋จ์ผ ์ฝ๋๋ฒ ์ด์ค๋ก ๋ชจ๋ ํ๋ซํผ์์ ๋ค์ดํฐ๋ธ ์์ค์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์ ํฌ๋ Next.js ๋๋ Vite๋ฅผ ์ ํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ๋ก, Workbox๋ฅผ ์๋น์ค ์์ปค ๊ด๋ฆฌ์ฉ์ผ๋ก, IndexedDB๋ฅผ ํด๋ผ์ด์ธํธ ์ธก ์ ์ฅ์์ฉ์ผ๋ก, Web Push API๋ฅผ ์๋ฆผ์ฉ์ผ๋ก ์ฌ์ฉํ์ฌ PWA๋ฅผ ๊ตฌ์ถํฉ๋๋ค. ์ ํฌ์ PWA๋ ๋ชจ๋ Lighthouse PWA ๊ฐ์ฌ๋ฅผ ํต๊ณผํ๋ฉฐ ๋ชจ๋ ์ฃผ์ ํ๋ซํผ์์ ์ํํ๊ฒ ์๋ํฉ๋๋ค.
๋ค์ดํฐ๋ธ ์ฑ ์คํ ์ด์ ๋น์ฉ๊ณผ ๋ง์ฐฐ ์์ด ์ฑ ํ์ง์ ๊ฒฝํ์ ์ ๊ณตํ๊ณ ์ ํ๋ ๊ธฐ์ ์ ์ํ ์๋น์ค์ ๋๋ค. ์ฝํ ์ธ ํ๋ซํผ, e-์ปค๋จธ์ค, ํ์ฅ ์๋น์ค ๋๊ตฌ ๋ฐ ์ฌ์ฉ์๊ฐ ํนํ ์ฐ๊ฒฐ์ฑ์ด ๋ฎ์ ํ๊ฒฝ์์ ๊ธฐ๊ธฐ ๊ฐ์ ๋น ๋ฅด๊ณ ์์ ์ ์ธ ์ก์ธ์ค๊ฐ ํ์ํ ๋ชจ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ด์์ ์ ๋๋ค.
์คํ๋ผ์ธ ์๊ตฌ์ฌํญ, ์บ์ฑ ์ ๋ต, ํธ์ ์๋ฆผ ๊ณํ ๋ฐ ๋ชฉํ ํ๋ซํผ ์ญ๋ ์ ์.
์ฑ ์ ธ, ๋ฐ์ดํฐ ๋๊ธฐํ ์ ๋ต, ์๋น์ค ์์ปค ๋ผ์ดํ์ฌ์ดํด ๋ฐ ์ค์น ๊ฒฝํ ์ค๊ณ.
์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ, ์๋น์ค ์์ปค ๊ตฌํ, ์บ์ฑ ๊ตฌ์ฑ ๋ฐ ํธ์ ์๋ฆผ ์ค์ .
Lighthouse ๊ฐ์ฌ, ์คํ๋ผ์ธ ํ ์คํธ, ํฌ๋ก์ค ํ๋ซํผ ๊ฒ์ฆ ๋ฐ ์ฑ๋ฅ ์ต์ ํ.
๋ฐฐํฌ, ์ค์น์จ ์ถ์ , ์คํ๋ผ์ธ ์ฌ์ฉ ๋ชจ๋ํฐ๋ง ๋ฐ PWA ๊ฒฝํ ๋ฐ๋ณต ๊ฐ์ .
์ฑ ์คํ ์ด ๋ง์ฐฐ ์์ด ๋ค์ดํฐ๋ธ ์ฑ ํ์ง์ ์ ๊ณตํ๋ PWA๋ฅผ ํจ๊ป ๋ง๋ค์ด ๋ด ์๋ค.
PWA๋ ์คํ๋ผ์ธ ์ง์, ํธ์ ์๋ฆผ, ํ ํ๋ฉด ์ค์น ๊ธฐ๋ฅ์ผ๋ก ๋ค์ดํฐ๋ธ ์ฑ๊ณผ ์ ์ฌํ ๊ฒฝํ์ ์ ๊ณตํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. ์ด๋ ๋ณ๋์ iOS ๋ฐ Android ์ฑ ๊ฐ๋ฐ ํ์์ฑ์ ์์ ๊ณ ๊ฐ๋ฐ ๋ฐ ์ ์ง๋ณด์ ๋น์ฉ์ ์ ๊ฐํฉ๋๋ค.
์ ํฌ๋ Workbox๋ฅผ ์ฌ์ฉํ์ฌ ์๋น์ค ์์ปค๋ฅผ ๊ตฌํํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์ ์ ์์ฐ(static assets)์ ๋ํ ์บ์ ์ฐ์ (cache-first), API ํธ์ถ์ ๋ํ ๋คํธ์ํฌ ์ฐ์ (network-first), ์ฝํ ์ธ ์ ๋ํ stale-while-revalidate์ ๊ฐ์ ์ง๋ฅ์ ์ธ ์บ์ฑ ์ ๋ต์ด ํฌํจ๋์ด ์์ด ์ธํฐ๋ท ์์ด๋ ๊ทํ์ ์ฑ์ด ์์ ์ ์ผ๋ก ์๋ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
๋ค, ์ ํฌ๋ Web Push API๋ฅผ Firebase Cloud Messaging ๋๋ ๋ง์ถคํ ํธ์ ์๋ฒ์ ํตํฉํ์ฌ ๋ง์ถคํ ์์ , ๋ฆฌ์น ๋ฏธ๋์ด ๋ฐ ์ฌ์ฉ์ ์ธ๋ถํ๋ฅผ ํตํ ํ๊ฒ ํธ์ ์๋ฆผ์ ์ ๊ณตํจ์ผ๋ก์จ ์ฌ์ฐธ์ฌ ์บ ํ์ธ์ ์ง์ํฉ๋๋ค.
PWA ๊ฐ๋ฐ ์๋น์ค๋ ์๊ฐ๋น $10์์ $50๋ก ์ฑ ์ ๋ฉ๋๋ค. ์ผ๋ฐ์ ์ธ PWA ํ๋ก์ ํธ๋ ๊ธฐ๋ฅ ์ธํธ, ์คํ๋ผ์ธ ์๊ตฌ ์ฌํญ ๋ฐ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ๋ณต์ก์ฑ์ ๋ฐ๋ผ 4์ฃผ์์ 12์ฃผ๊ฐ ์์๋ฉ๋๋ค.
์ ํฌ๋ ๊ธฐ์กด React, Vue, ๋๋ Next.js ์ ํ๋ฆฌ์ผ์ด์ ์ web app manifest๋ฅผ ์ถ๊ฐํ๊ณ , service worker๋ฅผ ๊ตฌํํ๋ฉฐ, ์คํ๋ผ์ธ ์บ์ฑ์ ๊ตฌ์ฑํ๊ณ , ํธ์ ์๋ฆผ์ ํ์ฑํํ๋ฉฐ, ๋ชจ๋ ํ๋ซํผ์์์ installability๋ฅผ ์ต์ ํํ์ฌ PWA๋ก ์ ํํฉ๋๋ค.