웹을 모바일 앱으로 (PWA · Capacitor)
새로 앱을 만들지 않아도 돼요. 지금 만든 웹앱을 홈 화면에 설치되는 앱(PWA)으로, 더 나아가 앱 스토어에 올리는 앱(Capacitor)으로 바꿔요.
🎯 이번 레슨을 마치면
- 네이티브 앱, 하이브리드 앱, PWA의 차이를 안다
- Codex에게 PWA 설정을 맡기고 휴대폰에 설치해 볼 수 있다
- Capacitor로 스토어 앱을 만들 때 필요한 준비물과 절차를 안다
앱의 세 가지 종류
| 📱 네이티브 앱 | 📦 하이브리드 앱 | 🌐 PWA | |
|---|---|---|---|
| 만드는 법 | 안드로이드·iOS 전용 언어로 따로 | 웹 코드를 앱 껍데기에 포장 (Capacitor) | 웹사이트에 앱 설정 추가 |
| 앱 스토어 | ✅ 올림 | ✅ 올림 | ❌ (주소로 접속 후 설치) |
| 추가 비용·시간 | 가장 큼 | 중간 | 거의 없음 |
| 이 과정에서 | 다루지 않음 | 2단계 | 1단계 |
1단계: PWA로 만들기 (추천 시작점)
내 웹앱을 휴대폰 홈 화면에 설치할 수 있는 PWA로 만들고 싶어. - 앱 이름, 짧은 이름, 테마 색, 아이콘(여러 크기)을 설정해 줘. 아이콘은 지금 로고로 만들어 줘. - 인터넷이 끊겨도 첫 화면과 "인터넷 연결을 확인해 주세요" 안내는 보이게 해 줘. - 로그인이나 예약 같은 데이터는 오프라인에서 저장된 척하지 않게, 항상 최신 서버 데이터를 쓰게 해 줘. 무엇을 추가하는지 먼저 설명해 주고, 다 되면 휴대폰에 설치하는 방법도 알려 줘.
배포한 뒤 휴대폰으로 사이트를 열고 설치해 보세요.
| 휴대폰 | 설치 방법 |
|---|---|
| 안드로이드 (크롬) | 메뉴(⋮) → 앱 설치 또는 홈 화면에 추가 |
| 아이폰 (사파리) | 공유 버튼 → 홈 화면에 추가 |
2단계: Capacitor로 스토어 앱 만들기
PWA로 충분하지 않을 때 — 스토어에서 검색되게 하고 싶거나, 카메라·푸시 알림을 더 안정적으로 쓰고 싶을 때 — Capacitor로 포장해요.
| 준비물 | 왜 필요해요? |
|---|---|
| Android Studio (윈도우·맥) | 안드로이드 앱을 만들고 휴대폰·에뮬레이터에서 실행해요 |
| Mac + Xcode | iOS 앱은 Mac에서만 만들 수 있어요 |
| Google Play 개발자 계정 | 플레이 스토어에 올리기 (1회 등록비) |
| Apple Developer Program | 앱 스토어에 올리기 (연간 회비) |
이 웹앱을 Capacitor로 안드로이드 앱으로 만들고 싶어. 나는 코딩 초보자야. - 필요한 프로그램 설치부터 한 단계씩 안내해 줘. 내가 직접 설치해야 하는 건 알려 줘. - 앱 이름, 아이콘, 시작 화면(스플래시)을 설정해 줘. - 웹을 고치면 앱에도 반영하는 방법(빌드 → 동기화)을 쉽게 정리해 줘. - 내 안드로이드 휴대폰에 설치해서 확인하는 방법까지 알려 줘.
스토어 심사 전 체크리스트
퀴즈
비용 없이 가장 빠르게 '홈 화면에 설치되는 앱'을 만드는 방법은?
📝 정리해 볼까요?
- PWA는 웹사이트에 "앱 정보(manifest)"와 "오프라인 도우미(service worker)"를 더해 홈 화면에 설치되게 만든 것이에요. 비용 0원으로 시작해요.
- Capacitor는 같은 웹 코드를 안드로이드·iOS 앱으로 포장해서 스토어에 올릴 수 있게 해 줘요. 안드로이드는 Android Studio, iOS는 Mac과 Xcode가 필요해요.
- 스토어에 올리려면 개발자 등록비, 개인정보 처리방침, 계정 삭제 기능 같은 심사 조건을 챙겨야 해요.
📖 새로 나온 용어
- PWA Progressive Web App
- 휴대폰이나 PC에 설치해서 앱처럼 쓸 수 있는 웹사이트예요. 비유: 앱 옷을 입은 웹사이트
- 하이브리드 앱 Hybrid App
- 웹 기술로 만든 화면을 앱 껍데기에 담은 앱이에요. Capacitor가 대표적이에요.
- 네이티브 앱 Native App
- 안드로이드, iOS 등 각 기기 전용 언어로 만든 앱이에요.
잘했어요! 완료 표시는 이 브라우저에 저장돼요.