Magento 2 PWA 구축을 위한 종합 가이드

Magento는 기업이 온라인 상점을 시작할 때 항상 선호하는 플랫폼입니다. 그러나 Magento의 장점으로 인해 점점 더 많은 회사가 기회와 고객 경험을 확장하기 위해 이 시장에 뛰어들고 있습니다. 따라서 온라인 시장은 상당히 경쟁적입니다. 결과적으로 기업은 경쟁자와 경쟁하기 위해 항상 첨단 기술을 따라잡아야 합니다. 프로그레시브 웹 앱(Progressive Web Apps) 또는 PWA는 많은 회사에서 이 앱을 온라인 상점에 통합하려는 최신 기술 중 하나입니다. 그리고 Magento 2 PWA 는 완벽한 선택입니다. 이 기사에서는 가장 간단한 방법으로 Magento 2 PWA를 빌드하기 위한 자세한 체크리스트를 제공합니다.

먼저 Progressive Web App에 대해 알아야 합니다.

그렇다면 프로그레시브 웹 앱이란 정확히 무엇입니까?

프로그레시브 웹 앱은 기본 앱처럼 보이고 느껴지지만 모바일 브라우저에서 직접 작동합니다. App Store에서 아무것도 다운로드할 필요가 없습니다. 고객은 대신 브라우저에서 앱과 같은 경험을 즉시 얻을 수 있습니다.

프로그레시브 웹 앱의 몇 가지 뛰어난 기능

오프라인 작업 기능 : 서비스 작업자 – 해당 기능을 담당하는 기술입니다. 따라서 앱이 물건을 오프라인으로 저장하고 검색을 위한 네트워크 요청을 유연하게 관리할 수 있습니다. 결과적으로 앱을 실행하는 데 필요한 데이터 양을 최소화하게 됩니다.

검색 가능성 및 쉬운 설치: PWA는 Google 또는 Bing과 같은 일반 검색 엔진을 통해 검색할 수 있는 몇 가지 추가 기능이 있는 웹사이트입니다. 따라서 사용자는 앱 스토어에서 아무것도 다운로드할 필요가 없습니다. PWA의 설치는 정말 쉽습니다. 처음 방문하는 동안 백그라운드에서 발생합니다.

전화 기능 사용 : PWA는 Android에서 장치 기능에 액세스할 수 있는 가능성이 많고 iOS에서는 약간 적습니다. 앱과 같은 방식으로 카메라, GPS 또는 지문 스캐너를 사용하면 사용자 경험이 풍부해집니다.

자동 업데이트 : PWA를 통해 게시자는 즉시 패치를 구현할 수 있습니다. 또한 콘텐츠를 완전히 제어할 수 있습니다. 고객은 항상 최신 버전의 애플리케이션을 사용합니다.

안전성 : HTTPS 프로토콜을 사용하여 암호화되어 데이터가 안전하므로 가로채기 및 변경하기가 더 어렵습니다. 또한 사용자는 HTTPS를 게시자의 안전과 신뢰성을 보장하는 것으로 인식합니다. 그리고 구글은 검색 순위에서 이를 활용한 가산점을 준다.

앱과 같은 느낌 : PWA의 전체 아이디어는 웹의 개방성을 가진 앱과 같은 경험에 가능한 최고의 경험을 연결하는 방법을 찾는 것입니다.

푸시 알림 :   견고한 메시지 전략의 일부인 푸시 알림은 사용자의 관심을 유지하고 앱을 더 많이 열고 사용하도록 권장할 수 있습니다.

이제 Magento 2는 무엇이며 왜 더 인기를 얻고 있습니까?

아시다시피 Magento는 주문 관리, 비즈니스 인텔리전스 및 배송을 특징으로 하는 오픈 소스 전자 상거래 플랫폼입니다. 인기 있는 Magento 통합에는 파일 ERP, 재무 및 결제 애플리케이션이 포함됩니다.

그렇다면 Magento 2와 Magento 1의 차이점은 무엇입니까? 어떤 새로운 기능을 제공합니까?

Magento 1의 몇 가지 단점부터 시작하겠습니다. 플랫폼은 적응할 수 있도록 만들어졌습니다. 마젠토의 인기 비결 중 하나는 바로 이것 때문입니다. 그러나 이러한 유연성은 개발자가 플랫폼에서 계속 작업하고 개인화할 경우 사용자 인터페이스를 더 복잡하고 사용하기 어렵게 만드는 단점이 있습니다. 이러한 조정으로 인해 사이트가 느리게 실행될 수도 있습니다.

