웹뷰 앱 개발 가이드

Android Studio에서 WebView를 활용한 하이브리드 앱 개발

웹페이지를 Android 앱으로 변환하는 방법. WebView 컴포넌트를 활용해 기존 웹사이트를 네이티브 앱처럼 배포할 수 있습니다.

1 WebView 란

WebView 는 Android 에서 웹 콘텐츠(HTML/CSS/JS) 를 표시하는 UI 컴포넌트.

하이브리드 앱

웹 + 네이티브 결합

웹 기술 활용

HTML, CSS, JavaScript

유지보수 용이

웹만 수정하면 앱도 반영

저비용

개발·배포 비용 절감

2 기본 WebView 구현 (Kotlin)

// AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<application android:usesCleartextTraffic="true" ... />

// activity_main.xml
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// MainActivity.kt
class MainActivity : AppCompatActivity() {
    private lateinit var webView: WebView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        webView = findViewById(R.id.webview)
        webView.settings.javaScriptEnabled = true
        webView.settings.domStorageEnabled = true
        webView.webViewClient = WebViewClient()
        webView.loadUrl("https://program1472.com/")
    }
    override fun onBackPressed() {
        if (webView.canGoBack()) webView.goBack() else super.onBackPressed()
    }
}

3 JS ↔ Kotlin 통신

// Kotlin
class WebAppInterface(private val context: Context) {
    @JavascriptInterface
    fun showToast(msg: String) {
        Toast.makeText(context, msg, Toast.LENGTH_SHORT).show()
    }
}
webView.addJavascriptInterface(WebAppInterface(this), "AndroidApp")

// 웹에서 호출
<button onclick="AndroidApp.showToast('Hello')">알림</button>

주의

• usesCleartextTraffic 는 HTTP 통신용. 운영은 HTTPS 권장

• javaScriptEnabled 활성화 시 XSS 주의

• 업로드/파일 선택은 WebChromeClient 추가 구현 필요