si0

광고를 게재하고 수익을 창출하려면 먼저 Google 모바일 광고 SDK를 Flutter 앱에 통합해야 합니다. SDK를 통합하면 지원되는 광고 형식을 하나 이상 구현할 수 있습니다.

기본 요건

• Flutter 3.27.0 이상
• Android
  • Android 스튜디오 최신 버전
• iOS
  • 활성화된 명령줄 도구가 포함된 최신 버전의 Xcode

모바일 광고 SDK 가져오기

• Flutter 프로젝트에 Flutter 플러그인용 Google 모바일 광고 SDK를 포함합니다.

플랫폼별 설정

중요: 모든 개인 정보 보호 규정 준수 기능에 액세스하려면 최신 Google 모바일 광고 SDK를 사용하세요.

AndroidManifest.xml 업데이트

AndroidManifest.xml에 AdMob 앱 ID가 포함되어야 합니다. 그렇지 않으면 앱이 시작될 때 비정상 종료됩니다.

com.google.android.gms.ads.APPLICATION_ID라는 이름으로 <meta-data> 태그를 추가하여 AdMob 웹 인터페이스에서 확인된 AdMob 앱 ID를 앱의 android/app/src/main/AndroidManifest.xml 파일에 추가합니다. android:value의 경우 다음과 같이 따옴표로 묶은 앱 ID를 삽입합니다.

<manifest>
    <application>
        <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    <application>
<manifest>

Dart 코드에서 플러그인을 초기화할 때는 동일한 value를 사용합니다.

AndroidManifest.xml 구성 및 앱 ID 설정에 관한 자세한 내용은 Android 가이드를 참고하세요.

모바일 광고 SDK 초기화

광고를 로드하기 전에 앱에서 MobileAds.instance.initialize()를 호출하여 모바일 광고 SDK를 초기화합니다. 이렇게 하면 SDK가 초기화되고 초기화가 완료되면(또는 30초의 제한 시간이 경과한 후에) 완료되는 Future를 반환합니다. 이 작업은 한 번만 처리하면 되며, 가장 좋은 시점은 앱을 실행하기 직전입니다.

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

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

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // Load ads.
  }
}

iOS

Info.plist 업데이트

앱의 ios/Runner/Info.plist 파일에 AdMob 웹 인터페이스에서 식별한 AdMob 앱 ID의 문자열 값이 포함된 GADApplicationIdentifier 키를 추가합니다.

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>

Dart 코드에서 플러그인을 초기화할 때는 동일한 값을 전달해야 합니다.

Info.plist 구성 및 앱 ID 설정에 관한 자세한 내용은 iOS 가이드를 참고하세요.

1.1. figma.com에 접속해서 로그인 후 왼쪽 상당의 프로필 아이콘 클릭해서 셋팅 메뉴 선택

git 주소

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

git clone https://github.com/GLips/Figma-Context-MCP.git

 클론으로 프로젝트를 복사하셔도 되고 해당 github 들어가서 소스 다운로드 받아도 됩니다.

 받은 폴더를 프로젝트 열기 또는 폴더 열기로 커서ai로 열고 터미널 창에서 아래와 같이 입력합니다.

1. Cursor에 Bun 설치하기
curl -fsSL https://bun.sh/install | bash

2. 설치를 실행해서 커서의 활성 프로젝트에도 MCP 설치
bun setup

3. Websocket 서버를 시작
bun socket

4. MCP server
bunx cursor-talk-to-figma-mcp

 3번에서 소켓 활성화 하고 포트 확인해서 figma plugin에 연결 포트 확인하고 연결해줌

그런데 제가 알기로는 node.js가 설치가 되어 있다면 cursor에 MCP json 등록하면 자동 설치로 알고 있습니다. 위에서 작업을 하면 mcp 설정이 자동으로 입력되도록 되어 있으니 아래 내용은 작업하지 마시고 참고만 하세요.

// Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

 뭔가 설명이 없어서 맥기준으로 홈 폴더가 "~/" 이므로 "~/.cursor"폴더로 들어가서 파일을 조회해 보았습니다. mcp 설정을 한적이 없어서 파일이 없는 것 같습니다. 

일단 파일 생성 후 mcp  확장해도 되겠지만 파일을 읽어야 하는지 커서가 알아야 할 것 같아서 설정들어가서 mcp검색하여 mcp 설정보기를 했습니다. 

