프로그레시브 웹 앱: 기술, 장점 및 단점

모바일 열풍은 모든 사람에게 영향을 미치며 온라인 상점도 예외는 아닙니다. 오늘날 모든 브랜드는 모바일 존재감을 필요로 합니다. 다음과 같이 할 수 있습니다.

• 모바일 및 태블릿 장치의 크기에 맞게 웹 사이트 콘텐츠를 조정하는 반응형 웹 디자인
• 비용이 많이 들 수 있지만 스마트폰용으로 특별히 개발된 기본 모바일 애플리케이션입니다.
• 웹과 네이티브 앱의 요소를 결합한 프로그레시브 웹 앱(PWA)입니다.

PWA(Progressive Web App)는 장치에 웹 사이트를 응용 프로그램으로 설치할 수 있는 일련의 기술입니다. 즉, 웹사이트와 함께 iOS 및 Android 앱을 개발할 필요가 없습니다. 그 외에도 PWA는 개발하기가 그리 어렵지 않습니다. 예를 들어 팀은 Magento 2 PWA 스튜디오와 같은 미리 만들어진 테마를 사용자 지정하여 개발할 수 있습니다.

PWA는 생각보다 널리 사용됩니다. 전자 상거래, 교육 프로젝트, 여행사, 스트리밍 서비스 등에 사용됩니다. Agent Provocateur, UK Meds, Alibaba 및 Eleganza와 같은 주요 브랜드는 PWA 애플리케이션을 기본으로 또는 모바일 애플리케이션에 추가하여 사용합니다.

프로그레시브 웹 앱(PWA) 아키텍처

대부분의 웹사이트는 모놀리식 아키텍처를 가지고 있습니다. 백엔드에서 프런트 엔드가 생성됨을 의미합니다. 그리고 사용자가 웹 페이지를 요청하면 서버는 사용자 특정 정보를 검색하고 인터넷을 통해 사용자의 장치로 전송하여 HTML 페이지를 생성합니다. 사용자가 웹 사이트에서 다른 페이지를 열면 프로세스가 반복됩니다.

모놀리식 아키텍처의 대안은 헤드리스 아키텍처입니다. 앞부분과 뒷부분이 분리되어 있음을 의미합니다. PWA는 일종의 헤드리스 웹사이트입니다. 결과적으로 초기 로드 시 서버에서 JavaScript 파일이 포함된 베어본 HTML 페이지만 수신됩니다. 사이트의 나머지 부분은 백엔드에서 직접 모든 자료를 받는 대신 브라우저를 사용하여 렌더링됩니다.

결과적으로 PWA는 좋은 UX, 빠른 속도, 응답성 등과 같은 최고의 품질을 얻습니다. 다음은 PWA의 핵심 요소입니다.

권장 사항: 프로그레시브 웹 앱(PWA) 구축을 위한 가장 인기 있는 프레임워크.

서비스 근로자

"서비스 작업자"로 알려진 스크립트는 브라우저의 백그라운드에서 작동합니다. 웹 페이지 없이 작동하며 알림 처리 및 네트워크 요청 관리와 같은 훌륭한 기능이 있습니다. 지금까지 캐싱, 백그라운드 동기화, 오프라인 모드 및 푸시 알림과 같은 기능을 지원했습니다.

애플리케이션 셸

사용자 인터페이스를 구동하는 데 필요한 기본 HTML, CSS 및 JavaScript 코드를 애플리케이션 셸이라고 합니다. 앱의 중추입니다. 사용자가 프로그레시브 웹 앱을 시작하면 애플리케이션 셸이 가장 먼저 로드됩니다. 이렇게 하면 사용자가 오프라인일 때도 인터페이스가 즉시 로드됩니다. 또한 애플리케이션 셸을 캐시하여 향후 방문 시 빠르게 로드할 수 있습니다.

웹 앱 매니페스트

Web-App 매니페스트는 PWA가 데스크톱 및 모바일 플랫폼에서 어떻게 보이는지 담당하는 요소입니다. 이를 통해 모든 사용자에게 PWA가 표시되는 방식을 제어할 수 있습니다. 웹 브라우저는 네트워크에 처음 연결할 때 매니페스트 파일을 검사하고 리소스를 다운로드하여 로컬에 저장합니다. 웹 앱은 브라우저의 로컬 캐시를 사용하여 인터넷 연결 없이 사용할 수 있습니다.

은닉처

캐시 스토리지 접근 방식을 사용하면 원본에서 데이터를 반복적으로 가져올 필요가 없습니다. 이는 타사 데이터 센터 또는 사용자 장치에 데이터를 임시로 저장하여 수행됩니다. 소스에서 가져오는 대신 캐시에서 로드할 수 있습니다.

