기본 콘텐츠로 건너뛰기

추천 가젯

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

모바일 청첩장 시리즈 1편 · 기획/스택/배포 리액트 + 비트(Vite)로 모바일 청첩장 만들기 — 1편 안녕하세요, 이번에 결혼 준비를 하면서 여자친구와 같이 모바일 청첩장 을 만들고 있어요. 여자친구가 디자인을 해서 전달해주면 제가 개발을 진행하고 있어요. 이 글은 구현기 1편 으로, 전체 흐름과 스택, 배포 구성까지 “부담 없이” 훑어봅니다. (코드는 여러 버전 테스트 중!) 이 글에서 보는 것 왜 SPA 모바일 청첩장인가? 기본 스택 & 폴더 구조 라우팅 선택: HashRouter가 편한 이유 Cloudflare Pages로 자동 배포 현재 진행 중인 UI 버전들(테스트 기록) 1) 왜 SPA 모바일 청첩장인가? 모바일 청첩장은 핵심이 명확해요. 가볍고 빠르고 끊김이 없어야 하고, 사진/지도/일정이 터치에 친화적 이어야 합니다. 그래서 React + Vite 로 싱글 페이지 앱(SPA)을 구성했고, 정적 호스팅(CDN)인 Cloudflare Pages 에 올려 GitHub 푸시 → 자동 배포 까지 한 번에 묶었습니다. UX 팁 · 이미지 WebP, loading="lazy" 기본 · 큰 터치 타깃 · BGM은 “사용자 탭 후” 재생(모바일 정책) 2) 기본 스택 & 폴더 구조 서버는 따로 두지 않았고, 정적 빌드 결과물( dist/ )만 올립니다. 현재 의존성은 아래와 같아요. package.json(요약) { "name": ...

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

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

안녕하세요! 퍼즐 앱 샘퍼즐구글 애드몹(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