현재 진행중인 졸업 프로젝트의 서비스는 휴대폰에서 제공이 되도록 할 예정이다.
처음엔 웹을 그대로 모바일 환경에 띄울 예정이었으나, Web app은 어떻겠냐는 제안이 들어왔다.
생각보다 어렵지 않다는 말에 수락을 했고, 사전 조사를 진행하게 되었다.
Web app이란?
먼저 Web app이란, 간단히 말해 웹 기술로 구현한 앱을 말한다.
HTML, CSS, JS 등 웹 표준을 사용해서 앱처럼 환경을 조성하여 서비스를 제공한다.
실제로는 웹이기 때문에, 주소창도 똑같이 존재하지만 앱을 사용하는 것 같은 효과를 준다.
아래와 같은 장단점이 존재한다.
- 장점
- 웹페이지만 제작하면 완성이 되기 때문에, 시간과 비용이 적게 든다.
- PC, 스마트폰 상관없이 모든 기기에서 같은 페이지를 볼 수 있다.
- 별도의 설치가 따로 필요 없어, 유지 보수가 쉽다.
- 단점
- 웹용 언어로만 제작하기 때문에, 카메라, 음성 검색 같은 기능을 사용할 수 없다.
- 앱을 다운로드해서 실행하는 것이 아니기 때문에, 주소를 입력해서 들어가야 한다.
- App store에서는 거절 대상이다.
실제 서비스 사례로는 우리은행과 신한은행을 예시로 들 수 있으며,
네이버, 다음, 구글과 같은 검색 엔진들도 웹 앱 환경을 제공하고 있다.
PWA란?
PWA(Progressive Web App)이란, 더욱 발전된 Web app을 의미한다.
Web app과 개발 과정은 동일하지만, 더욱 Native app에 가까운 기능을 제공할 수 있다.
실제 주소를 입력해서 들어가야 했던 Web app과 달리, 실제 app처럼 설치가 가능하다.
또한 개발자 입장에서 Android / iOS 지식 없이도 실제 app 처럼 서비스를 제공하기 때문에,
매우 강력한 서비스 플랫폼이라고 볼 수 있다.
PWA는 아래와 같은 조건을 만족한다.
- 사용자의 기기에 설치가 가능할 것
- 이는 홈 스크린 아이콘을 통해 접근이 가능함을 의미한다.
- 또한 웹 브라우저가 아닌 독립적인 창이 실행됨을 의미한다.
- 오프라인, 저속도 환경에서도 동작할 것
- 정적 리소스를 캐싱할 수 있음을 의미한다.
- 백그라운드 동기화가 가능할 것
- 사용자가 앱을 사용하지 않을 떄에도 동작하도록 한다.
- 사용자의 재참여를 유도하기 위한 푸시 알림이 가능할 것
- HTTPS 프로토콜을 통해 제공할 것
- 보안, 안정성에 대한 문제이다.
대표적인 PWA로 Twitter가 있다.
실제로 웹 브라우저를 통해 접속한 뒤, 홈 화면에 만들기 기능을 통해 설치가 가능하다. (iOS)
트위터 뿐 아니라, 스타벅스, 핀터레스트, 타임즈 등의 다양한 기업들이 해당 방식으로 서비스를 제공하고 있다.
프로젝트에서의 적용
우리는 기본적인 Web app이 아닌, PWA를 제작해 서비스를 제공할 계획이다.
아래와 같은 기본적인 요소들만 충족되면, 간단히 제작할 수 있을 것 같다.
- Web app manifest JSON
- Serviceworker.js
- App 아이콘 이미지 파일 (manifest)
- HTTPS
첫번째, manifest
Manifest 파일이란 앱의 개요, 정보 및 기본 설정을 담은 json 파일이다.
해당 파일을 통해서 브라우저는 해당 프로젝트가 일반 웹이 아닌 PWA임을 알 수 있다.
그럼 어떻게 manifest 파일을 만들 수 있는가?
찾아보니, 인터넷에 많은 사이트에서 manifest 파일을 생성해줌을 확인했다.
그중에 나는 SIMI Cart에서 제공하는 생성기를 사용했다.
아래와 같은 구조로 폴더를 생성했고, manifest 파일을 작성했다.
그 결과로 아래와 같이 브라우저에서 manifest 파일을 잘 인식함을 볼 수 있다.
두번째, service worker
Service worker란, PWA에 있어서 가장 핵심적인 요소라고 볼 수 있다.
웹 브라우저 안에 있지만, 웹 페이지와 분리되어 항상 실행되는 백그라운드 프로그램이다.
즉, 브라우저와 서버 사이에 상태를 감시하며 푸시 알림을 주는 등의 동작을 가능케 하는 요소인데,
바로 일반적인 Web app과 PWA의 차이가 여기서 나온다고 볼 수 있겠다.
그럼 Service worker 파일은 어떻게 만들 수 있을까?
먼저 npm i register-service-worker 명령어를 통해 모듈을 설치해야 한다.
설치를 했다면, src 폴더의 하위에 registerServiceWorker.js 파일을 생성한다.
원래는 @vue/cli-plugin-pwa 명령어를 입력하면 ```service-worker.js``가 자동 생성된다.
하지만 나는 명령어가 듣지 않아, 위와 같이 직접 코드를 작성했다.
위의 코드는 이 블로그를 참고했다.
이후 생성한 파일을 main.js에서 import 해준다.
그럼 아래와 같이 브라우저에서 Service worker가 register됐음을 확인할 수 있다.
마지막, HTTPS
우리는 결국 배포를 해서 핸드폰에서 사용할 수 있도록 서비스를 개발해야 한다.
PWA는 LightHouse 라는 기능 때문에, 반드시 HTTPS 프로토콜을 사용하게 되어있으며,
홈 화면에 추가하기 기능 또한 HTTPS 프로토콜에서만 동작하도록 되어있다.
따라서 우리는 HTTPS 프로토콜을 통해 배포해야만 한다.
나는 무료로 배포 기능을 제공하는 Google Firebase 를 통해 테스트해보려 한다.
Firebase project를 생성하는 과정은 생략하고, 연동하는 과정부터 알아보자.
Vue project에서 npm insatll -g firebase-tools를 통해 먼저 툴을 설치하자.
firebase --version 명령어를 입력하면 잘 설치되었음을 확인할 수 있다.
[사진 첨부]
이후 firebase login 명령어를 통해 구글 계정과 연결한다.
이제 firebase init 을 통해 본격적으로 호스팅을 시작해보자.
아래의 절차들을 거쳐 Firebase 배포를 위한 기초 설정을 진행하자.
위의 두 번째 사진에서 중요한 문제가 발견되었다.
index.html을 덮어쓰기 하니, 내가 만든 application 화면이 출력되지 않았다.
따라서, yes가 아닌 no로 대답해 덮어쓰기를 하지 않아야 한다.
설정이 완료되었으면, 이제 배포를 해서 진짜 dist 폴더를 생성해주자.
npm run build를 진행하면 자동으로 dist 폴더가 생성될 것이다.
[사진 첨부]
이제 firebase deploy 명령어를 통해 진짜 배포를 진행해보자.
아래와 같이 Firebase 홈페이지에서 제대로 배포되었음을 확인할 수 있다.