PWA 란 무엇입니까? 비전공자를 위한 쉬운 설명

이 글은 마케터의 입장에서 작성되었음을 미리 아셔야 합니다. (글쎄, 나는 HTML과 CSS를 읽고 쓸 수 있고, 자바스크립트를 어느 정도 이해할 수는 있지만, 그렇다고 해서 기술자가 되는 것은 아니다).

PWA 란 무엇입니까?

PWA ( 프로그레시브 웹 앱)를 사용하면 웹 브라우저가 기본 모바일 앱(즉, iOS 및 Android 스토어에서 다운로드한 앱) 의 모양과 느낌을 가질 수 있습니다. 이러한 기본 앱은 웹 푸시 알림과 같은 몇 가지 고유한 기능을 가지고 있는 동시에 원활한 모바일 경험에 최적화되어 있습니다. PWA 기술은 Chrome 및 Safari와 같은 브라우저에서 웹 서핑 경험을 활용하므로 기본 앱에 가깝습니다. 결과적으로 웹에 대한 트래픽 및 참여가 향상됩니다.

이 용어는 2015년 Google에 의해 처음 소개되었습니다. Pete LePage – Google Developer Advocate에 따르면 "진보적" 부분은 " 사용자가 시간이 지남에 따라 앱과의 관계를 점진적으로 구축함에 따라 점점 더 강력해집니다. ".

PWA는 웹사이트와 동일합니까?

예, 프로그레시브 웹 애플리케이션은 웹사이트입니다.

그러나 최신 웹 기술 덕분에 앱처럼 보이고 느껴집니다. 즉, 사용자는 다른 웹사이트와 마찬가지로 URL을 사용하여 브라우저에서 Progressive Web Apps를 탐색하지만 PWA에 도착한 직후에는 브라우저에서 별도의 필요 없이 "앱"을 사용하는 경험을 얻게 됩니다. 다운로드 및 설치.

"앱"이라는 것은 PWA가 모바일로 제한된다는 것을 의미하지 않습니다. 데스크탑에서도 구현할 수 있습니다. 사실, 당신은 그것을 깨닫지도 못한 채 PWA를 자주 방문했을 가능성이 있습니다. 노트북에서 Instagram, Pinterest 또는 Tinder를 검색한 적이 있다면 축하합니다! 웹에서 가장 성공적인 PWA 채택자를 만났습니다.

PWA를 훨씬 쉽게 이해할 수 있도록 PWA 웹사이트의 예를 살펴보겠습니다.

PWA의 예

G-SP 전자상거래 웹사이트는 PWA입니다. 모바일에서 웹사이트를 방문하면 실제로 웹사이트 URL을 휴대폰 홈 화면에 추가할 수 있습니다.

그런 다음 웹 사이트를 다시 방문하고 싶을 때마다 Facebook 또는 Linkedin과 같은 다른 앱과 마찬가지로 홈 화면에 아이콘이 표시됩니다.

홈 화면에서 G-SP 웹 앱을 열면 이제 웹사이트가 브라우저의 검색 표시줄 없이 전체 화면으로 표시되는 것을 볼 수 있습니다. 또한 하단에 앱과 같은 탐색 메뉴가 있습니다. 또한 스크롤하고 탭할 때 이전에 가졌던 일부 웹 브라우징 경험과 달리 버터처럼 부드러움이 느껴집니다.

 권장 읽기:
- G-SP PWA 사례 연구: 최고 수준의 모바일 경험을 위한 혁신
- PWA의 상위 3가지 사용 사례

웹사이트가 PWA인지 확인하는 팁

개발자가 아니고 사이트의 소스 코드를 자세히 살펴보지 않는 한 웹사이트가 PWA 기술을 기반으로 구축되었는지 정확히 알 수 있는 방법은 없습니다.

즉, 정확한 결과를 보장하지는 않지만 주어진 웹사이트가 PWA라는 신호를 줄 수 있는 몇 가지 트릭이 있습니다.

단일 페이지 웹사이트

이것은 웹사이트가 PWA 일 수 있는지 확인하는 가장 간단한 방법입니다. PWA의 특성을 기반으로 합니다. Progressive Web Apps는 기술적으로 단일 페이지 웹사이트입니다. 이것은 PWA를 기반으로 구축된 웹 사이트에 단일 페이지만 있다는 의미가 아닙니다. 즉, 사용자가 웹사이트를 처음 로드할 때 페이지뷰 이벤트 가 한 번만 발생합니다. 이후 모든 페이지 로드는 Javascript에서 처리합니다. 이는 각 페이지가 변경될 때 전체 HTML 소스와 함께 페이지가 다시 로드되는 일반 웹사이트와 다릅니다.

