요즘 웹의 필수 요구사항이라 언급되는 PWA(Progressive Web Apps)이다. 최근 웹 만큼이나 앱(모바일)의 사용이 크게 증가함으로써 이를 위해 사용되고 있는 기술인 만큼 웹 개발에서 큰 비중을 차지하고 있다. 이제 모든 웹은 PWA로 만들어야한다는 말이 나오고, 앞서 정리한 일렉트론(Electron)의 대체로 많이 언급도 되고 있다.
PWA(Progressive Web Apps) 란 ?
PWA(Progressive Web Apps) 는 Google I/O 2016에서 구글이 새롭게 소개한 기술이다. 기존의 여러 기능과 이론을 합쳐 웹과 앱의 장점을 부각시켰다. PWA는 모바일 앱과 같은 사용자 경험 제공, 모바일 푸시, 오프라인이나 저속의 네트워크에서의 사용, 그리고 HTML, Javascript, CSS를 이용하여 웹과 동일하게 구현할 수 있는게 가장 큰 장점이다. 웹과 동일하게 구현하기 때문에, 상대적으로 제작하기 어려운 네이티브 앱보다 개발이 쉽다. 또한, PWA를 도입하면 사이트 자체의 표시속도 등의 기술적인 개선이 가능하다.
한 마디로, PWA를 사용하면 기존 웹 페이지를 모바일 앱처럼 구현 및 사용 가능하다.
PWA 장점 정리
✔ HTML, Javascript, CSS를 사용하여 앱(웹)을 만들 수 있다.
✔ PWA는 빠르고, 가볍우며, 부드럽다.
✔ 오프라인에서도 작동한다.
✔ Google Play Store, App Store 등 앱을 출시하기 위한 프로세스를 거치지 않아도 된다.
✔ 반응형(responsive)이기 때문에 다양한 화면 크기에도 상관이 없다.
✔ 검색엔진을 통해서 찾을 수 있다.
✔ 푸시 알림을 지원한다.
PWA vs Native App
일반적으로 애플의 앱스토어나 구글의 플레이스토어에서 다운로드할 수 있는 네이티브 앱은 일반적으로 해당 플랫폼에 맞는 언어로 작성된다. iOS의 앱들은 스위프트, 안드로이드는 자바를 기반으로 한다. 원하는 플랫폼에서 실행되는 앱을 만들기 위해서는 플랫폼에 맞춰 관련된 기술도 파악해야 한다. 여러 모바일 환경에 대해서 완벽히 동작하는 앱을 만드려면 각각 환경에 필요한 기술들을 알고 있어야만 한다. 결론적으로 하나의 앱을 모든 앱스토어에 출시한다는 것은 쉬운 일이 아니다.
iOS, 안드로이드에서 모두 실행되는 앱을 개발하는 방법에 대표적인 것으로 React 라이브러리를 이용한 React-Native, C언어 기반으로 제작할 수 있는 Flutter, 그리고 본 포스팅의 주제인 PWA(Progressive Web Apps) 이다. PWA는 홈 화면에 저장하면 브라우저에서 실행되며, 네이티브 앱처럼 동작한다. 그리고 보안상의 이유로 브라우저가 접근하지 못하는 파일 시스템에도 접근할 수 있습니다. PWA를 사용해 완벽히 웹을 구성한다면, 사용자들은 자신들이 웹 기반의 앱을 사용하고 있는 것인지, 아니면 네이티브 앱을 사용하고 있는 것인지를 구분하기 힘들 정도일 것이다.
하지만 PWA는 아직 한계가 있다. iOS의 경우, PWA에 필요한 기술들을 사파리(Safari) 브라우저가 지원하지 않는 경우가 많다고 한다.
PWA를 사용하기 위해서...
보안 연결(HTTPS): PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 합니다. 보안상의 이유 뿐만 아니라, 사용자 신뢰를 위해서도 중요한 부분이다.
서비스 작업자(service worker): 서비스 작업자는 백그라운드에서 실행되는 스크립트이다. 이 서비스 작업자 덕에 오프라인 환경에서도 웹페이지를 볼 수 있다. 서비스 작업자는 네트워크와 관련된 요청의 처리를 도와주기 때문에, 사용자는 걱정 없이 복잡한 작업을 수행할 수 있다.
매니페스트 파일(manifest file, 설정 파일): 이것은 JSON 형식의 파일이며, PWA가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있다. 여기에서는 PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있다.
PWA 개념과 적용 방법의 좋은 설명을 해주는 youtube 영상 하나를 추천한다.
https://www.youtube.com/watch?v=FEBkne7Nyu4&t=14s
