좋은 프로그레시브 웹 앱의 특징은 무엇인가요?

실적이 우수한 사이트는 실적이 저조한 사이트보다 사용자의 참여와 유지에 더 효과적이기 때문에 모든 온라인 경험의 성공에 있어 성능이 중요한 역할을 합니다. 사이트는 사용자 중심의 실적 측정항목에 맞춰 최적화하는 데 중점을 두어야 합니다.

이유

속도는 사용자가 앱을 사용하도록 유도하는 데 매우 중요합니다. 실제로 페이지 로드 시간이 1초에서 10초로 늘어나면 사용자가 이탈할 가능성이 123% 증가합니다. load 이벤트로도 성능이 중단되지 않습니다. 사용자는 버튼 클릭과 같은 상호작용이 등록되었는지 궁금해해서는 안 됩니다. 스크롤과 애니메이션이 매끄럽게 느껴져야 합니다. 성능은 사용자가 애플리케이션을 인식하는 방식에서 실제로 작동하는 방식에 이르기까지 전체 환경에 영향을 미칩니다.

애플리케이션마다 요구사항이 다르지만 Lighthouse의 성능 감사는 코어 웹 바이탈을 기반으로 하며 이러한 감사에서 높은 점수를 받으면 사용자가 즐거운 경험을 할 가능성이 높아집니다. PageSpeed Insights 또는 Chrome 사용자 환경 보고서를 사용하여 웹 앱의 실제 성능 데이터를 확인할 수도 있습니다.

방법

빠른 로드 시간에 관한 가이드에서 PWA를 빠르게 시작하고 빠르게 유지하는 방법을 알아보세요.

사용자는 웹 앱이 설치되기 전에 자신이 선택한 브라우저를 사용하여 웹 앱에 액세스할 수 있습니다.

이유

프로그레시브 웹 앱은 우선 웹 앱이므로 하나의 브라우저에서만 작동하는 것이 아니라 여러 브라우저에서 작동해야 합니다.

이를 효과적으로 수행하는 방법은 Jeremy Keith가 Resilient Web Design에 나와 있는 말에 따라 핵심 기능을 파악하고 최대한 간단한 기술로 기능을 제공한 후 가능한 경우 환경을 개선하는 것입니다. 즉, 대부분의 경우 HTML로 시작하여 핵심 기능을 만들고 CSS 및 자바스크립트로 사용자 환경을 개선하여 더욱 몰입도 높은 환경을 만듭니다.

양식 제출을 예로 들어보겠습니다. 이를 구현하는 가장 간단한 방법은 POST 요청을 제출하는 HTML 양식을 사용하는 것입니다. 이를 빌드한 후에는 JavaScript로 환경을 개선하여 양식 유효성 검사를 수행하고 AJAX를 통해 양식을 제출할 수 있습니다. 이를 통해 지원 가능한 사용자의 환경을 개선할 수 있습니다.

사용자가 다양한 기기와 브라우저에서 사이트를 경험한다는 점을 고려하세요. 단순히 스펙트럼의 상단만 타겟팅할 수는 없습니다. 기능 감지를 사용하면 오늘날 존재하지 않을 수 있는 브라우저 및 기기를 사용하는 사용자를 포함하여 가장 광범위한 잠재적 사용자에게 사용 가능한 환경을 제공할 수 있습니다.

방법

제레미 키스의 탄력적인 웹 디자인은 브라우저 간 점진적인 방법론에서 웹 디자인을 생각하는 방법을 설명하는 훌륭한 리소스입니다.

추가 자료

• List Apart의 점진적 향상 이해하기에서 주제를 효과적으로 소개합니다.
• Smashing Magazine의 점진적 개선: 정의 및 사용 방법 실제 소개 및 고급 주제로 연결되는 링크를 제공합니다.
• MDN에는 직접 쿼리하여 기능을 감지하는 방법에 관한 기능 감지 구현이라는 문서가 있습니다.

사용자는 모든 화면 크기에서 PWA를 사용할 수 있으며 모든 콘텐츠를 모든 표시 영역 크기에서 사용할 수 있습니다.

이유

