PWA

July 20, 2022

# PWA란

PWA는 Progressive web applications의 약자로, 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. PWA는 HTML, CSS, 자바스크립트(JavaScript)와 같은 개발자들에게 친숙한 웹 기술로 앱을 만들 수 있습니다.

PWA는 Google I/O 2016에서 미래의 웹 기술로 소개한 개념으로 웹 앱을 마치 네이티브앱스럽게 만들고자하는 방법론입니다. 좀더 자세히 이해하기 위해 기존 모바일 앱 중에서 네이티브앱(Native App), 웹앱(Web App)을 알아봅시다.

트위터(twitter.com)도 PWA입니다. 이 외에도 스타벅스(Starbucks.com), 핀터레스트(Pinterest.com), 워싱턴포스트(Washingtonpost.com), 우버(Uber.com) 등이 있습니다.


# Native App + Web App = PWA

네이티브앱(Native App)은 안드로이드의 플레이 스토어 혹은 ios의 앱 스토어에서 다운받아서 사용하는 앱입니다. 네이티브앱은 각 OS에 최적화되어 동작하며, OS의 자원을 최대한 활용할 수 있습니다. 따라서 더 부드러운 사용자 경험을 제공할 수 있습니다.

웹앱(Web App)은 모바일 기기에 설치된 웹 브라우저를 기반으로 동작하는 앱으로 모바일을 통해 접근한 웹 사이트입니다. 따라서 웹앱은 네이티브앱과는 달리 별도의 설치 없이 사용할 수 있습니다. 또한 웹앱은 검색엔진을 통한 발견이 쉽습니다.

PWA는 네이티브앱과 웹앱의 장점을 결합한 것입니다. 웹기술로 구현하기에 검색이 가능하며 네이티브앱스러운 푸쉬알림(Push Notification), 설치(Install), 오프라인 실행(Offline Access) 등의 기능도 지원합니다.


# PWA 장점

마지막으로 PWA의 장점 몇가지를 살펴보며 글을 마무리하겠습니다.

  • HTTPS 통신으로 제공되므로 기존 웹 대비 안전합니다.
  • 앱스토어를 찾지 않아도 브라우저에서 바로 빠르고 간단히 홈스크린에 앱을 둘 수 있습니다.
  • 일반적인 웹 기술을 활용해서 PWA를 만들 수 있습니다. 또한 개발 비용이 더 저렴합니다.
  • 검색을 통해 발견 가능합니다. 구글, 네이버 등 포털 검색 결과에 노출됩니다.
  • 기본적으로 반응형(responsive)이기 때문에 기기에 따라 레이아웃을 자동으로 조정하는 등 다양한 플랫폼과 여러 기기에서 동일한 사용자 경험(UX)을 제공해줍니다.
  • 연결 독립적(Reliable) 로컬 기기의 캐시를 활용하여 오프라인이나 불안한 네트워크에서도 실행할 수 있습니다.
  • 재참여 가능(Engageble) 브라우저가 닫혀 있더라도 푸쉬 알람(Push Notification)을 보낼 수 있어서 재방문율을 높여줍니다.


참고 : MDN, Wishket


Written by @yunjin cho

넥스트이노베이션의 기술, 문화, 뉴스, 행사 등 최신 소식 및 넥스트이노베이션이 겪은 다양한 경험을 공유합니다.