하이브리드 앱 만들기 #1. 일단 .html 파일 앱 안에 띄우기 (안드로이드 웹앱)

SinZ 2025. 9. 16. 15:03

2025. 9. 16. 15:03

이 게시글에서 다루지 않으나, 해야 하는 것들

JDK 설치 및 환경 변수 설정

- 자바로 프로그래밍을 할 때 필요한 것들을 모아놓은 것

- https://www.oracle.com/kr/java/technologies/downloads/

Download the Latest Java LTS Free

Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.

www.oracle.com

안드로이드 스튜디오 설치

- 앱 개발할 때 필요한 것들 다 때려박은 프로그램

- https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

안드로이드 SDK 다운로드

- 안드로이드 스튜디오 최초 실행시 다운로드 가능 또는 SDK Manager 실행해서 받으면 됨

- 대충 저렇게 생겼고, 전 에뮬레이터는 사용하지 않을 예정이라, 안드로이드 가상머신은 뺐어요

앱 프로젝트 생성

안드로이드 스튜디오 실행 후 New Project 클릭

Phone and Tablet 선택 후 No Activity 선택.

여기서 Activity를 고르면 "거의 모든 개발자들이 사용하지만 없어도 되는 것"을 지멋대로 추가해서 만들어줘요.

앱 이름과 패키지명 알아서 입력. 개발 언어는 자바와 코틀린 중 하나를 선택하시면 돼요.

패키지명은 본인의 가진 홈페이지의 주소를 반대로 적고, 그 뒤에 앱 이름을 적는 것이 국룰인데, 홈페이지가 없어도 그냥 적어도 상관없긴 해요

아무튼 "com.본인닉네임.앱이름" 정도로 적으면 돼요. 카톡을 예로 들면, "com.kakao.talk"

언어 선택은 고민되신다면, 일단 자바로 선택해두세요. 어차피 코틀린으로 바꾸거나 섞어서 쓸 수 있어요.

저기서 Finish를 누르면 프로젝트가 생성되고, 오른쪽 아래를 보면 무언가가 실행 중일텐데,

저게 끝나면 왼쪽 위에 있던 Project가

Android로 바뀔거예요

앱 화면 추가

안드로이드 앱 구성 요소 중 Actiity라는 친구는 화면을 의미해요. 일단 무언가를 보여줄 화면이 필요하니 Actiity를 추가할거예요.

왼쪽 파일 탐색기? 부분에 있는 패키지명들 중 가장 위에 있는 부분에 마우스 오른쪽 클릭해서, New → Actiity → Gallery

여기서 "Empty Views Actiity" 선택.

원래는 "Empty Actiity"를 누르면 빈 Actiity를 만들어줬는데, 이젠 이것저것 없어도 되는 것들을 막 가져다가 붙인 Actiity를 만들어주는 방식으로 바뀌었어요. 기존에 있던 빈 Actiity를 원한다면 "Empty Actiity" 대신 "Empty Views Actiity"를 골라야 해요.

사실 Gallery 안들어가고 바로 Empty Views Actiity 골랐어도 상관없어요.

아무튼 이게 다음 화면인데

Generate a Layout File은 체크 해제, Launcher Activity는 체크한 뒤에, 해당 화면을 구현할 때 사용할 언어를 선택하고 Finish 클릭

Generate a Layout File : .xml 파일로 화면을 만들고, 자바나 코틀린을 사용해서 기능을 만드는 것이 옛 국룰인데, 앱 화면도 자바/코틀린만 사용해서 만들 수 있어요. 해당 .xml 파일을 만들지 결정하는 항목

Launcher Activity : 앱 아이콘을 눌러서 앱을 실행할 때, Launcher Activity로 설정된 화면으로 실행되어요.

아무튼 MainActivity.java 파일이 생겼어요. 앱 메인화면의 이름을 MainActivity로 하는 것은 암묵의 룰이에요.

.html 파일들을 넣을 폴더 만들기

Assets Folder를 만들어주세요

Finish

Assets 폴더를 열어서

쇽

폴더 안에 .html 파일을 넣으면 돼요. 안드로이드 스튜디오 내부에서 바로 파일 편집도 가능

앱 내부에 넣어둔 .html 파일 불러오기 (Java를 선택한 경우)

MainActivity.java로 넘어와서, 일단 흐리게 처리된 import 어쩌고 부분은 없어도 되니까 지웠고

이런식으로 적어주세요.

자바스크립트 활성화 부분이 노란색으로 칠해진 이유는, WebView 내부에 악성 사이트를 불러온다면 이상한 내용을 실행할 수도 있다면서 보안 경고를 띄우고 있기 때문이에요.

그렇다고 자바스크립트를 비활성화시키면, 그냥 웹뷰 안에 불러온 모든 사이트 자체가 작동하지 않을 수 있으니 허용 필요.

각 부분이 무엇을 의미하는지는 주석 참고

package 본인.앱의.패키지명;

import android.os.Bundle;
import android.webkit.WebView;

import androidx.appcompat.app.AppCompatActivity;

//대충 앱 화면이라는 뜻
public class MainActivity extends AppCompatActivity {

    //앱 화면이 켜지는 순간 실행될 내용
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //WebView 인스턴스 생성. WebView는 웹사이트나 .html 파일을 불러와서 보여줄 때 사용
        WebView web = new WebView(this);
        
        //assets 폴더에 넣어둔 index.html 파일을 WebView에 불러옴
        web.loadUrl("file:///android_asset/index.html");
        
        //해당 WebView의 자바스크립트 활성화
        web.getSettings().setJavaScriptEnabled(true);
        
        //WebView를 화면의 내용물로 설정
        setContentView(web);
    }
}

앱 내부에 넣어둔 .html 파일 불러오기 (Kotlin을 선택한 경우)

MainActivity.java로 넘어와서, 일단 흐리게 처리된 import 어쩌고 부분은 없어도 되니까 지웠고,

이런식으로 적어주세요.

그렇다고 자바스크립트를 비활성화시키면, 그냥 웹뷰 안에 불러온 모든 사이트 자체가 작동하지 않을 수 있으니 허용 필요.

각 부분이 무엇을 의미하는지는 주석 참고

package 본인.앱의.패키지명

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

//대충 앱 화면이라는 뜻
class MainActivity : AppCompatActivity() {

    //앱 화면이 켜지는 순간 실행될 내용
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        //WebView 인스턴스 생성. WebView는 웹사이트나 .html 파일을 불러와서 보여줄 때 사용
        val web = WebView(this)
        
        //assets 폴더에 넣어둔 index.html 파일을 WebView에 불러옴
        web.loadUrl("file:///android_asset/index.html")
        
        //해당 WebView의 자바스크립트 활성화
        web.getSettings().setJavaScriptEnabled(true)
        
        //WebView를 화면의 내용물로 설정
        setContentView(web)
    }
}