부록. 지금 당장 실무에서 써먹는 Vue.js - 4

 

부록 - 4

 

 

 

---

Tip 4. 뷰로 프로그레시브 웹 앱을 개발하려면 어떻게 시작해야 하죠?

• 요즘 프로그레시브 웹 앱(PWA, Progressive Web App)이라는 단어가 업계에 심심치 않게 들린다. 현장 실무자라면 그리고 웹 트렌드를 쫓고 있는 분이라면 최소한 한 번쯤은 들어봤을 법한 용어이다. 만약 이제 막 뷰로 웹 앱을 만들기 시작했는데, 갑자기 팀장님 혹은 대표님이 '우리 프로그레시브 웹 앱으로 한번 만들어 볼까요?'라고 하면 어떻게 하겠습니까? 프로그레시브 웹 앱이 뭔지도 모르는 상황에서는 무엇부터 시작해야 할지 막막할 것이다. 이 코너에서는 프로그레시브 웹 앱이 뭔지 그리고 뷰로 어떻게 프로그레시브 웹 앱을 개발할 수 있는지 가볍게 살펴보자.

 

<프로그레시브 웹 앱이란?>

• 프로그레시브 웹 앱은 2015년 구글에서 사용하기 시작한 새로운 웹 용어이다.
• 구글의 공식 웹 기술 문서에는 다음과 같이 정의되어 있다.
• '웹에 놀라운 사용자 경험을 제공하는 새로운 방법(A new way to deliver amazing user experiences on the web)'
• 이 말을 좀 더 이해하기 쉽게 풀어서 설명하면 '사용자에게 편의성을 제공하기 위해 빠른 성능과 애플리케이션 아이콘, 애플리케이션 설치, 푸시 알람 기능을 제공하는 웹 앱'이라고 할 수 있다.

 

• 무슨 말인지 잘 이해되지 않는가? 아래 그림을 함께 살펴보자.

 

프로그레시브 웹 앱 특징

• 위의 크림은 프로그레시브 웹 앱의 전형적인 특징을 나타내는 4가지 화면이다.
• 첫 번째 화면은 포켓몬 도감을 확인할 수 있는 웹 사이트에 들어갔을 때, 사용자가 해당 웹 사이트를 다시 편하게 방문할 수 있도록 웹 앱 설치 배너를 표시하는 그림이다. 이 웹 앱 설치 배너를 클릭하면 두 번째 화면처럼 바탕화면에 애플리케이션 아이콘이 설치된다. 그리고 애플리케이션 아이콘을 클릭하여 프로그레시브 웹 앱을 시작하면 세 번째 화면처럼 모바일 앱 느낌의 시작화면(launch screen)이 나온다. 웹 앱을 브라우저에 나타낼 때와는 전혀 다른 모습니다. 그렇게 실행된 웹 앱을 살펴보면(네 번째 화면) 상단에 브라우저 주소 창이 없어 모바일 앱 같은 느낌을 준다.

 

• 이처럼 기존의 브라우저에서 웹 앱을 나타내는 방식에서 한 걸음 나아가 사용자들에게 편의성과 접근성을 제공하는 웹 앱이 바로 프로그레시브 웹 앱니다.

 

반응형

 

<뷰로 어떻게 프로그레시브 웹 앱을 구현할 수 있을까?>

• 일단 뷰로 프로그레시브 웹 앱을 개발하려면 뷰를 알기 전에 프로그레시브 웹 앱을 구현할 줄 알아야 한다.
• 그러려면 웹 앱 매니페스트(web app manifest) 파일과 서비스 워커(service worker)라는 상당히 큰 주제들을 공부해야 한다. 이 주제만으로도 팩 한 권의 분량이다. 그런데 다행히 뷰 CLI에서 프로그레시브 웹 앱을 잘 몰라도 뷰와 프로그레시브 웹으로 구성된 프로젝트를 생성할 수 있는 프로젝트 템플릿을 제공한다. 앞서 5장 뷰 CLI에서 소개했던 vue init pwa 옵션이다.

 

• 그럼 뷰 CLI를 이용하여 뷰와 프로그레시브 웹 앱 프로젝트를 구성해 보자. 먼저 편한 위치에 빈 폴더를 하나 생성한다. 해당 폴더 위치에서 명령 실행 프롬프트 창을 열고 다음과 같이 입력한다.

 

폴더를 만들고 뷰 프로그레시브 웹 앱 프로젝트를 생성하는 명령어

• 새로운 폴더를 생성하고, 해당 폴더를 이동한 후 vue init pwa 명령어를 이용하여 프로그레시브 웹 앱 구조의 뷰 프로젝트를 생성한다.

 

• 프로젝트를 생성하고 나면 webpack-simple 프로젝트와 마찬가지로 프로젝트 구성 관련 질문들이 나온다. 프로젝트를 생성할 위치, 이름, 정보, 제작자, 빌드 방식 등과 같은 일반적인 질문과 함께 뷰 라우터, 문법 검사, 테스트 라이브러리 등의 애플리케이션 동작과 관련된 세부적인 질문들이 표시된다. pwa 프로젝트는 webpack-simple이 아닌 webpack 프로젝트를 기반으로 만들어졌기 때문에 한두 가지를 제외하고는 webpack 프로젝트가 생성될 때 동일한 질문이 표시된다.

 

• 프로젝트 정보와 관련된 일반적인 질문들은 최대한 기본 값을 활용하고, 추가 라이브러리는 설치하지 않는 방향으로 질문에 답한다. 그런 다음 npm install을 이용해 package.json 파일에 설정된 라이브러리를 설치한다.

 

npm install 명령어를 이용해 관련 라이브러리를 설치한 화면

 

• 이제 npm run dev 명령어를 입력해 프로젝트를 실행하면 아래와 같은 화면이 나온다.

 

pwa 프로젝트 시작 화면

 

• 이렇게 해서 뷰로 프로그레시브 웹 앱을 개발하기 위한 기본 환경 구성을 마쳤다.
• 이제부터는 여러분의 몫이다.
• 아래에 안내한 자료를 참고하여 멋진 프로그레시브 웹 앱을 만들어 보자.
  • 프로그레시브 웹 앱 공식 문서 : https://web.dev/progressive-web-apps/

프로그레시브 웹 앱  |  web.dev

 

 

 

---

해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---