앱 개발 비용이 부담된다면? PWA를 알아야 하는 이유

들어가며

스마트폰으로 웹사이트를 이용하다 보면 가끔 신기한 경험을 하게 됩니다. 별도의 앱을 설치하지 않았는데도 스마트폰 홈 화면에 아이콘을 추가할 수 있고, 다시 실행하면 일반적인 브라우저 화면과 조금 다른 모습으로 사이트가 열리는 경우가 있습니다.

이런 방식으로 웹사이트를 앱처럼 사용할 수 있도록 만들어주는 기술 중 하나가 바로 PWA(Progressive Web App)입니다.

처음 PWA라는 말을 들으면 상당히 어려운 개발 기술처럼 느껴질 수 있습니다. 하지만 개념 자체는 생각보다 간단합니다.

쉽게 표현하면 PWA는 웹사이트의 장점과 모바일 앱의 장점을 결합한 방식이라고 이해하면 됩니다.

웹사이트는 별도의 설치 과정 없이 브라우저에서 바로 접속할 수 있다는 장점이 있습니다. 반면 모바일 앱은 스마트폰에 설치해 놓고 아이콘을 눌러 바로 실행할 수 있고, 기기의 여러 기능을 활용할 수 있다는 장점이 있습니다.

PWA는 이 두 가지 방식의 장점을 최대한 활용하려는 접근이라고 볼 수 있습니다.

PWA는 일반적인 웹사이트와 무엇이 다를까?

일반적인 웹사이트는 주소를 입력하거나 검색 결과를 통해 접속하는 것이 기본입니다.

반면 PWA로 만들어진 웹 애플리케이션은 조건이 갖춰지면 사용자가 홈 화면에 추가해 앱처럼 실행할 수 있습니다.

예를 들어 쇼핑몰이나 뉴스 사이트를 자주 이용한다고 생각해보겠습니다. 매번 브라우저를 열고 주소를 검색하는 것보다 홈 화면에 해당 사이트의 아이콘이 있다면 훨씬 편리합니다.

사용자는 앱을 설치했다는 느낌으로 웹사이트를 이용할 수 있고, 개발자 입장에서는 기존 웹 기술을 활용하면서 앱과 비슷한 사용자 경험을 제공할 수 있습니다.

이 부분이 PWA의 가장 큰 매력이라고 할 수 있습니다.

PWA를 구성하는 핵심 요소

PWA는 단순히 웹사이트에 특정 파일 하나를 추가한다고 완성되는 것은 아닙니다.

대표적으로 웹 앱 매니페스트(Web App Manifest)와 서비스 워커(Service Worker)가 중요한 역할을 합니다.

웹 앱 매니페스트는 웹 애플리케이션의 이름, 아이콘, 시작 주소, 화면 표시 방식 등의 정보를 정의합니다.

앞서 많이 접했을 수 있는 manifest.json이 바로 이 역할을 담당합니다.

예를 들어 애플리케이션 이름은 무엇인지, 스마트폰 홈 화면에 어떤 아이콘을 보여줄 것인지, 사용자가 실행했을 때 어느 페이지를 열 것인지 등의 정보를 설정할 수 있습니다.

서비스 워커는 조금 더 복잡한 개념입니다.

브라우저와 웹 서버 사이에서 동작하는 별도의 스크립트라고 생각하면 이해하기 쉽습니다. 이를 이용하면 캐시를 활용한 리소스 관리, 네트워크 연결 상태에 따른 처리, 백그라운드 작업 등 일반적인 웹페이지에서는 구현하기 어려운 기능을 사용할 수 있습니다.

특히 PWA에서 자주 이야기되는 오프라인 또는 네트워크 불안정 상황에서의 동작과도 관련이 있습니다.

다만 서비스 워커를 사용한다고 해서 모든 웹사이트가 인터넷 없이 완벽하게 동작하는 것은 아닙니다. 어떤 파일과 데이터를 캐시하고 어떻게 처리할 것인지를 개발자가 제대로 설계해야 합니다.

PWA의 가장 큰 장점은 무엇일까?

PWA의 장점을 하나만 꼽는다면 역시 접근성이 좋다는 점입니다.

일반적인 앱은 사용자가 앱스토어나 플레이스토어에서 검색하고 다운로드한 뒤 설치해야 합니다. 하지만 웹 기반 서비스는 기본적으로 URL만 있으면 접근할 수 있습니다.

