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 환경이 필수입니다.

---

🔗 관련 자료

• Framework7 공식 홈페이지
• Capacitor Docs
• Android Studio

---

📌 궁금한 점이나 오류가 있다면 댓글로 남겨주세요. 빠르게 답변드리겠습니다!

---