웹앱 프로젝트 생성 및 테스트
웹앱은 웹코드를 이용하여 앱을 만드는 방법입니다.
이번 시간에는 안드로이드 스튜디오를 이용하여 웹앱 프로젝트를 생성하여 간단히 테스트하는 과정을 살펴보겠습니다.
주의사항
운영체제 계정명에 한글이 포함되어 있으면 진행시 문제가 발생합니다.
새로운 계정을 생성 후 진행하는걸 추천합니다.
사전준비
안드로이드 스튜디오 설치(참고링크)
1. 안드로이드 스튜디오 프로젝트 생성하기
- 안드로이드 스튜디오 실행(설치 후 첫 화면) 후 Start a new Android Studio project 클릭
- Empty Activity 클릭 후 Next 클릭
- 프로젝트 항목들을 입력 후 Finish 클릭
Name : 앱 이름
Package name : 패키지명
Save location : 저장 위치
Laguage : 언어로 Java 선택
2. 웹앱을 위한 소스코드 수정 및 html 파일 추가
- app 폴더 > java 폴더 > 패키지명 폴더 > MainActivity 클릭
- 기존 코드를 다음 코드로 수정
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | package com.example.myapplication; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity { WebView web; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout layout = new LinearLayout(this); layout.setOrientation(LinearLayout.VERTICAL); web = new WebView(this); WebSettings webSettings = web.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setUseWideViewPort(true); webSettings.setBuiltInZoomControls(false); webSettings.setAllowUniversalAccessFromFileURLs(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); webSettings.setSupportMultipleWindows(true); webSettings.setSaveFormData(false); webSettings.setSavePassword(false); webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); web.setWebChromeClient(new WebChromeClient()); web.setWebViewClient(new WebViewClient()); web.loadUrl("file:///android_asset/index.html"); layout.addView(web); setContentView(layout); } } | cs |
- 메뉴에서 File > New > Folder > Assets Folder 클릭
- Finish 클릭
- assets 폴더 우클릭 > New > File 클릭 후 index.html 입력
- index.html에 테스트 코드 입력 : 기본 html로 작성된 코드를 입력합니다.
샘플 다운로드 : index.html
3. 에뮬레이터 설치
- 메뉴 Tools > SDK Manager 클릭
- Android SDK > SDK Tools > Intel x86 Emulator Accelerator (HAXM installer) 체크 후 OK 클릭
- 에뮬레이터가 사용할 RAM 크기를 설정. 보통 Recommended로 할당하면 됩니다.
4. 가상 장치 생성
- 메뉴 Tools > AVD Manager 클릭
- Create Virtual Device.. 클릭
- 가상 장치 종류 선택(원하는 장치가 있으면 선택하면 됩니다.) Phone > Pixel 2 선택
- Pie 옆에 Download 클릭(아래 이미지에는 미리 설치되어 있어 Download 버튼이 안보입니다.)
- 가상 장치 이름(AVD Name) 설정 후 Finish 클릭
5. 테스트
- 메뉴 Run > Run 'app' 클릭
- 실행 결과 화면
이상으로 웹앱 프로젝트 생성 및 테스트 과정을 살펴봤습니다.