WordPress 사이트를 PWA로 변환: 트렌드에 맞춰

PWA 운동은 너무나 변화하고 기념비적인 운동으로, 마치 거대한 파도처럼 기술 세계를 휩쓸고 가는 길에 있는 모든 것을 더 나은 방향으로 변화시킵니다.

세계에서 가장 영향력 있는 브랜드 중 일부, 즉 유명한 Twitter Lite 가 있는 Twitter는 이제 공식적으로 PWA를 향후 개발을 위한 기반으로 만들었습니다.

 추천 자료: 영감을 주는 12가지 프로그레시브 웹 앱 예제

WordPress, 더 구체적으로 말하면 Automattic – WordPress 뒤에 있는 사람들은 또한 WordPress와 같은 플랫폼의 워크플로에 Progressive Technologies를 통합하는 작업을 발표함으로써 Chrome Dev Summit 2017에서 WordPress PWA 운동을 시작했습니다.

그 이후로 WordPress 환경이 너무 많이 변경되어 WordPress를 PWA로 변환하지 않으면 시청자 만족도가 거의 보장 되지 않습니다.

PWA 이해

구글이 말했듯이 프로그레시브 웹 앱은

• 신뢰성 – 불확실한 네트워크 조건에서도 즉시 로드하고 다운사우르스를 표시하지 않습니다.
• 빠름 – 매끄럽고 부드러운 애니메이션과 버벅거림 없는 스크롤로 사용자 상호 작용에 빠르게 응답합니다.
• 몰입 도 – 몰입형 사용자 경험을 통해 장치에서 자연스러운 앱처럼 느껴집니다.

간단히 말해서, PWA는 웹 브라우징 경험의 미래입니다. PWA에 대한 자세한 내용은 PWA란 무엇입니까? 문서를 확인하십시오.

왜 WordPress용 PWA인가?

시청자가 웹 페이지가 로드되기를 기다리며 지루해하는 것을 원하지 않는 한 사이트 성능, 기능 및 UX가 향상된 솔루션이 항상 더 나은 선택입니다.

예를 들어 유명한 Twitter Lite를 살펴보십시오. 사례 연구에 따르면 Twitter는 Twitter Lite의 출시와 함께 사용자 행동의 엄청난 변화를 경험했습니다.

Twitter Lite의 엔지니어링 책임자인 Nicolas Gallagher는 다음과 같이 말합니다.

Twitter Lite는 이제 Twitter를 사용하는 가장 빠르고, 가장 저렴하며, 가장 안정적인 방법입니다. 웹 앱은 기본 앱의 성능에 필적하지만 Android용 Twitter와 비교할 때 필요한 장치 저장 공간의 3% 미만 입니다.

그리고 이러한 움직임에 동참한 것은 Twitter 뿐만 아니라 Spotify와 같은 대형 브랜드도 최근 개발한 Spotify PWA로 이를 수행했습니다. PWA가 가져오는 변화에 관한 통계와 뉴스는 도처에 있고 무시하기에는 너무 커서 웹의 PWA 기반 미래에 대한 주장이 그 어느 때보다 현실적이게 보입니다.

WordPress에서 PWA를 설정하기 위한 전제 조건

• 프로그레시브 웹 앱을 사용하려면 WordPress 웹사이트가 안전한 출처에서 제공되어야 합니다. 즉, 웹사이트는 HTTP가 아니라 HTTPS여야 합니다 .
• WordPress 버전: 3.5.0 이상
• PHP 버전: 5.3 이상

WordPress 사이트를 PWA로 변환하는 방법

앞서 언급한 전제 조건이 충족되면 WordPress 사이트 소유자는 수동 또는 플러그인 사용의 두 가지 방법 중 하나를 사용하여 PWA로 변환하도록 선택할 수 있습니다.

1. 수동으로 PWA 개발

다른 유형의 개발보다 비용이 적게 들지만 PWA를 개발 하려면 여전히 상당한 양의 코딩 지식이 필요하며 개발자는 널리 사용되는 Javascript 프레임워크 및 라이브러리, 특히 Angular 및 React에 대해 알고 있어야 합니다. 이것이 PWA를 구축하는 과정이 쉽지 않기 때문에 경험이 없는 사이트 소유자가 플러그인(무료 및/또는 유료 플러그인)을 사용해 보거나 전문 개발자를 고용하는 것이 종종 권장되는 이유입니다.

PWA를 수동으로 빌드하는 동안 Google의 프로그레시브 웹 앱 체크리스트를 따르고 가능한 최상의 사용자 경험을 위해 Lighthouse 도구에 대해 웹 페이지를 테스트하는 것을 잊지 마십시오.

2. 플러그인 사용