Magento 1은 높은 학습 곡선과 상당한 속도 저하 외에도 모바일 응답성과 같은 경쟁업체가 제공하는 기능이 부족합니다.

이러한 문제의 대부분은 Magento 2에서 해결됩니다. 몇 가지 중요한 차이점이 있습니다.

• 사이트 속도를 저하시킬 수 있는 최신 PHP 버전을 백업합니다.
• CSS3, HTML5 및 MySQL이 모두 지원됩니다.
• Magento 1보다 빠른 페이지 로드 시간(평균 20% 빠름).
• 사이트가 모바일 친화적입니까?
• 비기술 직원을 위한 사용자 친화적인 관리 인터페이스가 있습니다.
• Magento 1의 6단계에서 Magento 2의 2단계로 결제 프로세스의 단계 수를 줄입니다.

Magento 2가 세 가지 버전으로 제공된다는 점을 이해하는 것이 중요합니다.

• Magento 2 Open Source(이전 명칭 Magento 2 Open Source): 누구나 Magento 웹사이트에서 이 제품을 무료로 다운로드할 수 있습니다. 그 후 사용자가 Magento를 설치할 수 있지만 모든 호스팅, 지원 및 개발 비용은 사용자가 부담합니다.
• Magento 2 Commerce(온프레미스) — 이 프리미엄 온프레미스 옵션에는 추가 기능과 지원이 포함됩니다. 높은 월 가격 때문에 더 큰 회사만 채택할 수 있습니다. (비용은 아래에서 자세히 설명합니다.)
• Magento 2 Commerce Cloud – Magento 2 Commerce의 클라우드 호스팅 버전에는 자체 호스팅 없이도 온프레미스 Enterprise Edition의 모든 기능이 있습니다.

최근 PWA In Magento 2를 적용하는 것이 트렌드인 이유는 무엇입니까?

Magento 소비자는 특히 Magento 2 PWA Studio의 출현 이후로 Progressive Web App 통합에 상당한 관심을 보였습니다. 웹사이트를 Magento 2 PWA로 전환해야 하는 몇 가지 이유가 아래에 나열되어 있습니다.

모바일 장치에서 향상된 사용자 경험

PWA는 사용자의 모바일 장치에 다운로드 및 설치가 간단하지만 이는 훌륭한 기능의 시작에 불과합니다. 오프라인 모드, 백그라운드 동기화(네트워크 연결이 안정될 때까지 작업 연기) 및 기타 앱과 유사한 기능을 즐길 수 있습니다.

네이티브 앱에 비해 개발 비용 및 유지 관리 비용 절감  

기본 앱용으로 두 가지 다른 버전을 만들어야 합니다(iOS용 하나와 Android용 하나). 그 결과 앱 개발 및 유지 관리에 두 배의 시간과 노력이 소요됩니다. 그러나 모든 운영 체제에서 실행할 수 있는 PWA를 구성하려면 단일 코드베이스가 필요합니다.

기기 불가지론

볼 수 있는 Magento 2 PWA의 가장 큰 장점은 장치에 구애받지 않는다는 것입니다. 솔직히 말해서 이러한 프로그램은 모든 장치 및 브라우저와 호환됩니다. 고객은 온라인 상점에서 선호하는 장치로 쇼핑할 수 있습니다.

Google SERP의 최고 위치

PWA와 웹사이트는 공통점이 많습니다. Google과 같은 상위 검색 엔진 순위를 통해 모든 사용자가 액세스할 수 있고 적응할 수 있습니다. Magento PWA는 이와 관련하여 기본 및 하이브리드 앱에 비해 상당한 이점이 있습니다. SEO 전술, 마케팅 이니셔티브 및 유료 광고를 통해 검색 가능성을 더욱 높일 수 있습니다. 기존 앱은 주로 앱 스토어를 통해 광고됩니다.

연결 가능

이것은 PWA와 웹사이트가 공통적으로 가지고 있는 또 다른 속성입니다. URI(Unified Resource Identifier)의 가용성 덕분에 정보를 유지하고 상태를 다시 로드할 수 있습니다. 고객은 Magento 2 PWA에 대한 링크를 저장하고 URL을 공유하며 탭에 저장한 동일한 페이지를 다시 로드할 수도 있습니다. 이러한 상황에서 프로그레시브 앱은 기존 웹사이트와 유사하게 작동합니다.

