Reddit PWA: 최고의 소셜 미디어가 웹 앱을 활용하는 방법

새로운 기술을 채택하는 것은 온라인 비즈니스의 혁신과 성장의 불가피한 부분입니다. 일반적으로 대기업은 최신 가제트를 쉽게 경험할 수 있어 고객 만족도를 높이고 경쟁에서 우위를 점할 수 있습니다. PWA는 Reddit PWA, Facebook PWA 및 Alibaba PWA와 같은 수많은 거대 브랜드에서 채택한 차세대 제품이 될 것입니다.

즉, PWA는 최신 웹사이트의 새로운 표준이자 네이티브 앱을 대체할 유망한 플레이어로 간주됩니다. 그러나 중소기업 및 신흥 기업에게는 믿을 수 없을 정도로 저렴합니다. 오늘의 사례 연구에서는 먼저 Reddit PWA를 살펴보고 이 인기 있는 소셜 미디어 사이트가 PWA를 활용하는 방법을 살펴보겠습니다.

Reddit 개요

Reddit은 2005년 버지니아 대학의 Steve Huffman과 Alexis Ohanian에 의해 설립되었습니다. 그 이름은 다른 사람들이 이야기를 공유하고 싶어할 때 "나는 그것을 읽었습니다"라는 반응을 수정한 것입니다.

사용자가 소셜 뉴스, 포럼 토론, 웹 콘텐츠 또는 모인 네트워크와 같은 다양한 콘텐츠 유형으로 게시물을 제출할 수 있는 대규모 플랫폼입니다. 거의 모든 학습 분야에 걸쳐 축적된 지식 토론의 원천인 Reddit을 인기 있는 이유 중 하나입니다.

게다가 Reddit은 사람들이 질문할 때 익명을 유지할 수 있도록 하여 두뇌가 갈망하는 모든 정보를 탐색할 수 있는 개방적이고 흥미로운 경험의 여지를 제공합니다.

Reddit 게시물은 커뮤니티에서 결정합니다. 게시물 또는 하위 레딧은 사용자가 유용하다고 생각하는 방식에 따라 찬성하는 경우에만 위로 이동할 수 있습니다. 이러한 방식으로 스팸 또는 유해하고 오해의 소지가 있는 정보를 줄일 수 있습니다.

그들의 주요 타겟 고객은 18-29세 사이의 대학 학부생, 인터넷에 능한 동료, 소셜 미디어 옹호자입니다. 그들은 거의 4,800만 월간 활성 사용자와 전 세계적으로 4억 3,000만 명이 넘는 월간 활성 사용자로 미국에서 가장 인기 있는 소셜 네트워크 10위에 올랐습니다.

브랜드가 성과를 높이는 데 PWA를 통합하는 방법

사용자 경험 가속화

많은 브랜드가 앱의 로딩 속도를 높이기 위해 PWA를 찾습니다. Uber PWA의 경우를 예로 들어 보겠습니다. 고객이 (대부분의 경우) 서둘러 Uber를 사용한다는 것을 알고, 2G만큼 느린 연결에서도 3초 이내에 로드할 수 있는 작지만 강력한 Uber PWA를 만들었습니다.

사용자 여정을 가속화하면 이탈률이 줄어들어 잠재적 전환율이 높아집니다. 요즘 사람들은 로딩 속도가 느린 페이지를 언제든 끊을 수 있는 성가신 영화를 보는 것으로 간주합니다.

Walmart는 또한 로딩 시간이 1초만 개선되어도 전환율이 이미 2% 증가했다고 밝혔습니다.

고객 가치 증대

PWA는 첫 페이지 로딩을 개선하는 데 도움이 될 뿐만 아니라 페이지와 요소 간에 매끄럽고 원활한 전환을 생성합니다. 즉, 현장 사용자 경험도 즐거울 것입니다.

전자 상거래 상점 및 시장의 경우 고객이 페이지에 오래 머무를수록 제공되는 항목에 더 관심이 있음을 의미합니다. 동시에 대량으로 쇼핑하는 경향이 있는 사람들은 쇼핑 여정이 쉽고 빠릅니다.

PWA는 중요한 시간에 푸시 알림을 활성화하여 참여를 위해 자주 사용하는 사용자와 다시 연결하여 온라인 비즈니스에 더 많은 가치를 제공할 수 있습니다.