개발자가 아닌 사이트 소유자는 걱정하지 마십시오! WordPress는 사용자가 선택할 수 있는 대부분의 힘든 작업을 수행하는 다양한 플러그인을 제공합니다. 이 플러그인은 무료 플러그인과 유료 플러그인의 2가지 유형이 있습니다.

무료 플러그인

1. 슈퍼PWA

WordPress용 무료 PWA 플러그인의 맨 위에는 우수한 서비스와 품질이라는 오랜 전통을 가진 SuperPWA가 있습니다.

SuperPWA는 구성하기 쉽고 프로그레시브 웹 앱을 설정하는 데 1분도 채 걸리지 않습니다. SuperPWA는 생성하는 모든 데이터베이스 항목과 파일을 제거하여 완전히 제거합니다. 실제로 처음으로 수동으로 저장할 때까지 기본 설정은 데이터베이스에 저장되지 않습니다.

활성 설치: 30000+
별점: ★★★★★

2. PWA

PWA는 테마와 플러그인이 바퀴를 재발명하지 않고 서로 충돌하지 않도록 PWA 빌딩 블록과 조정 메커니즘을 제공하기 위한 것입니다.

서비스 워커를 포함하는 플러그인 또는 테마를 개발하는 경우 이 PWA 플러그인에 의존하는 것을 고려하거나 최소한 PWA 플러그인을 사용할 수 없는 경우에 대한 대비책으로 내장 구현만 사용하십시오.

마지막 업데이트: 5개월 전
활성 설치: 20,000+
별점: ★★★★

3. WP 및 AMP용 PWA

무료 제공의 경우 WP 및 AMP용 PWA가 그 역할을 훌륭하게 수행합니다. 훌륭하고 사용하기 쉬우며 탁월한 고객 서비스를 제공합니다. 그러나 문서가 약간 부족하여 모든 것이 작동하도록 하는 데 더 많은 시간이 소요될 수 있습니다.
활성 설치: 8,000개 이상
별점: ★★★★★

4. 웹 스위트 PWA

WebSuite PWA는 웹사이트를 통합 AMP 지원을 통해 PWA로 전환하는 완벽한 플러그인입니다. 플러그인은 홈 화면에 추가, 푸시 알림, CDN, 분석 통합 등과 같은 많은 기능과 함께 PWA에 앱과 같은 모양을 제공하는 다양한 테마와 함께 제공됩니다.

활성 설치: 30+

별점: ★★★★★

5. Webkul의 WordPress용 단순 PWA

단 49달러로 WordPress 사이트를 모든 기능과 특전을 갖춘 완전한 기능의 PWA로 전환할 수 있습니다. 그게 다가 아닙니다. 플러그인은 모든 WordPress 테마와 호환되며 많은 노력이나 기술적 지식 없이도 관리자 백엔드에서 테마, 애플리케이션 이름 및 애플리케이션 아이콘을 변경할 수 있습니다.

활성 설치: 정보를 사용할 수 없음

별점: 정보 없음

PWA 플러그인 설치 방법

WordPress PWA 플러그인의 설치 프로세스는 매우 간단하고 능률적입니다. 아래에서는 SuperPWA 를 예로 사용합니다.

워드프레스 설치 :

• 방문 WordPress 관리자 > 플러그인 > 새로 추가
• ' 슈퍼 프로그레시브 웹 앱 ' 검색
• " 지금 설치 "를 클릭한 다음 " 활성화 " Super Progressive Web Apps 를 클릭합니다.

수동으로 설치하려면:

• super-progressive-web-apps 폴더를 업로드하십시오. 서버의 /wp-content/plugins/ 디렉토리
• WordPress 관리 > 플러그인 으로 이동
• 목록에서 Super Progressive Web Apps 플러그인을 활성화합니다.

결론

이 PWA 움직임은 곧 둔화될 것으로 보이지 않으며 가장 좋은 방법은 뒤처지기 전에 지금 조치를 취하는 것입니다.

기술에 정통하고 귀하와 귀하의 사이트를 위해 더 많은 자유를 원한다면 PWA의 수동 개발이 선호되는 옵션일 것입니다. 그러나 경험이 없고 더 안전하고 시도되고 테스트된 방법 을 원하는 사이트 소유자에게는 WordPress용 PWA 플러그인 이 그렇게 나쁜 생각이 아닙니다. 플러그인을 사용하면 PWA를 구축하는 프로세스를 처리할 때 시간과 가끔 골치 아픈 문제를 줄일 수 있으므로 더 나은 리소스 할당이 가능합니다.

추가 읽기:

• Magento PWA Studio: Vue Storefront와의 상세 비교

• Magento WordPress 통합: 단계별 가이드