PWA: 설치되는 웹

스토어 없이 홈 화면에 앱처럼 올라가는 웹사이트

한 줄로 말하면

PWA는 홈 화면에 설치해서 앱처럼 쓸 수 있게 만든 웹사이트야. 스토어 심사 없이 배포할 수 있어.

PWA를 만드는 세 가지 재료

1. HTTPS: 안전하게 잠긴 연결이어야 해. 요즘 배포 서비스는 자동으로 붙여줘.
2. 웹 앱 매니페스트: 앱 이름, 아이콘, 시작 주소, 색상을 적은 JSON 파일이야. 앱의 신분증.
3. 서비스 워커: 브라우저 뒤에서 일하는 작은 스크립트야. 파일을 저장해 두고 오프라인에서도 열리게 해줘.

{
  "name": "바코친 공부방",
  "short_name": "바코친",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

설치는 어떻게 하고, 뭐가 안 될까?

설치 방법

안드로이드 크롬에서는 주소창이나 메뉴에 설치 버튼이 떠. 아이폰은 Safari에서 공유 버튼 → 홈 화면에 추가를 눌러야 해. 아이폰 사용자는 이 방법을 잘 모르니까 화면에 안내 문구를 넣어주면 좋아.

할 수 있는 것과 한계

오프라인 화면, 홈 화면 아이콘, 전체 화면 실행은 잘 돼. 아이폰은 iOS 16.4부터 홈 화면에 추가한 웹앱에서 웹 푸시를 받을 수 있게 됐어. 하지만 백그라운드 위치, 일부 블루투스·센서 기능, 스토어 노출, 인앱결제 같은 건 네이티브 앱보다 제한적이야. 특히 iOS는 안드로이드보다 지원 범위가 좁은 편이야.

언제 PWA를 고를까?

• 좋은 경우: 사내 도구, 예약·주문 페이지, 콘텐츠 서비스, 아이디어 빠른 검증
• 아쉬운 경우: 스토어 검색으로 사용자를 모아야 할 때, 기기 기능을 깊게 쓸 때, 아이폰 사용자가 대부분일 때

확인 퀴즈

무료 · 카카오로 바로 시작 · 레슨 243개