PWA란? 홈 화면 설치·오프라인·웹 푸시의 원리

안녕하세요. 사랑받는 IT 프로덕트의 첫걸음, 똑똑한개발자입니다.

PWA(Progressive Web App)는 웹 기술을 바탕으로 홈 화면 설치, 오프라인 처리, 푸시 알림 등 앱과 비슷한 경험을 제공할 수 있는 웹앱입니다. 모든 PWA가 이 기능을 자동으로 갖추는 것은 아니며, 구현 방식과 브라우저 지원 범위에 따라 사용할 수 있는 기능이 달라집니다.

PWA란 무엇인가, Progressive Web App의 뜻

PWA는 Progressive Web App의 줄임말입니다. 구글의 웹 개발 가이드 web.dev 설명으로는 최신 API로 기능을 키워, 웹 코드를 여러 환경에서 활용하면서도 앱에 가까운 능력을 갖춘 웹 앱입니다. PWA란 새 기술이라기보다 아래 세 요소를 갖춘 웹을 부르는 이름입니다.

웹 앱 매니페스트가 앱의 이름표 역할을 합니다.

앱 이름, 아이콘, 시작 주소, 표시 방식을 적은 JSON 파일입니다. display 값을 standalone으로 두면 주소창 없이 열립니다.

서비스 워커가 오프라인과 백그라운드를 맡습니다.

브라우저와 네트워크 사이에 서서 요청을 가로채고 캐시를 관리하는 스크립트입니다. 모질라의 개발자 문서 MDN에 따르면 설치에 꼭 필요하지는 않지만, 오프라인 경험을 주려는 PWA는 대부분 이걸 씁니다.

HTTPS는 빠질 수 없는 조건입니다.

MDN 기준으로 설치하려면 https로 서비스해야 합니다. 예외는 로컬 개발 환경뿐입니다.

PWA 기능, 홈 화면 설치부터 웹 푸시까지

홈 화면에 설치하면 앱처럼 열립니다.

안드로이드에서는 크롬과 삼성 인터넷이 앱처럼 설치해 줍니다. 아이폰은 iOS 16.4부터 사파리 말고 크롬, 엣지에서도 홈 화면에 추가할 수 있습니다. iOS 26부터는 홈 화면에 올린 웹사이트가 기본으로 웹 앱처럼 열립니다.

오프라인 사용은 캐시 설계에 따라 달라집니다.

미리 저장한 화면과 데이터를 보여주도록 구현하면 일부 기능을 오프라인에서도 사용할 수 있습니다. 결제나 최신 재고 조회처럼 서버 연결이 필요한 작업은 별도 처리합니다.

아이폰 웹 푸시는 조건이 붙습니다.

애플 웹킷 블로그는 2023년 2월 iOS·iPadOS 16.4에서 홈 화면 웹 앱의 웹 푸시를 지원한다고 발표했습니다. 사용자가 홈 화면에 추가해야 하고, 구독 버튼도 직접 눌러야 합니다. 2024년 2월에는 애플이 EU 디지털시장법 대응을 이유로 EU에서 홈 화면 웹 앱을 빼겠다고 했다가 3월에 철회했습니다. 정책 하나에 기능이 흔들릴 수 있다는 뜻입니다.

PWA에서 구현할 수 있는 사용 예시

예약 내역을 홈 화면에서 다시 열거나, 연결이 약할 때 저장해 둔 안내 내용을 보여주는 방식이 가능합니다. 오프라인 상태에서 변경한 내용을 나중에 서버와 동기화하려면 충돌과 실패 처리도 구현합니다. 이는 기능을 설명하기 위한 예시이며 모든 PWA가 기본 제공하는 동작은 아닙니다.

PWA vs 네이티브앱, 장단점 비교

장점은 비용과 속도입니다. 코드 하나로 두 운영체제를 덮고 수정은 심사 없이 바로 나갑니다. 아쉬운 쪽은 기기 기능과 노출이죠. 웹 블루투스처럼 사파리가 지원하지 않는 API가 있고, 앱스토어 검색 유입은 기본으로 없습니다.

PWA가 맞는 서비스와 안 맞는 서비스

재방문과 알림이 핵심이면 PWA부터 시작합니다.

예약, 주문, 회원 전용 콘텐츠, 사내 업무 도구처럼 화면이 중심이고 자주 다시 여는 서비스가 그렇습니다. 검증 단계의 MVP라면 이 방식으로 반응부터 보는 편이 예산을 아낍니다.

기기 기능이 핵심이면 네이티브앱이 맞습니다.

블루투스 기기 연동, 백그라운드 위치 추적, 고사양 그래픽은 브라우저 지원 범위를 넘어섭니다. 앱스토어 노출 자체가 마케팅 채널인 서비스도 마찬가지고요.

PWA냐 앱이냐를 가르는 건 결국 고객이 어떻게 돌아오느냐입니다. 기획서를 쓰기 전에 던질 질문은 하나입니다. 우리 고객은 무엇 때문에 이 서비스를 다시 여나요?

세부 설정과 지원 범위는 MDN PWA 안내를 참고해 보세요.

웹과 앱 사이의 선택을 함께 고민합니다

홈 화면에 쉽게 다시 들어오게 할지, 기기 기능을 깊이 활용할지에 따라 필요한 구성이 달라집니다. 지금 서비스의 사용 장면을 떠올리는 것부터 시작할 수 있습니다.

똑똑한개발자는 UX/UI 디자인과 웹·앱 개발을 함께 진행합니다. 필요한 화면과 기능을 정리하고, 실제 이용과 운영을 고려해 서비스를 만들어가는 과정을 돕습니다.

지금 만들고 있는 서비스나 개선하고 싶은 부분이 있다면 아래 똑똑한개발자 링크로 편하게 이야기 남겨주세요. 함께 살펴보겠습니다. 감사합니다. :)