기기의 크기는 다양하며 사용자는 동일한 기기에서도 다양한 크기로 애플리케이션을 사용할 수 있습니다. 따라서 콘텐츠가 표시 영역에 적합할 뿐만 아니라 사이트의 모든 기능과 콘텐츠가 모든 표시 영역 크기에서 사용 가능한지 확인하는 것이 중요합니다.

사용자가 완료하고자 하는 작업과 액세스하려는 콘텐츠는 표시 영역 크기에 따라 변경되지 않습니다. 콘텐츠는 다양한 표시 영역 크기로 재배열할 수 있으며 어떤 식으로든 모두 제자리에 있어야 합니다. 실제로 루크 브로블레프스키가 저술한 '모바일 우선'에서 언급했듯이, 작은 것부터 큰 것까지 하는 것이 사이트의 디자인을 실제로 개선할 수 있습니다.

> 모바일 기기를 사용하려면 소프트웨어 개발팀이 애플리케이션에서 가장 중요한 데이터와 작업에만 집중하면 됩니다. 320x480픽셀 화면에는 불필요하고 불필요한 요소가 있을 만한 공간이 없습니다. > 우선순위를 정해야 합니다.

방법

반응형 디자인에는 에단 마코트의 원본 기사, 이와 관련된 중요한 개념 모음, 다양한 책과 강연을 포함하여 반응형 디자인에 관한 많은 리소스가 있습니다. 이 논의의 범위를 반응형 디자인의 콘텐츠 측면으로 좁히려면 콘텐츠 우선 디자인 및 콘텐츠 중심 반응형 레이아웃을 자세히 살펴보세요. 마지막으로, Josh Clark의 Seven Deadly Mobile Myths에서 다룬 강의는 모바일에 초점을 맞추고 있지만 반응형 사이트의 작은 뷰는 모바일만큼이나 중요합니다.

사용자가 오프라인 상태일 때 PWA에 유지하면 브라우저의 기본 오프라인 페이지로 되돌아가는 것보다 더 원활한 환경을 제공할 수 있습니다.

이유

사용자는 설치된 앱이 연결 상태와 관계없이 작동하기를 기대합니다. 플랫폼별 앱은 오프라인일 때 빈 페이지를 표시하지 않으며, 프로그레시브 웹 앱은 브라우저의 기본 오프라인 페이지를 표시해서는 안 됩니다. 맞춤 오프라인 환경을 제공하면 사용자가 캐시되지 않은 URL로 이동할 때와 연결이 필요한 기능을 사용하려고 할 때 웹 환경이 실행되는 기기의 일부인 것처럼 느껴질 수 있습니다.

방법

서비스 워커의 install 이벤트 중에 나중에 사용할 수 있도록 커스텀 오프라인 페이지를 사전 캐시할 수 있습니다. 사용자가 오프라인으로 전환되면 사전 캐시된 커스텀 오프라인 페이지로 응답할 수 있습니다. 커스텀 오프라인 페이지 샘플을 통해 실제 사례를 확인하고 직접 구현하는 방법을 알아볼 수 있습니다.

기기에 앱을 설치하거나 추가한 사용자는 이러한 앱에 더 많이 참여하는 경향이 있습니다.

이유

프로그레시브 웹 앱을 설치하면 설치된 다른 모든 앱과 동일한 디자인과 분위기를 낼 수 있으며 작동할 수 있습니다. 사용자가 다른 앱을 실행하는 동일한 위치에서 앱이 실행됩니다. 앱은 브라우저와는 별개인 자체 앱 창에서 실행되며 다른 앱과 마찬가지로 작업 목록에 표시됩니다.

사용자가 PWA를 설치하기를 원하는 이유는 무엇인가요? 사용자가 앱 스토어에서 앱을 설치하도록 하려는 것과 같은 이유입니다. 앱을 설치한 사용자는 가장 참여도가 높은 잠재고객이며, 일반적인 방문자보다 참여도 측정항목이 우수하며, 휴대기기의 앱 사용자와 동등한 경우가 많습니다. 이러한 측정항목에는 더 많은 재방문, 더 긴 사이트 방문 시간, 더 높은 전환율이 포함됩니다.

방법