PWA에서 다양한 캐싱 기술을 구현할 수 있습니다. 전체 자산을 캐싱하는 것이 가장 일반적인 것입니다. 이는 정적 및 동적 콘텐츠가 모두 캐시에 포함됨을 의미합니다.

부분 자산 캐싱은 또 다른 전술입니다. 이 방법을 사용하면 스크립트나 사진과 같은 특정 자료만 캐시할 수 있습니다. 이는 대부분의 콘텐츠가 동적인 페이지에 효과적일 수 있습니다.

프로그레시브 웹 앱(PWA) 이점

Statista에 따르면 2021년에는 전자 상거래에서 전 세계 소매 판매의 약 75%가 모바일 채널을 통해 이루어졌습니다. 2017년의 미래에 대한 수치와 예측은 다음과 같습니다.

모바일 기기 사용자의 수가 급격히 증가함에 따라 PWA 도입이 그 어느 때보다 중요해지고 있습니다. 다음은 주목할 가치가 있는 PWA 사이트의 몇 가지 기능입니다.

이미지 출처: 스태티스타.

뛰어난 성능

PWA는 백그라운드 서비스 작업자를 사용하여 노동 집약적인 작업을 수행하므로 로드 시간이 단축됩니다. 이러한 스크립트는 웹 페이지와 독립적으로 작동하며 빠르고 원활한 탐색을 유지하는 데 필요한 모든 정보를 미리 가져옵니다. 또한 스크립트는 페이지에서 활성화되지 않으므로 페이지 로드 속도에 영향을 주지 않습니다. 데이터가 캐시되면 앱 탐색이 거의 빨라집니다.

더 나은 가시성

"홈 화면에 추가" 옵션으로 더 높은 가시성을 제공합니다. 고객은 클릭 한 번으로 앱을 찾고 방해 없이 제품을 선택할 수 있습니다. 또한 고객이 제품을 장바구니에 담으면 나중에 할인이나 특별 제안에 대한 알림을 전송하여 구매를 독려할 수 있습니다.

앱과 같은 UX

PWA는 웹사이트처럼 동작하며 네이티브 앱과 유사한 디자인을 가지고 있습니다. 또한 PWA와 기본 애플리케이션은 모두 사용자 경험에 비슷한 영향을 미치며 데이터베이스 액세스 및 자동 데이터와 같은 많은 기능을 공유합니다.

교차 지원

PWA는 어디에서나 작동할 수 있습니다. 서로 다른 장치 사이를 전환하는 경향이 있는 사용자를 위해 모든 곳에서 교차 지원이 가능합니다. PWA에 의존하는 비즈니스의 경우 직원에게 플랫폼이든 앱 버전이든 상관없이 최상의 성능을 발휘하는 소프트웨어를 제공하는 것이 중요합니다.

개발 비용 절감

기본 애플리케이션 개발에는 두 가지 고유한 코드베이스가 필요합니다. 예를 들어 네이티브 애플리케이션을 만들려면 iOS 개발용 Swift 또는 Objective-C와 Android용 Kotlin 또는 Java에 능숙한 개발자가 필요하며 비용이 많이 듭니다. 프로그레시브 웹 앱은 차례로 HTML, CSS 및 JavaScript와 같이 널리 사용되는 프로그래밍 언어에 의존합니다. 그 외에도 유지 관리에는 웹 개발을 전문으로 하는 단일 팀이 필요합니다.

오프라인으로 작동

PWA의 눈에 띄는 기능 중 하나는 오프라인 탐색입니다. 연결이 실패하더라도 중요한 데이터 및 서비스에 대한 액세스 권한을 잃지 않습니다.

PWA를 사용하면 앱에 표시된 일부 데이터를 캐싱하고 저장하여 오프라인에서 앱을 탐색할 수 있습니다. 또한 캐시된 리소스를 처리하고 오프라인에서도 푸시 알림을 활성화하여 성능을 향상시킵니다.

App Store에 앱을 배치할 필요가 없습니다.

앱 스토어에서 애플리케이션을 출시하는 것은 프로젝트에 대한 추가 비용과 관련이 있습니다. 일부 상점은 출시 전에도 비용을 청구하고 프로젝트가 지루한 게시 및 인증 절차를 거쳐야 합니다. 이 전략은 가격을 높이고 평균 시장 시간을 연장하므로 때때로 판촉 휴일을 놓치거나 기한을 맞추기 위해 테스트되지 않은 릴리스를 발행할 수 있습니다.

