![[Web] PWA(프로그래시브 웹 앱)이란 무엇일까?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBsBPZ%2FbtseTDEskVj%2FLkoZG32XzHlNIZKMzJjO3K%2Fimg.png)
이번 5월달에 SWYG(스위그)에서 진행하는 스위디(SWYDY) 스터디에 참여하여 PWA에 대해 처음 학습하게 되었습니다. 이번 포스트는 스위디 스터디 1주차 때 배웠던 내용을 바탕으로 작성하였습니다.
PWA란 무엇인가?
PWA란 Progressive Web Application의 줄임말로, 모바일에서 앱 스토어를 통해 설치하는 네이티브 앱처럼 사용할 수 있는 웹 어플리케이션을 말합니다. 쉽게 말하자면, 웹 어플리케이션을 Mobile App화(化)한 것이라 할 수 있겠습니다. 그렇지만 PWA는 일반 웹 앱처럼 기본적으로 HTML, CSS, JavaScript와 같은 웹 기술을 통해 만들어집니다.
2015년 Google Chrome의 엔지니어 알렉스 러셀(Alex Russel)은 '점진적(progressive)으로 네이티브 앱 수준으로 근접해가는 웹'으로 PWA를 처음 언급하었으며, 2016년 Google I/O 개발자 컨퍼런스에선 PWA를 미래의 웹 앱으로 소개하였다고 합니다.
PWA를 사용하는 이유 및 장단점
이제 PWA를 사용하는 이유에 대해 알아보겠습니다.
우선 PWA는 안드로이드, iOS 각 네이티브 앱을 개발하는 데 필요한 기술이 하나도 요구되지 않습니다. 그저 웹 개발에 필요한 기술들 만으로 다양한 플랫폼에서 동작하고 설치 가능한 앱을 빠르게 만들 수 있습니다. 즉 한 번의 개발로 안드로이드, iOS 모두 호환이 가능합니다. 이는 앱 생산성을 극대화하고 개발 비용을 줄이는 효과를 가져옵니다.
PWA의 또 다른 장점은 네이티브 앱처럼 푸쉬 알림이 가능하면서도 SEO(검색 엔진 최적화)가 가능하는 것입니다. 기존의 웹은 푸쉬 알림 같은 기능은 꿈꾸기도 힘들었을 만큼 푸쉬 알림은 네이티브 앱의 일종의 특권이었는데, 이제 PWA도 푸쉬 알림이 가능해지면서 웹에서도 이를 통한 사용자의 재참여 유도가 가능해졌습니다. (현재는 안드로이드만 가능, iOS는 2023년 지원한다고 발표함) 그러면서도 PWA는 본질적으로 웹이기 때문에 검색엔진을 통한 검색을 통해 새 사용자를 유입할 수 있습니다.
또한 PWA는 Service Worker 덕분에 앱 동작에 필요한 asset 들과 일부 API call들에 대한 캐싱이 가능합니다. 이 덕분에 PWA는 사용자의 장치가 오프라인이거나 불안정한 저속도 환경에 있더라도 캐싱 된 리소스로 안정적인 앱 사용을 지원합니다.
그렇지만 이러한 PWA도 단점이 존재하는데, 우선 첫 번째로 게임과 같은 고사양 앱을 개발하는 것이 어렵다는 점입니다. 그 이유는, 현재의 웹 기술로는 아직 운영체제의 자원을 직접 사용할 수 있는 네이티브 앱의 성능을 따라잡을 수 없기 때문입니다. (웹 앱은 하드웨어를 활용하는 것이 불가능하며, PWA는 그나마 하드웨어의 자원을 활용하는 것이 가능하나 네이티브 앱과는 비교하기 힘든 수준이라 합니다.)
PWA에 대한 인지도 부족 역시 PWA의 커다란 단점입니다. 지금 이 포스트를 작성하는 저도 이전까진 PWA에 대해 알지 못했고, PWA를 클라이언트에 설치하여 사용해 본 경험 또한 없었으니 말입니다. 그리고 현재 사람들이 많이 쓰는 유명한 한국 서비스 중 PWA로 개발된 것이 아직 그리 많지 않다고 합니다.
하지만 몇몇 기업이 기존의 자사 웹 서비스를 PWA로 바꾸면서 앱의 성능을 향상시켜 사용자의 이탈률을 감소시키는 성과를 얻었다고 합니다. 그만큼 PWA의 잠재력은 충분하기에, 앞으로 더 많은 웹 애플리케이션이 PWA라는 발전된 형태로 나아가지 않을까 싶습니다.
PWA의 조건
1. 사용자의 기기에 설치가 가능해야 한다.
- 사용자는 홈 스크린 아이콘을 통해 앱에 접근하며, 브라우저 탭이 아닌 독립 실행형 창으로 앱이 열려야 합니다.
2. 오프라인, 저속도 환경에서도 동작해야 한다.
- 리소스를 캐싱해두어 인터넷 연결이 없는 상태에서도 잘 동작할 수 있어야 합니다.
3. 백그라운드 동기화가 가능해야 합니다.
- 사용자가 앱을 사용하고 있지 않을 때에도 동작할 수 있어야 합니다.
4. 사용자 재참여를 유도할 수 있도록 푸시 알림이 가능해야 한다.
- 푸시 알림은 PWA를 네이티브 앱으로 견줄 수 있도록 해주는 강력한 기능입니다.
5. 다양한 Web API를 사용하여 네이티브 앱과 같은 사용성을 갖출 수 있어야 한다.
- Web API : 사용자 위치, 카메라, 진동, AR, VR 등
6. HTTPS 프로토콜을 통해 제공되어야 한다.
- PWA는 신뢰할 수 있는 연결 상태에서만 동작합니다. 따라서 HTTPS를 통한 보안 연결을 통해 서비스가 제공되어야 합니다.
7. 빠르게 로드되고, 빠르게 유지되어야 한다.
- Starts fast, stays fast
8. 모든 브라우저에서 동작해야 하며, 모든 화면 크기에 대응해야 한다.
- Works in any browser & Responsive to any screen size
PWA의 기본 설정 작업
PWA는 기존에 있던 기술을 조합하고 확장한 표준 기술이므로, 기존에 존재하는 일반 웹 페이지도 몇 가지 필수 요구사항을 충족시킨다면 PWA로 쉽게 전환할 수 있습니다. 그 요구 사항은 다음과 같습니다.
1. 서비스 워커 (Service Worker)
- 서비스 워커는 백그라운드에서 실행되는 스크립트 파일로, PWA의 핵심 기능인 푸시 알림, 백그라운드 동기화, 오프라인 환경 지원, 리소스 캐싱을 위해 꼭 필요합니다.
- 서비스 워커는 중간자 공격에 취약하기 때문에 보안이 강화된 HTTPS 환경에서만 동작합니다. 이것이 PWA가 HTTPS 프로토콜을 통해 제공되어야 하는 이유입니다.
2. Manifest JSON 파일
- 브라우저에게 PWA에 대한 정보를 제공해주고, 현재 웹 앱이 유저의 데스크톱이나 모바일 장치에 어떻게 설치되어야 하는지 알려주는 JSON 파일입니다.
- 앱 이름, 아이콘, 테마 색상 정보 등을 포함하고 있습니다.
Lighthouse를 통해 PWA인지 확인하기
어떤 웹 페이지가 PWA인지 확인하는 방법은 간단합니다. 우선 검사하려는 사이트에서 [개발자 도구]를 연 후, 상단 메뉴의 [Lighthouse]로 찾아 들어갑니다. 다만 검사 시 조건이 하나 있는데, 검사하려는 웹 페이지가 HTTPS로 동작해야 합니다.
저는 트위터를 검사해보기로 했습니다.
그럼 위와 같은 창을 보게 될 텐데, 여기서 '프로그레시브 웹 앱'이 체크되어 있는지 확인하고 '페이지 로드 분석'을 클릭한 후 잠깐 기다립니다.
검사가 끝나면 다음과 같이 해당 페이지가 PWA인지 확인할 수 있습니다.
< 참고 자료 >
- 스터디 학습 자료
- 블로그 포스트 '프로그레시브 웹 앱(PWA)이란 무엇이며, 왜 필요한가?'
- 블로그 포스트 'PWA(Progressive Web Application)” 정의/요소/장단점/사례/트위터 예시'
- 인프런 강의 'PWA를 통한 1만 시간의 법칙 앱 제작!'
'◼ FrontEnd > Web & HTML, CSS' 카테고리의 다른 글
| [CSS] CSS-in-JS의 Styled-Components 사용법 및 문법 정리 (0) | 2023.09.16 |
|---|---|
| [Web] CSR과 SSR이란 무엇일까? (0) | 2023.05.03 |
| [NodeJS] Node JS & NPM 소개 및 설치 (0) | 2023.01.22 |
| CSS 레이아웃 - Position과 Block 정리 (0) | 2022.10.23 |
| Semantic Tag (시멘틱 태그) 를 사용하여 웹 개발을 해야하는 이유 (0) | 2022.10.23 |