2026-01-28

PWA(Progressive Web App)

PWA란?

웹 기술로 만든 앱 같은 웹 서비스다.

웹이지만

  • 앱처럼 설치되고
  • 오프라인에서도 동작하고
  • 푸시 알림도 받을 수 있다

⇒ 웹 + 앱의 장점을 합친 형태다.

PWA의 핵심 3요소

  • Service Worker

    백그라운드에서 동작하는 스크립트

    • 네트워크 요청 가로채기
    • 캐싱 처리
    • 오프라인 지원
    • 푸시 알림 처리
      브라우저 ↔ Service Worker ↔ 서버

    ⇒ PWA의 심장장

  • Web App Manifest

    앱의 설정 파일

      {
  "name":"My App",
  "short_name":"App",
  "start_url":"/",
  "display":"standalone",
  "icons":[...]
  }
    • 앱 이름
    • 아이콘
    • 실행 방식(주소창 제거)
    • 시작 URL

    ⇒ 이부분이 있어야 홈 화면 설치 가능

  • HTTPS

    • 보안 필수
    • Service Worker는 HTTPS에서만 동작

PWA의 장점

  • 사용자 입장
    • 설치 용량 거의 없음
    • 업데이트 자동
    • 데이터 적게 씀
    • 바로 접근 가능 (URL)
  • 개발자 입장
    • 하나의 코드베이스
    • 웹 기술 그대로 사용
    • 앱 심사 없음
    • 배포 빠름
  • 검색엔진을 통해 검색이 가능(SEO)
  • 푸시알림

PWA의 한계

  • iOS 기능 제한 (특히 푸시, 백그라운드)
  • 고성능 그래픽/센서 제어 한계
  • 앱스토어 노출 약함
  • 게임과 같은 고사양 앱 개발 불가능

PWA vs 네이티브 앱

항목 PWA 네이티브
설치 웹에서 바로 앱스토어
개발 비용 낮음 높음
성능 중간 최고
접근성 매우 높음 낮음
배포 즉시 심사 필요

React 기준으로

  • CRA / Vite → PWA 플러그인 사용
  • Service Worker 등록
  • manifest.json 추가

⇒ React SPA + PWA = 모바일 친화 웹앱

참고자료

  • https://jeon0160.tistory.com/79
  • https://www.dvn.ci/blog/pwa%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C-%EC%9B%B9-%EC%95%B1%EC%9D%B4%EB%9E%80-%EB%8B%A4%EC%96%91%ED%95%9C-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%95%B1%EC%9D%98-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90-60256
  • https://www.sepoasoft.co.kr/2022/11/09/7411/
  • https://elice.io/ko/resources/blog/pwa_1

results matching ""

    No results matching ""