본문 바로가기

개발몰입과정 개념스터디/4차

PWA란?

PWA란?

프로그레시브 웹 앱(progressive web app)의 줄임말.

웹과 앱의 장점을 결합함.

 

네이티브 앱

  • 느린 네트워크에서도 작동하며, 백그라운드에서 푸시 알람을 보내준다.
  • 카메라, 마이크 등에도 쉽게 접근하여 다양한 기능을 수행할 수 있다.
  • ⇒ Capability(능력)가 뛰어나다라고 할 수 있다.

  • URL을 통한 접근이 간단
  • 설치 과정이 없다.
  • ⇒ Reach(범위)가 넓다라고 할 수 있다.

PWA, 예를 들면?

우리가 온라인에서 볼 수 있는 많은 사이트들도 실제로는 PWA이다. ex) 트위터닷컴(twitter.com)

스마트폰으로 이 사이트에 들어가면, 홈 화면에 트위터닷컴을 추가할 수 있다. 그러고 나서 스마트폰에 저장된 트위터 사이트를 열어 보면, 모양도 네이티브 앱처럼 보이고, 기능도 모두 똑같다. 브라우저 창 같은 건 아무것도 없으며 아이폰이든 안드로이드 스마트폰이든 관계없이, 실행하는 데 있어서는 아무런 차이도 없다. 그냥 로그인을 해서 이용하기만 하면 된다.

iOS, Android의 환경에서 모두 실행되는 앱을 개발하는 대표적인 방법이 바로 프로그레시브 웹 앱(PWA)이다. PWA는 보안상의 이유로 브라우저가 접근하지 못하는 시스템 하드웨어와 소프트웨어에도 접근할 수 있다. 따라서 PWA의 성능이 뛰어나다면, 사용자들은 자신들이 웹 기반의 앱을 사용하고 있는 것인지, 아니면 네이티브 앱을 사용하고 있는 것인지를 구분하지 못할 것이다.

 

웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙

  • 발견 가능, 따라서 컨텐츠를 검색 엔진을 통해 찾을 수 있다.
  • 설치 가능, 따라서 기기의 홈 화면에서 사용할 수 있다.
  • 연결 가능, 따라서 간단하게 URL을 전송해 공유할 수 있다.
  • 네트워크 독립적, 따라서 오프라인이나 불안한 네트워크 연결에서 동작한다.
  • 점진적, 따라서 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있다.
  • 재 참여 가능(Re-engageable), 따라서 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있다.
  • 반응형, 따라서 모든 기기의 화면이나 브라우저에서 사용할 수 있다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
  • 안전, 따라서 여러분과 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전하다.

 


[참고]

https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction

https://altenull.github.io/2018/02/25/프로그레시브-웹-앱-Progressive-Web-Apps-란/

 

 

 

'개발몰입과정 개념스터디 > 4차' 카테고리의 다른 글

CSR, SSR (React, Next.js)  (0) 2022.02.07
Tailwind CSS이란?  (0) 2022.02.05
Styled-Component란?  (0) 2022.02.05
SCSS (CSS Modules)란?  (0) 2022.02.05
SEO와 SSG, 그리고 Gatsby.js  (0) 2022.02.05