Framework7은 Vue, React, Svelte 등과 통합해서 사용할 수 있는 강력한 모바일 UI 프레임워크입니다. 이번 글에서는 Framework7 + Vue + Vite 조합으로 만든 프로젝트를 Android에서 실행 가능한 APK 파일로 패키징하는 전 과정을 소개합니다.
✅ 1. 프로젝트 빌드 준비
먼저 프로젝트 내 웹 자산을 빌드합니다. Vite 기반이라면 아래 명령어로 빌드하면 됩니다:
npm run build
이 작업을 통해 www 또는 dist 폴더에 index.html과 번들된 자바스크립트 파일들이 생성됩니다.
✅ 2. Capacitor 설정 및 Android 플랫폼 추가
웹 앱을 네이티브 앱으로 감싸기 위해 Capacitor를 사용합니다.
npx cap init
질문에 답하며 앱 이름과 ID (com.yourcompany.app)을 설정합니다.
이후 Android 플랫폼을 추가합니다:
npx cap add android
이 명령은 android/ 디렉토리를 생성하고 Android Studio 프로젝트를 초기화합니다.
✅ 3. Capacitor 설정 확인 (capacitor.config.ts)
capacitor.config.ts 또는 capacitor.config.json 파일에서 webDir 경로가 빌드 결과물 폴더와 일치하는지 확인합니다:
const config = {
webDir: 'www', // 또는 'dist'
...
};
✅ 4. 빌드 결과 복사
npx cap copy
이 명령은 웹 자산을 Android 프로젝트로 복사합니다.
✅ 5. Android Studio에서 열기
npx cap open android
Android Studio가 열리면 자동으로 Gradle Sync가 실행됩니다.
✅ 6. 에뮬레이터 또는 실기기에서 실행
Android Studio에서:
- 상단 툴바 ▶️ 버튼을 클릭하거나
- 메뉴: Run > Run 'app'
Device Manager에서 에뮬레이터를 만들거나, 실기기를 USB로 연결해도 됩니다.
✅ 7. APK 패키징
개발용 APK 만들기
Build > Build Bundle(s) / APK(s) > Build APK(s)
빌드가 완료되면 경로가 출력되고, [locate] 버튼을 클릭해 APK 파일을 찾을 수 있습니다:
android/app/build/outputs/apk/debug/app-debug.apk
릴리즈용 APK 만들기
릴리즈용 키스토어를 만들어 서명한 후, 아래로 빌드:
Build > Generate Signed Bundle / APK > APK
🧪 실기기에서 테스트하기
APK 파일을 안드로이드 기기에 설치하려면:
adb install path/to/app-debug.apk
디바이스에서 "출처를 알 수 없는 앱 설치 허용" 옵션이 필요할 수 있습니다.
이제 Framework7로 만든 웹 앱을 Android에서 설치 가능한 네이티브 APK로 패키징할 수 있게 되었습니다. 동일한 방식으로 iOS 앱도 만들 수 있지만, iOS는 macOS와 Xcode 환경이 필수입니다.
🔗 관련 자료
📌 궁금한 점이나 오류가 있다면 댓글로 남겨주세요. 빠르게 답변드리겠습니다!