기본 콘텐츠로 건너뛰기

추천 가젯

리액트 + 비트(Vite)로 모바일 청첩장 만들기 — 2편

모바일 청첩장 시리즈 2편 · R2 갤러리 & Firebase 방명록 Cloudflare R2 · Functions Firebase Firestore 클라우드플레어 R2로 갤러리 저장하고, Firebase로 방명록 달기 안녕하세요, 병민입니다 🙌 1편에서 전체 흐름을 잡았고, 이번엔 사진 업로드/보관 과 방명록 을 연결합니다. 서버는 따로 없고 Cloudflare Pages 를 쓰고 있으니, Pages Functions (= 워커)로 R2에 사전서명 URL을 만들어주고, 프론트에서 그 URL로 바로 업로드하는 구조예요. 방명록은 Firebase DB로 간단·안전하게! 전체 그림 프론트(React) → /api/r2/upload 로 업로드용 URL 요청 → R2에 파일 PUT 프론트(React) → /api/r2/list 로 목록 요청 → 갤러리 렌더 프론트(React) → Firebase SDK로 방명록 작성/조회 1) R2 버킷 & Pages Functions 준비 Cloudflare 대시보드 > R2 > Create bucket (예: wedding-gallery ) 버킷 > Settings > CORS 에서 사이트 도메인 허용(예: https://*.pages.dev , 커스텀 도메인) Pages 프로젝트 > Settings > Functions 에서 R2 바인딩 추가: ...

샘퍼즐에 애드몹 광고 연결하는 방법

샘퍼즐 앱에 구글 애드몹 광고 연결하는 방법 👾📱

안녕하세요! 퍼즐 앱 샘퍼즐구글 애드몹(AdMob) 광고를 연결하는 과정을 공유해요.
수익화는 하고 싶지만, 사용자 경험은 해치고 싶지 않아서 신중히 넣었어요. 단계별로 알아볼게요!

1. 애드몹 계정 만들기

  1. 애드몹 사이트에 로그인
  2. 앱 등록 → Android 플랫폼 선택
  3. 앱 이름 등록 후 앱 ID 생성 및 복사
애드몹 홈 화면

2. Android 프로젝트에 SDK 추가

  1. build.gradle(Project)에 Google 서비스 플러그인 추가
  2. build.gradle(Module)에 다음 코드 추가:
    implementation 'com.google.android.gms:play-services-ads:22.6.0'
  3. google-services.json 다운로드 후 app 폴더에 넣기

3. 광고 초기화 및 단위 설정

  1. 앱 시작 시 광고 초기화:
    MobileAds.initialize(this) { }
  2. 애드몹에서 광고 단위 ID 생성
  3. 배너 광고 추가 예시:
    
    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ads:adSize="BANNER"
        ads:adUnitId="ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx" />
          

4. 테스트 광고 확인

⚠️ 실제 광고 클릭은 금지! 테스트 광고로 확인해야 계정 정지 위험을 피할 수 있어요.
광고 예시 이미지

5. 플레이스토어 등록 전 체크

  • 광고 위치가 콘텐츠를 방해하지 않는지
  • 광고 ID 사용 동의 팝업 설정
  • 정책 위반 없이 광고 노출 설정

✅ 요약 정리

- 애드몹 계정 만들고 앱 등록
- Android 프로젝트에 SDK 추가
- 광고 단위 생성 + XML에 배너 추가
- 테스트 광고 확인 필수!
- 플레이스토어 등록 전 광고 정책 체크

샘퍼즐처럼 간단한 앱도 애드몹 연결로 수익을 낼 수 있어요.
과하지 않게, 사용자에게 거슬리지 않는 광고 경험을 주는 게 제일 중요하답니다! 😊

댓글

가장 많이 본 글

Icons by Flaticon