프로그레시브 웹 앱 (PWA)은 최신 API로 빌드되고 개선되어 강력한 성능, 안정성, 설치 가능성을 제공하며 단일 코드베이스로 기기 및 장소와 관계없이 누구에게나 도달할 수 있습니다. 최상의 환경을 만들 수 있도록 핵심 및 최적 체크리스트와 권장사항을 참고하세요.
핵심 프로그레시브 웹 앱 체크리스트
프로그레시브 웹 앱 체크리스트에서는 크기나 입력 유형에 관계없이 모든 사용자가 앱을 설치하고 사용할 수 있도록 하는 요소를 설명합니다.
빠른 시작, 빠른 사용
성능은 모든 온라인 환경의 성공에 중요한 역할을 합니다. 실적이 좋은 사이트는 실적이 저조한 사이트보다 사용자 참여도와 유지율이 높기 때문입니다. 사용자 중심 성능 측정항목에 맞게 최적화하는 데 집중하세요.
이유
속도는 사용자가 앱을 사용하도록 유도하는 데 매우 중요합니다. 실제로 페이지 로드 시간이 1초에서 10초로 증가하면 사용자가 이탈할 확률이 123% 증가합니다. load 이벤트로 성능이 중지되지도 않습니다. 사용자는 버튼 클릭과 같은 상호작용이 등록되었는지 여부를 궁금해해서는 안 됩니다. 스크롤과 애니메이션이 부드럽게 느껴져야 합니다. 성능은 앱의 동작 방식과 사용자의 인식 방식 모두에서 전체 환경에 영향을 미칩니다.
모든 애플리케이션의 요구사항은 다르지만 Lighthouse의 성능 감사 결과는 핵심 성능 보고서를 기반으로 하며, 이러한 감사에서 높은 점수를 받으면 사용자가 즐거운 경험을 할 가능성이 높아집니다. PageSpeed Insights 또는 Chrome 사용자 환경 보고서를 사용하여 웹 앱의 실제 성능 데이터를 확인할 수도 있습니다.
방법
빠른 로드 시간 가이드를 참고하여 PWA를 빠르게 시작하고 빠르게 유지하는 방법을 알아보세요.
모든 브라우저에서 작동
사용자는 원하는 브라우저를 사용하여 웹 앱을 설치하기 전에 액세스할 수 있습니다.
이유
프로그레시브 웹 앱은 웹 앱이 우선이므로 브라우저 간에 작동해야 합니다.
이를 효과적으로 수행하는 방법은 Resilient Web Design의 Jeremy Keith에 따라 핵심 기능을 식별하고, 가능한 가장 간단한 기술을 사용하여 이러한 기능을 제공한 다음, 가능한 경우 환경을 개선하는 것입니다. 대부분의 경우 HTML만으로 시작하여 핵심 기능을 만들고 CSS와 JavaScript로 사용자 환경을 개선하여 더 매력적인 환경을 만드는 것이 좋습니다.
양식 제출을 예로 들어 보겠습니다. 이를 구현하는 가장 간단한 방법은 POST 요청을 제출하는 HTML 양식입니다. 이를 빌드한 후 JavaScript를 사용하여 양식 유효성 검사를 실행하고 AJAX를 통해 양식을 제출하여 환경을 개선할 수 있습니다.
사용자는 다양한 기기와 브라우저를 통해 사이트를 경험합니다. 이 스펙트럼의 상단만 타겟팅할 수는 없습니다. 기능 감지를 사용하여 아직 존재하지 않는 브라우저와 기기를 사용하는 사용자를 포함하여 최대한 많은 잠재 사용자에게 사용 가능한 환경을 제공하세요.
방법
Jeremy Keith의 Resilient Web Design은 이 교차 브라우저, 프로그레시브 방법론에서 웹 디자인을 생각하는 방법을 설명하는 훌륭한 리소스입니다.
추가 자료
- A List Apart의 Understanding Progressive Enhancement(점진적 개선 이해)에서 이 주제를 잘 소개합니다.
- Smashing Magazine의 프로그레시브 인핸스먼트: 무엇이며 어떻게 사용해야 하나요?에서는 실용적인 소개와 고급 주제 링크를 제공합니다.
- MDN의 기능 감지 구현 도움말에서는 기능을 직접 쿼리하여 감지하는 방법을 설명합니다.
모든 화면 크기에 반응
사용자는 모든 화면 크기에서 PWA를 사용할 수 있으며 모든 콘텐츠는 모든 뷰포트 크기에서 사용할 수 있습니다.
이유
기기는 다양한 크기로 제공되며 사용자는 동일한 기기에서도 다양한 크기로 애플리케이션을 사용할 수 있습니다. 따라서 콘텐츠가 표시 영역 내에 맞고 사이트의 모든 기능과 콘텐츠가 모든 표시 영역 크기에서 사용 가능하도록 하는 것이 중요합니다.
사용자가 완료하려는 작업과 액세스하려는 콘텐츠는 뷰포트 크기에 따라 달라지지 않습니다. 다양한 뷰포트 크기에 맞게 콘텐츠를 재정렬할 수 있으며, 어떤 방식으로든 콘텐츠가 모두 표시됩니다. 실제로 Luke Wroblewski는 그의 책 Mobile First에서 작은 화면에서 시작하여 큰 화면에 맞게 디자인을 조정하면 사이트 디자인을 개선할 수 있다고 말합니다.
'휴대기기에서는 소프트웨어 개발팀이 애플리케이션에서 가장 중요한 데이터와 작업에만 집중해야 합니다. 320x480픽셀 화면에는 불필요한 요소가 들어갈 공간이 없습니다. 우선순위를 정해야 합니다.'
방법
Ethan Marcotte의 원본 문서와 이와 관련된 중요한 개념 모음, 다양한 서적과 강연 등 반응형 디자인에 관한 리소스가 많이 있습니다.
이 토론을 반응형 디자인의 콘텐츠 측면으로 좁히려면 다음을 참고하세요.
- 콘텐츠 우선 디자인
- 콘텐츠 중심 반응형 레이아웃
- 7가지 치명적인 모바일 신화는 모든 모바일과 마찬가지로 반응형 사이트의 소형 보기에도 관련이 있습니다.
맞춤 오프라인 페이지를 제공합니다.
사용자가 오프라인일 때 PWA에 사용자를 유지하면 기본 브라우저 오프라인 페이지로 돌아가는 것보다 더 원활한 환경을 제공할 수 있습니다.
이유
사용자는 연결 상태와 관계없이 설치된 앱이 작동하기를 기대합니다. 플랫폼별 앱은 오프라인일 때 빈 페이지를 표시하지 않으며 PWA는 브라우저 기본 오프라인 페이지를 표시하지 않아야 합니다. 사용자가 캐시되지 않은 URL로 이동할 때와 사용자가 연결이 필요한 기능을 사용하려고 할 때 모두 맞춤 오프라인 환경을 제공하면 웹 환경이 실행 중인 기기의 일부처럼 느껴집니다.
방법
서비스 워커의 install 이벤트 중에 사용자가 오프라인 상태가 될 때 표시할 맞춤 오프라인 페이지를 미리 캐시할 수 있습니다. 오프라인 대체 페이지 만들기에서 직접 구현하는 방법을 알아보세요. 제공된 페이지가 없는 경우 Chrome은 계속해서 기본 오프라인 페이지를 표시합니다.
설치 가능
기기에 앱을 설치하거나 추가하는 사용자는 해당 앱을 더 많이 사용하는 경향이 있습니다.
이유
프로그레시브 웹 앱을 설치하면 다른 설치된 앱과 모양, 느낌, 동작이 동일해집니다. 사용자가 다른 앱을 실행하는 것과 동일한 위치에서 실행됩니다. 브라우저와 별도의 자체 앱 창에서 실행되며 다른 앱과 마찬가지로 작업 목록에 표시됩니다.
기기별 앱과 마찬가지로 앱을 설치하는 사용자는 참여도가 가장 높은 잠재고객이며, 모바일 기기의 앱 사용자와 참여도 측정항목이 동일한 경우가 많습니다. 이러한 측정항목에는 일반 방문자보다 재방문 횟수가 많고, 사이트에서 머무는 시간이 길며, 전환율이 높은 방문자가 포함됩니다.
방법
설치 가이드를 따르세요.
최적의 프로그레시브 웹 앱 체크리스트
최고의 앱처럼 느껴지는 진정한 PWA를 만들려면 핵심 체크리스트 이상의 것이 필요합니다. 최적의 PWA 체크리스트는 웹의 강력한 기능을 활용하면서 PWA가 실행되는 기기의 일부처럼 느껴지도록 하는 것입니다.
오프라인 환경 제공
연결이 엄격하게 요구되지 않는 경우 앱은 오프라인에서 온라인과 동일하게 작동합니다.
이유
사용자는 맞춤 오프라인 페이지를 제공하는 것 외에도 PWA를 오프라인에서 사용할 수 있기를 기대합니다. 예를 들어 여행 및 항공사 앱은 오프라인일 때 여행 세부정보와 탑승권을 쉽게 사용할 수 있어야 합니다. 음악, 동영상, 팟캐스트 앱은 오프라인 재생을 허용해야 합니다. 소셜 및 뉴스 앱은 사용자가 오프라인으로 읽을 수 있도록 최근 콘텐츠를 캐시해야 합니다. 사용자는 오프라인일 때도 인증 상태를 유지할 것으로 기대하므로 오프라인 인증을 위해 설계하세요.
오프라인 PWA는 사용자에게 실제 앱과 같은 환경을 제공합니다.
방법
사용자가 오프라인으로 작동하기를 기대하는 기능을 결정한 후에는 콘텐츠를 오프라인 컨텍스트에서 사용할 수 있고 적응할 수 있도록 해야 합니다. 브라우저 내 NoSQL 스토리지 시스템인 IndexedDB를 사용하여 데이터를 저장하고 검색할 수 있으며 백그라운드 동기화를 사용하면 오프라인 상태에서 사용자가 작업을 실행하고 사용자가 다시 안정적인 연결을 확보할 때까지 서버 통신을 지연할 수 있습니다. 서비스 워커를 사용하여 오프라인 사용을 위해 이미지, 동영상 파일, 오디오 파일과 같은 다른 종류의 콘텐츠를 저장하고 사용자를 인증된 상태로 유지하기 위해 안전하고 오래 지속되는 세션을 구현할 수 있습니다.
사용자 환경 관점에서 로드 중에 속도와 콘텐츠를 인식할 수 있는 스켈레톤 화면을 사용할 수 있으며, 필요에 따라 캐시된 콘텐츠나 오프라인 표시기로 대체할 수 있습니다.
완전히 액세스 가능
모든 사용자 상호작용이 최신 웹 콘텐츠 접근성 가이드라인 (WCAG) 국제 표준을 통과합니다.
이유
대부분의 사용자는 인생의 어느 시점에서 WCAG에서 다루는 방식으로 PWA를 사용하고 싶어 합니다. PWA와 상호작용하고 이를 이해하는 사람들의 능력은 스펙트럼에 존재하며, 필요는 일시적일 수도 있고 영구적일 수도 있습니다. PWA를 액세스 가능하게 만들면 모든 사용자가 사용할 수 있습니다.
방법
W3C의 웹 접근성 소개를 참고하면 좋습니다. 대부분의 접근성 테스트는 수동으로 실행해야 합니다. Lighthouse의 접근성 감사, axe, Accessibility Insights를 사용하면 일부 접근성 테스트를 자동화할 수 있습니다. <a> 및 <button> 요소와 같이 요소를 직접 다시 만드는 대신 의미적으로 올바른 요소를 사용하는 것도 중요합니다. 이렇게 하면 더 고급 기능을 빌드해야 할 때 화살표와 탭을 사용하는 경우와 같은 접근성 기대치가 충족됩니다.
A11Y 영양 카드에는 몇 가지 일반적인 구성요소에 관한 유용한 조언이 나와 있습니다.
검색에서 표시
PWA는 검색을 통해 쉽게 찾을 수 있습니다.
이유
웹의 가장 큰 장점 중 하나는 검색을 통해 사이트와 앱을 찾을 수 있다는 것입니다. 실제로 모든 웹사이트 트래픽의 절반 이상이 자연 검색에서 발생합니다. 콘텐츠에 표준 URL이 있고 검색엔진이 사이트의 색인을 생성할 수 있는지 확인하는 것은 잠재적 사용자가 PWA를 찾을 수 있도록 하는 데 매우 중요합니다. 이는 특히 클라이언트 측 렌더링을 채택할 때 그렇습니다.
방법
각 URL에 고유하고 설명적인 제목과 메타 설명이 있는지 확인하세요. 그런 다음 Google Search Console과 Lighthouse의 검색 엔진 최적화 감사를 사용하여 PWA의 검색 가능성 문제를 디버그하고 수정할 수 있습니다.
Bing 또는 Yandex의 사이트 소유자 도구를 사용할 수도 있으며, Schema.org의 스키마를 사용하여 구조화된 데이터를 PWA에 포함하는 것도 고려해 보세요.
모든 입력 유형에서 작동
PWA는 마우스, 키보드, 스타일러스, 터치로도 똑같이 사용할 수 있습니다.
이유
기기는 다양한 입력 방법을 제공하며 사용자는 애플리케이션을 사용하는 동안 이러한 입력 방법 간에 원활하게 전환할 수 있어야 합니다. 마찬가지로 중요한 점은 입력 메서드가 화면 크기에 의존해서는 안 된다는 것입니다. 즉, 큰 표시 영역은 터치를 지원해야 하고 작은 표시 영역은 키보드와 마우스를 지원해야 합니다. 가능한 한 애플리케이션과 모든 기능이 사용자가 선택할 수 있는 모든 입력 방법의 사용을 지원하는지 확인하세요. 적절한 경우 입력 관련 컨트롤 (예: 새로고침을 위해 아래로 드래그)도 허용하도록 환경을 개선합니다.
방법
포인터 이벤트 API는 다양한 입력 옵션을 사용하는 통합 인터페이스를 제공하며 특히 스타일러스 지원을 추가하는 데 유용합니다. 터치와 키보드를 모두 지원하려면 올바른 시맨틱 요소 (앵커, 버튼, 양식 컨트롤 등)를 사용하고 시맨틱하지 않은 HTML로 다시 빌드하지 않아야 합니다. 마우스 오버 시 활성화되는 상호작용을 포함하는 경우 클릭이나 탭으로도 활성화될 수 있는지 확인하세요.
권한 요청의 컨텍스트를 제공합니다.
강력한 API를 사용할 권한을 요청할 때는 컨텍스트를 제공하고 API가 필요한 경우에만 요청하세요.
이유
알림, 위치정보, 사용자 인증 정보와 같이 권한 프롬프트를 트리거하는 API는 선택이 필요한 강력한 기능과 관련이 있는 경향이 있으므로 사용자를 방해하도록 의도적으로 설계되었습니다. 페이지 로드와 같이 추가 컨텍스트 없이 이러한 메시지를 트리거하면 사용자가 이러한 권한을 수락할 가능성이 줄어들고 향후 권한을 신뢰하지 않을 가능성이 커집니다.
대신 권한이 필요한 이유를 사용자에게 맥락에 맞는 근거를 제공한 후에만 이러한 메시지를 트리거하세요.
방법
권한 UX 도움말과 UX Planet의 사용자에게 권한을 요청하는 올바른 방법은 모바일에 중점을 두지만 모든 PWA에 적용되는 권한 메시지를 설계하는 방법을 이해하는 데 유용한 리소스입니다.
건전한 코드에 관한 권장사항을 따름
코드베이스를 건강하게 유지하면 목표를 달성하고 새로운 기능을 제공하기가 더 쉬워집니다.
이유
최신 웹 애플리케이션을 빌드하는 데는 많은 요소가 필요합니다. 애플리케이션을 최신 상태로 유지하고 코드베이스를 정상 상태로 유지하면 이 체크리스트에 명시된 다른 목표를 충족하는 새로운 기능을 더 쉽게 제공할 수 있습니다.
방법
건전한 코드베이스를 보장하기 위해 우선순위가 높은 검사가 여러 개 있습니다.
- 알려진 취약점이 있는 라이브러리를 사용하지 마세요.
- 지원 중단된 API를 사용하고 있지 않은지 확인합니다.
document.write()또는 비활성 스크롤 이벤트 리스너와 같은 안전하지 않은 코딩 방식을 코드베이스에서 삭제합니다.- 분석 또는 기타 서드 파티 라이브러리가 로드되지 않는 경우 PWA가 중단되지 않도록 방어적으로 코딩할 수도 있습니다.
- 여러 브라우저와 출시 채널에서 린팅과 같은 정적 코드 분석과 자동화된 테스트를 요구하는 것이 좋습니다. 이러한 기법은 오류가 프로덕션에 들어가기 전에 포착하는 데 도움이 됩니다.