앱개발-안드로이드 스튜디오에서 HTML → APK 조립 가이드

작성일자 글쓴이

안드로이드 스튜디오 설치까지 완료하셨나요? 정말 대단합니다! 🏔️

이제 우리가 만든 index.html과 이미지들을 안드로이드 스튜디오 공장에 넣어서 스마트폰에서 돌아가는
‘진짜 어플(APK)’로 조립할 차례입니다.

복잡해 보이지만, 딱 3단계만 “복사+붙여넣기”하면 끝납니다.

1️⃣ 단계: 새 프로젝트 만들기 (공장 가동)

  1. 안드로이드 스튜디오 실행 → New Project 버튼 클릭
  2. 템플릿 선택 (중요!):
    • 목록에서 [Empty Views Activity] 선택
    • (주의: 그냥 ‘Empty Activity’는 최신 Compose 방식으로 초보에 어렵습니다)
  3. Next 클릭 → 설정 입력:
    • Name: Naeronambul (영어)
    • Package name: com.myname.naeronambul (myname을 본인 닉네임으로)
    • Save location: 기본값 유지
    • Language: Kotlin
    • Minimum SDK: API 24 (Android 7.0)
  4. Finish 클릭 → 로딩 막대 완료까지 기다리기

2️⃣ 단계: 파일 옮기기 (재료 투입)

index.html과 images 폴더를 안드로이드 프로젝트에 넣습니다.

  1. 왼쪽 상단 [Android] 탭 → [Project]로 전환
  2. 경로: app > src > main
  3. main 폴더 위에서 마우스 우클릭 → New → Folder → Assets Folder 선택 → Finish
  4. 윈도우 탐색기에서 index.html과 images 폴더 복사 → assets 폴더에 붙여넣기
  5. assets 폴더 안에 파일이 들어갔는지 확인

3️⃣ 단계: 코드 3개 수정하기 (조립)

왼쪽 탭을 [Android] 보기로 돌려놓습니다.

(1) 인터넷 권한 주기 (AndroidManifest.xml)

위치: app > manifests > AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

(2) 화면에 웹뷰 깔기 (activity_main.xml)

위치: app > res > layout > activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

(3) 웹뷰 작동시키기 (MainActivity.kt)

위치: app > java > com.myname.naeronambul > MainActivity

package com.myname.naeronambul // ← 패키지명은 본인 것으로 수정

import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 1. 웹뷰 찾기
        val myWebView: WebView = findViewById(R.id.myWebView)

        // 2. 웹뷰 설정
        myWebView.settings.javaScriptEnabled = true
        myWebView.settings.domStorageEnabled = true
        
        // 3. 앱 안에서 페이지 이동
        myWebView.webViewClient = WebViewClient()
        myWebView.webChromeClient = WebChromeClient()

        // 4. assets 폴더 HTML 로드
        myWebView.loadUrl("file:///android_asset/index.html")
    }
    
    // 뒤로가기 버튼 처리
    override fun onBackPressed() {
        val myWebView: WebView = findViewById(R.id.myWebView)
        if (myWebView.canGoBack()) {
            myWebView.goBack()
        } else {
            super.onBackPressed()
        }
    }
}

🏁 최종 점검 (실행해보기)

  1. 안드로이드 폰을 USB로 연결 (개발자 옵션 → USB 디버깅 켜기)
  2. 안드로이드 스튜디오 상단 중앙 ▶ (초록색 재생 버튼) 클릭
  3. 폰에 “내로남불 판독기” 앱 설치 및 실행 확인

앱이 화면에 잘 뜨고 테스트 버튼이 정상 표시되면 성공입니다.
아직 진짜 광고는 안 넣었으므로 버튼 클릭 시 반응이 없거나 에러가 날 수 있습니다.