어떻게 작동합니까? 아주 간단합니다. 브라우저의 활성 탭을 살펴보십시오. 사이트가 PWA인 경우 페이지를 변경할 때 사이트가 다시 로드되지 않습니다. 즉, 브라우저 탭에 "로딩" 애니메이션이 표시되지 않습니다.

New York Times 웹사이트가 PWA가 아님을 알 수 있습니다.

예를 들어 SimiCart 웹사이트를 살펴보겠습니다.

내 말을 알아? 페이지를 변경할 때 사이트가 다시 로드되지 않습니다! 기술적으로 당신은 항상 한 "페이지"에 머물고 있습니다. 이것이 바로 PWA 페이지가 매우 빠르고 부드럽게 로드되는 이유입니다. 모든 페이지는 사이트를 처음 방문할 때 미리 로드되어 나중에 전달됩니다. 네트워크 속도에 의존하지 않으며 오프라인에서도 작동할 수 있습니다!

서비스 워커

아니요, 이것은 인간 노동자가 아닙니다. 서비스 워커는 오프라인 기능, 푸시 알림 및 리소스 캐싱을 지원하는 프로그레시브 웹 앱 이면의 기술 이름입니다. Google에 따르면 서비스 워커는 PWA 기술의 핵심입니다. 따라서 웹 사이트가 서비스 워커 기술을 사용하는지 알아낼 수 있다면 해당 사이트 가 PWA인지 여부를 알 수 있습니다 .

Chrome 기반 브라우저를 사용하는 경우 Inspector Tool을 사용하여 쉽게 확인할 수 있습니다. 확인하려는 웹 사이트를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 클릭합니다. 그런 다음 응용 프로그램 탭 > 서비스 작업자로 이동합니다. 해당 사이트에 서비스 워커가 있는지 쉽게 확인할 수 있습니다.

다시 말하지만, 이 트릭은 특정 웹사이트가 PWA일 가능성에 대한 힌트만 제공합니다. PWA의 핵심 부분이지만 서비스 워커는 PWA에만 국한되지 않습니다. PWA가 아닌 웹 사이트도 서비스 워커를 활용하여 기능을 향상할 수 있습니다.

PWA Service Worker에 대해 더 자세히 알고 싶다면 이 놀라운 기술에 대한 모든 것을 배울 수 있는 독점 기사가 있습니다.

HTTPS 보안 출처

하지만 URL을 보면 웹사이트가 PWA가 아닌지 정확히 알 수 있습니다. 웹사이트의 URL이 https: // 대신 http:// 로 시작하면 PWA가 아닙니다. 이는 PWA가 HTTPS 인 보안 도메인에서 실행되는 웹사이트에서만 작동할 수 있기 때문입니다.

PWA는 얼마나 인기가 있습니까?

Google이 제안한 것처럼 PWA는 "모바일 앱의 미래"이며 PWA는 처음에는 대기업, 그 다음에는 소규모 기업 및 조직에서 인기를 얻고 있습니다.

Windows 플랫폼에서 Google Play Store와 같은 주요 앱 마켓플레이스에 이르기까지 거의 모든 곳에서 경쟁을 주도하고 있습니다.

많은 유명 웹사이트가 Telegram, AliExpress, FlipBoard와 같은 PWA와 2048 또는 Web Flap과 같은 친숙한 PWA 게임의 PWA 버전이라는 것을 알 수 있습니다.

PWA 이점: Progressive Web Apps는 무엇을 할 수 있습니까?

이 기사를 작성하는 시점에서 PWA는 이전에 기본 앱에 독점적이었던 대부분의 작업을 이미 수행할 수 있습니다. 여기에는 카메라 및 마이크, GPS, 오프라인 모드, 파일 액세스 등과 같은 장치 수준 기능에 대한 액세스가 포함됩니다. PWA의 기능에 대한 개요를 보려면 https://whatpwacando.today/ 를 참조하십시오 .

따라서 웹 앱은 모바일 앱에 투자하지 않고 온라인에서 브랜드의 모바일 경험을 개선하려는 사람들에게 훌륭한 선택입니다.

일반 모바일 앱 및 반응형 웹사이트에 비해 PWA의 이점에 대해 좀 더 자세히 살펴보겠습니다.

PWA와 반응형 웹사이트

