실무에서 가장 많이 사용하는 방법 - React 앱을 외부 서버에 배포하고 WebView에서 URL로 로드 방식

 

✅ 실무에서 "방법 1"을 많이 사용하는 이유

이유 설명

🔁 React 코드 변경 시 업데이트가 쉬움	앱을 다시 빌드하지 않고도 웹 서버에서 코드만 수정하면 됩니다.
🌐 웹 개발팀과 앱 개발팀 분리	React는 프론트엔드 팀이, Android는 앱 팀이 따로 개발 가능
📦 앱 크기 최소화	React 빌드 파일을 포함하지 않아서 APK 용량이 작아집니다.
🚀 CD/CI 환경에 유리	배포 자동화가 쉽고 빠릅니다.

---

✅ 방법 1 요약

항목 설명

React 앱 위치	Netlify, Vercel, AWS, 사내 서버 등
WebView URL 예시	loadUrl("https://web.yourcompany.com/react-page")
실무 사용도	⭐⭐⭐⭐⭐ 매우 많이 사용

---

✅ 방법 2는 언제 쓰나?

👉 "React 웹을 앱 안에 내장하고 싶을 때", 즉 오프라인에서도 무조건 작동해야 할 때입니다.

예시

공공기관 앱처럼 인터넷 없이 일부 콘텐츠를 보여줘야 할 때

전시회/교육용 앱처럼 설치 후 업데이트가 불가능한 경우

전파가 약한 지역에서도 앱이 작동해야 하는 경우

---

✅ 방법 2의 장단점

장점 단점

📡 오프라인 가능	🔁 React 코드 바꿀 때마다 앱 다시 빌드 필요
📦 외부 서버 없이 단독 실행	⬆️ 앱 크기가 커짐 (리소스 포함됨)

---

🔚 정리: 어떤 방법을 써야 할까?

조건 추천 방법

인터넷 연결되는 일반 앱	✅ 방법 1: 외부 URL 로드 (가장 일반적이고 유지보수 쉬움)
오프라인에서도 작동해야 함	✅ 방법 2: React를 assets에 포함 (희귀하지만 필요한 경우 있음)

 

 

실무 코드 구조/CI 연동 예시도 정리

 

 

React 웹을 외부에 배포하고 WebView에서 로드하는 방식을 실무에서 실제 사용하는 형태로

✅ 코드 구조

✅ CI/CD 배포 흐름

✅ 실전 연동 팁

---

✅ 1. 실무에서 사용하는 기본 코드 구조

📁 Android (Jetpack Compose) 프로젝트

@Composable
fun MyWebViewScreen() {
    val context = LocalContext.current

    AndroidView(factory = { ctx ->
        WebView(ctx).apply {
            settings.javaScriptEnabled = true
            settings.domStorageEnabled = true
            addJavascriptInterface(MyBridge(context, this), "AndroidBridge")

            // 실무에서는 보통 회사 도메인에 배포된 React URL
            loadUrl("https://web.yourcompany.com/app/react-page")
        }
    })
}

📁 React 프로젝트 (src/App.js 예시)

function App() {
  const callAndroid = () => {
    if (window.AndroidBridge && window.AndroidBridge.openCamera) {
      window.AndroidBridge.openCamera();
    }
  };

  return (
    <div>
      <h2>React WebView 예시</h2>
      <button onClick={callAndroid}>📸 Android 카메라 호출</button>
    </div>
  );
}

✅ React는 yarn build로 빌드 후 웹서버에 업로드만 하면 끝
Android는 https://web.yourcompany.com/~~~ 주소를 WebView에 세팅해 두기만 하면 React UI가 실시간 반영됩니다.

---

✅ 2. CI/CD 연동 예시 (React + Android 분리 배포)

📦 React 배포: GitHub → Vercel or Netlify

✅ vercel.json (또는 Netlify 설정)

{
  "rewrites": [{ "source": "/app/react-page", "destination": "/" }]
}

• React 앱을 /app/react-page 경로에 서브배포 가능
• 빌드 후 자동으로 배포되므로 안드로이드 코드를 수정하지 않고도 웹 내용만 바꿀 수 있음

✅ GitHub Action 예시 (.github/workflows/deploy-react.yml)

name: Deploy React App to Vercel

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install
      - run: npm run build
      - uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

---

🤖 Android 앱은 WebView 주소만 고정

React 웹이 배포만 잘 되어 있다면, Android는 loadUrl()만 신경 쓰면 됩니다.

webView.loadUrl("https://web.yourcompany.com/app/react-page")

React 수정사항 반영 시 APK 재배포 필요 없음. (💯 실무 핵심 포인트)

---

✅ 실무에서 이 구조가 왜 인기인가?

장점 설명

🔁 빠른 유지보수	React 수정만 해도 모든 앱 사용자에게 반영됨
🔒 백엔드와 분리 개발	React 프론트 팀, Android 앱 팀 따로 작업 가능
📦 앱 용량 작음	리소스 내장하지 않음
🚀 CI/CD 자동화	PR 머지 → 자동 배포 → 앱은 URL만 유지하면 됨

---

✅ 실무 구성 예시 (구조 정리)

🧱 Frontend (React)
├─ 빌드 후 Vercel/Netlify 배포
├─ 주소: https://web.yourcompany.com/app/react-page

📱 Android (Jetpack Compose)
├─ WebView 로드: loadUrl("https://web.yourcompany.com/app/react-page")
├─ JS ↔ Android 통신: addJavascriptInterface()

---

🛡️ 보안 실무 팁

체크 항목 이유

✅ https 도메인만 허용	WebView는 보안 상 http는 막아야 함
✅ JS 인터페이스 접근 제한	민감 기능 호출 시 도메인 체크 또는 인증 토큰 필요
✅ WebViewClient 사용	리디렉션/에러/로딩 처리 필요 시 커스터마이징

webView.webViewClient = object : WebViewClient() {
    override fun onReceivedError(...) {
        // 에러 처리
    }
}

---

✅ 요약

구성 요소 실무 활용

React 앱	Vercel/Netlify 등으로 배포, 빌드 후 자동화 가능
Android 앱	WebView로 React 주소 로딩, JS ↔ Android 연동
장점	빠른 유지보수, 자동화 배포, 앱 용량 최소화
실무 사용도	⭐⭐⭐⭐⭐ 매우 높음

---

필요하시면:

• React와 Android를 연동하는 미니 템플릿 프로젝트
• Android ↔ React 양방향 통신 예제
• WebViewClient에 로그인 세션 쿠키 연동 방식