첫 단계
프로그레시브 웹 앱은 여전히 향상된 기능을 제공하는 웹사이트입니다. 특정 기술 스택에 연결되어 있지 않으므로 처음부터 새 사이트로 시작하거나 완전히 정비하지 않고 기존 웹사이트를 업데이트할 수 있습니다. 이 가이드에서는 PWA 패턴을 효과적으로 구현하는 방법을 알아봅니다. 다음은 시작하는 데 도움이 되는 몇 가지 전략입니다.
설치 가능하게 만들기
적은 금액으로 시작하세요. 이 접근 방식에는 기본 매니페스트 파일, 간단한 오프라인 페이지, 그리고 오프라인 페이지를 제공하고 일부 중요한 CSS 및 JavaScript를 캐시하는 서비스 워커로 시작하는 것이 포함됩니다. 중요한 CSS 및 JavaScript 캐싱 덕분에 기존 웹 앱이 오프라인에서 작동하도록 준비하는 동시에 성능을 개선할 수 있습니다.
기능에 포커스
사용자나 비즈니스에 큰 영향을 줄 수 있는 새 기능(예: 푸시 알림 또는 파일 처리)을 한 가지 선택하세요. 이렇게 하면 한 번에 너무 많은 변경을 하지 않고도 PWA 풀에 발을 들여놓을 수 있습니다.
간단한 버전 빌드
애플리케이션의 기존 섹션이나 동영상 재생 또는 탑승권 액세스와 같은 특정 사용자 여정을 가져와 독립형 또는 컨텍스트에 따라 오프라인 우선 PWA로 사용할 수 있도록 만듭니다. 이를 통해 간단한 실험을 통해 PWA 사용자 환경을 재고할 수 있습니다.
처음부터 새로 시작합니다.
웹사이트를 개편하고 있거나 처음부터 시작할 수 있는 경우 이 전략이 합리적입니다. 이를 통해 다른 전략보다 더 쉽게 PWA 디자인 패턴을 빌드할 수 있으며, 특히 처음부터 서비스 워커의 모든 기능을 활용할 수 있습니다.
스토어 앱 업그레이드
PWA를 앱 스토어에 게시하는 기능을 사용하면 PWA를 PWA 런처에 래핑하고 Google Play 스토어 또는 Windows 스토어와 같은 스토어에 업로드할 수 있습니다. 기존 플랫폼별 앱이 있는 경우 스토어에 게시된 PWA로 대체할 수 있습니다.
이 방법을 사용하면 기존 사용자는 환경을 PWA로 업그레이드할 수 있으며 신규 사용자는 브라우저 또는 앱 스토어에서 PWA를 계속 사용하거나 설치할 수 있습니다. 또한 모두가 하나의 앱을 이용할 수 있으므로 비용과 시간을 절약하고 사용자 경험을 개선할 수 있습니다.
PWA 체크리스트
프로그레시브 웹 앱은 웹사이트이며, 언제 프로그레시브 웹 앱으로 전환되나요?라는 질문으로 이어집니다. 답은 그렇게 간단하지 않습니다. PWA 개념은 특정 기술이나 스택을 가리키지 않기 때문입니다. PWA는 대신 다양한 기술 구성요소를 포함하는 패턴입니다.
모든 브라우저 사이에 고유한 규칙은 없지만 프로그레시브 웹 앱 체크리스트라는 일련의 권장사항이 있습니다. 이 방법을 사용하면 사용자가 좋아할 만한 PWA를 만들 수 있습니다.
핵심 요구사항
PWA는 모바일에서 데스크톱에 이르는 모든 기기를 아우르므로 핵심 프로그레시브 웹 앱 체크리스트에서는 화면 크기나 입력 유형과 관계없이 모든 사용자가 앱을 설치하고 안정적으로 설치할 수 있도록 하기 위해 취해야 할 조치를 다룹니다.
핵심 요구사항은 다음과 같습니다.
빠른 부팅, 빠른 사용
실적이 우수한 사이트는 실적이 저조한 사이트보다 사용자의 참여와 유지에 더 효과적이기 때문에 모든 온라인 경험의 성공에 중요한 역할을 합니다. 사이트는 사용자 중심의 실적 측정항목에 맞춰 최적화하는 데 중점을 두어야 합니다.
모든 브라우저에서 작동
프로그레시브 웹 앱은 우선 웹 앱입니다. 즉, 프로그레시브 웹 앱은 하나의 브라우저에서만 작동하는 것이 아니라 여러 브라우저 전반에서 작동해야 합니다. 하지만 모든 브라우저에서 환경이 동일할 필요는 없습니다. 특정 브라우저에서 지원하지 않는 기능이 있을 수 있으며 우수한 환경을 보장하기 위한 대체 기능이 있습니다.
모든 화면 크기에서 작동
사용자는 모든 화면 크기에서 PWA를 사용할 수 있으며 모든 콘텐츠를 모든 표시 영역 크기에서 사용할 수 있습니다.
맞춤 오프라인 페이지를 제공합니다.
사용자가 오프라인 상태일 때 사용자를 PWA에 유지하면 브라우저의 기본 오프라인 페이지로 되돌아가는 것보다 더 원활하고 자연스러운 환경을 제공할 수 있습니다.
설치 가능
홈 화면에 앱을 설치하거나 추가하는 사용자는 이러한 앱에 더 많이 참여하는 경향이 있으며, PWA가 설치되면 더 많은 기능을 활용하여 더 나은 사용자 환경을 제공할 수 있습니다.
최적의 PWA 특성
업계 최고의 앱처럼 느껴지는 정말 훌륭한 프로그레시브 웹 앱을 만들려면 핵심 체크리스트 이상이 필요합니다. 최적의 프로그레시브 웹 앱 체크리스트는 웹의 강력한 기능을 활용하면서 PWA를 안정적으로 사용할 수 있도록 하는 것입니다.
오프라인 경험 제공
사용자가 오프라인 상태에서 PWA를 사용할 수 있도록 하면 사용자에게 진정성 있는 앱 같은 환경을 제공할 수 있습니다. 연결이 필요하지 않은 기능을 식별하여 사용자가 적어도 일부 기능에 액세스할 수 있도록 하면 됩니다.
전체 액세스 가능
스크린 리더가 애플리케이션의 모든 콘텐츠와 상호작용을 인식하며 키보드만으로도 사용할 수 있고, 포커스가 표시되어 있으며, 색상 대비가 강한지 확인합니다. PWA에 액세스할 수 있도록 하면 모든 사람이 PWA를 사용할 수 있습니다.
가능한 경우 강력한 기능 사용
푸시 메시징, WASM, WebGL부터 파일 시스템 액세스, 연락처 선택 도구, 앱 스토어와의 통합에 이르기까지 다양합니다. 성능이 뛰어나고 긴밀하게 통합된 PWA를 만들 수 있는 도구가 출시되었습니다. 이 도구를 사용하면 이전에 플랫폼 앱에만 사용되었던 모든 기능을 갖춘 사용자 환경을 조성하여 사용자가 어디서나 사용할 수 있습니다.
검색을 통해 검색 가능
전체 웹사이트 트래픽의 절반 이상이 자연 검색에서 발생합니다. 사용자가 PWA를 찾을 때는 콘텐츠에 대한 표준 URL이 존재하고 검색엔진이 사이트의 색인을 생성할 수 있는지 확인하는 것이 중요합니다.
모든 입력 유형과 호환
사용자가 애플리케이션을 원활하게 사용하는 동안 입력 유형을 전환할 수 있어야 하며 입력 방법이 화면 크기에 따라 달라지지 않아야 합니다.
권한 요청에 대한 컨텍스트 제공
사용자가 메시지를 수락할 가능성을 높이기 위해 컨텍스트에 맞는 근거를 제공한 후에는 알림, 위치정보, 사용자 인증 정보와 같은 권한에 대한 메시지만 트리거합니다.
정상 코드를 위한 권장사항 준수
애플리케이션을 최신 상태로 유지하고 코드베이스를 양호한 상태로 유지하면 이 체크리스트에 나와 있는 다른 목표를 충족하는 새로운 기능을 더 쉽게 제공할 수 있습니다.