PWA는 이러한 웹의 접근성을 유지하면서 앱과 비슷한 사용 경험을 제공할 수 있습니다.

또한 하나의 웹 기술 기반으로 여러 환경에 대응하기 좋다는 점도 장점입니다.

웹사이트를 운영하면서 모바일 앱까지 별도로 개발하려면 상당한 시간과 비용이 들어갈 수 있습니다. 물론 PWA가 네이티브 앱을 완전히 대체하는 것은 아니지만, 서비스의 성격에 따라서는 훨씬 효율적인 선택이 될 수 있습니다.

그렇다면 PWA가 앱을 완전히 대체할 수 있을까?

여기서는 조금 현실적으로 볼 필요가 있습니다.

PWA가 편리하다고 해서 모든 모바일 앱을 PWA로 바꾸는 것이 정답은 아닙니다.

스마트폰의 하드웨어 기능을 적극적으로 활용해야 하거나 고성능 그래픽 처리가 필요한 서비스라면 네이티브 앱이 더 적합할 수 있습니다.

반대로 콘텐츠 중심의 서비스, 쇼핑몰, 예약 서비스, 커뮤니티, 뉴스 사이트처럼 웹 환경과 잘 맞는 서비스라면 PWA를 고려해볼 만합니다.

결국 중요한 것은 “PWA가 앱보다 좋은가?”가 아니라 “내 서비스에 PWA 방식이 적합한가?”입니다.

PWA를 만들려면 무엇부터 시작해야 할까?

처음 PWA를 공부한다면 거창한 프로젝트부터 시작할 필요는 없습니다.

먼저 일반적인 HTML, CSS, JavaScript로 웹페이지를 하나 만들어보고, 여기에 웹 앱 매니페스트를 연결해보는 것부터 시작하면 좋습니다.

manifest.json을 작성해 애플리케이션 이름과 아이콘, 시작 페이지 등을 설정하고, 그다음 서비스 워커를 등록하는 방식으로 하나씩 기능을 추가하면 됩니다.

개발자 도구를 이용하면 매니페스트가 정상적으로 인식되는지, 서비스 워커가 제대로 등록됐는지 등을 확인할 수 있기 때문에 실제로 만들어보면서 공부하는 것이 가장 빠릅니다.

그리고 PWA에서는 HTTPS도 중요한 요소입니다. 개발 환경에서 사용하는 일부 예외적인 환경을 제외하면 서비스 워커와 같은 기능을 제대로 활용하기 위해 보안 연결 환경을 고려해야 합니다.

PWA를 알아두면 좋은 이유

최근 웹 개발에서는 단순히 “웹페이지를 만든다”는 개념에서 벗어나 사용자가 어떤 환경에서 서비스를 이용하는지를 함께 고민하는 것이 중요해졌습니다.

PC에서는 브라우저로 접속하고, 스마트폰에서는 모바일 화면으로 이용하며, 필요하다면 홈 화면에 추가해 앱처럼 사용할 수도 있습니다.

PWA는 바로 이런 사용자 경험을 웹 기술을 중심으로 구현하기 위한 방법 중 하나입니다.

특히 이미 웹사이트를 운영하고 있거나 앞으로 웹 서비스를 개발할 계획이라면 PWA라는 개념을 한 번쯤 알아둘 필요가 있습니다.

처음에는 manifest.json, 서비스 워커, 캐시 같은 용어 때문에 어렵게 느껴질 수 있습니다. 하지만 각각의 역할을 나눠서 생각하면 의외로 이해하기 쉽습니다.

manifest.json은 웹 앱의 정보를 정의하고, 서비스 워커는 웹 애플리케이션의 동작을 확장하는 역할을 한다.

이 정도의 기본 개념부터 시작하면 충분합니다.

결국 PWA는 “웹사이트를 억지로 앱처럼 만드는 기술”이라기보다는 웹이 가진 접근성과 앱이 가진 편리한 사용자 경험을 연결해주는 하나의 방법이라고 보는 것이 가장 이해하기 쉽습니다.

웹과 모바일 앱의 경계가 점점 자연스러워지는 지금, PWA는 웹 개발을 공부한다면 한 번쯤 경험해볼 만한 기술입니다.