하지만 PWA를 사용하면 전체 앱 스토어 문제를 피할 수 있습니다. PWA는 고객이 앱을 다운로드하거나 새 확인 라운드를 기다리지 않고도 앱을 사용하고 업데이트를 받을 수 있도록 하므로 고객과 기업 모두에게 실용적입니다.

React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

프로그레시브 웹 앱(PWA) 단점

비즈니스에 도입할 모바일 앱의 종류를 선택할 때 기술이 비교적 새롭기 때문에 고려해야 할 몇 가지 결함이 있다는 점을 고려하십시오.

불충분한 iOS 호환성

모든 PWA 기능이 iOS에서 지원되는 것은 아닙니다. Android에 비해 서비스 작업자에 대한 지원은 매우 제한적입니다. 애플리케이션 데이터를 저장하고 파일을 캐시할 수만 있습니다(백그라운드 작업 없음). 저장 용량은 50Mb로 제한됩니다. 이로 인해 PWA에 대한 많은 사용자의 액세스가 제한됩니다. Siri, 인앱 결제 등과 같은 일부 내장 기능을 사용하는 데에도 제한이 있습니다. PWA의 사용자 경험은 네이티브 앱이 제공하는 UX에 비해 떨어집니다. UX가 적어도 마케팅만큼 중요한 세상에서 진정한 손실입니다.

제한된 기능

장치의 모든 기능을 사용할 수 있는 것은 아닙니다. 예를 들어 연락처, 캘린더 또는 Bluetooth에 액세스할 수 없습니다. 응용 프로그램이 장치의 하드웨어를 광범위하게 활용해야 하는 경우 기본 앱이 PWA보다 선호되는 경우가 많습니다. 예를 들어 파일 공유 또는 블루투스 메신저와 같은 블루투스 기반 솔루션은 일반적으로 기본적으로 개발됩니다.

배터리 소모 증가

복잡한 코드로 암호화되어 있기 때문에 휴대폰에서 해독하기가 더 어렵습니다. 결과적으로 PWA는 기본 애플리케이션보다 더 많은 배터리를 사용합니다.

설치 프로세스는 어떻게 작동합니까?

Lancome.com의 예에서 설치 프로세스가 어떻게 작동하는지 살펴보겠습니다.

1. 사용자가 모바일 장치의 브라우저에서 웹사이트를 엽니다.
2. 사용자에게 제안이 포함된 팝업이 표시됩니다. 예를 들어 "홈 화면에 앱을 추가합니다."
3. 사용자는 클릭 한 번으로 애플리케이션을 설치합니다.
4. 사용자가 아이콘을 탭하면 웹사이트가 열립니다.

이미지 출처: 랑콤.

또한 다음을 좋아할 수도 있습니다: Magento PWA Studio: Magento용 프로그레시브 웹 앱 도구!

어떤 결과를 기대할 수 있습니까?

프로그레시브 웹 앱을 출시하는 기업에 탁월한 결과를 제공합니다. 예를 들어 web.dev에 따르면 Twitter는 앱 크기를 거의 97% 줄인 후 세션당 페이지 조회수가 65% 증가하고 트윗이 75% 증가했으며 이탈률이 20% 감소했습니다. 또한 PWA로 전환한 후 오가닉 트래픽은 2.3배, 구독자는 58%, 일일 활성 사용자는 49% 증가했습니다. Hulu는 플랫폼별 데스크톱 경험 외에도 프로그레시브 웹 앱을 도입하여 반복 방문자가 27% 증가했습니다.

프로그레시브 웹 앱을 사용하면 사용자에게 환상적인 웹 경험을 제공할 수 있는 특별한 기회를 갖게 됩니다. PWA는 최신 웹 기술을 사용하여 사용자가 만든 것을 단일 코드베이스로 모든 장치에서 누구나 사용할 수 있도록 합니다.

 이 기사는 Alex Husar가 작성했습니다. Alex는 프로그레시브 웹 앱 개발 서비스를 제공하는 회사의 최고 기술 책임자입니다. 거의 10년 동안 회사에서 일하면서 Alex는 웹 개발, 프로그레시브 웹 앱(PWA) 생성 및 팀 관리에 능숙해졌습니다. Alex는 다양한 기술 분야에 대한 지식을 지속적으로 심화하고 그의 기사에서 공유합니다. 그는 프로그래머가 일반적인 문제를 극복하고 최신 웹 개발 동향을 최신 상태로 유지하도록 돕습니다. LinkedIn에서 그를 팔로우할 수 있습니다.