PWA

PWA란?

옹헤옹 2025. 5. 4. 14:41

글 작성 목적

이번 프로젝트에서 PWA를 사용했는데, 완성까지의 시간이 촉박하여 제대로 알아보지 못하고 적용하게 되었습니다. 이로 인해 PWA가 동작하는 서비스워커 환경에서 추가적인 이슈들이 발생했습니다.

그래서 이번 일을 기회로 삼아 PWA란 무엇인지, 서비스워커란 무엇인지에 대해 정리하고 넘어가고자 합니다.

 

 

그래서, PWA가 뭔데?

PWA는 Progressive Web App의 약자로, 웹과 네이티브 앱 기능의 장점을 뽑아 만든 웹 앱입니다. 그럼 기존 웹 앱과 네이티브 앱의 기능은 어떤게 있는지 먼저 알아야겠죠.

 

1. 웹 앱 (Web App)

  • 구동 방식이 앱처럼 보이는, 웹 브라우저를 통해 실행 가능한 애플리케이션입니다.
  • 장점 ✅ 
    • 링크(URL)을 통해 간단하게 접근할 수 있고, 별도의 설치 과정이 필요없습니다.
    • 접근성이 좋고, 사용할 수 있는 범위가 넓습니다.
  • 단점 ❌ 
    • 디바이스 접근 권한에 제한이 있어 특정 디바이스 기능을 사용하지 못할 수도 있습니다.

2. 네이티브 앱 (Native App)

  • 모바일 운영체제나, 데스크톱 운영체제에 직접 설치되는 애플리케이션입니다.
  • 앱스토어(iOS)나 플레이스토어(Android)을 통해 설치한 앱을 뜻합니다.
  • 장점 ✅ 
    • 디바이스의 권한에 제한이 없고, 하드웨어 기능을 직접 활용할 수 있습니다. ex) 카메라, 마이크
  • 단점 ❌ 
    • 플랫폼에 맞춰 고유한 언어나 도구를 사용하여 개발해야 합니다.
    • 앱스토어로 직접 설치해야 해서 접근성이 다소 떨어집니다.

 

 

이 두 방식의 장점만을 모아 만든 PWA는 이런 장점을 가지게 됩니다.

  • 웹 브라우저에서 실행 가능하여 별도의 다운로드가 불필요합니다.
  • 네이티브 앱과 유사한 사용자 경험을 제공할 수 있습니다.
  • 앱을 출시할 경우, 기존 네이티브 앱과 비교하여 사이즈를 크게 줄일 수 있습니다.
💡 PWA로 생성한 앱을 스토어에 제출할 수 있나요?

PWA는 Google이 2015년에 제안하고 주도적으로 지원해온 기술로, PlayStore에 출시하는 방법이 문서로 잘 정리되어 있습니다. 하지만 단순히 PWA만 적용한 앱이라면 iOS 앱스토어에는 제출할 수 없습니다. Apple의 App Store Review Guidelines에 따르면, 앱은 단순한 웹사이트의 포장(wrapped website)이 아닌, 고유한 기능과 사용자 경험을 제공해야 합니다.
  • PWA를 iOS 앱으로 제출하려면 웹 콘텐츠를 WebView로 감싼 네이티브 앱을 생성해야 합니다. PWABuilder와 같은 도구를 사용하면 PWA를 기반으로 한 iOS 앱 패키지를 쉽게 생성할 수 있습니다.
  • 그렇다고 해서 심사를 100% 통과할 수 있는 것은 아니며, 네이티브 기능을 추가해야 통과 가능성이 높아지는 것으로 추측됩니다.

 

 

반면에, 여전히 한계점도 존재합니다. 일부 브라우저에서는 지원이 제한된다거나, 네이티브 앱에 비해서는 제한적인 하드웨어 접근 권한이 주어진다는 점 등이 그렇습니다.

  • 현재 주요 브라우저에서는 모두 PWA를 지원하고 있습니다.
  • 네이티브 기능
    • 접근 가능 : Geolocation, Device Orientation & Motion, camera & microphone, vibration 등
    • 접근 불가능 : System access, Low-level hardware access

 

이외에도 PWA가 필수적으로 갖는 특징들이 있습니다. 정확히 말하자면 PWA가 실행되는 service worker의 특징이라고 볼 수 있습니다.

  • 백그라운드에서 실행되는 JavaScript 파일인 service worker가 지원되는 브라우저에서만 동작합니다.
  • 보안 상의 이유로 HTTPS에서만 동작합니다.
  • 앱의 메타 정보(앱의 이름, 아이콘, 배경색 등)가 나와 있는 manifest.json 파일을 필요로 합니다.
  • 일반적으로 index.html 파일을 메인 엔트리 포인트로 사용합니다.

 

 

PWA를 프로젝트에 적용한 이유

이번 프로젝트에서는 이러한 설계들과 요구사항들이 있었습니다.

  • 사용자에게 정산 확인을 알리기 위해, 네이티브 기능 중 하나인 푸시 알림 기능이 필요했습니다.
  • 제한된 개발 시간과 팀의 기술 역량을 고려하여 웹 기반으로 개발을 진행하되, 모바일 사용자 비중이 높을 것으로 예상되어 Mobile-First Design을 적용했습니다.
  • 다양한 사용자 접근성을 고려하여, PC 환경에서도 원활하게 사용할 수 있도록 설계했습니다.

 

이런 특징들을 종합적으로 고려하여, 제한된 리소스 내에서 사용자 경험을 높이기 위해 프로젝트에 PWA를 적용하게 되었습니다. 🎉

 

 

 

이렇게 PWA란 무엇인지, 이 기술을 왜 프로젝트에 적용했는지에 대해 살펴봤습니다. 다음으로는 PWA를 프로젝트에 적용한 실제 과정과, PWA가 동작하는 서비스워커의 작동원리에 대한 글로 돌아오겠습니다.

 

다음 글: 서비스워커란?

 

서비스워커란?

서비스워커란?정의특정 출처(사이트)의 하나 혹은 그 이상의 페이지를 제어하는 스크립트이벤트 기반 워커로서 JavaScript로 작성된 파일기능서비스 워커는 자신이 제어하는 페이지에서 발생하는

ongheong.tistory.com