Life and Tech Talk
1. Progressive Web App (PWA) 개발
PWA는 HTML, CSS, JavaScript로 작성된 웹 앱으로, 네이티브 앱처럼 동작할 수 있도록 설계됩니다. Play Store에 배포하려면 PWA로 먼저 만들어야 합니다.
(1) 기본 웹 앱 준비
- HTML 파일: 앱의 기본 구조를 만듭니다.
- html
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>내 PWA 앱</title><linkrel="manifest"href="manifest.json"></head><body><h1>안녕하세요, PWA 앱입니다!</h1><scriptsrc="app.js"></script></body></html>- CSS: 스타일을 추가해 모바일 친화적으로 만듭니다.
- JavaScript: 동적인 기능을 추가합니다.
- javascript
console.log("PWA 앱이 실행되었습니다!");
(2) Web App Manifest 추가
PWA로 동작하려면 manifest.json 파일이 필요합니다. 이 파일은 앱의 이름, 아이콘, 시작 URL 등을 정의합니다.
json
{ "name": "내 PWA 앱", "short_name": "PWA 앱", "start_url": "/index.html", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [ { "src": "icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }
- 아이콘은 192x192와 512x512 크기로 준비하세요.
(3) Service Worker 추가
오프라인 동작과 캐싱을 위해 serviceworker.js 파일을 추가합니다.
javascript
self.addEventListener('install', (event) => { event.waitUntil( caches.open('v1').then((cache) => { return cache.addAll([ '/', '/index.html', '/app.js', '/icon-192x192.png', '/icon-512x512.png' ]); }) ); }); self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }) ); });
- HTML에서 Service Worker를 등록합니다:
- html
<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceworker.js') .then(() => console.log('ServiceWorker 등록 성공')) .catch((error) => console.log('ServiceWorker 등록 실패:', error));} </script>
(4) HTTPS 배포
PWA는 HTTPS 환경에서만 제대로 작동하므로, 웹 앱을 호스팅할 서버를 준비하고 SSL 인증서를 적용하세요. (예: GitHub Pages, Netlify, Vercel 등 무료 서비스 활용 가능)
2. Trusted Web Activity (TWA)로 Play Store에 배포
PWA를 Play Store에 등록하려면 TWA를 사용해 Android 앱으로 패키징해야 합니다.
(1) 개발 환경 준비
- Node.js와 npm 설치
- Android Studio 설치 (Android SDK 포함)
- Java Development Kit (JDK) 설치
(2) Bubblewrap 설치
Bubblewrap은 PWA를 TWA로 변환해주는 CLI 도구입니다.
bash
npm install -g @bubblewrap/cli
(3) PWA를 TWA로 변환
- Bubblewrap 초기화:
- bash
bubblewrap init --manifesthttps://your-domain.com/manifest.json
- your-domain.com은 PWA가 호스팅된 URL입니다.
- 명령어를 실행하면 twa-manifest.json 파일이 생성됩니다.
- APK 생성:
- bash
bubblewrap build
- Android Studio에서 생성된 APK를 서명해야 하므로, 키스토어 파일을 준비합니다.
- 키스토어 생성 명령어:
- bash
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -aliasmy-alias
(4) Google Play Console에서 앱 등록
- Google Play 개발자 계정 생성: 일회성 등록비 $25를 지불하고 계정을 만듭니다.
- 앱 업로드:
- Google Play Console에 로그인합니다.
- "새 앱 만들기"를 선택하고, 앱 이름, 설명, 아이콘, 스크린샷 등을 입력합니다.
- 서명된 APK 또는 AAB(App Bundle)를 업로드합니다.
- 심사 제출: 앱 정보를 모두 입력한 후 심사를 요청합니다. 보통 며칠 내에 승인 여부가 결정됩니다.
3. 추가 팁
- AAB 사용: 최근 Play Store는 APK 대신 Android App Bundle(AAB)을 권장합니다. Bubblewrap으로 AAB를 생성하려면:
- bash
bubblewrap build --aab- 테스트: 배포 전 Chrome 개발자 도구의 "Application" 탭에서 PWA가 제대로 작동하는지 확인하세요.
- 디버깅: Android Studio의 에뮬레이터로 TWA 앱을 테스트하세요.
