프로그레시브 웹 앱 (PWA) : 앱처럼 작동하는 웹의 미래

당신은 해본 적이 있습니까? 웹 사이트로 가서 팝업을 만나십시오. "앱을로드하십시오!" ... 그리고 당신은 즉시 눌렀습니다.

비즈니스 소유자 또는 마케팅 팀의 경우이 사진은 아마도 친숙한 악몽 일 것입니다. 우리는 좋은 웹 사이트를 투자했습니다. 그러나 고객이 "응용 프로그램"을 통해 서로를 더 묶도록 초대 할만 큼 충분히 그는 돌아 섰다. 문제는 왜 그런가? 이 시대의 "게으른"사용자는 모바일 영역을 차지하는 새로운 앱을 다운로드하고 설치를 기다려야하며 업데이트를 계속 업데이트해야합니다. 또한 "빠른"경험과 앱처럼 "쉬운"을 원하지만 일반 웹 사이트처럼 액세스 할 수 있도록 "편리한"편리합니다. 그리고 우리가 그렇게 말하면 ... 실제로 그렇게 할 수있는 기술이 있습니까? 고객이 웹 사이트를 사용하고 있음을 "거의 알지 못하는"웹 및 앱의 장점을 결합한 기술. PWA (Progressive Web App) 라고하며 이것이 디지털 마케팅 게임을 영원히 바꿀 미래입니다.

‍

이미지 생성 Promt : Collage 비교 사용자의 감정을 비교합니다. 왼쪽은 팝업을 볼 때 지루한 사람의 그림입니다. 오른쪽에서 같은 이미지와 같은 이미지와 함께 웃으며 웹을 행복하게 사용합니다. 웹 사이트의 앱 아이콘이 휴대 전화의 홈 화면 화면에 나타납니다.

인생의 실제 문제 : "웹 사이트"와 "앱"사이에서 보이지 않는 "벽"

디지털 비즈니스 세계에서 우리는 항상 두통을 겪습니다. 더 나은 경험을 제공하고보다 심오한 채권을 창출하는 "기본 앱"(App Store/Play Store에서 설치된 앱)을 사용하여 많은 사람들에게 쉽게 도달 할 수있는 "웹 사이트"를 만들 때. 이 문제는 보이지 않는 "벽"을 만듭니다.

사용자 측 (사용자) :

• "모바일 지역이 가득 찼습니다!": 모든 사람이 실제로 필요하지 않은 경우 새 앱을 다운로드하고 싶지 않습니다. 이미지를 삭제하려면 처음 만난 비즈니스 앱을 설치하려면? 잊어 버리세요.
• "인터넷은 느리고로드 할 수 없습니다": 소프트 신호로 4G를 통해 수십 개의 MB 앱을 다운로드하기를 기다립니다. 실망스러운 경험입니다.
• "웹 사이트로가는 것이 충분합니까?": 대부분의 사용자는 웹 사이트에 액세스하는 것이 시간 동안 "더 쉽고"더 빠르다고 생각합니다. 앱을 다운로드하도록 강요하는 것은 그들에게 부담을주는 것과 같습니다.

비즈니스 측 (비즈니스) :

