[TIL] PWA란

https://www.notion.so/PWA-1-84a3c6e825094213b7bd92f2c2522c00

1. PWA란?

2015년에 구글 크롬의 Alex Russell(알렉스 러셀)이 블로그에 포스팅을 하면서 PWA라는 용어가 등장하였으며, 2016년에 열린 'Google I/O 2016'에서 미래의 웹 기술인 PWA가 공식적으로 소개되었습니다.

Progressive Web Apps: Escaping Tabs Without Losing Our Soul - Infrequently Noted

Alex Russell의 블로그 포스팅

미래의 웹 기술로 떠오른 PWA는 무엇일까요? PWA(Progressive Web Application, 프로그레시브 웹 앱)는 웹과 모바일 앱 기술의 장점을 결합한 웹 기술로, 모바일 웹에서 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. 즉, 일반 웹 사이트와 같이 웹에서 실행되지만 앱처럼 사용이 가능합니다.

 

2. 웹 앱과 네이티브 앱, 그리고 PWA

PWA는 웹과 네이티브 앱의 장점을 결합한 웹 기술입니다. 과연 웹과 네이티브 앱의 어떤 장점들이 결합되어 있는지 알아보도록 합시다.

2.1 웹 앱

웹은 URL을 통해 쉽게 접근할 수 있습니다. 따라서 누구든, 어디서나, 그리고 어떤 장치를 사용하던 쉽게 접근할 수 있다는 것이 큰 장점입니다. 또한 별도의 설치가 필요하지 않습니다.

웹 앱(Web Apps)은 HTML, CSS, Javascript 등을 사용해 만들어진 애플리케이션입니다. 모바일 웹과 네이티브 앱을 결합하여, 모바일 웹의 특징과 함께 네이티브 앱의 장점을 갖습니다. 설치 없이 URL을 통해 브라우저로 접근이 가능하고 홈 화면에 바로 가기 아이콘을 추가하여 네이티브 앱처럼 사용할 수 있습니다.

하지만 네트워크가 연결되어 있지 않은 오프라인 상태에서는 사용이 어려우며, 카메라와 같은 하드웨어에 접근할 수 없습니다. 또한 플랫폼 내의 API를 사용할 수 없다는 단점이 있습니다.

2.2 네이티브 앱

네이티브 앱(Native Apps)은 모바일 기기에 최적화된 언어로 개발된 앱입니다. 네이티브 앱은 안드로이드와 ios와 같은 특정 플랫폼을 위해 만들어진 앱을 말하는데, 안드로이드는 Java 또는 Kotlin을 사용하고, ios는 Swift 또는 Object C를 사용하여 앱을 제작합니다.

네이티브 앱은 특정 플랫폼에 최적화되어 있기 때문에 안정적이며 실행 속도가 빠릅니다. 그뿐만 아니라 플랫폼에서 제공하는 다양한 API도 사용이 가능합니다. 또한 네이티브 앱은 네트워크 연결과 관계없이 오프라인에서 사용이 가능하며, 모바일 기기의 카메라와 같은 장치와도 상호작용할 수 있고, 푸시 알림을 수신할 수도 있습니다.

하지만, 플랫폼에 한정적이라는 단점이 있습니다. 각 플랫폼에 맞는 앱을 제작해야 하기 때문에 많은 시간과 비용을 투자해야 하는 어려움이 있습니다.

2.3 PWA

 

위 그래프를 살펴보면 웹 앱은 접근성이 높고, 네이티브 앱은 기능적인 측면이 높게 나타납니다. 그리고 PWA는 그 둘을 모두 포함하는 자리에 위치해 있습니다.

즉, PWA는 웹 앱의 높은 접근성과 네이티브 웹의 기능적인 측면의 장점을 모두 갖는 것을 알 수 있습니다.

Google I/O 2016에서 Web Developer Relation 팀의 Paul이 PWA에 대해서 이렇게 말합니다.

"That app looks like native, I hope it behaves like it." (네이티브 앱과 같이 보이니깐, 실제로도 그렇게 행동하길 바라.)

여기서 말하는 behaves(행동)은 Performance와 Interaction을 합한 것으로, 앱이 어떤 느낌이고 무엇을 할 수 있는지 직관적인 것들을 말합니다. 그럼 PWA가 취해야 할 앱의 기능은 어떤 것이 있을까요?

다음은 PWA의 대표 기능입니다.

• PUSH 알림
• 오프라인 환경
• 홈 화면에 추가

우선 PWA는 사용자가 다시 앱으로 돌아올 수 있도록 큰 역할을 하는 Push 알림 기능을 제공합니다. 또한 오프라인 환경에서도 온라인에서와 동일한 사용자 경험을 제공하며 실제 네이티브 앱처럼 홈 화면에 추가해서 사용할 수 있습니다.

