[IT] PWA(Progressive Web App) 기술 알아보기

호기심(Curiosity) : 무언가를 알거나 배우고 싶은 강한 욕구

PWA 정의와 구성, 장단점, 배포 환경 알기

배경

업무로 운영하고 있는 사이트는 반응형 웹 사이트를 기반으로 하이브리드 앱을 만들어 구글 플레이와 앱 스토어에 배포되어 있습니다. 사용하는 하이브리드 프레임워크는 아파치 코도바를 사용하고 있습니다. 

 

코도바 프레임워크를 살펴보면 개발 환경만 잘 구축되어 있다면(mac, android studio 등), 다양한 코도바 플러그인 등을 사용하여 쉽게 다양한 서비스를 구현할 수 있을 것 같은 흥미가 생겨서 해보고 싶어 졌습니다.

 

그런데, 네이티브 앱의 기능을 많지 않고 모바일 웹 사이트로 이루어지는데 하이브리드 앱에 대한 운영 유지가 과연 효율적인가에 대한 논의가 이루어졌습니다.

 

유지보수를 진행하는 개발자들도 모두 웹 개발자이며, 모바일 하이브리드 프레임워크의 약간의 수정을 위해서 외주 인력 구인과 작지 않은 금액을 지불해야하는 단점을 계속 안고 있어야 할까? 하는 논의가 이루어졌습니다. 그러면서 PWA 도입에 관한 관심이 많아졌습니다.

하이브리드앱

모바일 웹 사이트를 네이티브 앱 안으로 임베드하며, 아파치 코도바와 Ionic 또는 Appcelerator Titanium과 같은 하이브리드 프레임워크를 사용할 수 있습니다. 네이티브 앱의 특성을 그대로 유지하면서 웹 기술을 사용하여 개발할 수 있습니다.

 

아파치 코도바

소프트웨어 프로그래머들이 오브젝티브-C처럼 기기에 특화된 언어들 대신 자바스크립트, HTML5, CSS3을 이용하여 모바일 기기를 위한 응용 프로그램들을 만들 수 있게 하는 모바일 개발 프레임워크입니다. 

모든 레이아웃 렌더링이 플랫폼의 네이티브 UI 프레임워크가 아닌 웹 뷰를 통해 수행되며 패키지화되면서 네이티브 기기 API에 접근할 수 있습니다.

PWA란

PWA(Progressive Web Applications)는 웹을 통해 전달되는 응용 소프트웨어의 일종으로 HTML, CSS, Javascript를 포함하는 일반 웹 기술들을 사용하여 만드는 앱입니다.

 

표준을 준수하는 브라우저를 사용한다면, 어떠한 플랫폼에서라도 동작하도록 설계되었습니다. 오프라인 작업, 푸시 알림, 장치 하드웨어 접근 등 네이티브 앱과 유사한 사용자 경험을 이끌어 낼 수 있는 기능을 지원하고 있습니다.

 

PWA는 웹 애플리케이션이기에 애플 앱 스토어나 구글 플레이에서 앱을 설치하지 않아도 모바일 브라우저에서 설치할 수 있습니다. 개발 입장에서는 별도의 빌드나 배포 과정이 필요 없어집니다. 

 

PWA 구성하기

• HTTPS
  PWA는 신뢰할 수 있는 연결 상태에서만 동작합니다. 그렇기때문에 보안 연결을 통한 서비스 제공은 필수입니다.
  
  
• Service Worker
  서비스 작업자인데, 백그라운드에서 실행되는 스크립트를 의미합니다. 간단하게 구현할 수 있는 건 오프라인에 대한 작업을 설정할 수 있습니다.
  
  
• manifest file
  JSON 파일이며 PWA가 표시되고 이루어지고 기능하는 방식에 대한 정보들이 포함되어 있는 파일입니다. 앱을 설치할 때 아이콘 등, 여러 가지 설정 정보를 manifest.json 에 작성합니다.

* 여러 가지 아이콘 사이즈들을 준비하는 것이 좋습니다.

PWA의 단점

PWA는 결국은 웹 기술입니다. 네이티브 앱의 인터페이스를 사용할 수 없다는 한계를 가지고 있습니다. 일부 기능은 지원하고 있지만 앞으로 얼만큼 네이티브 API를 지원할 지는 아직 알 수가 없습니다.

---

iOS에서는 푸시 알림 기능이 지원되지 않고 있었는데 iOS 16.4 에서 PWA 푸시 알림 기능을 지원한다고 발표하였습니다. 안드로이드 경우 처음 모바일 웹 사이트에 접속할 경우 Install 에 대한 메시지를 볼 수 있지만, iOS 경우에는 사용자가 ㅈ기접 사파리 브라우저에서 책갈피, 홈 추가를 하는 방법 말고는 설치할 수 있는 방법이 없습니다.

 

iOS 사용자 경우 모바일 웹 사이트를 사파리 브라우저에서 이미 추가하여 많이 사용하고 있는데, 이와 같은 추가 방법과 PWA 의 다른 점은 전자는 주소창이 보이지만 PWA 설치하는 책갈피 추가는 주소창이 안 보여 네이티브 앱 같은 환경을 보여줍니다.

---

운영하고 있는 비지니스 스케일에 따라서 PWA 도입할지 하이브리드 앱을 유지할지 네이티브 앱을 운영할지 계속해서 논의해야 합니다. 완벽하게 네이티브 앱을 대체할 수 없습니다.

구글 플레이 및 애플 앱 스토어 배포

PWA로 만든 후 패키지화하여 디지털 배급 시스템에 올리는 방법이 있습니다. PWA가 디지털 배급 시스템의 앱 다운로드, 인앱결제 수수료 등 수익 구조에 위협이 되는 요소이기 때문에, 디지털 배급 시스템에 심사가 통과될지 안될지는 알 수 없는 부분입니다. 

iOS 경우에는 Xcode가 설치된 Mac 장비가 필수 준비물입니다.

PWA 패키지 만드는 것을 도와주는 사이트에서도 패키지화와 배포하는 법은 잘 알려주고 있습니다.

 

https://www.pwabuilder.com/

PWABuilder

https://docs.pwabuilder.com/#/builder/app-store

PWABuilder Suite Documentation

마무리

모바일 애플리케이션 운영 환경은 다양하다는 것을 좀 더 알게되었습니다. 운영 요소와 비즈니스에 필요한 주요 기능 분석으로 최적의 의사결정이 아주 중요하다는 것도 알겠습니다. 

 

알아보기 전에 PWA는 SPA 프레임워크에서나 가능할 수 있는 기술인 줄 알았는데, 생각보다 필요 구성 요건이 낡은 프레임워크 웹에서도 간단하게 적용할 수 있다는 점도 알게 되어 즐겁습니다.

 

간단하게 ASP.NET Framework - Web Forms와 IIS에서 PWA가 되도록 설정했는데, 다음 포스팅에서는 이 부분을 더 자세하게 알아보려고 합니다.

참고자료
https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98 https://ko.wikipedia.org/wiki/%EC%95%84%ED%8C%8C%EC%B9%98_%EC%BD%94%EB%8F%84%EB%B0%94 https://blog.wishket.com/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C-%EC%9B%B9-%EC%95%B1pwa%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80/
https://web.dev/progressive-web-apps/
https://namu.wiki/w/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C%20%EC%9B%B9%20%EC%95%B1
https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Introduction