Conceptly
← 전체 목록
📲

Progressive Web App

클라이언트설치, 오프라인, 배경 동작을 더한 웹 앱

PWA(Progressive Web App)는 웹 플랫폼 기술로 만든 앱이지만, 설치 가능성, 오프라인 동작, 백그라운드 이벤트, 독립 창 실행 같은 추가 능력을 통해 플랫폼 앱에 가까운 경험을 제공하는 웹 앱입니다. 같은 코드베이스로 여러 기기와 운영체제에 도달하면서도, 지원이 되는 환경에서는 홈 화면 아이콘과 앱 같은 시작 방식을 제공하고, 지원이 약한 환경에서는 일반 웹사이트로 자연스럽게 동작합니다.

아키텍처 다이어그램

🔄 프로세스 다이어그램

점선 애니메이션은 데이터 또는 요청의 흐름 방향을 나타냅니다

왜 필요한가요?

전통적인 웹 페이지는 탭이 닫히면 존재감이 사라지고, 네트워크가 끊기면 곧바로 기능이 약해집니다. 사용자는 홈 화면에서 바로 열리는 아이콘을 기대하고, 잠깐의 오프라인이나 느린 연결에서도 기본 작업이 이어지길 바라지만, 일반 웹만으로는 그런 경험을 안정적으로 만들기 어렵습니다. 모바일 사용이 일상이 되면서 웹도 단순한 문서가 아니라 앱처럼 느껴져야 한다는 요구가 커졌습니다. 하지만 설치, 오프라인, 백그라운드 동작, 독립 창 실행은 한 번에 얻어지지 않았고, 이 간극을 메우는 웹 표준이 필요했습니다.

왜 이런 방식이 등장했나요?

모바일 사용이 중심이 되면서 웹도 단순한 문서가 아니라 앱처럼 느껴져야 한다는 요구가 커졌습니다. 브라우저 표준은 이런 요구를 하나의 기능으로 해결하지 않고, 설치 메타데이터, 캐시 전략, 백그라운드 이벤트, 독립 창 실행처럼 여러 조각으로 나눠 제공했습니다. PWA는 그 조각들을 묶어, 같은 웹 코드베이스로도 설치 가능하고 신뢰할 수 있는 앱 경험을 만들자는 모델로 자리 잡았습니다. 이 접근은 웹을 새 플랫폼으로 바꾸려는 것이 아니라, 기존 웹의 범용성과 접근성을 유지한 채 사용자가 기대하는 앱성을 더하기 위한 선택입니다.

안에서 어떻게 동작하나요?

PWA는 하나의 API가 아니라 여러 능력을 겹쳐 올린 웹 앱입니다. 먼저 앱 이름, 아이콘, 시작 주소 같은 메타데이터가 있으면 브라우저가 이를 설치 가능한 앱으로 인식합니다. 그다음 네트워크 요청을 가로채고 핵심 자산을 캐시하는 실행층이 붙으면, 연결이 약하거나 끊겨도 기본 화면을 다시 그릴 수 있습니다. 마지막으로 설치된 앱은 브라우저 탭이 아니라 독립 창으로 열리고, 브라우저 안에서는 웹사이트처럼, 설치 후에는 앱처럼 동작합니다. 핵심은 점진적 향상입니다. 지원이 약한 브라우저에서는 그냥 정상 웹사이트로 작동하고, 더 많은 기능을 지원하는 환경에서는 설치, 오프라인, 배경 동작이 위에 얹힙니다. 즉 PWA는 웹을 버리는 것이 아니라 웹 위에 앱성을 더하는 구조입니다.

무엇과 헷갈리나요?

PWA와 SPA는 둘 다 웹을 앱처럼 느끼게 만들지만 초점이 다릅니다. SPA는 화면 전환과 렌더링을 브라우저 안에서 처리하는 구조이고, PWA는 설치 가능성, 오프라인 동작, 기기 통합 같은 추가 능력을 묶은 개념입니다. SPA로 만든 앱은 PWA가 될 수 있지만, SPA라고 해서 자동으로 PWA가 되는 것은 아닙니다. PWA와 Service Worker도 구분해야 합니다. Service Worker는 요청을 가로채고 캐시와 백그라운드 이벤트를 다루는 구성요소이고, PWA는 그 위에 설치 메타데이터와 사용자 경험 전체를 얹은 상위 개념입니다. 일부 기능만 더할지, 앱 전체를 설치형 웹으로 묶을지가 판단 기준입니다.

언제 쓰나요?

PWA는 모바일 비중이 높고 반복 방문이 많은 서비스에서 특히 유용합니다. 사용자는 홈 화면 아이콘으로 바로 열고, 설치된 독립 창에서 작업을 이어 가며, 연결이 흔들려도 핵심 화면과 마지막 상태를 빠르게 다시 만날 수 있습니다. 메모, 할 일, 예약, 주문 추적, 메시징처럼 다시 열었을 때 바로 이어져야 하는 서비스가 대표적입니다. 운영 관점에서는 첫 방문과 재방문의 차이를 설계하는 것이 중요합니다. 첫 방문에서는 정상 웹사이트로 충분하지만, 재방문과 설치 후에는 캐시된 앱 셸과 로컬 상태 덕분에 더 빠른 시작이 가능해야 합니다. 네트워크가 불안정한 환경에서는 초안 저장과 재전송 경로까지 함께 설계해야 사용자 작업이 끊기지 않습니다. PWA는 모든 웹사이트에 무조건 필요한 것은 아닙니다. 설치, 오프라인, 배경 동작이 실제 제품 가치로 이어지는 경우에만 의미가 있습니다. 단순 정보 전달 페이지라면 복잡한 설치 흐름보다 일반 웹으로 남는 편이 더 낫습니다.

모바일 중심 서비스반복 방문 도구현장용 업무 앱브랜드 중심 경험