이러한 기능들은 HTTPS를 요구하는데 이는 PWA를 만들기 위한 요건 중 하나입니다. 다음 챕터로 넘어가 계속해서 PWA의 요건에 대해 알아보도록 합시다.

💡 Google I/O ? 2008년에 시작되어 구글이 일 년에 한 번 개최하는 개발자 지향 콘퍼런스로, 구글의 웹, 모바일, 구글 API, 앱 엔진 등 개방형 웹 기술에 대한 심도 있는 세션이 제공됩니다. Google I/O의 I와 O는 "Input/Output"과 "Innovation in the Open"를 의미합니다. (출처 : 위키백과)

2. 웹 앱과 네이티브 앱, 그리고 PWA

PWA는 웹과 네이티브 앱의 장점을 결합한 웹 기술입니다. 과연 웹과 네이티브 앱의 어떤 장점들이 결합되어 있는지 알아보도록 합시다.

2.1 웹 앱

웹은 URL을 통해 쉽게 접근할 수 있습니다. 따라서 누구든, 어디서나, 그리고 어떤 장치를 사용하던 쉽게 접근할 수 있다는 것이 큰 장점입니다. 또한 별도의 설치가 필요하지 않습니다.

웹 앱(Web Apps)은 HTML, CSS, Javascript 등을 사용해 만들어진 애플리케이션입니다. 모바일 웹과 네이티브 앱을 결합하여, 모바일 웹의 특징과 함께 네이티브 앱의 장점을 갖습니다. 설치 없이 URL을 통해 브라우저로 접근이 가능하고 홈 화면에 바로 가기 아이콘을 추가하여 네이티브 앱처럼 사용할 수 있습니다.

하지만 네트워크가 연결되어 있지 않은 오프라인 상태에서는 사용이 어려우며, 카메라와 같은 하드웨어에 접근할 수 없습니다. 또한 플랫폼 내의 API를 사용할 수 없다는 단점이 있습니다.

2.2 네이티브 앱

네이티브 앱(Native Apps)은 모바일 기기에 최적화된 언어로 개발된 앱입니다. 네이티브 앱은 안드로이드와 ios와 같은 특정 플랫폼을 위해 만들어진 앱을 말하는데, 안드로이드는 Java 또는 Kotlin을 사용하고, ios는 Swift 또는 Object C를 사용하여 앱을 제작합니다.

네이티브 앱은 특정 플랫폼에 최적화되어 있기 때문에 안정적이며 실행 속도가 빠릅니다. 그뿐만 아니라 플랫폼에서 제공하는 다양한 API도 사용이 가능합니다. 또한 네이티브 앱은 네트워크 연결과 관계없이 오프라인에서 사용이 가능하며, 모바일 기기의 카메라와 같은 장치와도 상호작용할 수 있고, 푸시 알림을 수신할 수도 있습니다.

하지만, 플랫폼에 한정적이라는 단점이 있습니다. 각 플랫폼에 맞는 앱을 제작해야 하기 때문에 많은 시간과 비용을 투자해야 하는 어려움이 있습니다.

2.3 PWA

위 그래프를 살펴보면 웹 앱은 접근성이 높고, 네이티브 앱은 기능적인 측면이 높게 나타납니다. 그리고 PWA는 그 둘을 모두 포함하는 자리에 위치해 있습니다.

즉, PWA는 웹 앱의 높은 접근성과 네이티브 웹의 기능적인 측면의 장점을 모두 갖는 것을 알 수 있습니다.

Google I/O 2016에서 Web Developer Relation 팀의 Paul이 PWA에 대해서 이렇게 말합니다.

"That app looks like native, I hope it behaves like it." (네이티브 앱과 같이 보이니깐, 실제로도 그렇게 행동하길 바라.)

여기서 말하는 behaves(행동)은 Performance와 Interaction을 합한 것으로, 앱이 어떤 느낌이고 무엇을 할 수 있는지 직관적인 것들을 말합니다. 그럼 PWA가 취해야 할 앱의 기능은 어떤 것이 있을까요?

다음은 PWA의 대표 기능입니다.

• PUSH 알림
• 오프라인 환경
• 홈 화면에 추가

우선 PWA는 사용자가 다시 앱으로 돌아올 수 있도록 큰 역할을 하는 Push 알림 기능을 제공합니다. 또한 오프라인 환경에서도 온라인에서와 동일한 사용자 경험을 제공하며 실제 네이티브 앱처럼 홈 화면에 추가해서 사용할 수 있습니다.

이러한 기능들은 HTTPS를 요구하는데 이는 PWA를 만들기 위한 요건 중 하나입니다. 다음 챕터로 넘어가 계속해서 PWA의 요건에 대해 알아보도록 합시다.