[3차] 프리온보딩 챌린지(FE) - 웹으로도 앱처럼 사용가능한 PWA

[Week 2-1] 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다.

 

들어가기 전에 PWA가 무엇인지 간단하게 정리하자면

Progressive Web Apps
PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.

앱스토어 혹은 구글플레이에서 설치 가능한 앱을 웹 기술로 구현했다고 생각하면 쉽다.

 

https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames

프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN

 

3-1) PWA 역사와 정의

1990년대 초, 웹 기술의 시작은 HTML, CSS, JavaScript의 탄생과 진화로 시작되었다. 지금과 마찬가지로 웹 페이지의 뼈대를 구성하고, 스타일링하고, 동적 기능을 가능 담당한다.

웹 기술들이 발전하는 동안 인터넷을 이용한 웹 페이지 경험은 모두 PC에서 이루어졌지만 2007년 iPhone의 등장과 함께 스마트폰, 태블릿 등 모바일 기기가 대중화 되며 사용 패턴에 변화가 일어났다. 그로 인해 기존과 다른 해상도, UI, UX에 적용이 필요해졌다. 

 

https://www.freecodecamp.org/news/what-are-progressive-web-apps-pwa-guide/

https://www.freecodecamp.org/news/what-are-progressive-web-apps-pwa-guide/

What are Progressive Web Apps? PWA Guide for Beginners

 

초기 웹 애플리케이션과 모바일 앱은 모두 한계를 갖고 있었다.

웹 애플리케이션
- 느린 로딩 시간
- 제한된 상호작용
- 디바이스 호환성 문제

모바일 앱
- 높은 개발 비용
- 복잡한 유지보수
- 플랫폼 간 호환성 문제

 

이러한 문제를 해결하기 위해 웹과 모바일 앱의 장점을 결합하려는 시도가 있었는데, 그 중 하나가 하이브리드 앱이다.

하이브리드 앱을 통해 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;
  }
}

https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

 

하지만 이러한 시도들도 완벽한 해결책이 아니었기에 PWA가 탄생하게 되었다.

 

웹과 네이티브 앱의 기능을 융합하려는 개념으로 '앱 같은' 사용자 경험을 제공하는 것을 주 목표로 했기 때문에 PWA를 필요로 하는 기업들의 주목을 받기 시작했고 자연스레 개발자들도 관심도 증가하였다.

최대한 앱 같은 웹을 만들기 위해 UX 향상을 위한 다양한 노력이 이루어졌고 여러 분야에서 PWA의 적용과 확산이 이루어졌다.

 

---

 

3-2) PWA의 기술적 특징과 장단점

웹과 앱의 장점을 결합했기 때문에 빠른 로딩, 향상된 사용자 경험, 오프라인 접근성 제공을 목표로 한다. 이를 위해 PWA는 서비스 워커와 매니페스트라는 두 가지 중요한 구성 요소를 활용한다.

서비스 워커(Service Worker)
- 백그라운드에서 네트워크 요청을 가로채고 캐싱하여 오프라인 사용을 지원합니다.

매니페스트 파일
- 매니페스트 파일은 앱의 외관과 시작 설정을 정의하는데 사용됩니다.

 

그 외에도 서비스 워커는 앱 로딩 속도를 향상시키고 백그라운드 데이터 동기화를 가능하게 한다.

 

https://fe-developers.kakaoent.com/2022/221208-service-worker/

서비스 워커에 대해 알아보고 Mock Response 만들기 | 카카오엔터테인먼트 FE 기술블로그

https://developer.mozilla.org/ko/docs/Web/Manifest

Web app manifests | MDN

 

PWA에서 오프라인 접근성이 중요 특징인 이유중 하나가 인터넷 연결이 불안정한 환경에서도 앱 기능을 유지하고, 그에 따른 사용자 경험을 개선할 수 있기 때문이다. 이를 위해 PWA는 정적/동적 컨텐츠의 효율적인 캐싱, 정보 제공을 위한 캐시 업데이트, 서비스 워커와 캐시 API의 상호작용을 활용하게 된다.

 

이러한 웹 기술들은 모바일 기기의 대중화로 인한 PWA의 탄생과 발전 그리고 웹과 앱의 한계를 극복하려는 노력의 결과로 볼 수 있다.

 

PWA 장점
- 브라우저 및 디바이스 접근성 및 호환성
- 서비스 워커를 활용한 오프라인 접근성
- 높은 재사용성으로 인한 개발 및 유지보수 비용 절감

PWA 단점
-  네이티브 앱에 비해 일부 기능 접근 제한
-  일부 브라우저에서의 호환성 문제