웹사이트를 홈 화면 앱으로 바꾸는 데 필요한 파일은 사실상 두 개뿐입니다. manifest.json과 sw.js만 갖추면, 앱스토어 심사도 설치 파일도 없이 “홈 화면에 추가” 한 번으로 앱처럼 쓸 수 있어요. 이게 PWA 홈화면 추가 앱 만들기의 전부라고 해도 과언이 아닙니다.
저는 현직 레미콘(믹서트럭) 기사입니다. 코딩은 전공도 직업도 아니에요. AI(Claude)의 도움을 받아 제 운행 기록용 앱 “레미콘 운행일지”를 직접 만들어 쓰고 있는데요. 이 앱이 바로 PWA입니다. 순수 HTML/CSS/JavaScript로만 만들었고, 서버도 없고, GitHub Pages로 무료 배포했어요. 이 글은 그 과정에서 확인한 PWA 홈화면 추가 방법을 정리한 기록입니다. 내용은 2026년 7월 기준이에요.
PWA가 뭔가요? 한 줄로 설명하면
PWA(Progressive Web App)란 홈 화면에 추가하면 앱처럼 전체 화면으로 열리는 웹사이트를 말합니다. 주소창이 사라지고, 아이콘을 누르면 일반 앱과 똑같이 실행돼요. 앱스토어 심사도, 설치 파일 다운로드도 필요 없습니다.
실제로 이렇게까지 갖춘 사이트는 드뭅니다. manifest와 서비스 워커를 둘 다 갖춘 “진짜 PWA”는 모바일 기준 전체 웹사이트의 3.5%에 불과해요(출처: HTTP Archive Web Almanac 2025). 그만큼 아는 사람만 쓰는 방식이라는 뜻이기도 합니다.
PWA 홈화면 추가 앱 만들기, 조건은 세 가지
설치 가능한 PWA의 최소 조건은 체크리스트 세 개로 정리됩니다. 스스로 점검해보세요.
- ☐ HTTPS로 서비스되는 주소 (GitHub Pages는 기본 제공)
- ☐ 이름·아이콘·display·start_url이 담긴 manifest.json
- ☐ 아이콘 이미지 2종: 192×192px(홈 화면용), 512×512px(스플래시 화면용)
예전에는 서비스 워커(sw.js)도 필수였는데요. Chrome은 모바일 108, 데스크톱 112 버전부터 이 요구를 없앴습니다(출처: Chrome for Developers). 지금은 manifest만 제대로 갖춰도 설치 안내가 떠요. 다만 오프라인에서도 앱이 열리길 원하면 서비스 워커의 캐시 기능이 여전히 필요합니다. 제 앱은 운전 중 산간 현장처럼 신호가 약한 곳에서도 열려야 해서 sw.js를 넣었어요.
manifest에서 display는 “standalone”으로 지정해야 주소창 없는 앱 화면이 됩니다. 모바일 PWA manifest의 78%가 이 모드를 씁니다(출처: HTTP Archive Web Almanac 2025). 사실상 표준이라고 보면 돼요.
아이폰과 안드로이드, 홈 화면에 추가하는 법이 달라요
사용자 입장에서 설치는 “주소 열고 → 메뉴에서 홈 화면에 추가”가 전부지만, 기기별로 경로가 다릅니다. 동료에게 안내할 때도 이 차이를 각각 알려줘야 해요.
| 구분 | 안드로이드 크롬 | 아이폰 사파리 |
|---|---|---|
| 설치 경로 | 우측 상단 ⋮ 메뉴 → “홈 화면에 추가” | 하단 공유 버튼(↑) → “홈 화면에 추가” |
| 자동 설치 안내 | 조건 충족 시 자동으로 뜸 | 없음 (직접 찾아 눌러야 함) |
| 페이지 내 설치 버튼 | 가능 (beforeinstallprompt 이벤트) | 지원 안 됨 |
| 웹 푸시 알림 | 지원 | iOS 16.4(2023년 3월) 이후 지원 |
안드로이드는 개발자가 웹페이지 안에 “앱 설치” 버튼을 직접 만들 수도 있습니다. 단, 사용자가 그 사이트와 30초 이상 상호작용해야 이벤트가 발생해요. 아이폰은 이 방식이 아예 안 되기 때문에, “공유 버튼을 눌러 홈 화면에 추가하세요”라는 안내 문구를 따로 보여주는 게 정석입니다.
직접 겪은 문제: 아이콘을 바꾸면 아이폰은 다시 추가해야 해요
아이폰은 홈 화면에 추가하는 그 시점의 아이콘을 그대로 캡처해서 씁니다. 그래서 나중에 앱 아이콘을 바꿔도 이미 추가된 아이콘은 안 바뀌어요. 방법은 하나입니다. 홈 화면에서 지웠다가 다시 추가하는 것. 데이터는 브라우저에 남아 있으니 기록이 날아가진 않지만, 처음엔 왜 안 바뀌나 한참 헤맸어요.
또 하나, 설치 버튼이 안 뜬다면 manifest 경로나 MIME 타입 오류일 가능성이 큽니다. Chrome 개발자도구의 Application → Manifest 탭에서 원인을 확인할 수 있어요. 아이폰에서 “설치 버튼이 안 보인다”는 건 버그가 아니라, iOS에는 자동 설치 배너 자체가 없기 때문입니다.
왜 앱스토어 대신 PWA를 골랐나요
혼자 쓰거나 동료 몇 명에게 나눠주는 앱이라면 PWA가 압도적으로 편합니다. 앱스토어 등록·심사·수수료(인앱결제 기준 15~30%)가 전부 없어요. 주소만 보내면 끝이고, 업데이트도 웹에 새로 올리면 새로고침으로 반영됩니다.
| 구분 | PWA | 앱스토어 네이티브 앱 |
|---|---|---|
| 배포 | URL 공유로 즉시 | 등록·심사 필요 |
| 비용 | 무료 (GitHub Pages 기준) | 개발자 계정 비용 + 수수료 |
| 업데이트 | 웹 배포 즉시 반영 | 심사 후 반영 |
| 알림·하드웨어 접근 | 제한적 (특히 iOS) | 폭넓게 지원 |
| 스토어 검색 노출 | 안 됨 | 됨 |
물론 못 하는 것도 분명합니다. 알림과 백그라운드 기능은 네이티브 앱보다 제한적이에요. 제 앱도 멀티 기기 동기화가 없고, 브라우저 캐시를 지우면 데이터가 사라집니다. 개인용 앱이라 감수하는 부분이에요.
이렇게 만든 앱, 실제로 이만큼 쓰고 있어요
만들기만 하고 안 쓰면 의미가 없죠. 2026년 6월 1일부터 7월 24일까지 40일간, 근무 38일치를 이 앱에 기록했습니다. 총 210바리, 1,260루베, 운행거리 3,358km가 쌓였어요. 하루 평균 5.5바리, 많이 뛴 날은 9바리였습니다.
바리당 단가도 앱이 월별로 따로 기억합니다. 6월 74,300원에서 7월 77,000원으로 올랐는데, 결산이 자동으로 반영돼요. 이 단가는 제 기준이고 공장·지역마다 다릅니다. 홈 화면에서 아이콘 한 번 누르면 바로 입력 화면이니, 운전석에서 30초면 하루 기록이 끝나요. PWA 홈화면 추가 앱 만들기가 저 같은 비개발자에게도 의미 있는 이유입니다.
자주 묻는 질문
PWA는 앱스토어 심사 없이 배포할 수 있나요?
네, 됩니다. PWA는 URL로 직접 배포하므로 앱스토어 등록·심사·수수료가 전혀 없어요. 수정사항도 웹에 올리는 즉시 반영됩니다. 대신 앱스토어 검색에는 노출되지 않으니, 주소를 직접 알려줘야 해요.
아이폰에서는 왜 설치 버튼이 안 보이나요?
버그가 아니라 iOS에는 자동 설치 배너 자체가 없기 때문입니다. 사파리 하단의 공유 버튼(↑)을 누른 뒤 “홈 화면에 추가”를 직접 선택해야 해요. iOS 16.4 이후로는 크롬·엣지에서도 같은 방식으로 추가할 수 있습니다.
코딩을 몰라도 PWA 앱을 만들 수 있나요?
AI의 도움을 받으면 가능합니다. 저도 코딩이 전공도 직업도 아닌 레미콘 기사지만, Claude와 대화하며 필요한 앱을 만들어 40일 넘게 쓰고 있어요. 필요한 파일이 manifest.json과 sw.js 정도로 단순해서, 시작 장벽이 낮은 편입니다.
PWA로 홈 화면에 추가하면 오프라인에서도 열리나요?
서비스 워커(sw.js)로 캐시를 설정하면 오프라인에서도 열립니다. 다만 설치 자체는 Chrome 모바일 108 버전부터 서비스 워커 없이 manifest만으로도 가능해요. 오프라인 동작이 필요하면 서비스 워커를 넣는 게 맞습니다.
PWA 앱의 데이터는 어디에 저장되나요?
제 앱 기준으로는 서버 없이 브라우저의 localStorage에만 저장됩니다. 외부로 나가지 않아 개인정보 걱정은 없지만, 브라우저 캐시를 지우면 데이터도 함께 사라져요. 여러 기기 동기화도 안 되니, 중요한 기록이라면 이 한계를 알고 쓰셔야 합니다.
이 글의 브라우저 지원 기준은 2026년 7월에 확인한 내용입니다. PWA 관련 정책은 브라우저 업데이트로 바뀔 수 있으니, 최신 조건은 MDN이나 Chrome for Developers 공식 문서에서 다시 확인하시길 권장해요.