예를 들어 웹사이트 와 비교할 때 PWA는 다음과 같은 이유로 우수합니다.

• 속도: 동일한 콘텐츠가 주어지면 PWA는 서비스 워커 기술 덕분에 일반 웹사이트보다 빠르게 로드됩니다. 모든 콘텐츠를 미리 캐싱하고 필요할 때 전달하기 때문에 첫 번째 로드에서는 빠르며 두 번째 로드에서는 더 빠릅니다.
• 오프라인 모드 : 서비스 워커 기술로 오프라인도 가능합니다. 서비스 작업자가 적절하게 통합되어 있으면 PWA를 처음 방문할 때 모든 콘텐츠가 사전 로드되고 이후에 Javascript를 사용하여 전달되므로 중단 없는 경험이 필수 인 웹 사이트에 PWA가 새로운 접근 방식이 됩니다. PWA가 필요할 경우를 대비하여 PWA를 오프라인으로 작동시키는 방법에 대한 가이드가 있습니다.
• 웹 푸시 알림: 기본 모바일 앱과 마찬가지로 PWA는 모바일 웹 브라우저에서 바로 사용자의 홈 화면으로 푸시 알림을 보낼 수 있습니다. 이것은 전자 상거래 상점이 고객에게 개인화된 거래 및 제안을 보내는 데 특히 유용합니다. PWA Android용 웹 푸시는 오랫동안 활성화되었으며 운 좋게도 곧 PWA iOS에 제공될 것입니다.
• 홈 화면에 추가 : 이 기능은 모바일 사용자에게 PWA를 "설치"하라는 메시지를 표시합니다. 사용자가 프롬프트를 수락하면 PWA가 모바일 홈 화면에 추가되고 설치된 다른 앱처럼 실행됩니다. 다음은 PWA 홈 화면에 추가에 대한 가이드입니다. 놓치지 마세요!

Chrome의 이전 "홈 화면에 추가" 프롬프트는 다음과 같이 표시됩니다.

 >> 추천 자료: PWA vs 반응형 웹사이트 전체 비교

PWA 대 기본 앱

그리고 PWA가 웹사이트보다 나을 뿐만 아니라 브랜드는 이제 PWA가 제공하는 다음과 같은 특전 때문에 기본 앱보다 PWA를 선택하고 있습니다.

• 크로스 플랫폼 : PWA가 구축되면 Android, iOS 또는 Windows와 같은 모든 모바일 플랫폼을 통해 액세스할 수 있습니다. PWA는 OS 기반이 아니라 브라우저 기반이기 때문입니다.
• 최신 : PWA에 대한 변경 사항은 사용자가 페이지를 새로 고치는 즉시 적용됩니다.
• 인덱싱 가능성 : PWA는 기술적으로 여전히 웹사이트이기 때문에 해당 콘텐츠를 인덱싱하고 Google과 같은 검색 엔진에서 검색할 수 있습니다. 이는 PWA가 네이티브 앱에 비해 더 많은 사용자 기반에 도달할 수 있도록 하는 SEO(검색 엔진 최적화) 관행의 기회를 열어줍니다.
• 게시할 필요 없음 : 기본 앱을 사용하면 앱 스토어 게시 프로세스가 때때로 정말 고통스러울 수 있습니다. 앱 스토어에 앱을 제출하고 5일 동안 신나게 기다렸다가 10번을 다시 읽어도 무슨 말인지 모르겠다는 이유로 거절을 받았다고 상상해 보십시오. 그리고 어떤 경우에는 앱이 절대 승인되지 않을 수도 있습니다. (섹스 샵이나 vape 제품, 누구?). PWA를 사용하면 앱 제출이 없습니다. 어떤 구호! PWA를 Apple Appstore, Google Play 및 Microsoft Store에 게시하려는 경우 방법은 다음과 같습니다.
• 낮은 개발 비용 : PWA는 한 번 개발하면 이를 지원하는 모든 모바일 플랫폼과 브라우저에서 사용할 수 있기 때문에 PWA의 개발 비용은 네이티브 앱에 비해 상대적으로 적습니다. 또 다른 이유는 PWA가 더 일반적으로 이해되고 훨씬 더 큰 개발자 기반을 가진 프로그래밍 언어와 기술을 사용하기 때문입니다.

 권장 읽기:
- 프로그레시브 웹 앱 vs 네이티브 앱: 어느 쪽이 더 잘 어울리나요?
- 전자상거래를 위한 PWA의 장점

PWA 단점