"cmd+p" => "> mcp"

  ※ 피그마와 통신하기 위해서는 MCP 서버 관련 소켓 활성화와 해당 포트 정보가 필요합니다. 위에서 소켓 구동하는 내용이 필요합니다. 그리고 cursor ai에서 피그마 cursor-talk-to-figma-mcp 프러그 인 정보로 mcp 설정을 하니 요금제를 사용하라고 안내가 연결되네요. 일단 무료로 가능한지 무시하고 진행해보겠습니다.

sdk 를 못 찾는다는 메시지가 나와서 찾아 해메이다가 mcp 프레임워크를 일단 설치 해봤습니다. 그런데 결국 확인 결과 전에 작업 했던 자료중에 보안 이슈가 있어서 라이브러리가 삭제되었는데 참조하는 불상사가 발생해서 찾아서 설치/삭제를 반복했습니다.

 삭제 후 캐시 지우고 재부팅하니까 잘 못된 정보를 찾지 않았습니다. 

( 문제 라이브러리 cursor-mcp 에서 modelcontextprotocol/typescript-sdk 를 참조하는데 modelcontextprotocol/sdk를 참조해야 했음. cursor-mcp 모듈 라이브러리를 모두 삭제하고 캐시 지우고 재부팅했습니다. )

// npm install @modelcontextprotocol/sdk
// npm install -D typescript @types/node
bun add @modelcontextprotocol/sdk

Google Play에 앱을 번들(.aab)로 올리면 Google이 자체 서명 키로 앱을 서명합니다.

Step 1. Google Play 서명 키 SHA-1 확인

1. Play Console 접속
2. 앱 선택
3. 왼쪽 메뉴: 릴리스 > 앱 무결성(App integrity) 클릭
4. 앱 서명 키 인증서의 SHA-1 복사

Step 2. Cloud Console에 SHA-1 등록

1. Google Cloud Console 접속
2. 좌측 메뉴: 사용자 인증 정보
3. Android용 OAuth 2.0 클라이언트 ID 클릭
4. SHA-1 인증서 지문 필드에 복사한 SHA-1 붙여넣기
5. 저장

참고: 이미 SHA-1이 있으면 두 개 이상 추가 가능 (로컬 + Play용 둘 다)

로컬 시뮬레이터와 빌드 버전용

keytool -list -v  -keystore ~/.android/debug.keystore  -alias androiddebugkey \
  -storepass android  -keypass android

keytool -genkey -v -keystore ~/.android/your_keystore_name.jks -keyalg RSA \

  -keysize 2048 -validity 10000 -alias your_key_alias

구글 클라우드 콘솔에 안드로이드 클라이언트 ID를 등록하고 json 파일을 다운받아서 flutter 프로젝트 아래폴더에 넣으면 됩니다.

android/app/ client_secret.......apps.googleusercontent.com.json

 전체적인 작업 순서는 아래와 같이 진행하였습니다. 혹시나 바이브 코딩으로 Flutter 프로그램 만드시는 분들이 있다면 참고가 되었으면 하는 생각에 적어 봅니다.

1. 플루터 프로젝트 생성

2. AI LLM 3대장에 프로그램 개발 요건 문의 - ex) OOO 프로그램을 Flutter로 만들려고 하는데 필요한 요건들을 알려줘.

3. AI LLM 3대장에 프로그램 개발 요건 취합하여 선별한 내용으로 주요 기능 개발 일정 작성 요청

4. 주요 기능 개발 일정 취합하여 프로젝트 구조 작성 요청 ( 참고해서 폴더 구조를 잡는데 개인적으로 CursorAi 로 기본 구조 잡았음 )

5. 주요 기능 개발 요건 순으로 프로그램 코딩 요청

6. 테스트 및 버그 수정 

7. 구조 잡고 git에 올리고 기능별 피쳐 브랜치로 반영 후 AI가 엉뚱하게 버그 만들면 롤백하고 재요청

다시 한다면 2~3번은 n8n이나 make를 통해서 자동화하는 것이 좋을 것 같습니다. 

그렇게 해서 lib 폴더에 코딩하고 google cloude console에서 프로젝트 생성하고 api 사용을 위해 인증정보 만들고 api 사용등록하고 테스트 계정 등록해서 clientId 등록하고 json 파일 받아서 안드로이드 앱 폴더에 넣어주고 ios 쪽에도 별도로 등록해 주고, 이것 저것 많이 해줘야 했네요.

 결국 vibe 코딩도 요즘 AI사용법에 필요한 다각도로 시도하는 능력을 요구합니다. 

 한번에 안되면 안되는 원인을 찾아서 원인의 해결방법을 질문하는 능력이 요구되네요.