---
title: 프로그레시브 웹 앱
slug: Web/Progressive_web_apps
tags:
  - 앱
  - 최신 웹 앱
  - 프로그레시브 웹 앱
translation_of: Web/Progressive_web_apps
---
<p class="summary">프로그레시브 웹 앱은 최신 웹 API와 전통적인 점진적 개선 전략을 함께 사용해 크로스 플랫폼 웹 어플리케이션을 생성합니다. 이러한 앱은 어디서든 동작하며 네이티브 앱에서의 사용자 경험 이점과 동일한 몇 가지 기능들을 제공합니다. 이 문서에서는 이에 대해 여러분이 알아야 할 모든 것들에 대해 알려드립니다.</p>

<h2 id="PWA_이점">PWA 이점</h2>

<p>PWA는 발견 가능, 설치 가능, 연결 가능해야 하고, 네트워크에 독립적이어야 하고, 점진적이고 재참여가 가능해야하며 반응형이고 안전해야 합니다. 이러한 것들이 무엇을 의미하는지는 <a href="/ko/docs/Web/Apps/Progressive/Advantages">프로그레시브 웹 앱 이점</a> 문서를 읽어보시기 바랍니다. PWA를 구현하는 방법은 아래 섹션에 나열된 가이드를 참조하십시오.</p>

<h2 id="핵심_PWA_가이드">핵심 PWA 가이드</h2>

<p>다음 가이드는 간단한 예제를 살펴보고 모든 조각이 어떻게 동작하는지 보여줌으로써 PWA 구현을 위해 해야하는 것들이 무엇인지 보여줍니다.</p>

<ol>
 <li><a href="/ko/docs/Web/Apps/Progressive/Introduction">프로그레시브 웹 앱 소개</a></li>
 <li><a href="/ko/docs/Web/Apps/Progressive/App_structure">프로그레시브 웹 앱 구조</a></li>
 <li><a href="/ko/docs/Web/Apps/Progressive/Offline_Service_workers">Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기</a></li>
 <li><a href="/ko/docs/Web/Apps/Progressive/Installable_PWAs">PWA를 설치가능하게 만드는 방법</a></li>
 <li><a href="/ko/docs/Web/Apps/Progressive/Re-engageable_Notifications_Push">알림과 푸시를 사용해 PWA를 재참여(re-engageable)가능하게 만드는 방법</a></li>
</ol>

<div class="column-container">
<div class="column-half">
<h2 id="기술_가이드">기술 가이드</h2>

<ul>
 <li><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">클라이언트 사이드 저장소</a> — 웹 저장소, IndexedDB, service worker를 언제 어떻게 사용하는지 보여주는 상세 가이드</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker 사용</a> — Service Worker API에 대한 더 자세한 가이드.</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB 사용</a> — IndexedDB의 근본에 대한 자세한 설명.</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용</a> — 간단하게 만들어진 Web storage API.</li>
 <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Application Shell 구조를 사용한 웹 앱 즉시 로딩</a> — App Shell 코딩 패턴을 사용해 빠르게 로딩되는 앱을 생성하는 가이드.</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Push_API/Using_the_Push_API">Push API 사용</a> — Web Push API의 기초에 대해 배우기.</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Notifications_API/Using_the_Notifications_API">Notifications API 사용</a> — 웹 알림 요약.</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">반응형 디자인 블록 구축</a> — 반응형 디자인 기초, 최신 앱 레이아웃 필수 주제 배우기.</li>
 <li><a href="https://developer.mozilla.org/ko/docs/Web/Apps/Modern/Responsive/Mobile_first">모바일 우선</a> — 반응형 어플리케이션 레이아웃을 생성할 때, 보통 기본적으로 모바일 레이아웃을 생성하고, 더 넓은 상단 레이아웃을 구축하는 것이 좋습니다.</li>
 <li><a href="/ko/docs/Web/Apps/Progressive/Add_to_home_screen">홈 화면에 추가 가이드</a> — 앱을 홈 화면에 추가하여 얻을 수 있는 이점에 대해 배우기.</li>
</ul>
</div>

<div class="column-half">
<h2 id="도구">도구</h2>

<ul>
 <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — 아주 간단하게 클라이언트 사이드 데이터 저장소를 만들 수 있는 훌륭하고 가벼운 JavaScript 라이브러리. 기본적으로 IndexedDB를 사용하고 필요한 경우 Web SQL/Web Storage를 사용합니다.</li>
 <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — 손쉬운 Service Worker 개발을 위한 Express 같은 마이크로프레임워크.</li>
 <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — 템플릿이자 GitHub 페이지에 오프라인 웹 앱을 배포하기 위한 도구.</li>
 <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — 특정 리소스를 프리캐싱(미리 캐싱;precache)하는 service worker 코드를 생성하는 노드 모듈.</li>
 <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — 더 나은 캐싱 전략과 쉬운 프리캐싱을 제공하는 sw-precache의 정신적 지주.</li>
 <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — 사이트가 사용자들을 위해 항상 존재하도록 해주는 작은 스크립트.</li>
 <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — 오프라인 앱 및 그 이상의 다양한 앱 구현 방법을 보여주는 훌륭한 service worker/push 가이드 시리즈.</li>
</ul>

<p> </p>
</div>
</div>

<h2 id="함께_보기">함께 보기</h2>

<ul>
 <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers</li>
 <li class="graf--h3 graf--first" id="4c45"><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> by Alex Russell</li>
 <li class="graf--h3 graf--first"><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li>
 <li class="graf--h3 graf--first"><a href="https://developers.google.com/web/tools/lighthouse">The Lighthouse Tool</a> by Google</li>
 <li class="graf--h3 graf--first"><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li>
 <li class="graf--h3 graf--first"><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li>
 <li class="graf--h3 graf--first"><a href="https://www.pokedex.org/">Offline-capable Pokédex web site</a></li>
 <li class="graf--h3 graf--first">
  <p><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a> </p>
 </li>
</ul>