분명히, 이 모든 것이 사실이라고 하기에는 너무 좋게 들립니다. 그리고 무언가가 너무 좋아서 사실이 아닌 것 같을 때 사람들은 종종 "좋아, 뭐가 문제야"라고 묻습니다.

PWA는 업계를 정의하는 특성에도 불구하고 여전히 다음과 같은 단점이 있습니다.

• 도달 가능성

이 기술은 여전히 ​​새롭고 모든 것이기 때문에 PWA를 위한 현재 앱 마켓플레이스가 없기 때문에 어떤 방식으로든 더 넓은 범위의 청중에게 다가갈 수 있는 능력이 저하됩니다. 그러나 Microsoft와 같은 알려진 회사에서 PWA를 Microsoft Store에 통합하여 Windows 10에서 PWA의 모든 것의 미래를 그렇게 멀리 가져오지 않는 것처럼 보이게 만드는 움직임이 있습니다.

• 설치된 다른 앱과의 통신 :

PWA는 여전히 근본적이고 본질적으로 앱과 같은 웹 페이지이기 때문에 여러 면에서 제한될 수 있습니다. 가장 큰 한계는 응용 프로그램 간 통신이 제한 되어 개발자에게 문제가 될 수 있다는 것입니다.

자주하는 질문

PWA는 무엇에 사용됩니까?

빠르고 안정적이며 즐겁게 사용할 수 있는 웹 앱은 다양한 용도로 제공될 수 있습니다. 예를 들어, Aliexpress의 PWA인 Tik Tok은 사람들이 사이트에 익숙해지도록 하여 기본 앱을 다운로드하도록 유도합니다. Spotify는 PWA를 사용하여 웹 사이트의 성능과 응답성을 더욱 최적화하여 사용자에게 앱 다운로드 외에 다른 옵션을 제공합니다. pacman 또는 2048과 같은 게임도 PWA를 사용하여 더 많은 웹 사용자에게 다가갑니다.

PWA와 일반 앱의 차이점은 무엇인가요?

기술적인 관점에서 네이티브 앱은 앱 스토어에서 다운로드해야 하며 웹 브라우저를 통해 PWA에 액세스할 수 있습니다. 비즈니스 관점에서 PWA는 더 SEO 친화적이고 저렴하며 빠르게 개발할 수 있습니다. 한편, 네이티브 앱은 여전히 ​​복잡한 모바일 프로젝트에 가장 적합하며 브랜드 신뢰도를 높일 수 있습니다.

PWA는 모바일 장치에서만 작동합니까?

아니요, PWA는 데스크톱, 모바일 및 태블릿 모두에서 작동합니다.

PWA의 프로그래밍 언어는 무엇입니까?

PWA는 HTML, CSS, Javascript 및 WebAssembly를 포함한 인기 있는 프로그래밍 언어와 웹 기술로 구축되었습니다.

결론

“PWA가 네이티브 앱을 대체할 것인가?”

그렇지 않다고 생각합니다.

아직.

2019년 4분기 기준으로 Google Play에는 거의 3백만 개의 앱이 있고 Apple App Store에는 2백만 개 이상의 앱이 있습니다(Statista, 2019). 이 숫자는 여전히 증가하고 있으며 이러한 모든 앱이 조만간 교체될 것으로 보이지는 않습니다. 사용자 습관은 하나의 것이고 쉽게 바뀌지 않습니다.

즉, Progressive Web Apps에는 큰 잠재력이 있습니다. SimiCart는 Progressive Web Apps가 미래라고 믿습니다. 속도, 레이아웃 유연성 및 기능 기능을 갖춘 PWA는 데스크톱 사이트, 모바일 사이트, 기본 모바일 앱 및 기본 Windows 응용 프로그램을 대체할 예정입니다. 예, 잘 들었습니다. Windows 응용 프로그램 . 전자 상거래 세계에서만 Progressive Web App은 현재 온라인 쇼핑객을 위해 가볍고 반응이 빠르며 매력적인 경험을 원하는 상점 소유자에게 적합한 접근 방식입니다.

실제로 통계에 따르면 PWA 구현이 1개월 지연되면 최대 140만 달러의 매출 손실 이 발생할 수 있으며 브랜드가 6개월 연기하기로 결정하면 추가로 680만 달러가 손실될 수 있습니다.

완벽한 Magento PWA 솔루션을 찾고 있는 전자 상거래 상점 소유자를 위해 여기 SimiCart에서 귀하와 귀하의 상점을 위한 완전한 패키지를 제공합니다.