PWA 앱 설치 방법 총정리: 안드로이드, 아이폰, PC에서 설치하는 방법

PWA(Progressive Web App) 앱을 안드로이드, 아이폰(iOS), 윈도우 PC에서 설치하는 방법을 자세히 설명합니다. 설치 조건부터 설치 버튼이 보이지 않을 때 해결 방법까지 실무 기준으로 정리했습니다.

PWA 앱 설치 방법을 찾고 계신다면 이 글에서 안드로이드, 아이폰, 윈도우 PC 환경별 설치 방법부터 설치 버튼이 보이지 않는 원인과 해결 방법까지 한 번에 확인할 수 있습니다. 최근 많은 웹서비스가 별도 앱스토어 등록 없이 PWA(Progressive Web App)를 제공하고 있으며, 사용자는 웹사이트를 일반 앱처럼 설치하여 사용할 수 있습니다.

PWA란 무엇인가?

PWA(Progressive Web App)는 웹사이트를 스마트폰이나 PC에 앱처럼 설치하여 사용할 수 있는 기술입니다.

일반 앱과 비교하면 다음과 같은 특징이 있습니다.

구분일반 앱PWA

설치 위치	앱스토어	웹브라우저
업데이트	앱스토어 업데이트 필요	자동 업데이트
개발 비용	상대적으로 높음	비교적 낮음
저장 공간	상대적으로 큼	작음
접근성	앱스토어 필요	URL 접속 가능

대표적으로 다음과 같은 서비스들이 PWA를 지원합니다.

• X(트위터)
• Pinterest
• Starbucks
• Uber
• Notion 일부 기능

---

안드로이드에서 PWA 설치 방법

안드로이드에서는 Chrome 브라우저를 사용하는 것이 가장 편리합니다.

1단계: PWA 지원 사이트 접속

Chrome 브라우저를 실행합니다.

예시

https://example.com

 

PWA가 적용된 사이트에 접속합니다.

---

2단계: 설치 버튼 확인

사이트 접속 후 다음 중 하나가 나타납니다.

방법 1

주소창 우측 설치 아이콘

[설치]

 

버튼 클릭

방법 2

Chrome 메뉴

⋮
앱 설치

 

선택

---

3단계: 설치 완료

설치 확인 창이 나타납니다.

앱 설치
취소

 

설치 클릭

설치가 완료되면

• 홈 화면
• 앱 목록

에서 일반 앱처럼 사용할 수 있습니다.

---

안드로이드 설치 화면 예시

Chrome
 ├─ 사이트 접속
 ├─ 메뉴(⋮)
 ├─ 앱 설치
 └─ 완료

 

---

아이폰(iPhone)에서 PWA 설치 방법

iOS는 Android와 설치 방식이 다릅니다.

Safari 브라우저를 사용해야 합니다.

1단계: Safari로 사이트 접속

중요합니다.

Chrome 앱이 아닌 Safari로 접속해야 합니다.

Safari 실행
↓
PWA 사이트 접속

 

---

2단계: 공유 버튼 선택

하단 메뉴에서

□↑

 

공유 버튼 클릭

---

3단계: 홈 화면에 추가

메뉴에서

홈 화면에 추가
(Add to Home Screen)

 

선택

---

4단계: 이름 설정

원하는 앱 이름 입력

예시

회사 그룹웨어
사내 ERP
업무관리 시스템

 

---

5단계: 추가

추가

 

버튼 클릭

홈 화면에 앱 아이콘이 생성됩니다.

---

윈도우 PC에서 PWA 설치 방법

Chrome 또는 Edge 브라우저에서 가능합니다.

Chrome 설치 방법

사이트 접속

https://example.com

 

---

주소창 설치 아이콘 클릭

주소창 오른쪽에

설치

 

아이콘 표시

---

설치 버튼 클릭

앱 설치

 

선택

---

실행

설치 후

시작 메뉴
바탕화면
작업 표시줄

 

에서 실행 가능합니다.

---

Microsoft Edge 설치 방법

Edge에서는 PWA 지원이 매우 좋습니다.

메뉴 클릭

...
앱
이 사이트를 앱으로 설치

 

선택

설치 완료 후 독립 앱처럼 실행됩니다.

---

PWA 설치 버튼이 안 보이는 이유

실무에서 가장 많이 발생하는 문제입니다.

HTTPS가 적용되지 않은 경우

PWA는 보안 연결이 필수입니다.

https://

 

형태가 아니면 설치가 불가능합니다.

---

Manifest 파일이 없는 경우

PWA는 반드시 manifest.json 파일이 필요합니다.

예시

 

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

 

---

Service Worker가 없는 경우

오프라인 기능 및 캐시 기능을 담당합니다.

 

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

 

---

브라우저 지원 문제

일부 구형 브라우저는 PWA 설치 기능을 지원하지 않습니다.

권장 브라우저

• Chrome 최신 버전
• Edge 최신 버전
• Safari 최신 버전

---

개발자가 직접 PWA 적용하는 방법

HTML에 Manifest 등록

 

<link rel="manifest" href="/manifest.json">

 

Service Worker 등록

 

navigator.serviceWorker.register('/sw.js');

 

Manifest 예시

 

{
  "name": "My PWA",
  "short_name": "PWA",
  "display": "standalone",
  "theme_color": "#1976d2",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

 

---

FAQ

PWA는 앱스토어에 등록해야 하나요?

아닙니다. 웹사이트만 있으면 사용자가 바로 설치할 수 있습니다.

PWA는 무료인가요?

네. 사용자는 별도 비용 없이 설치할 수 있습니다.

아이폰에서도 푸시 알림이 가능한가요?

iOS 16.4 이상부터 PWA 푸시 알림을 지원합니다.

PWA와 하이브리드 앱은 무엇이 다른가요?

PWA는 웹 기술 기반이며 브라우저에서 설치됩니다. 하이브리드 앱은 앱스토어를 통해 배포되는 앱입니다.

PWA는 오프라인에서도 동작하나요?

Service Worker를 적절히 구현하면 일부 기능은 오프라인에서도 사용할 수 있습니다.

---

마무리

PWA 앱 설치 방법은 생각보다 간단합니다. 안드로이드는 Chrome의 앱 설치 기능을 사용하고, 아이폰은 Safari의 "홈 화면에 추가" 기능을 이용하면 됩니다. 만약 설치 버튼이 보이지 않는다면 HTTPS, Manifest, Service Worker 설정 여부를 먼저 확인해야 합니다. 특히 자체 웹서비스나 사내 시스템을 운영하는 경우 PWA를 적용하면 앱 개발 비용 없이 앱과 비슷한 사용자 경험을 제공할 수 있습니다.