Jettabus(제타버스) 런칭
PWA Installer
안녕하세요.
개발자 데이비드입니다.
정말 오래간만에 월간 소프트웨어에 공지 드릴 만한 플랫폼을 출시해서 소개드리고자 이렇게 포스팅합니다. ^^
최근 들어 미국 쪽 특히 구글 패밀리 사이트(Gmail, 유튜브, Google cloud 등등)에서 이 기술이 접목되고 있습니다.
두구두구~~~~~
뭐냐면 바로 PWA(Progressive Web App)이라는 기술입니다.
바로 예제를 보여 드릴게요.
아래 사이트는 유튜브 사이트입니다.
크롬 브라우저에서 보면 아래와 같은 아주 조그마한 아이콘이 활성화되어 있습니다.
이 아이콘을 클릭하면 아래와 같이 PC에 앱을 설치하겠냐 라는 팝업이 뜨게 됩니다.
여기서 설치 버튼을 클릭하면 앱스토어로 이동하는 게 아니라 해당 웹이 앱처럼 바로 PC에 설치됩니다.
신박하쥬~~ ^^
좀 더 쉽게 말하자면 홈 화면에 추가라고 보시면 될 듯합니다.
근데 기존 홈 화면에 추가 기능은 그냥 바로가기가 추가되는 거라 해당 아이콘을 클릭하면
브라우저가 열리면서 해당 사이트로 이동을 하게 되는데요.
PWA 형태로 만든 웹은 크롬 브라우저에서 설치 기능을 제공해서 아래와 같이 앱 형태처럼
브라우저가 열리지 않고 일종의 해당 브라우저를 머금고 앱처럼 띄운 형태로 제공이 된다고 보시면 될 것 같습니다.
제가 사용하는 PC는 맥이라서 맥 화면에서 PWA웹을 설치하고 실행한 화면을 캡처해서 보여드립니다.
앱이랑 별반 차이가 없어 보이죠?
자 그러면 본인 웹사이트에 PWA라는 기술을 접목하기 어렵나?
코드 몇 줄만 추가하면 끝 ^^
참으로 쉽쥬..
근데 이것도 일종의 앱이라서. manifest파일(디바이스별 아이콘 등 설치 관련 정보)을 만드셔야 합니다.
요건 별도 기술 문서를 참고하시면 될듯 합니다유.
여기서 제가 말씀드리고 싶은 점은 위와 같은 액션을 모바일에서도 할 수 있다 라는 거 인데요.
안드로이드 크롬 브라우저에서 PWA형태로 만든 웹은 아래와 같은 설치 메뉴가 추가가 됩니다.
자 그럼 여기서 의문.
이렇게 편리한걸 그럼 대 놓고 해당 사이트 진입할 때 설치 창을 자동으로 띄워서 사용자가 설치하게 하면 되지 않느냐?라는 생각을 할 수 있겠는데요.
여기서 애플과 구글의 딜레마입니다.
신 기술이라 구글이 점점 도입을 하고는 있지만
이 기술이 정말 활성화가 되면 기존 구글 플레이 스토어 나 애플 앱스토어의 존폐 위기가 오기 때문인 거죠
근데 개발자들 입장에서는 기존 앱스토어 배포 기반한 앱 개발에 대한 피로감이 극에 달하고 있어서
아무래도 머지않아 모든 웹 사이트는 PWA형태로 넘어오지 않을까 합니다.
그럼 아이폰도 크롬 브라우저에서 저런 메뉴가 보이느냐?
노노
우리의 애플은 아직도 걱정이 많은지 안드로이드처럼 바로 메뉴를 보이게 안 하고
아주아주 불편하게 설치할 수 있는 메뉴를 제공합니다.
첫째, 우선 아이폰 내 사파리 브라우저에서만 가능
둘째, 아래 빨간 영역 버튼을 클릭함
셋째, 클릭을 하면 메뉴에서 "Add to Home Screen" | "홈 화면에 추가"를 클릭해주시면 바로 앱처럼 설치가 됩니다.
그 다음에 "Add" | "추가" 버튼을 클릭 해줍니다.
근데..
도대체 이걸 하기 위해 몇단계를 거친건지...
엄청 불편하쥬 ㅋㅋ
굳이 이렇게 까지 하면서 설치하느니 그냥 앱스토에서 검색해서 설치해야지 라는 생각이 바로 드시겠죠?
아마 이게 애플이나 구글의 의도가 아닐까 합니다.
앱스토어 붕괴를 막기 위해..
그럼 개발자들은 이런 신박한 PWA기술을 모른 체 하고 그냥 앱을 개발해야 할까요?
Cost도 많이 들고
IOS, Android각각 개발해야 되는데
그냥 PWA 웹으로 하나만 만들고 쉽게 설치할 수 있는 방법은 없을까?
그래서 Jettabus(제타버스)를 출시했습니다.
현재는 해외(미국과 인도) 위주로 마케팅을 하고 있는 중입니다.
자, 그럼 Jettabus가 뭐냐.
모바일, PC에서 PWA 형태로 만든 웹에 사용자가 진입할 때 설치 창을 바로 띄우는 기술입니다.
자 그럼 어떻게 보이느냐
Jettabus와 연동을 하면 아래와 같이 설치 창이 보이게 됩니다. (→ 아래 부연 설명을 하겠지만 요 기능은 사용자가 설정하는 게 아니라 개발자가 설정해줘야 하는 거입니다.. 혹시나 해서 ^^)
이렇게 되면 마치 사용자가 앱과 같은 형태로 플로우가 흘러가겠죠?
굳이 브라우저 설정 버튼 혹은 저 작은 아이콘을 클릭하지 않아도
해당 사이트는 설치형 웹이다라는걸 사용자에게 인지를 시킬 수 있고 설치 버튼을 사용자가 누르면 설치를 하게 되는 거죠.
그럼 개발자들이 Jettabus를 연동하는 방법은 어렵냐?
아주 아주 간단합니다.
Jettabus에서 본인 PWA 기능이 포함된 사이트의 설치 정보를 입력하고 코드 생성 버튼을 클릭하면 끝.
코드 생성 버튼을 클릭하면 바로 아래와 같은 프로젝트별 삽입형 Javascript 코드를 생성해줍니다.
이 코드만 본인 사이트 index.html <head></head> tag 안에 넣고 배포해주면 끝~
마치 Goolge tag처럼
참 쉽쥬 ^^
단, 애플은 아직 코드 기반한 설치가 아닌 무조건 사용자가 메뉴에서 설치하게 끔만 제공을 해서 현재는 아래와 같이 가이드 정보 팝업만 뜨게 제공을 했습니다.
기사를 보니 2026년까지 PWA 기술을 구글처럼 도입하겠다라고 하니 그전까지만 가이드 정보대로 설치를 하는 수밖에 없을 것 같습니다.
근데 이마저도 사용자가 모르고 있으면 설치를 어떻게 해야 하는지 인지를 못하니 조금은 도움이 되겠죠 ^^
자 그럼 Jettabus는 설치 형태 기능만 제공하고 끝이냐?
노노 아래와 같은 기능을 제공합니다.
O. Error Detect : Angular, Vue.js, React.js를 사용한 개발자는 알겠지만 배포를 하고 나서 아주 드물게 아래와 같은 에러가 발생합니다.
여러 가지 이유는 있고 해결 솔류션도 있기는 하지만 결론은 새로 고침을 다시 해라라는 게 대부분은 최종 솔류션(?) 이다 보니 여간 귀찮은 게 아니거든요.
보통 아래와 같은 패턴으로 Chuck 에러가 발생합니다.
Unexpected token '<' ~
Uncaught ChunkLoadError: ~
그래서 Jettabus에서는 해당 에러를 인지해서(이 에러는 새로 배포된 경우에서만 발생을 함) 사용자들에게 변경된 내용이 있으니 업데이트하세요 라는 팝업을 띄우는 편의 기능을 제공합니다.
O. Version History : PWA 형태의 웹은 기본적으로 serviceWorker를 사용하게 됩니다.
serviceWorker라는 게 새로 배포된 소스가 있다면 인지를 해서 사용자가 사이트를 사용하는 중에 변경된 소스를 받아 놓고 소스를 다 받으면 그때 사용자가 새로 고침 하세요 라고 인지를 시키거나 아니면 이전 캐시 정보를 가지고 계속 사용할 수도 있는데요.
이게 생각만큼 깔끔하게 작동을 안 하는 경우가 종종 있어서 (특히 모바일 브라우저에서는 더 심함)
그래서 가장 확실한 건 변경된 소스가 있고 소스를 다 받았으면 새로 고침 하는 방법이 가장 확실한데요.
이렇게 하려면 개발자가 일일이 신경 써줘야 되는 부분이 없지 않아 있어서 이런 편의를 주고자
웹 소스를 Deploy 하고 나서 Jettabus 아래 Version 정보를 추가하면 serviceWorker가 제대로 정보를 못 가져왔든 오류가 났든 위에서 보셨던 업데이트 팝업을 띄워서 사용자가 새로 고침 할 수 있게 제공을 합니다.
변경된 내역과 함께.. 마침 앱스토어처럼 ^^
O. Dashboard : 얼마나 많은 사람들이 설치를 했는지, 무시를 했는지 혹은 업데이트를 했는지 수치를 보여줍니다.
자 여기까지가 Jettabus에 대한 얘기였습니다.
처음 시작도 나중도 다 무료가 될거니 걱정안하셔도 될듯 합니다.
단, 나중에 도입할 In-App 메시지만 비용이 들 수밖에 없는 구조가 되지 않을까 합니다.
아무쪼록 많은 풀스텍 개발자들에 도움이 되었으면 합니다.
그럼. ~~