사용자 측 업데이트 없음

정기적으로 앱을 업데이트해야 하는 필요성은 누구나 알고 있습니다. 장치에 해당 업데이트를 설치하는 것은 최종 사용자의 책임입니다. 사용자 인증이 필요하지 않습니다. Magento PWA 업데이트가 자동으로 수행될 수 있습니다. 결과적으로 사용자는 업그레이드 여부에 관계없이 최신 기능을 사용할 수 있습니다.

오프라인 작업

오프라인으로 작동하는 기능은 Magento 2 PWA의 가장 좋은 기능입니다. 사용자는 인터넷에 액세스할 수 없는 경우에도 온라인에서 본 콘텐츠에 액세스할 수 있습니다. 이것은 모든 조회된 페이지에 대한 정보를 자동으로 저장하는 내장된 캐시 메커니즘에 의해 가능합니다.

Magento 2 PWA는 대상 고객이 인터넷 연결이 좋지 않거나 보통인 국가에 거주하는 경우 탁월한 솔루션입니다. 이 기능은 또한 사용자가 오프라인 상태에서도 비즈니스 내부에서 계속 쇼핑할 수 있으므로 카탈로그 포기를 35% 이상 최소화합니다.

푸시 알림

푸시 알림은 이제 프로그레시브 앱 솔루션 덕분에 모든 사람이 사용할 수 있습니다. 이전에는 전용 스마트폰 앱이 있는 인터넷 소매업체를 통해서만 사용할 수 있었습니다. Google에 따르면 PWA 사용자의 60%가 이러한 앱에서 푸시 알림을 보낼 수 있도록 허용합니다. 특별 거래 및 휴일 할인에 ​​대해 고객에게 알림으로써 이 기능을 강력한 판매 창출 시스템으로 빠르게 전환할 수 있습니다 . 또한 장바구니에 담긴 제품에 대해 상기시켜 주고 구매 가능한 제품을 구매하도록 권장할 수 있습니다.

보안

Magento 2 PWA는 매우 안전합니다. HTTPS 프로토콜은 데이터 보안 및 메시지 가로채기(man-in-the-middle)로부터의 보호를 담당합니다. 또한 콘텐츠 수정 및 쇼핑을 금지합니다.

앱 스토어 요구 사항 없음

Magento PWA를 사용하여 Google Play 및 App Store의 모든 표준을 충족할 필요는 없습니다. 앱이 요구 사항을 충족하지 않으면 앱 스토어에서 차단되거나 제거될 수 있습니다. 또한 사전 통지를 제공하지 않으므로 문제를 해결할 수 있는 기회가 거의 없습니다.

기업은 프로그레시브 웹 앱을 사용하여 이러한 제한 사항을 해결할 수 있습니다. 법이나 규정을 따를 필요가 없으므로 앱이 차단될 가능성이 줄어듭니다.

그렇다면 Magento 2 PWA를 효과적으로 구축하는 방법은 무엇입니까?

Magento 매장 소유자가 고려해야 할 Magento PWA 통합에는 세 가지 옵션이 있습니다.

Magento 2 PWA 확장 설치

이것은 Progressive Web App 기능을 기존 Magento 사이트에 포함하는 가장 간단한 방법입니다. 이제 다양한 소스의 다양한 Magento 2 PWA 확장(무료 및 프리미엄 모두) 중에서 선택할 수 있습니다.

장점: Magento 2 PWA 모듈은 저렴합니다($0.00 ~ $150). 또한 사이트에 이러한 확장 프로그램을 설치하는 데 몇 시간 밖에 걸리지 않습니다.

단점: 일반적으로 대부분의 Magento 2 PWA 확장은 완전한 프로그레시브 웹 앱 기능을 제공할 수 없습니다. 일부 모듈은 빠른 웹사이트 로드 속도, 오프라인 모드 및 백그라운드 동기화와 같은 다른 중요한 기능을 무시하고 "홈 화면에 추가"만 하고 푸시 알림을 전달할 수 있습니다.

Magento 2 PWA Studio를 사용한 PWA

Magento 2.3 PWA Studio는 Magento 2 웹사이트용 PWA 상점을 개발, 배포 및 유지 관리하는 데 도움이 되도록 출시되었습니다.