온라인 흐림 – 오프라인 거리

오프라인으로 작업할 수 있는 PWA를 사용하면 로드된 페이지를 탐색하여 이동 중에도 완료되지 않은 온라인 여정을 계속할 수 있습니다.

또한 콘텐츠를 변경할 수 있으며 연결이 다시 적용될 때 가장 가까운 동기화를 위해 모두 백그라운드에 저장됩니다.

모든 장치는 동일하게 작동합니다.

소규모 기업은 PWA 통합 비용을 절감하면서 다른 필수 투자에 예산을 할당할 수 있습니다.

모든 장치에 대해서만 하나의 빠른 앱을 구축해야 하므로 모든 온라인 존재에서 일관된 성능을 유지하고 고객을 유치하고 확보하는 데 시간과 리소스를 최대화할 수 있습니다.

이것이 성장하는 기업이 수익을 효율적으로 늘릴 수 있는 방법입니다.

PWA 통합 전 Reddit의 과제

Reddit은 항상 사용자가 특히 데스크톱을 통해 앱을 사용하도록 권장하는 솔루션을 원했습니다. 그들은 사용자가 앱으로 쉽게 전환할 수 있는 방법을 찾고 있었습니다.

데이터에 따르면 앱 사용의 가장 큰 단점 중 하나는 너무 많은 저장용량을 소비한다는 것입니다. 대조적으로, PWA 설치에는 1MB 미만이 필요합니다.

또한 Reddit의 다운로드 프로세스는 대용량으로 인해 시간 킬러로 간주됩니다. 일부 Reddit 스레드는 Reddit이 이전에 PWA에서 작업하고 기능을 최적화하는 것을 보지 못한 것이 놀랍다고 말했습니다.

Reddit PWA의 결과

디자인 정보

PWA는 여러 플랫폼에서 동일한 모양과 느낌을 유지하지만 각 브라우저는 이를 다르게 지원합니다. 점 3개로 된 메뉴를 사용하면 Microsoft Edge가 아닌 Chrome을 사용하여 웹에서 PWA를 더 간단하게 설치하거나 제거할 수 있습니다.

"홈 화면에 앱 설치"와 같은 팝업 표시는 사용자 친화적이며 방문자가 앱 사용을 권장하는 필수 항목으로 간주됩니다.

기능 정보

• 로딩 속도: 효율적으로 빠르고 부드러움
• 페이지와 요소 간의 전환: 매끄럽고 반응이 빠르고 즉각적으로 나타나는 요소
• 탐색 용이성: 확장 후 호버 효과가 있는 일반적인 드롭다운 콘텐츠 레이아웃, 친숙하고 직관적이며 손쉬운 사용
• 각 상호 작용에 대한 참여 수준: 전반적으로 만족합니다. 로딩 중인 콘텐츠가 나중에 즉시 표시되도록 Reddit 로고가 표시되는 방식은 사이트가 더 빠르게 실행되는 것처럼 보이게 합니다.

Reddit과 같은 PWA를 구축하는 방법?

Reddit PWA 팁

PWA 핵심 요구 사항을 충족하는지 확인하십시오. 빠르게 시작해야 하지만 사용자 여정 전반에 걸쳐 빠르게 유지되어야 합니다. Reddit PWA는 첫 로딩부터 엄청난 속도를 보여주며 스크롤하는 즉시 모든 콘텐츠가 나타나 반응형 사용자 경험을 보장합니다.

iOS에서만 PWA 설치에 대한 팝업 메시지 및 알림과 같은 재참여 기능은 Apple에서 지원하지 않습니다.

최적의 기능을 위한 고급 개발을 연습하고 싶다면 PWA가 모범 사례와 최신 웹 API를 기반으로 구축된다는 사실을 알아두십시오. 비즈니스 우선 순위 및 특정 요구 사항에 따라 독립적으로 또는 조합하여 작업에 적용할 수 있습니다.

Reddit PWA는 먼저 속도 향상에 중점을 두고 나머지는 모두 따릅니다. "저희 모바일 앱 성능이 얼마나 좋은지 보세요. 앱을 다운로드하면 무엇을 얻을 수 있을지 상상해 보세요."라고 말하는 것과 같습니다. 방문자가 스크롤한 후 Reddit은 푸시업을 활성화하여 사용자가 앱으로 전환하도록 권장합니다.

