Flutter를 이용해 웹뷰 앱을 빠르게 개발하고 플레이스토어에 등록하는 방법

0

모바일 웹사이트를 이미 운영 중이지만 네이티브 앱으로 확장하고 싶은 경우, Flutter와 웹뷰(WebView)를 사용하면 빠르고 효율적으로 앱을 개발할 수 있습니다. 이 글에서는 모바일 웹사이트를 Flutter 앱으로 전환하고 플레이스토어에 등록하는 방법을 단계별로 설명하겠습니다. 또한, 애드센스와 애드몹의 차이점에 대해서도 알아보며 웹뷰 앱에서 광고 수익을 창출할 수 있는 방법도 함께 살펴보겠습니다.

1. 개발 환경 설정

플러터 설치

Flutter 공식 사이트에서 운영 체제에 맞는 설치 가이드를 참고하여 플러터를 설치합니다.

안드로이드 스튜디오 설치

안드로이드 스튜디오를 설치하고, 플러터 플러그인과 Dart 플러그인을 추가합니다.

2. 새 플러터 프로젝트 생성

안드로이드 스튜디오에서 새로운 플러터 프로젝트를 생성합니다.

  • 안드로이드 스튜디오를 열고, `File > New > New Flutter Project`를 선택합니다.
  • `Flutter Application`을 선택하고, 프로젝트 이름과 저장 경로를 지정합니다.

3. 웹뷰 플러그인 추가

플러터 프로젝트에 웹뷰 기능을 추가하기 위해 `webview_flutter` 플러그인을 사용합니다.

우선 `pubspec.yaml` 파일을 열고, dependencies 섹션에 `webview_flutter`를 추가합니다:

dependencies:
      flutter:
        sdk: flutter
      webview_flutter: ^4.0.0  # 최신 버전을 확인하여 추가하세요

다음으로 변경 사항을 저장하고 `flutter pub get` 명령어를 실행하여 플러그인을 설치합니다.

4. 웹뷰 설정

`lib/main.dart` 파일을 열고, 웹뷰를 설정합니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  @override
  void initState() {
    super.initState();
    // For Android, use Hybrid Composition.
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Web App'),
      ),
      body: WebView(
        initialUrl: 'https://your-mobile-website.com', // 여기에 웹사이트 URL을 입력합니다.
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

5. 안드로이드 설정

`android/app/src/main/AndroidManifest.xml` 파일을 열고, 인터넷 권한을 추가합니다.

<uses-permission android:name="android.permission.INTERNET"/>

6. 빌드 및 테스트

안드로이드 스튜디오에서 `Run > Run ‘main.dart’`를 선택하여 앱을 에뮬레이터 또는 실제 디바이스에서 테스트합니다.

7. 플레이스토어에 앱 등록

앱이 정상적으로 작동한다면, 다음 단계는 앱을 플레이스토어에 등록하는 것입니다.

앱 아이콘 설정

`android/app/src/main/res` 디렉터리에 있는 아이콘 파일을 적절한 아이콘으로 교체합니다.

앱 서명

앱을 플레이스토어에 등록하기 위해 서명해야 합니다. 공식 가이드를 참고하여 키스토어 파일을 생성하고 서명 설정을 합니다.

앱 빌드

`flutter build apk –release` 명령어를 사용하여 릴리즈 APK 파일을 생성합니다.

플이스토어 등록

Google Play Console에서 새로운 애플리케이션을 생성하고, APK 파일을 업로드합니다. 앱 정보를 입력하고, 검토 후에 앱을 출시합니다.

8. 앱 업데이트 하기

앱의 업데이트 과정도 간단합니다. 기존 플러터 프로젝트를 업데이트하고, 새로운 APK 파일을 생성한 후 플레이스토어에 업로드하면 됩니다.

코드 변경 및 업데이트

앱의 코드에 필요한 변경 사항을 적용합니다.

버전 번호 업데이트

`android/app/build.gradle` 파일에서 `versionCode`와 `versionName`을 변경합니다.

android {
    ...
    defaultConfig {
        ...
        versionCode 2 // 이전 버전보다 큰 숫자로 변경
        versionName "1.1" // 새로운 버전 이름
    }
    ...
}

릴리즈 APK 빌드

flutter build apk --release

플레이스토어에 업데이트된 APK 업로드

Google Play Console에 로그인하여 새로운 버전을 업로드하고, 검토 및 출시를 진행합니다.

9. 웹뷰 앱에서 애드센스와 애드몹

기존 모바일 웹에 애드센스가 적용되어 있다면, 웹뷰 앱에서도 동일하게 애드센스가 노출될 가능성이 있지만, 구글의 애드센스 정책을 반드시 확인해야 합니다. 애드센스는 웹뷰 앱에서의 사용을 제한할 수 있습니다. 대안으로 AdMob을 사용하여 광고 수익을 창출할 수 있습니다.

AdMob 통합 방법

1. AdMob 계정 생성 및 앱 등록

Google AdMob에 가입하고, 앱을 등록합니다.

2. 광고 단위 생성

배너, 전면 광고 등의 광고 단위를 생성합니다.

3. 플러그인 설치

플러터 프로젝트에 `google_mobile_ads` 플러그인을 추가합니다.

dependencies:
  google_mobile_ads: ^2.0.0
4. 광고 초기화 및 표시
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  BannerAd? _bannerAd;

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: 'ca-app-pub-3940256099942544/6300978111', // 테스트 광고 단위 ID
      size: AdSize.banner,
      request: AdRequest(),
      listener: BannerAdListener(),
    )..load();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AdMob Example'),
      ),
      body: Center(
        child: _bannerAd == null
            ? Text('Loading Ad...')
            : Container(
                alignment: Alignment.center,
                child: AdWidget(ad: _bannerAd!),
                width: _bannerAd!.size.width.toDouble(),
                height: _bannerAd!.size.height.toDouble(),
              ),
      ),
    );
  }
}

애드센스와 애드몹의 차이점

애드센스(AdSense)는 웹사이트 소유자를 대상으로 하며, 애드몹(AdMob)은 모바일 앱 개발자를 대상으로 합니다. 둘 다 구글의 광고 플랫폼이지만, 대상 플랫폼과 광고 형식, 통합 방법이 다릅니다.

  • 애드센스: 웹사이트와 블로그에 광고를 게재. 주로 텍스트, 이미지, 비디오 광고.
  • 애드몹: 모바일 앱에 광고를 게재. 배너, 전면 광고, 네이티브 광고, 보상형 비디오 광고 등.

애드센스를 웹뷰 앱에서 사용하려면 구글 정책을 준수해야 하며, AdMob을 사용하는 것이 더 적합할 수 있습니다.

결론

이 가이드를 따라 플러터를 이용해 웹뷰 앱을 빠르게 개발하고, 플레이스토어에 등록하는 방법을 익힐 수 있습니다. 또한, 광고 수익화를 위해 애드센스와 애드몹을 사용하는 방법을 이해하면 앱의 수익을 극대화할 수 있습니다. 이를 통해 웹사이트 운영자는 손쉽게 모바일 앱으로 확장하여 더 많은 사용자에게 다가갈 수 있습니다.

답글 남기기