설치 가능 가이드에 따라 PWA를 설치 가능하게 만드는 방법과 설치 가능한지 확인하는 방법을 알아보고 직접 해볼 수 있습니다.

연결이 반드시 필요하지는 않은 경우 앱은 온라인에서와 마찬가지로 오프라인에서 작동합니다.

이유

사용자는 맞춤 오프라인 페이지를 제공하는 것 외에도 프로그레시브 웹 앱을 오프라인에서 사용할 수 있기를 기대합니다. 예를 들어 여행 및 항공사 앱은 오프라인일 때도 여행 세부정보와 탑승권을 쉽게 사용할 수 있도록 해야 합니다. 음악, 동영상, 팟캐스팅 앱은 오프라인 재생을 허용해야 합니다. 소셜 및 뉴스 앱은 사용자가 오프라인에서 읽을 수 있도록 최신 콘텐츠를 캐시해야 합니다. 사용자는 오프라인일 때도 인증된 상태를 유지하기를 원하므로 오프라인 인증을 위해 설계하세요. 오프라인 PWA는 사용자에게 실제 앱과 같은 환경을 제공합니다.

방법

사용자가 오프라인에서 작동하기를 바라는 기능을 파악한 후에는 콘텐츠를 오프라인 상황에 맞게 사용할 수 있도록 해야 합니다. 또한 브라우저 내 NoSQL 스토리지 시스템인 IndexedDB를 사용하여 데이터를 저장 및 검색하고, 백그라운드 동기화를 사용하여 사용자가 오프라인 상태에서 작업을 수행하고 안정적인 연결을 사용할 때까지 서버 통신을 지연시킬 수 있습니다. 또한 서비스 워커를 사용하여 이미지, 동영상 파일, 오디오 파일과 같은 다른 종류의 콘텐츠를 오프라인에서 사용할 수 있을 뿐만 아니라, 서비스 워커를 사용하여 안전하고 오래 지속되는 세션을 구현하여 사용자의 인증을 유지할 수 있습니다. 사용자 환경의 관점에서 볼 때 사용자는 로드 중에 속도와 콘텐츠를 인지한 후 필요에 따라 캐시된 콘텐츠 또는 오프라인 표시기로 대체할 수 있는 스켈레톤 화면을 사용할 수 있습니다.

모든 사용자 상호작용은 WCAG 2.0 접근성 요구사항을 통과합니다.

이유

인생의 특정 시점에 대부분의 사람들은 WCAG 2.0 접근성 요구사항이 적용되는 방식으로 PWA를 활용하려고 합니다. PWA와 상호작용하고 이해하는 인간의 능력은 스펙트럼으로 존재하며, 요구사항은 일시적이거나 영구적일 수 있습니다. 액세스 가능한 PWA를 만들면 누구나 사용할 수 있습니다.

방법

W3C의 웹 접근성 소개부터 시작하면 좋습니다. 대부분의 접근성 테스트는 수동으로 실행해야 합니다. Lighthouse의 접근성 감사, axe 및 접근성 통계와 같은 도구를 사용하면 접근성 테스트를 일부 자동화할 수 있습니다. 또한 a 및 button 요소와 같이 이러한 요소를 직접 다시 만드는 대신 의미론적으로 올바른 요소를 사용하는 것이 중요합니다. 이렇게 하면 고급 기능을 빌드해야 할 때 액세스 가능한 기대치 (예: 화살표와 탭을 사용해야 하는 경우)를 충족할 수 있습니다. A11Y 영양 카드에는 몇 가지 일반적인 구성요소에 관한 유용한 조언이 있습니다.

PWA는 검색을 통해 쉽게 검색할 수 있습니다.

이유

웹의 가장 큰 장점 중 하나는 검색을 통해 사이트와 앱을 검색할 수 있다는 것입니다. 실제로 전체 웹사이트 트래픽의 절반 이상이 자연 검색에서 발생합니다. 콘텐츠에 표준 URL이 있고 검색엔진이 사이트의 색인을 생성할 수 있는지 확인하는 것은 사용자가 PWA를 찾을 수 있도록 하는 데 중요합니다. 클라이언트 측 렌더링을 채택할 때 특히 그렇습니다.

방법

