Progressive Web App이란? PWA란? 프로그레시브 웹 앱이란?

Progressive Web App이란? PWA란? 

 

브라우저의 성능이 좋아짐에 따라 여러 웹 기술들

또한 발전이 되어가고 있습니다. 

예전에는 항상 정적이었던 웹이 동적으로 상호작용 하기 하고

항상 HTML 파일을 페이지에 맞게 만들어주던 때에서 이제는

라이브러리 혹은 프레임 워크를 통행 SAP로 개발도 가능합니다.

이번 PWA 또한 이러한 기술에 발전에 따라 생겨난 것이라 할 수 있습니다.

그럼 오늘도 전혀 비 전문적이고 간단하게 알아보겠습니다.

 

목차.

1. 브라우저, 웹과 앱.
2. PWA란?
3. Lighthouse.
4. 마치며.

 

1. 브라우저, 웹과 앱.

 

일반 폴더 휴대폰에서 막 피쳐폰이라는 개념이 불어올 때,

그 당시 저는 고등학생이었습니다.

당시 제가 가지고 있었던 휴대폰은 김연아 선수가 광고했던

연아의 햅틱이었습니다. 그 당시만 해도 많은 충격이었죠.

휴대폰이 터치가 되고 인터넷도 사용 가능했기 때문입니다.

그때 당시만해도 휴대폰으로 인터넷을 이용해 이메일을 읽으려면

로그인할 때까지 1분에서 2분은 걸렸던 것 같습니다.

하지만 이제는 그렇지 않죠. 휴대폰의 성능, 컴퓨터의 성능이

발달하면서 자연스럽게 브라우저들도 발전 해왔습니다.

또한 앱을 출시하고 다운로드하면서 웹과 앱의 바람이 불었죠.

지금 현재도 계속해서 성능은 발달되고 있고, 이에 많은 기술들도 

발전해오고 있습니다.

브라우저에서도 웬만한 기술들을 휴대폰에서 동작 가능해진 것이죠.

즉 웹과 앱의 경계가 점차 좁혀지고 있다는 뜻입니다.

제가 이번에 직원들을 위해 개발한 홈페이지 또한 웹앱으로

모바일에서도 모든 동작들을 수행 가능합니다.

하지만 여전히 웹앱과 네이티브 앱의 성능은 차이가 있습니다.

따라서 좀 더 성능을 요하는 프로그램을 개발하시려면 당연히

네이티브 앱을 개발하는 것이 맞습니다.

 

2. PWA란?

PWA란 Progressive Web App의 줄임말입니다.

이는 간단히 말하자면 웹과 앱의 장점들을 두루 살린 것이라고

말할 수 있습니다.

 

예를 들어.

당신은 휴대폰으로 영화표를 예매하고 싶습니다.

 

웹 : 당신은 브라우저를 통해 공식 홈페이지에 접속합니다.

그 뒤 영화를 얘 매 하려니 사실 개봉일은 내일이며 오늘은 예매가 

불가능합니다. 그렇게 당신은 내일을 기약하며 브라우저를 닫습니다.

하지만 이를 까맣게 잊어버리고 다음날 뒤늦게 예약을 하려니

모든 표가 매진이네요... 당신이 푸시 알림을 받을 수 있었다면...

이런 일은 일어나지 않았을 것입니다.

 

앱 : 당신은 이번에 앱을 통해 애매를 하려 합니다.

이번에도 역시 보고자 하는 영화는 내일 개봉이며 내일부터 

예매가 가능합니다. 당신은 이번에 브라우저와 다르게

앱에서 푸시 알림을 설정합니다.

그리고 다음날 까맣게 까먹었던 당신은 제때 울린 푸시 알람으로

예매에 성공합니다.

 

즉 브라우저를 닫는다면 푸시 알림 등을 받기가 힘들어집니다.

단순 이메일을 통해 푸시 알림을 받거나, 홈페이지 내부에서 알림을 받을 순 있습니다.

하지만 앱은 동작하지 않을 때라도 시간에 맞게 푸시 알림을 줄 수 있습니다.

예를 들면 게임을 플레이하고 종료 후 하트가 충전되었다며 게임을 할 수 있다고

뜨는 알람을 말씀드리는 겁니다.

하지만 이러한 PWA을 사용하시면 웹이지만 앱처럼 푸시 알림을 받을 수 있습니다.

이것뿐만 아니라 PWA는 더 많은 장점을 가지고 있습니다.

 

첫째 : 다운로드할 필요가 없습니다. 이는 브라우저를 통해 동작하게 되기에,

따로 앱처럼 다운로드할 필요가 없습니다. 또한 요즘은 브라우저에서 앱처럼

바탕화면에 아이콘을 생성 가능합니다. 

 

둘째 : 오프라인에서도 작동합니다. 우리의 생각대로라면, 인터넷이 없다면

우리는 브라우저에서 에러 화면을 보게 되는 게 정상입니다.

하지만 PWA는 자신이 직접 오프라인에서 작동하게 될 화면과 기능을

유저에게 제공할 수 있습니다. 마치 앱처럼 말이죠.

이처럼 PWA는 아주 강력한 장점들을 가지고 있습니다.

 

이미 많은 홈페이지들이 PWA로 개발되고 있습니다.

기회가 되신다면 꼭 PWA로 개발을 해보시길 권장드립니다.

특히 리액트를 사용하신다면 아주 쉽게 PWA로 홈페이지를 제작 가능합니다.

 

 

3. Lighthouse.

아마 웹 개발자 분이시라면 아무래도 가장 자주 사용하시는 게 크롬이지

않을까 싶습니다. 그리고 누구나 개발자 툴을 사용하기 마련이죠.

이렇게 PAW로 개발을 하셨다면 꼭 개발자 툴에 Lighthouse를 이용해 보세요.

이를 통해 지금 자신이 만든 홈페이지가 정말 PWA인지를 쉽게 파악 가능합니다.

 

4. 마치며.

새롭거나 조금 다른 기술이라고 전혀 겁내거나 막막해하실 필요가 없습니다.

그런 마음가짐으로는 개발자로 일하시기 힘드실지도 모릅니다.

IT기술은 하루가 다르게 발전하고 바뀌기 때문입니다.

지금 사용하는 언어가 몇 년 뒤에는 더 이상 사용되지 않을지도 모르고,

지금 안 배워놓은 언어가 몇 년 뒤 그 분야에 핫한 언어가 될지도 모릅니다.

라이브러리와 프레임워크도 마찬가지입니다.

그때마다 새로 배우는 것에 스트레스받으시고 벅차 하신다면,

개발자라는 직업이 나름 힘들지도 모르겠습니다.

오늘도 모두 건강하시고 항상 도전하시기 바랍니다.

항상 응원하겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.