[ 노코드 앱 만들기 ] 2. bubble 로 수익화 앱 만들기.

Bubble로 수익화 앱 만들기: 환율 확인 앱 개발 가이드

최근 노코드(No-Code) 플랫폼이 각광받고 있습니다. 그중에서도 Bubble은 간단한 드래그 앤 드롭 방식으로 웹앱을 개발할 수 있어 인기가 많습니다. 오늘은 Bubble을 활용하여 환율을 실시간으로 확인하는 앱을 만들고, 이를 수익화하는 방법까지 알아보겠습니다.

---

반응형

1. Bubble을 활용한 환율 확인 앱 개요

이 앱은 사용자가 원하는 통화의 환율을 실시간으로 조회할 수 있도록 설계됩니다. 환율 정보를 제공하는 API를 연동하고, 간단한 UI를 만들어 데이터를 출력하는 방식으로 구현됩니다.

🔹 주요 기능

✅ 특정 국가의 환율 조회
✅ 실시간 API 연동
✅ 사용자 친화적인 UI/UX 디자인
✅ 광고 및 프리미엄 서비스로 수익화

---

2. Bubble에서 프로젝트 생성하기

1️⃣ Bubble 계정 만들기 및 새 프로젝트 시작

1. Bubble 공식 웹사이트에 접속합니다.
2. 무료 계정을 생성한 후, 새로운 애플리케이션(New App) 을 만듭니다.
3. 앱 이름을 정하고 템플릿을 선택합니다. (빈 프로젝트 추천)

이제 기본적인 앱 개발 환경이 설정되었습니다.

---

3. UI 디자인 – 환율 조회 화면 만들기

2️⃣ 페이지 레이아웃 구성

1. Bubble의 디자인 탭으로 이동합니다.
2. Text, Input, Dropdown, Button 등의 요소를 추가하여 화면을 구성합니다.

💡 추천 UI 구성

• Dropdown: 통화 선택 (예: USD, EUR, JPY 등)
• Button: "환율 조회" 버튼
• Text: API에서 받아온 환율을 표시할 공간

---

4. API 연동 – 실시간 환율 데이터 가져오기

3️⃣ 환율 API 등록하기

환율 정보를 제공하는 API를 활용해야 합니다. 가장 많이 사용되는 API는 다음과 같습니다.

🔹 ExchangeRate-API – 무료 요금제가 제공됨
🔹 Open Exchange Rates – 다양한 통화 지원
🔹 Currency Layer – 정확한 환율 제공

1. 위 사이트에서 무료 계정을 만든 후, API 키를 발급받습니다.
2. Bubble의 Plugins 탭에서 API Connector 플러그인을 설치합니다.
3. 다음과 같이 API 요청을 설정합니다.

🔹 API 설정 예시 (ExchangeRate-API 기준)

• API Name: ExchangeRate
• API URL: https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/USD
• Method: GET
• Header: 없음

1. Initialize API Call을 클릭하여 API 응답을 확인합니다.

---

5. API 데이터를 화면에 표시하기

4️⃣ API 데이터를 연결하는 방법

1. Dropdown을 클릭하고 옵션을 API 데이터에서 가져오기로 설정합니다.
2. Button 클릭 시, API 요청을 실행하도록 **Workflow(워크플로우)**를 설정합니다.
3. Text 요소에 API 응답에서 가져온 환율 데이터를 표시합니다.

💡 Workflow 설정 방법

• "환율 조회" 버튼 클릭 → API 요청 실행 → 결과값을 Text에 표시

이제 실시간 환율 정보를 조회할 수 있는 기능이 완성되었습니다.

---

6. Bubble 앱 수익화 방법

환율 조회 앱은 다음과 같은 방법으로 수익화할 수 있습니다.

1️⃣ 구글 애드센스 광고 삽입

Bubble에서는 HTML 요소를 사용하여 광고 코드를 삽입할 수 있습니다.

💡 광고 코드 삽입 방법

1. Bubble의 Design 탭에서 HTML 요소 추가
2. 아래 구글 애드센스 코드 삽입

     (adsbygoogle = window.adsbygoogle || []).push({});

---

2️⃣ 프리미엄 구독 모델 적용

• 기본 기능은 무료 제공, 프리미엄 사용자는 광고 제거 및 추가 기능 제공
• Bubble의 Stripe 플러그인을 활용하여 유료 결제 기능 추가

---

7. 마무리 및 배포

Bubble 앱 배포하기

1. Settings → Domain & Email에서 맞춤 도메인 설정
2. "Go Live" 버튼을 클릭하여 웹앱 배포

이제 사용자가 직접 웹에서 환율을 조회할 수 있습니다! 🎉

---

마치며

Bubble을 활용하면 프로그래밍 없이도 환율 조회 앱을 만들고 수익화할 수 있습니다. API 연동과 광고 배치만 잘 활용하면 간단한 기능의 앱도 충분히 수익을 낼 수 있습니다.