먼저 각 URL에 고유하고 구체적인 제목과 메타 설명이 있는지 확인합니다. 그런 다음 Lighthouse의 Google Search Console 및 검색엔진 최적화 감사를 사용하여 PWA의 검색 가능 여부 문제를 디버그하고 수정할 수 있습니다. Bing 또는 Yandex의 웹마스터 도구를 사용할 수도 있으며 PWA에 Schema.org의 스키마를 통해 구조화된 데이터를 포함할 수도 있습니다.

PWA는 마우스, 키보드, 스타일러스 또는 터치와 동일하게 사용할 수 있습니다.

이유

기기는 다양한 입력 방법을 제공하며, 사용자는 애플리케이션을 사용하는 동안 기기 간에 원활하게 전환할 수 있어야 합니다. 마찬가지로 입력 방법이 화면 크기에 의존해서는 안 됩니다. 즉, 큰 표시 영역은 터치를 지원해야 하고 작은 표시 영역은 키보드와 마우스를 지원해야 합니다. 최대한 애플리케이션 및 해당 기능의 모든 기능이 사용자가 선택할 수 있는 입력 방법의 사용을 지원하는지 확인합니다. 필요한 경우 당겨서 새로고침 등 입력별 컨트롤도 허용하도록 환경을 개선해야 합니다.

방법

Pointer Events API는 다양한 입력 옵션으로 작업하기 위한 통합 인터페이스를 제공하며 스타일러스 지원 추가에 특히 유용합니다. 터치와 키보드를 모두 지원하려면 올바른 시맨틱 요소 (앵커, 버튼, 양식 컨트롤 등)를 사용하고 이러한 요소를 비시맨틱 HTML (접근성에 좋음)으로 다시 빌드하지 않아야 합니다. 마우스 오버로 활성화되는 상호작용을 포함할 때는 클릭이나 탭 시에도 활성화될 수 있어야 합니다.

강력한 API 사용 권한을 요청할 때는 컨텍스트를 제공하고 API가 필요할 때만 권한을 요청하세요.

이유

알림, 위치정보, 사용자 인증 정보와 같이 권한 메시지를 트리거하는 API는 선택이 필요한 강력한 기능과 관련되어 있기 때문에 사용자에게 방해가 되도록 의도적으로 설계되었습니다. 페이지 로드와 같은 추가적인 맥락 없이 이러한 메시지를 트리거하면 사용자가 이러한 권한을 수락할 가능성이 줄어들고 향후 권한을 신뢰하지 않을 가능성이 높아집니다. 대신 이 권한이 필요한 이유에 대한 컨텍스트 내 근거를 사용자에게 제공한 후에만 이러한 메시지를 트리거하세요.

방법

Permission UX 문서 및 UX Planet의 사용자에게 권한을 요청하는 올바른 방법은 모바일에 중점을 두고 모든 PWA에 적용되는 권한 메시지를 설계하는 방법을 이해하는 데 유용한 리소스입니다.

코드베이스를 양호한 상태로 유지하면 더 쉽게 목표를 달성하고 새로운 기능을 제공할 수 있습니다.

이유

최신 웹 애플리케이션을 빌드하는 데는 많은 요소가 필요합니다. 애플리케이션을 최신 상태로 유지하고 코드베이스를 양호한 상태로 유지하면 이 체크리스트에 나와 있는 다른 목표를 충족하는 새로운 기능을 더 쉽게 제공할 수 있습니다.

방법

정상적인 코드베이스를 보장하기 위해서는 알려진 취약점이 있는 라이브러리 사용을 피하고, 지원 중단된 API를 사용하지 않도록 하고, 코드베이스에서 웹 안티패턴을 삭제하고 (예: document.write()를 사용하거나 비수동 스크롤 이벤트 리스너 보유), 방어적으로 코딩하여 분석 또는 다른 서드 파티 라이브러리가 로드되지 않는 경우 PWA가 중단되지 않도록 하는 등 방어적인 코딩이 있습니다. 여러 브라우저와 출시 채널에 린트 작업 등의 정적 코드 분석과 자동화된 테스트를 요구하는 것이 좋습니다. 이러한 기술은 프로덕션에 포함되기 전에 오류를 포착하는 데 도움이 됩니다.