웹뷰란 App 내에 웹 사이트를 띄우는 것으로 웹 개발자들이 간단한 App을 만들기 위해서 선택할 수 있는 최고의 방법입니다.
하지만 웹뷰 만들기를 검색하면 전부 안드로이드 개발자의 시선에 맞춰져 있어서 개인적으로 웹 개발자가 보기엔 다소 헷갈리는 면이 있었습니다.
그래서 추후에 저도 다시 참고할 겸 웹 개발자를 위한 웹뷰 만들기라는 주제로 최대한 쉽게 작성해 보겠습니다.
설치
가장 간단하게는 Swing2App이라는 사이트를 이용해 웹뷰를 만들 수 있지만 해당 사이트를 이용하면 실제 배포 시 트래픽이 발생하면 유료로 전환되는 것 같아 직접 만들기로 했습니다.
실제 배포가 목적이 아니라면 Swing2App을 이용하는 것도 나쁘지 않은 것 같습니다.
우선 최신 버전의 안드로이드 스튜디오를 설치해서 실행해 주세요.
프로젝트 세팅
프로젝트를 새로 만들어서 Empty Activity로 선택해서 진행합니다.
안드로이드 개발에서 가장 많이 선택하는 코틀린 언어로 설정하고 지원되는 Android 버전을 선택합니다.
저는 기본 세팅으로 두고 넘어갔습니다.
웹뷰 만들기
이제 프로젝트가 생성 됐을 겁니다. 웹뷰를 만들기 위해서 아래 3개의 파일만을 수정합니다.
activity_main.xml
우선 activity_main.xml를 엽니다.
왼쪽 하단에 TextView "Hello World"가 존재하는데 선택해서 지워주시고 왼쪽 상단에 webview를 검색하시고 엔터를 두 번 입력해 주세요.
그리고 우측을 보면 아래 사진과 같이 영역에 대한 사이즈를 설정하는 곳이 나오는데 id는 webView로 만들고 영역 지정을 다 0으로 맞춰주세요.
AndroidManifest.xml
AndroidManifest.xml 파일을 열어 기본 세팅을 제외하고 빨간 박스 표시된 영역을 아래와 같이 추가 및 수정해 주세요.
MainActivity.kt
아래와 같이 웹뷰 기본 코드를 작성합니다. 스크립트는 하단에 첨부되어 있으니 복사해서 사용하세요.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val myWebView: WebView = findViewById(R.id.webView)
myWebView.settings.run {
// 웹뷰 자바스크립트 허용
javaScriptEnabled = true
javaScriptCanOpenWindowsAutomatically = true
setSupportMultipleWindows(true)
}
myWebView.webViewClient = WebViewClient()
myWebView.webChromeClient = WebChromeClient()
myWebView.loadUrl("https://www.google.com")
}
override fun onBackPressed() { // 뒤로가기 기능 구현
val myWebView: WebView = findViewById(R.id.webView)
if(myWebView.canGoBack()){
myWebView.goBack()
}else{
super.onBackPressed()
}
}
완성 화면 디버깅 및 APK 추출
이제 완성 됐습니다. 디버깅을 하기 위해선 우측 위에 특정 Device를 설치해서 실행하면 됩니다.
실제 APK 파일을 받아보고 싶다면 Build > Build Bundle / APK > Build APK를 하면 APK가 생성됩니다.
실제 앱 배포를 위해선 Build > Genereate Signed Bundle / APK 를 눌러 주신 후 APK를 선택합니다.
아래의 사진에 create new 버튼을 누른 후 키 파일이 저장될 경로를 지정합니다.
Password는 총 4곳에 적을 수 있는데 다 똑같이 지정해 주세요.
Alias와 First and Last Name을 원하는 것으로 임의로 설정합니다.
마지막으로 추후에 또 배포할 수 있기 때문에 Remember passwords 누르고 release를 선택해서 APK 파일을 추출합니다.
조금 기다리면 우측 하단에 APK 파일이 생성됐다고 알림이 뜨며 locate를 눌러서 실제 APK 파일을 확인할 수 있습니다.
'🗂️ Etc' 카테고리의 다른 글
ChatGPT로 공룡 그려 달라고 하기 (0) | 2023.01.10 |
---|---|
안드로이드 웹뷰 카카오 공유하기 기능 멈춤 현상 (0) | 2023.01.08 |
이모지(Emoji) 단축키 및 MySQL과 Javascript에서 사용하기 (0) | 2022.12.17 |
Hosts 파일 경로, 형식, 원리 (0) | 2022.12.14 |
Netty 아키텍처 기초 소개 및 사용법 (0) | 2022.12.01 |