[Week 2-1] 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다.
들어가기 전에 PWA가 무엇인지 간단하게 정리하자면
Progressive Web Apps
PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.
앱스토어 혹은 구글플레이에서 설치 가능한 앱을 웹 기술로 구현했다고 생각하면 쉽다.
https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames
프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN
이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.
developer.mozilla.org
3-1) PWA 역사와 정의
1990년대 초, 웹 기술의 시작은 HTML, CSS, JavaScript의 탄생과 진화로 시작되었다. 지금과 마찬가지로 웹 페이지의 뼈대를 구성하고, 스타일링하고, 동적 기능을 가능 담당한다.
웹 기술들이 발전하는 동안 인터넷을 이용한 웹 페이지 경험은 모두 PC에서 이루어졌지만 2007년 iPhone의 등장과 함께 스마트폰, 태블릿 등 모바일 기기가 대중화 되며 사용 패턴에 변화가 일어났다. 그로 인해 기존과 다른 해상도, UI, UX에 적용이 필요해졌다.
https://www.freecodecamp.org/news/what-are-progressive-web-apps-pwa-guide/
What are Progressive Web Apps? PWA Guide for Beginners
Progressive Web Apps (PWAs) are simply installable web applications – websites that you can install on your device, much like you would install an app from an app store. They bring together the best parts of using a website (easy to access, no need to in
www.freecodecamp.org
초기 웹 애플리케이션과 모바일 앱은 모두 한계를 갖고 있었다.
웹 애플리케이션
- 느린 로딩 시간
- 제한된 상호작용
- 디바이스 호환성 문제
모바일 앱
- 높은 개발 비용
- 복잡한 유지보수
- 플랫폼 간 호환성 문제
이러한 문제를 해결하기 위해 웹과 모바일 앱의 장점을 결합하려는 시도가 있었는데, 그 중 하나가 하이브리드 앱이다.
하이브리드 앱을 통해 Java, C 대신 웹 기술 HTML, CSS, JavaScript를 사용해 네이티브 앱을 개발하여 UI를 좀 더 수월하게 구현할 수 있었다. 그리고 CSS 미디어 쿼리를 활용한 반응형 웹도 있다. 디바이스 해상도에 대응할 수 있도록 다양한 레이아웃을 적용하는 것이다.
// width에 따른 다른 스타일 적용
@media screen and (min-width: 40em) {
article {
width : 7em
}
}
@media screen and (min-width: 70em) {
article {
width : 10em;
}
}
하지만 이러한 시도들도 완벽한 해결책이 아니었기에 PWA가 탄생하게 되었다.
웹과 네이티브 앱의 기능을 융합하려는 개념으로 '앱 같은' 사용자 경험을 제공하는 것을 주 목표로 했기 때문에 PWA를 필요로 하는 기업들의 주목을 받기 시작했고 자연스레 개발자들도 관심도 증가하였다.
최대한 앱 같은 웹을 만들기 위해 UX 향상을 위한 다양한 노력이 이루어졌고 여러 분야에서 PWA의 적용과 확산이 이루어졌다.
3-2) PWA의 기술적 특징과 장단점
웹과 앱의 장점을 결합했기 때문에 빠른 로딩, 향상된 사용자 경험, 오프라인 접근성 제공을 목표로 한다. 이를 위해 PWA는 서비스 워커와 매니페스트라는 두 가지 중요한 구성 요소를 활용한다.
서비스 워커(Service Worker)
- 백그라운드에서 네트워크 요청을 가로채고 캐싱하여 오프라인 사용을 지원합니다.
매니페스트 파일
- 매니페스트 파일은 앱의 외관과 시작 설정을 정의하는데 사용됩니다.
그 외에도 서비스 워커는 앱 로딩 속도를 향상시키고 백그라운드 데이터 동기화를 가능하게 한다.
https://fe-developers.kakaoent.com/2022/221208-service-worker/
서비스 워커에 대해 알아보고 Mock Response 만들기 | 카카오엔터테인먼트 FE 기술블로그
최용열(raon) 힙합을 좋아하는 개발자입니다. 요즘은 클라이밍에 빠졌습니다.
fe-developers.kakaoent.com
https://developer.mozilla.org/ko/docs/Web/Manifest
Web app manifests | MDN
웹 앱 매니페스트(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈
developer.mozilla.org
PWA에서 오프라인 접근성이 중요 특징인 이유중 하나가 인터넷 연결이 불안정한 환경에서도 앱 기능을 유지하고, 그에 따른 사용자 경험을 개선할 수 있기 때문이다. 이를 위해 PWA는 정적/동적 컨텐츠의 효율적인 캐싱, 정보 제공을 위한 캐시 업데이트, 서비스 워커와 캐시 API의 상호작용을 활용하게 된다.
이러한 웹 기술들은 모바일 기기의 대중화로 인한 PWA의 탄생과 발전 그리고 웹과 앱의 한계를 극복하려는 노력의 결과로 볼 수 있다.
PWA 장점
- 브라우저 및 디바이스 접근성 및 호환성
- 서비스 워커를 활용한 오프라인 접근성
- 높은 재사용성으로 인한 개발 및 유지보수 비용 절감
PWA 단점
- 네이티브 앱에 비해 일부 기능 접근 제한
- 일부 브라우저에서의 호환성 문제