Frontend/PWA

[PWA] PWA란?

ayeongjin 2025. 1. 25. 00:05

PWA란?

웹과 모바일 앱 기술의 장점을 결합한 웹 기술로, 모바일 웹에서 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션 (일반 웹사이트와 같이 웹에서 실행되지만 앱처럼 사용이 가능)

 

1. 웹 앱과 네이티브 앱

 

1-1) 웹 앱

  • 웹은 URL을 통해 쉽게 접근할 수 있다. 별도의 설치가 필요업식 때문에 어떤 장치를 사용하던 쉽게 접근할 수 있다.
  • 웹 앱(Web Apps)은 HTML, CSS, Javascript 등을 사용해 만들어진 애플리케이션이다. 모바일 웹과 네이티브 앱을 결합하여, 모바일 웹의 특징과 함께 네이티브 앱의 장점을 갖는다. 설치 없이 URL을 통해 브라우저로 접근이 가능하고, 홈 화면에 바로가기 아이콘을 추가하여 네이티브 앱처럼 사용할 수 있다.
  • 하지만 네트워크가 연결되어 있지 않은 오프라인 상태에서는 사용이 어렵고, 카메라와 같은 하드워드에 접근할 수 없다. 또한 플랫폼 내의 API를 사용할 수 없다.

 

1-2) 네이티브 앱

  • 네이티브 앱(Native Apps)은 모바일 기기에 최적화된 언어로 개발된 앱이다. 안드로이드와 ios와 같은 특정 플랫폼을 위해 만들어진 앱을 말한다.
  • 특정 플랫폼에 최적화되어 있기 때문에 안정적이고 실행 속도가 빠르다. 네트워크 연결과 관계없이 오프라인에서 사용이 가능하고, 모바일 기기의 카메라와 같은 장치와도 상호작용할 수 있고 푸시알림도 수신가능하다.
  • 하지만 플랫폼에 한정적이다. 각 플랫폼에 맞는 앱을 제작해야하기 때문에 많은 시간과 비용을 투자해야한다.

 

1-3) PWA

💡
웹 앱 : 접근성이 높다
네이티브 앱 : 기능적인 측면이 높다
PWA : 둘을 모두 포함
→ PWA는 웹 앱의 높은 접근성과 네이티브 웹의 기능적인 측면의 장점을 모두 포함

 

PWA 대표 기능

  • Push 알림 : 사용자가 다시 앱으로 돌아올 수 있도록 Push알림 기능으 제공
  • 오프라인 환경 : 오프라인 환경에서도 온라인에서와 동일한 사용자 경험을 제공
  • 홈 화면에 추가 : 실제 네이티브 앱처럼 홈 화면에 추가해서 사용 가능

→ 이런 기능들은 HTTPS를 요구한다.

 

2. PWA 요건

HTTPS, Service Worker, Manifest

 

2-1) HTTPS ( HyperText Transfer Protocol over Secure Socket Layer)

  • 월드와이드 웹 통신 프로토콜로, 보안이 강화된 HTTP( HyperText Transfer Protocol)다.
  • http에 Secure Socket이 추가되어 데이터를 주고받는 과정에서 내용이 암호화되어 안전하게 통신할 수 있도록 한다.
  • PWA는 보안이 연결된, 즉 신뢰할 수 있는 사이트에서만 동작하기 때문에 웹 페이지는 HTTPS 도메인에서 제공되어야 한다.

 

2-2) Service Worker (서비스 워커)

  • 백그라운드에서 실행되는 Javascript 파일 형태의 스크립트
  • 오프라인 환경에서도 웹이 작동할 수 있도록 네트워크 요청을 가로채서 네트워크 불량 상태 등 접속성이 안 좋은 상황을 커버
  • 네트워크 요청을 중간에 가로챌 수 있다는 점에서 중간자 공격에 취약하기 때문에 보안이 강화된 HTTPS에서만 작동한다.
💡
중간자 공격 (man in the middle attack, MITM)
네트워크 통신을 조작하여 통신 내용을 도청하거나 조작하는 공격 기법

 

 

2-3) Manifest (매니페스트)

  • PWA에 대해 브라우저에 알려주고 사용자의 데스크탑이나 모바일 디바이스에 설치할 때 어떻게 작동(행동)해야하는지 알려주는 JSON 파일.
  • manifest 파일에는 웹 페이지의 url, 앱 이름, 화면 표시 방식 등 기능과 표시 방법에 대한 정보가 포함된다.

 

 

좋은 PWA를 만들기 위한 Checklist

좋은 프로그레시브 웹 앱의 특징은 무엇인가요?  |  Articles  |  web.dev

 

좋은 프로그레시브 웹 앱의 특징은 무엇인가요?  |  Articles  |  web.dev

좋은 프로그레시브 웹 앱 또는 훌륭한 프로그레시브 웹 앱의 특징은 무엇인가요?

web.dev

 

1. 핵심 체크리스트

디바이스의 크기와 입력 유형에 상관없이 모든 사용자가 앱을 설치하고 사용할 수 있는지

  1. Starts fast, stays fast : 앱은 빠르게 로드되고, 빠르게 유지되어야 합니다.
  2. Works in any browser : PWA는 모든 브라우저에서 작동해야 합니다.
  3. Responsive to any screen size : 모든 화면 크기에 대응해야 합니다. 화면 크기에 상관없이 콘텐츠가 표시되어야 하며 모든 기능을 사용할 수 있어야 합니다.
  4. Provides a custom offline page : 오프라인 환경에서는 브라우저의 기본 오프라인 페이지가 아닌 맞춤형 오프라인 페이지를 제공합니다.
  5. Is installable : 설치가 가능해야 합니다.

 

2. 최적의 체크리스트

앱이 장치의 일부로 느낄 수 있는지

  1. Provides an offline experience : 앱은 오프라인에서도 주요 기능을 제공하며, 사용자가 연결 여부와 관계없이 사용할 수 있어야 합니다.
  2. Fully accessible : 모든 상호작용이 WCAG 2.0 접근성 요구사항을 충족해야 하며, 모든 사용자가 앱을 사용할 수 있어야 합니다.
  3. Discoverable through search : 검색엔진에서 쉽게 검색 가능해야 하며, 표준 URL과 색인 생성이 가능해야 합니다.
  4. Works with all input types : 마우스, 키보드, 터치, 스타일러스 등 모든 입력 장치를 지원하고, 사용자가 자유롭게 입력 방법을 전환할 수 있어야 합니다.
  5. Provides context for permissions : 권한 요청 시 사용자에게 이유와 맥락을 명확히 설명하고, 필요할 때만 요청해야 합니다.
  6. Maintains a healthy codebase : 최신 기술과 안정적인 코드 관행을 준수하며, 취약점이 없는 라이브러리와 안전한 코딩 방식으로 유지보수 가능하도록 설계해야 합니다.