웹사이트의 현대적인 에지 모양을 정렬하고 PWA의 잠재력을 최대한 활용하기 위해 Google은 기능별로 시작하고 콤보가 적합한지 확인하는 애자일 전략의 우선 순위를 정할 것을 권장합니다.

이 관점을 통해 시장 반응을 단계적으로 고수할 수 있습니다. 추적된 데이터를 분석하면 사용자가 가장 많이 사용하는 기능과 가치를 제공하지 않는 기능을 알 수 있습니다.

이러한 입력은 웹 디자이너와 개발자가 그에 따라 조정하는 데 필수적입니다. PWA에 의해 생성된 추가 비용을 늘리는 데 도움이 되는 올바른 작업을 실행할 때까지 시행착오 과정을 유지하십시오.

PWA 개발에 대한 간략한 소개

설정

앱 디렉터리를 만들고 여기에 js, CSS 및 이미지 하위 디렉터리를 채웁니다.

앱 인터페이스용 마크업 작성

이 단계에서 PWA는 JavaScript 비활성화 여부에 관계없이 콘텐츠를 표시할 수 있어야 합니다. 이렇게 하면 연결이 끊기거나 지연될 때마다 사용자가 방해가 되는 빈 페이지에 직면하지 않습니다.

대신 모든 상호 작용은 반응이 빠르고 다양한 화면에서 올바르게 표시되어야 합니다. 이를 위해서는 모바일 친화적인 방향을 고려해야 합니다.

앱 테스트

브라우저에서 작업이 진행되는 즉시 Google의 Lighthouse로 테스트하여 PWA 표준에 얼마나 잘 맞는지 확인할 수 있습니다.

공개 사이트에서 열리는 Chrome의 개발자 패널용 F12 키를 누르고 감사 탭을 찾은 다음 Lighthouse를 클릭합니다.

서비스 워커

사용자 상호 작용과는 별도로 백그라운드에서 실행되는 비교적 독립적인 웹 스크립트인 이 강력한 기능을 통해 PWA는 네트워크 요청을 가로채고 로컬 캐싱 등을 활성화할 수 있습니다.

앱 매니페스트

PWA가 홈 화면에서 어떻게 보이고 작동할지 결정하려면 서비스 워커와 함께 앱 매니페스트가 필요합니다. 이름, 아이콘, 테마 색상, 앱 방향을 설정할 수 있습니다.

마무리

이 단계까지는 코드가 완료되지만 웹 서버에 앱을 업로드해야 합니다. 이렇게 하면 PWA가 HTTPS 보안 하에 작동할 수 있습니다.

Tigren의 전자 상거래를 위한 프리미엄 PWA 개발

우리의 전문성

10년 전통의 전문 Magento 서비스 제공업체인 Tigren은 이제 전 세계적으로 최고의 아웃소싱 대행사 중 하나입니다.

이 모든 것은 고객의 목표를 달성하기 위해 노력하는 고도로 훈련되고 숙련되고 헌신적인 개발자로 구성된 소규모 팀에서 시작되었습니다. 지금까지 우리는 800개 이상의 글로벌 SMB를 위해 1000개 이상의 프로젝트를 실행했습니다.

베트남에 기반을 두고 있는 우리는 가능한 한 합리적이고 저렴한 가격으로 그들이 받을 자격이 있는 세계적 수준의 Magento 전자 상거래 프로젝트를 통해 많은 야심 찬 사업 소유자를 지원하기를 희망합니다.

우리의 서비스

우리는 SMB에 지속 가능한 성장 솔루션을 제공하는 것을 목표로 하는 Magento 전문 대행사입니다. PWA를 통해 다음과 같은 2가지 프리미엄 서비스를 제공합니다.

• 맞춤형 프로그레시브 웹 앱 개발
• 프리미엄 Tigren PWA 템플릿

주요 내용

PWA는 최종 사용자에게 실질적인 가치를 제공하는 기본 앱과 일반 웹사이트의 올바른 조합입니다.

전문가들은 디지털 세계, 특히 전자 상거래에서 차세대 혁신이 될 것이라고 예측합니다. 이 Reddit PWA 사례 연구를 통해 고객을 돕고 PWA의 얼리 어답터 중 하나가 될 수 있는 사이트를 혁신하는 방법에 대한 아이디어를 얻을 수 있기를 바랍니다.