웹앱 도입 with PWA

사이드 프로젝트 기획 단계에서 웹앱 도입 방안을 주도하여 멤버들에게 지식을 공유한 내용이다.

웹앱

웹앱을 만들려면 2가지 방법이 있습니다.

PWA(웹 기술을 사용하여 앱처럼 동작하는 웹 애플리케이션)

Expo(React Native 사용하여 애플리케이션 개발을 간편하게 만들어주는 개발 도구)

하지만, 앞서 먼저 정해야 할 부분이 있습니다.

구글 플레이 스토어에서 우리 앱을 설치하여 사용할 수 있게 할지 말지 입니다.

1번은 PWA가 호스팅되고 도메인이 설정되면, 사용자는 스마트폰 브라우저에서 해당 도메인을 방문하여 PWA를 접근하고 설치할 수 있습니다. 사용자는 "홈 화면에 추가" 옵션을 선택하여 앱 아이콘을 생성하고, 웹 앱처럼 앱을 사용할 수 있습니다.

2번은 구글 플레이 스토어에서 앱 출시가 가능하지만, 승인 절차를 거쳐야 합니다. 개발자 정책을 따라 앱을 심사하고 승인 여부를 결정합니다. 승인이 허가되면 스토어에서 앱을 설치하여 사용할 수 있습니다.

PWA 장단점

React Native를 사용 안하고 React만으로 웹과 앱을 동시에 지원할 수 있지만, 네이티브 앱과 비교했을 때 일부 기능이 제한될 수 있습니다. 리액트 네이티브를 선택하면 크로스 플랫폼 앱을 개발할 수 있지만, 앱스토어에 제출하거나 네이티브 기능에 대한 접근이 필요한 경우 추가적인 설정과 작업이 필요할 수 있습니다. PWA에서 HTTPS 등록을 권장함으로써, SSL 인증서를 구매하고 설치 해야합니다. 보통 SSL 인증서는 유료로 제공되지만, 무료로 사용할 수 있는 옵션도 있습니다. 아래는 3가지 무료 SSL 인증서 발급기와 호스팅 서비스입니다.

Let's Encrypt

Cloudflare

Netlify

하지만 프로덕션 환경에서 보다 전문적인 보안 요구사항이 필요한 경우 유료 SSL 인증서를 고려하는 것이 좋습니다.

요약하자면

1번 방식은 기존에 React로 앱을 배포하는 방식과 거의 유사하지만, 추가적으로 몇 개 설정 해야합니다.(HTTPS 등록, manifest 설정)

2번 방식은 React로 화면 UI를 그리고, React Native로 Expo CLI를 사용해서 어플 기기에서 위치 정보, 알림 기능이 되도록 구현해야 합니다. 그리고 스토어에서 승인 허가를 받아야 합니다.

웹앱 도입 with PWA

웹앱

PWA 장단점

요약하자면

댓글