PWA(프로그래시브 웹 앱)

📕0. 글을 쓰기에 앞서

: SSAFY 공통, 특화 프로젝트 그리고 신한은행에서 진행한 해커톤 대회.

무려 3번의 프로젝트에서 모두 PWA를 사용했기 때문에 한 번쯤은 글로 정리해보고 싶었다.

 

 

📕1. PWA, 프로그래시브 웹 앱이란?

: HTML, CSS, 자바스크립트(JavaScript)와 같은 웹 기술로 만드는 앱

 

📕2. PWA를 쓰는 이유

•  네이티브 언어를 따로 배울 필요 없이 기존에 사용하던 언어로 개발 가능.

 : 어플을 만들기 위해서 안드로이드는 코틀린, ios는 스위프트라는 다른 언어를 배워야 하지만,

   PWA는 기존에 사용하던 언어로 개발이 가능하다는 장점이 있음.

•  다양한 앱스토어에 출시하기 위해서 복잡한 프로세스를 거치지 않아도 된다.

: 이 점에서 구글이나 애플에게 앱 중개 수수료를 지불하지 않아도 된다.

  대신에 PWA를 설치하는 것을 유도하는 프로세스가 별도로 필요함.

•  PWA는 기본적으로 반응형(responsive)이기 때문에, 다양한 화면 크기에도 잘 동작함.

 

•  일반적인 웹사이트와는 달리, 오프라인에서도 작동한다. ( 캐싱 기능을 이용하여 )

•  PWA는 검색엔진을 통해서 찾을 수 있다.

(앱스토어보다는 검색엔진을 사용하는 사람들이 훨씬 더 많다. 또한 앱스토어를 통해서도 PWA를 배포할 수 있다.)

•  푸시 알림 사용이 가능하다.

 : 실제 프로젝트에서도 FCM(Firebase Cloud Messaging)을 사용해 푸시 알림을 구현했고

   이를 모바일 기기에서 실행시켰을 때 이질감을 전혀 느끼지 못했음.

 

• 블루투스 연결과 같은 네이티브 앱의 기술들을 사용할 수 있음.

 

📕3. 내가 생각하는 PWA의 단점

• 기본적으로 웹과 모바일 기기에서 모두 동작할 수 있기 때문에, 일일이 반응형을 구현하는 것은 상당히 어렵고 번거로운 일.

 

• PWA의 성능이 좋다곤 하지만, 네이티브 언어(코틀린, 스위프트)로 만들어진 앱보다는 한참 떨어지는 듯하다. 내가 구현한 앱들도 웹에선 빠르게 동작해도 모바일 기기에서 설치해서 사용했을 때는 UX를 떨어뜨릴 정도의 버벅거림이 존재했다. 

👉 그래서 이번 기회에 코틀린을 배워보고 싶다는 생각이 들었다. 반응형도 귀찮고, 성능도 더 좋다고 하니..

 

• 모바일 화면에 걸맞는 동적인 UI를 찾기가 어려웠다. 하단바를 기준으로 리액트 네이티브나 코틀린 같은 경우는 인터넷에서 관련 소스를 찾기가 상대적으로 수월했지만, PWA로 앱을 만드는 경우는 딱 맞는 것을 찾기가 어려웠다.

 

📕4. PWA를 사용하며 느낀 점

• 리액트만 다룰 줄 아는 내가 모바일에서 동작하는 앱을 만든다는 게 상당히 재밌는 경험이었다. 내가 만든 결과물을 서버로 배포했을 때, 내가 사용하는 핸드폰에서도 실행시킬 수 있다는 게 되게 신선한 경험이었고 보다 많은 성취감을 느낄 수 있었다. 덕분에 네이티브 앱에 대한 관심도 생긴 계기가 되었다.

 

• 내가 만든 프로젝트들이 핸드폰의 아이콘으로 떠있는 모습을 보면 엄청 뿌듯하다.

 

• 그렇지만, 웹과 앱 모두의 반응형을 구현하는 것은 상당히 번거로운 일이기 때문에 이제는 네이티브 앱을 만들어봐야 겠다는 다짐을 했다.

 

• 반응형을 구현하는 것 외에는 난이도가 쉬운 편이다.

  초기 세팅도 create-react-app할 때, template만 적용해주면 끝나기 때문에 러닝 커브가 매우 낮은 편이라고 생각된다.

  다만, 아이폰을 위해 추가적으로 세팅해야하는 점이 있다던지, 화면 배율을 막아야 한다던지 등 개발하면서 직접 맞닥뜨    려야 알게 되는 부분들이 있는 점도 존재하기는 한다.

 

• PWA를 3번이나 사용하며 얻은 팁들은 따로 정리해서 나중에 추가적으로 포스팅 할 예정이다.

가운데 둘, 내 새끼들..