📌 PWA(Progressive Web App)

---

주제: PWA(Progressive Web App)

PWA(Progressive Web App)이란 무엇인가?

프로그레시브 웹 앱(Progressive Web Apps)은 웹 앱과 네이티브 앱의 장점을 모두 제공하는, 보다 발전된 형태의 웹 애플리케이션을 어떻게 개발할 수 있는가에 대한 논의이자 개발 철학을 말한다.

PWA에 대한 첫 언급은 Google I/O 2016 컨퍼러스였으며, 2007년 아이폰 런칭 당시 스티브 잡스는 지금의 PWA와 비슷한 개념이 아이폰 앱의 표준이 될 것이라고 발표했었다.

어떤 것을 PWA라고 하나요?

“어떤 웹 사이트가 PWA다” 라고 명확하게 규정할 수는 없다. PWA는 기술이 아니다.
웹과 네이티브 앱의 이점을 어떻게 갖도록 웹 애플리케이션을 개발할지에 대한 것이기 때문이다.
이런 개념은 사실 PWA라는 단어가 거론되기 전부터 다양한 방식으로 접근되었다.
이를테면 기존 웹에서 모바일 친화적인 반응형 디자인과 같은 방식으로 말이다.
이러한 기술적 검토가 모여 PWA스러운 형태를 갖췄을 때 PWA라고 볼 수 있다.
밑에서 PWA의 대표적인 특징을 알아보겠다!

PWA의 핵심 원칙(MDN 문서 출처)

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

이러한 PWA의 특징을 살펴보면 ‘기존 웹만의 이점’ + ‘네이티브 앱만의 이점’의 콜라보라고 생각이 들 것이다.
특히, 접근성과 편리성적인 측면에서 PWA의 원칙은 빛난다.
PWA는 구체적으로 어떤 이점을 가져오는지 알아보자!

PWA의 이점(MDN 문서 출처)

• Service Workers 를 사용한 캐싱 덕분에 앱을 설치한 후에 로딩 시간이 줄어들어 소중한 데이터와 시간을 절약.
• 앱 업데이트가 있을 때 변경된 컨텐츠만 업데이트 할 수 있음. 반면, 네이티브 앱의 경우, 아주 작은 수정에도 사용자가 어플리케이션 전체를 다시 다운로드하도록 강제함.
• 네이티브 플랫폼에 보다 통합된 외관과 느낌 — 홈 화면의 앱 아이콘, 전체 화면으로 실행되는 앱, 등.
• 시스템 알림 및 푸시 메시지를 통한 사용자의 재 참여. 참여율이 높은 사용자와 더 나은 전환율을 이끌어 냄.

* Service Workers: 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할. 즉, 효과적인 오프라인 경험이나 네트워크 요청의 기능을 함.

추가적으로 아래와 같은 이점도 있다.

• 앱스토어를 통한 프로세스를 거치지 않고, 구글이나 애플에 돈을 안줘도 된다.
• 개발 비용이 저렴하다.
• 웹 기술만으로 구현 가능하다.

PWA의 단점

웹이 지금도 충분히 모바일 환경의 운영체제로 접근성이 올라갔지만 아직은 네이티브 앱보다는 못하다.
특히, 고성능의 앱을 만들 때는 PWA로 구현하기 힘든 것이 많다.
따라서 비즈니스 모델이 어떠한지를 따져보고 PWA로 구현할지, 네이티브 앱으로 구현할지에 대한 선택을 해야한다.
고성능의 구현이 필요한 비즈니스 모델의 경우는 아직까지는 네이티브의 앱으로 구현하는 것이 올바른 선택이 될 수 있겠다.

PWA를 구현할 때 고려해야할 것

첫 번째로 브라우저 호환성을 고려해야한다.
PWA의 핵심 요소는 위에서 언급한 Service Workers인데, 현재 대부분의 모바일 브라우저에서 지원 중이다.
그러나 Safari는 지원이 제한적인 상황이다. 이처럼 웹 환경에서 네이티브 앱을 모방할 경우, 늘 브라우저 호환성을 염두해야한다.

두 번째로 검색엔진 최적화(SEO)이다.
PWA는 기본적으로 웹 기반이기 때문에 검색엔진에 대한 접근성이 높아야 많은 사용자를 이끌어낼 수 있다.
이를 위해 대표적으로 검색엔진이 자바스크립트에 액세스가능하도록 검색엔진 봇이 접근가능하도록 설정하고 SSR를 사용하는 것이 좋다.
(일부 크롤러 봇은 Javascript를 지원하지 않기 때문에 CSR에서 SEO는 단점으로 작용할 수 있다.)

세 번째로 HTTPS 지원이다.
PWA는 신뢰할 수 있는 HTTPS 환경에서 동작한다.
특히 Service Workers가 HTTPS 환경에서 동작하기 때문에 보안상의 이유로서 중요하다.

출처

https://namu.wiki/w/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C%20%EC%9B%B9%20%EC%95%B1
https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction
https://blog.wishket.com/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C-%EC%9B%B9-%EC%95%B1pwa%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80/