Android WebView 기반 Hybrid앱 개발 입문
📲 "Hello, World!" 출력하기
기존 웹 개발과 다른 점 및 느낀점
1. 파일 구조
- 웹 개발:
- 보통 HTML, CSS, JavaScript 파일로 구성.
- 간단한 프로젝트일 경우, 파일 몇 개로도 충분히 구현 가능.
- 구조 예시:
├── index.html ├── styles.css └── app.js
- Android 개발:
- 다양한 파일과 디렉터리가 포함되며, 각 파일은 역할이 명확히 구분됨.
- 예:
Activity는 화면의 로직 처리,XML파일은 UI 설계. - 구조 예시:
├── app/ │ ├── java/ │ │ └── com.example.myapp/ │ │ └── MainActivity.kt │ ├── res/ │ │ ├── layout/ │ │ │ └── activity_main.xml │ │ ├── values/ │ │ │ └── strings.xml │ └── AndroidManifest.xml
2. 실행 방법
- 웹 개발:
- 브라우저에서 HTML 파일을 열면 바로 실행 가능.
- 로컬 서버나 클라우드 서버에서 실행할 수도 있음.
- 빠른 실행이 장점.
- Android 개발:
- Android Studio에서 프로젝트를 빌드(build)한 후, 앱을 실행해야 함.
- 실행 전, 에뮬레이터 또는 실제 Android 기기를 설정해야 함.
- 빌드 과정이 추가되기 때문에 시간이 더 걸릴 수 있음.
3. 디버깅 방식
- 웹 개발:
- 브라우저의 개발자 도구(DevTools)를 통해 디버깅 가능.
- 콘솔, 네트워크, DOM 구조 등 다양한 정보를 즉시 확인 가능.
- 콘솔 사용 예:
console.log("디버깅 메시지");
- Android 개발:
- Android Studio에서 제공하는 Logcat을 통해 디버깅 가능.
- Logcat에서 로그를 확인하며 앱의 동작과 오류를 추적.
- 로그 출력 예:
Log.d("MainActivity", "앱 실행됨")
4. 느낀 점
- 웹 개발:
- 파일 구조가 단순하고, 빠르게 테스트할 수 있어서 편리함.
- 서버가 없더라도 브라우저만 있으면 실행 가능.
- Android 개발:
- 초기 설정과 실행 과정이 복잡하게 느껴질 수 있음.
- 하지만 앱 개발 도구와 디버깅 툴이 강력해서 익숙해지면 효율적.
📲 심화 과제: Req-4
웹기반 컨텐츠 정보 및 WebView에서 웹 앱 개발
-
웹기반 컨텐츠 정보
- WebView는 Android에서 웹 콘텐츠를 표시할 수 있는 뷰(View)입니다.
- 모바일 애플리케이션에서 네이티브 기능과 웹 기능을 결합하는 하이브리드 앱 개발에 주로 사용됩니다.
- 주요 특징:
- JavaScript를 실행할 수 있음.
- 웹 페이지를 로드하여 앱 내에서 표시 가능.
- HTML, CSS, JavaScript를 기반으로 동작.
-
WebView에서 웹 앱 개발
- WebView를 활용하면 웹 애플리케이션을 앱 내에서 직접 렌더링할 수 있습니다.
- WebView 설정 및 사용법:
- WebView 추가: XML 레이아웃에
<WebView>태그를 추가. - JavaScript 설정:
WebSettings를 사용해 JavaScript 실행을 활성화. - URL 로드:
webView.loadUrl("URL")을 호출해 웹 페이지 로드.
- WebView 추가: XML 레이아웃에
- 개발 시 주의사항:
- WebViewClient를 설정해 기본 브라우저로 전환하지 않도록 처리.
- 보안 설정 확인 (예: JavaScript 활성화 시 주의).
참고 자료
📲 Req-6: WebView 학습 및 구현
1. WebView란?
- WebView는 앱 안에서 HTML, CSS, JavaScript 같은 웹 콘텐츠를 렌더링할 수 있는 도구임.
- 웹과 네이티브 앱의 장점을 섞어서 하이브리드 앱 개발에 활용할 수 있음.
2. WebView 주요 설정
- JavaScript 활성화
- 일부 웹 페이지가 JavaScript를 필요로 하기 때문에 활성화해야 제대로 동작함.
- WebViewClient 설정
- WebView의 기본 설정은 외부 브라우저로 이동함. 이를 방지하려면 WebViewClient를 설정해서 WebView 내부에서 페이지가 열리도록 해야 함.
- 캐시 비활성화
- 캐시로 인해 발생할 수 있는 오류를 방지하기 위해 캐시를 끄는 것도 필요함.
3. 구현 과정
3-1. XML 레이아웃 설정
- WebView를 레이아웃에 추가했음.
res/layout/activity_main.xml파일에 아래처럼 작성함.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>3-2. WebView 설정 및 URL 로드
- WebView를 Kotlin 코드에서 설정함.
MainActivity.kt파일에 다음 코드를 작성함.
package com.example.webviewapp
import android.os.Bundle
import android.webkit.WebSettings
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)
// WebView 초기화
val webView = findViewById<WebView>(R.id.webview)
// WebView 설정
webView.webViewClient = WebViewClient() // 외부 브라우저가 아닌 WebView에서 열리도록 설정
webView.settings.javaScriptEnabled = true // JavaScript 활성화
webView.settings.cacheMode = WebSettings.LOAD_NO_CACHE // 캐시 비활성화
// ChatGPT URL 로드
webView.loadUrl("https://chat.openai.com/chat") // 명세서에 명시된 URL
}
}
3-3. AndroidManifest에 인터넷 권한 추가
- WebView가 인터넷에 접근하려면 권한 설정이 필요함.
AndroidManifest.xml파일에 아래 코드를 추가했음.
<uses-permission android:name="android.permission.INTERNET" />4. 결과
- 위 코드를 실행한 결과, WebView를 통해 "https://chat.openai.com/chat" 페이지가 앱 내부에서 정상적으로 열림.
- ChatGPT URL 같은 다른 URL도 동일하게 적용 가능함.
5. 느낀 점
- WebView를 통해 간단히 하이브리드 앱을 만들 수 있다는 점이 흥미로웠음.
- 공식 문서를 참고하며 학습하는 과정에서 Android 개발에 익숙해질 수 있었음.
- 인터넷 권한이나 WebView 설정이 중요하다는 점을 배울 수 있었음.
Developer's Logbook