장점: Magento 2 PWA Studio를 사용하여 처음부터 PWA를 개발하는 것은 사용 가능한 Magento 2 PWA 확장을 사용하는 것보다 더 철저한 솔루션입니다. 이전 Magento 매장을 API를 통해 백엔드에 연결된 PWA(Progressive Web App) 매장으로 교체합니다.

단점: Magento 2 PWA Studio는 기본적으로 PWA를 구성하는 데 도움이 되는 도구 모음입니다. 아직 해야 할 일이 많이 있습니다. 매우 간단하고 여러 Magento 기본 기능이 없는 Venia 매장(PWA Studio 데모)을 고려하십시오.

Magento 2 PWA 테마를 사용하여 사이트를 PWA로 변환

Magento 2 PWA 테마는 Magento 2.3 PWA Studio, ReactJS 및 GraphQL을 기반으로 구축된 기능이 풍부한 PWA 통합 솔루션입니다. 두 부분으로 구성됩니다. 대형 PWA 상점과 상점을 Magento 백엔드에 연결하는 내장 API입니다.

장점: 이것은 지금까지 PWA를 Magento 2 웹사이트에 통합하기 위한 가장 유망한 접근 방식인 것 같습니다. 우선 PWA에서 기대할 수 있는 모든 것을 제공할 수 있습니다. 번개처럼 빠른 로드 시간(데스크톱 및 모바일 장치 모두에서), 홈 화면의 바로 가기, 스플래시 페이지, 전체 화면 표시, 네트워크 독립성, 배경 동기화, 낮은 데이터 사용량 및 쉬운 업데이트. 둘째, PWA 스토어프론트 데모는 모든 사이트 페이지에 대한 포괄적인 레이아웃을 갖춘 Venia의 기본 스토어프론트보다 훨씬 우수한 버전입니다. 결과적으로 PWA 개발에 상당한 시간을 절약할 수 있습니다.

단점: 일반적으로 Magento 2 PWA 테마는 모든 Progressive Web App 표준을 충족하고 멋진 상점을 제공합니다. 그리고 일반 Magento 2 프론트엔드처럼 보입니다. 그러나 디자인과 일치하도록 PWA 스토어프론트를 변경해야 합니다. 또한 사이트에 사용자 지정 기능이 있거나 타사 확장을 사용하는 경우 새 상점과의 호환성을 확인하고 API를 업데이트해야 합니다.

편도에 얼마를 지불해야 합니까?

앞서 언급했듯이 Magento 2 웹사이트를 PWA로 변환하는 세 가지 방법이 있으며 비용이 다릅니다.

Magento 2 PWA 확장:  

모듈(최대 $150)을 구입하고 설치 서비스 비용을 지불해야 합니다(또는 확장을 직접 설치 및 구성).

Magento 2 PWA 스튜디오:

PWA를 처음부터 구축하려면 Magento 2와 PWA에 대한 광범위한 지식을 갖춘 PWA 개발자를 고용해야 합니다. Magento 2 PWA Studio 도구를 사용하여 PWA 상점 및 새 API를 개발하는 데 최대 6개월이 걸릴 수 있습니다. 이 통합을 위해 많은 돈을 따로 마련해야 합니다.

Magento 2 PWA 테마:

PWA 상점 및 핵심 API가 이미 설정되었기 때문에 프로젝트 비용은 주로 원하는 사용자 정의 수준에 따라 결정됩니다. 이 비용은 두 번째 솔루션보다 낮고 첫 번째 솔루션보다 높지만 비용 가치가 충분합니다.

결론

Magento 2 PWA에 대한 개요와 구성 방법에 대한 희망을 가지고 이 기사를 안내합니다. 놀라운 기능이 많이 있으므로 온라인 상점의 효율성을 높이기 위해 뛰어들 가치가 있습니다. 따라서 귀하의 비즈니스는 고객의 요구를 충족시키고 인터넷 환경에서 더 많은 발전 기회를 가져올 수 있습니다. 그러나 이 기술에 대해 여전히 혼란 스럽다면 Magesolution 이 귀하의 비즈니스를 지원하는 파트너가 될 의향이 있습니다. 이 분야의 많은 경험을 바탕으로 최고의 서비스인 Magento Progressive Web Application Development 를 제공할 것을 자신합니다. 따라서 질문이 있는 경우 당사에 문의 하여 더 많은 정보를 얻으십시오.