• "잔인한 개발 비용": iOS 및 Android를위한 별도의 응용 프로그램을 만들려면 많은 자금과 시간이 필요합니다.
• "설치를위한 경고": 일부 고객이 "설치"를 누르려면 앱이 매우 어렵습니다. 많은 마케팅 예산이 필요합니다
• "웹 사이트는 충분히 '끈적 거리지 않습니다": 원본 웹 사이트는 고객이 브라우저를 끄면 푸시 알림 보내기와 같은 "고객을 철회하는 것"에서 중요한 자격이 부족합니다. 이해 모바일 최초의 인덱싱 원리 모바일에서 좋은 경험을 창출하기 시작하기 때문에 매우 중요합니다.
  이미지 생성 약속 : 만화 그림은 그 벽에 애플리케이션을 제출하려는 "비즈니스 소유자"와 휴대폰을 연주하는 "사용자"사이에 큰 벽돌 벽을 보여줍니다. 그러나 사용자는 고개를 저었다. 왜 그 문제가 있었습니까? "웹"과 "앱"의 세계 가이 문제의 근본 원인과 분리되어 과거의 양쪽에서 기술의 발전이 다른 이유는 무엇입니까? "웹 사이트"는 "어디에서나"의 "누구나"가 브라우저를 통해 정보에 액세스 할 수 있도록 목표로 만들어졌습니다. "도달"및 "편의"의 대표이지만 반면에 "하드웨어"효율성을 도출하기 위해 "응용 프로그램"이 만들어졌습니다. 인터넷 없이도 기계의 기능 (예 : 카메라, GPS, 알림) 및 작업의 기능에 빠르게 액세스하고 인터넷 없이도 작동합니다. 그것은 "경험) 및"참여 "의 에이전트입니다. 우리는 두 가지를 원합니다! 기존 웹 사이트는 푸시 알림 또는 오프라인 작업을 보낼 수 없습니다. 앱은 Google에서는 간단한 링크를 통해 친구와 공유 할 수는 없습니다. 이것은 오늘날 우리가 직면 한 마케팅 문제를 만드는 기술의"갭 "입니다.
  이미지 생성 약속 : "웹 사이트 (High Reach, Low Engagement)"라는 두 가지 방향 교차로를 보여주는 간단한 인포 그래픽 이미지는 브라우저 아이콘을 가리 킵니다. "네이티브 앱 (낮은 도달, 높은 참여”는 중간 앱 아이콘을 가리 키고 있습니다. 큰 물음표가 있습니다. 왼쪽이 남은 경우 경쟁 업체의 비용에 어떻게 영향을 미치는가,이 격차를 무시하고 여전히 같은 방식으로 준수하는 것보다 더 부정적인 영향을 미칠 수 있습니다.
  • 경쟁 업체의 고객 손실 : 경쟁 업체의 웹 사이트가 더 빠르고 앱과 같은 경험을 제공하고 고객에게 직접 푸시 알림을 통해 프로모션을 보낼 수있는 경우 고객이 선택할 것이라는 것은 놀라운 일이 아닙니다.
  • 전환율이 떨어집니다 : 고객이 웹 사이트가로드 될 때까지 기다려야하거나 모바일에서 사용하기가 복잡한 모든 단계는 영원히 판매를 잃을 수있는 기회입니다.
  • 예상치 못한 마케팅 비용 : "다운로드 앱"을 얻기위한 투자는 사람들을 "웹 사이트"로 끌어들이는 것보다 몇 배나 더 비쌉니다. 웹 사이트가 앱으로서 좋은 경험을 제공한다면 우리는 엄청난 비용 의이 부분을 줄일 것입니다.
  • 반복적으로 의사 소통 할 수있는 기회를 놓치면 : 푸시 알림이 없다는 것은 "속삭임"의 방법이 없다는 것을 의미합니다. 새로운 프로모션을 전하십시오. 또는 웹 사이트를 직접 입력 한 고객을위한 중요한 뉴스
  • ERA 모바일 최초의 단점 : Google은 모바일 경험에 매우 중요합니다. 휴대 전화의 느리고 어려운 웹 사이트는 지속적으로 줄어 듭니다. 웹 효율성을 다음 단계로 향상시키는 데 도움이되는 WebAsembly 와 같은 기술을 고려해야합니다
  
  이미지 생성 약속 : 2 줄의 그래프는 "귀하의 비즈니스"에 속합니다. "PWA 경험, 높은 참여"를 작성하십시오. 시작해야 할 곳 : "Progressive Web App (PWA")를 소개하고 싶습니다.이 문제의 해결책은 이름이 지정된 기술입니다. 프로그레시브 웹 앱 (PWA) 예, 가장 이해하기 쉽습니다. PWA는 사용자가 App Store에서 전혀로드 할 필요가없는 기본 앱과 동일한 기능을 갖도록 "업그레이드 된 웹 사이트"입니다. 웹을 최대한 활용하고 있습니다. (액세스하기 쉬운, 찾기) 최고의 앱 (빠른 오프라인 작업, 알림이 있습니다)과 완벽하게 결합됩니다. 비즈니스 게임을 바꿀 PWA의 뛰어난 기능 :
  • 설치 (설치) : 사용자는 한 번의 클릭으로 "홈 화면에 추가"할 수 있습니다. 즉시 휴대 전화 아이콘이되었습니다
  • 오프라인 작업 (오프라인 기능) : "서비스 작업자"라는 기술을 사용하여 웹 사이트에서 열린 정보를 다운로드 할 수 있습니다. 인터넷 신호가 없어도
  • 푸시 알림 보내기 : 프로모션, 주문 업데이트 또는 새 기사를 보낼 수 있습니다. 모든 앱처럼 직접 고객에게
  • 로켓처럼 빠르게 (빠르고 신뢰할 수있는) : PWA는 매우 빠르게로드하도록 설계되었습니다. 원활한 사용 경험을 만듭니다.
  • Google에서 찾을 수 있습니다 (발견 가능) : 여전히 "웹 사이트"이므로 검색 엔진에서 모든 컨텐츠를 팽창시키고 찾을 수있어 새로운 고객이 귀하를 볼 수있는 기회가 높아집니다.
  • Secure (Secure) : PWA는 항상 HTTPS에 설치하려면 연결을 안전하고 신뢰할 수 있도록해야합니다.
  • 쉽게 공유 할 수 있습니다 (링크 가능) : 일반 웹 사이트와 같은 친구들과 공유 할 URL을 복사 할 수 있습니다.
  그리고 어디에서 시작할까요? 시작점은 현재 웹 사이트를 먼저 확인하는 것입니다. 1) HTTPS입니까? 2) 모바일 (반응 형)을 위해 설계된 것이 충분합니까? 그 후, 2 가지 주요 기술, 즉 웹 앱이 나타납니다 (앱을 알려주는 파일) 및 서비스 직원 (무대 뒤에서 작업을 관리하는 코드). 당신이 -약간의 정보를 원한다면 훌륭한 출처는입니다 Google에서 Web.dev 예
  이미지 생성 약속 : Beautiful Infographic은 PWA의 7 가지 뛰어난 기능의 아이콘 (설치, 오프라인, 푸시 알림, 빠르고, 발견 가능하고, 링크 가능) 큰 PWA 아이콘을 중간에 배치합니다. 성공했던 실제의 예 : 자이언츠가 PWA를 선택할 때 이론은 보이지 않을 수 있습니다. 그러나 많은 세계 브랜드가 PWA로 변하고 놀라운 결과를 창출한다고 말하면 즉시 그렇게 할 수 있습니다!
  • Starbucks : 그들은 직무를 순서에 대한 경험을 제공하기 위해 PWA를 개발했습니다. 앱처럼 "빠르고 쉬운"이지만 결과를 설치할 필요는 없습니다. Starbucks의 PWA는 iOS의 앱보다 99.84%작습니다! 고객이 쉽고 빠르게 사용하도록하면 결과적으로 매일 활성 사용자가 2 배 증가했으며 웹을 통한 주문은 기본 앱을 통한 주문과 거의 같습니다.
  • 트위터 : 인터넷이 안정적이지 않고 비용이 많이 드는 국가 사용자의 문제를 해결하기 위해. 트위터는 PWA 인 "Twitter Lite"를 시작합니다. 결과적으로 최대 70%의 사용을 줄이고 75%의 수가 증가하고 20%할인을받을 수 있습니다. 전 세계 사용자에게 좋은 경험을 만드십시오.
  • FLIPKART : 인도의 전자 상거래 거인들은 사람들이 앱을 다시 사용하기 위해 사람들을 끌어내는 것이 어렵다는 것을 발견했습니다. 그런 다음 PWA를 만들었습니다. (재투 싸움) 최대 40%
  이러한 사례는 PWA가 개발자의 "장난감"일뿐 만 아니라 참여를 늘리고 진정으로 판매를 창출하는 데 강력한 "비즈니스 도구"임을 증명합니다. 강력한 전자 상거래 팀 구조 그리고 새로운 기술을 이해하는 것은 이런 종류의 성공의 열쇠입니다
  이미지 생성 약속 : 스마트 폰, 스타 벅스, 트위터 및 Flipkart 로고의 3 개의 스마트 폰 사진, "+100% Daily 사용자", "-70% 데이터 사용", "+40% Reenglish"와 같은 놀라운 결과가 포함되어 있습니다. 팔로우하고 싶다면 (즉시 사용될 수 있음) : 점검 목록이 있으면 웹 사이트를 PWA로 변경하십시오. 아직 웹 사이트를 업그레이드 할 준비가 되었습니까? 이것은 즉시 개발 팀과 대화 할 수있는 간단한 점검 목록입니다.
  1. 재단 : HTTPS 여야하며 휴대폰을 지원하는 완전한 디자인이 이것은 절대적으로 필수적인 첫 번째 단계입니다.
  2. 웹 앱 생성 : 웹 사이트의 "ID 카드"와 같이 작용하는 간단한``manifest.json '파일, 브라우저에 이름이 무엇인지, 어떤 종류의 아이콘, 어떤 색상이 표시 될지, 사용자가 아이콘을 클릭 할 때 어떤 페이지에서 작업을 시작하는지 알려줍니다.
  3. 서비스 작업자 설치 : 이것은 PWA의 핵심입니다. Service Workr는 뒤에 작동하는 JavaScript 파일입니다. 기본 웹 페이지에서 분리 된 IT는 웹 사이트의 "개인 관리자"역할을하여 캐싱 관리 (오프라인에 대한 데이터 저장) 및 푸시 알림을 수락하기위한 다양한 요청을 폐쇄합니다. 서버에서
  4. 디자인 아이콘 앱 : 다양한 장치에 대한 많은 크기의 아이콘을 만듭니다. 홈 화면 화면에 아름다운 결과를 보여주기 위해
  5. 테스트 및 측정 : Lighthouse 와 같은 도구를 사용하여 PWA가 표준에 걸쳐 있는지 확인하십시오. 점수와 권장 사항을 상세하게 제공합니다.
  프로세스는 간단 해 보이지만 서비스 작업자 코드를 올바르게 작동하고 효과적으로 작동시킬 수는 있지만 매우 복잡합니다. 고급 웹 개발 전문가 그러므로 신속하고 자신감을 갖도록하는 데 도움이되는 대안입니다.
  이미지 생성 약속 : 각 아이콘이있는 5 개의 항목 (HTTPS 용 블로 닝 키, 응답 식당 휴대 전화, 매니페스트 용 코드 파일, 서비스 작업자를위한 장비 및 테스트 용 그래프)이있는 체크리스트 이미지. 그리고 명확한 답변Q1 : PWA가 기본 앱을 완전히 대체할까요?A : 실제로는 아닙니다. 둘 다 여전히 자신의 길을 가지고 있습니다. 기본 앱은 여전히 ​​3D 게임, 비디오 편집 앱과 같은 가장 효과적인 작업에 적합합니다. 또는 기계의 하드웨어에 깊은 수준으로 연결되어야하지만 대부분의 비즈니스 (전자 상거래, 뉴스, 서비스, 예약)의 경우 속도, 쉬운 액세스 및 참여 생성 ... PWA는 더 좋고 가치있는 답변입니다.Q2 : PWA는 iPhone (iOS)에서 최대 효율로 사용할 수 있습니까?A : 과거에 Apple은 PWA가 Android 측보다 느리게 지원하지만 현재 (2025) iOS는 오프라인 서비스 작업 및 더 나은 클링 및 웹 푸시 알림을 포함한 거의 모든 PWA 주요 기능을 지원했습니다. iOS에서 작동하고 두 플랫폼 간의 격차를 매우 좁게 만들 수 있습니다. PWA를 한 번 만들면 대부분의 사용자에게 거의 100%가 좋은 경험을 할 수 있습니다.Q3 : PWA. 정말 도움이 되나요?A : 정말! 직접적인 요인은 아니지만 PWA는 SEO에게 간접적으로 엄청난 이점을 가지고 있습니다. 속도 (속도) 핵심 웹 생명의 중요한 요소 2) 좋은 사용자 경험 (사용자 경험) 웹에있는 사람들을 더 길게 만들고 비율이 낮습니다. 3) 안전 (HTTPS) Google이 결정하고 4) 모바일 친화적입니다 이 모든 것은 귀하의 웹 사이트가 품질이 높고 더 높은 순위가 있어야한다는 것을 알기 위해 Google에 전송 된 강력한 긍정적 인 신호입니다.Q4 : PWA에 가장 적합한 사업은 무엇입니까?A : 디지털 채널을 통해 고객과의 관계를 구축하려는 거의 모든 비즈니스. 특히:
  • 전자 상거래 비즈니스 : 매장로드, 체크 아웃, 걸림돌 및 알림을 통해 프로모션을 보내는 경우. 헤드리스 상업 아키텍처를 사용하면 유연성과 효율성이 향상됩니다.
  • 미디어 및 뉴스 대행사 : 독자가 뉴스를 다운로드하고 오프라인으로 읽을 수 있도록합니다. 알림을 통해 긴급 뉴스를받습니다
  • 서비스 사업 (레스토랑, 이발소, 클리닉) : 쉬운 대기열 예약 시스템, 약속 및 축적 용
  • 웹 사이트는 정보 또는 커뮤니티를 제공합니다. 사람들이 자주 업데이트를보고 싶어하는 플랫폼을 만듭니다.
  
  이미지 생성 약속 : 만화 캐릭터가 연기 중입니다. 그리고 아이콘으로 바뀌는 다양한 유형의 비즈니스 (CART, 신문, 캘린더)의 아이콘과 함께 물음표가 있습니다. PRWA (Progressive Web App)이 긴 장관 기술 일뿐 만 아니라 "웹의 편의성"과 "앱의 앱"사이의 공간을 연결하는 "브리지"라는 것을 알 수 있다고 생각합니다. 브랜드와 고객 사이의 벽을 줄이는 데 도움이되는 도구입니다. PWA 투자에 "설치"의 어려움없이 액세스, 참여 및 반복적으로 돌아올 수 있도록 "고객 경험"에 대한 투자 인 PWA 투자는 더 높은 전환율, 브랜드에 대한 충성도 증가 및 경쟁 업체가 여전히 오래된 웹 사이트를 사용하는 경쟁 우위로 돌아갈 수 있도록합니다. 따라 잡을 수 없습니다고객이 더 이상 느리고 실망스러운 모바일 경험을 견딜 때까지 기다리지 마십시오! 웹 사이트를 다음 단계로 "업그레이드"할 시간입니다. 우리가 고려해야 할 체크리스트를 가져 오십시오. 오늘부터 웹 사이트를 계획하기 시작하십시오.웹 사이트를 강력한 PWA로 변경하고 싶지만 시작 방법을 모르십니까? 고급 웹 개발에서 전문가 팀과 상담하십시오! 우리는 당신이 빠르고 강력하며 실제로 당신을 위해 판매를 창출 할 수있는 미래의 웹 경험을 만드는 데 도움을 줄 준비가되었습니다.
  이미지 생성 약속 : 영감 이미지 로켓은 웹 사이트에서 열려있는 스마트 폰 화면에서 치솟습니다. 로켓에는 미디어에 성장에 대해 쓰여진 "PWA"라는 단어가 있습니다.

‍