수익 창출 AI 앱 5가지

B풀스택 개발자가 되려면 일반적으로 수년간의 학습과 실무 경험이 필요했지만, 이제는 달라졌습니다.

AI 프로그래밍 어시스턴트가 대중화되기 전에는 개발자들에게 많은 것이 요구되었습니다. 프론트엔드 UI를 구축하고 백엔드 로직을 구현하려면 JavaScript 같은 프로그래밍 언어에 대한 깊은 이해와 웹 프레임워크에 대한 친숙함이 필수였죠. 여기에 데이터베이스, 스토리지 솔루션, 결제 시스템까지 구현하려면 더 많은 기술 지식이 필요했습니다.

시대가 바뀌었습니다. 30년 경력의 소프트웨어 엔지니어인 저는 더 이상 그 긴 학습 과정이 필요하지 않다는 것을 알게 되었습니다.

몇 달 전부터 이 글을 쓰고 싶었지만 이제야 시간이 났네요. 기술에 익숙하지 않거나 프로그래밍 경험이 부족해도 웹 애플리케이션을 만들고 싶다면 주목해 주세요. 수익을 창출하는 앱을 만드는 데 필요한 5가지 핵심 도구를 소개하고, 구축 과정을 단계별로 안내해 드리겠습니다.

제가 일반적으로 따르는 워크플로는 다음과 같습니다:

1. AI 도구인 Bolt, V0 또는 Lovable로 기본 애플리케이션을 구축합니다.

2. Supabase로 데이터베이스를 추가하고, 사용자 등록 및 인증을 통합합니다.

3. 웹 앱의 백엔드와 기능을 구현합니다.

4. Stripe으로 구독 또는 일회성 결제를 구현합니다.

5. Vercel에 배포하고 사용자 정의 도메인을 연결합니다.

이제 자세히 살펴보겠습니다.

1. 애플리케이션 구축하기

첫 단계는 애플리케이션의 기본 구조를 만드는 것입니다. 아직 백엔드나 데이터베이스는 없지만, 먼저 원하는 앱을 구상해 보세요. 예를 들어 이미지 생성기를 만들어 보겠습니다. 사용자 인터페이스 디자인에는 Bolt.new, Lovable.dev, V0.dev 같은 도구들이 유용합니다. 이번에는 Lovable로 데모를 진행해 보겠습니다.

웹사이트 디자인 용 AI 이미지 생성 :
랜딩 페이지:
현대 영웅 이미지 와 명확한 CTA를 포함.
서명-업/로그인 흐름(아직 백엔드 로직이 없는 없음).
대시보드:
헤더 와 로고  및 사용자 프로필 메뉴.
이미지 생성 섹션(프롬프트 입력, 생성 버튼, 이미지 플레이스홀더).
이미지 갤러리  이전에 생성한 이미지의 .
프로필 페이지:
사용자 정보(개인 정보, 이메일, 가입 일자, 크레딧, 생성된 이미지).
일반 요구 사항:
현대적이고 반응이 빠른 디자인.
플레이스홀더 용 동적  콘텐츠.
직관적인 탐색 및 부드러운 UX.
깔끔하고 잘주석 처리된 코드.
확장 가능한 유지보수가 가능한 프론트엔드 개발

앱을 만들기 위해 원샷 프롬프트를 사용할 때는 가능한 한 상세하게 설명을 작성하는 것이 가장 중요합니다.

이 예시에서는 앱에 필요한 모든 페이지를 먼저 나열하고, 그 뒤에 일반적인 요구 사항을 추가했습니다. 특히 랜딩 페이지에 대한 지침이 매우 상세한 것을 볼 수 있습니다.

"인증 로직과 백엔드를 아직 구현하지 마십시오"라는 구체적인 지시사항을 명시한 것이 매우 중요합니다. 이 지시사항이 없으면 AI가 다른 방식으로 구현하려 할 수 있기 때문입니다.

Lovable.dev에서 무료 계정을 만든 다음, 프롬프트 입력창에 위의 예시를 붙여넣고 엔터를 누르거나 제출 버튼을 클릭하세요.

생성된 앱의 스크린샷

이제 홈페이지, 로그인 페이지, 등록 페이지, 이미지 생성을 위한 기본 대시보드, 프로필 페이지 등 모든 요청된 페이지가 생성되었습니다.

다음으로 사용자 등록과 인증을 통합하겠습니다.

2. 데이터베이스 통합

이제 사용자 인증, 크레딧과 이미지 추적, 클라우드 이미지 저장을 구현해야 합니다. 이를 위해 Supabase라는 인기 있는 데이터베이스 플랫폼을 사용하겠습니다.

Lovable의 장점은 Supabase가 플랫폼에 깊이 통합되어 있다는 것입니다. 덕분에 사용자 등록과 인증을 처음부터 구현할 필요 없이 Supabase의 인증 기능을 바로 활용할 수 있습니다.

Supabase.com에서 계정을 만들고 조직을 설정하세요. 조직을 만들려면 프로젝트 탭으로 이동한 후 '새 조직' 버튼을 클릭합니다.

Supabase 조직 생성 화면

조직 설정이 완료되면 Lovable 프로젝트로 돌아가 우측 상단의 Supabase 버튼을 클릭하세요. 그런 다음 Supabase 계정을 연결하고 새 프로젝트를 생성합니다.

Lovable에서 Supabase 통합하기

Lovable로 돌아가서 확인해 보면 목록 하단에 방금 생성한 프로젝트가 표시됩니다. '연결' 버튼을 클릭하면 Lovable이 Supabase 프로젝트와의 연결을 시작합니다.

러블리에서 슈퍼베이스 통합

연결이 완료되면 "이제 앱이 Supabase에 연결되었습니다."라는 메시지가 표시됩니다. 이제 Supabase 메뉴에서 인증 탭을 열고 로그인/가입 메뉴를 찾습니다. '새 사용자의 가입 허용' 토글이 활성화되어 있는지 확인합니다.

Supabase에서 인증 설정 변경하기

인증 공급업체로 이동하여 '이메일 확인' 및 '보안 이메일 변경' 토글을 비활성화하세요. 이러한 기능이 보안을 위해 좋다는 것은 알고 있지만 이번에는 간단하게 하기 위해 이메일 확인을 비활성화하겠습니다.

Supabase에서 인증 설정 변경하기

계속하기 전에 변경 사항을 저장하세요.

Google 계정을 통한 로그인도 편리한 인증 방식이지만, 설정이 복잡하므로 이번에는 사용하지 않겠습니다.

이제 Lovable로 돌아가서 사용자 등록과 인증 기능을 구현해 보겠습니다.

Prompt: 사용자 등록 및 인증을 구현합니다.

Lovable이 데이터베이스를 생성하고 가입, 로그인, 로그아웃 기능을 추가하는 과정을 살펴보세요. Lovable은 데이터베이스 변경 시 매우 신중하게 작업합니다. SQL 명령을 실행하기 전에 권한을 요청할 것이며, 내용을 검토한 후 문제가 없다면 '변경 사항 적용' 버튼을 클릭하세요.

러블리에서 사용자 등록 구현하기

DB에 변경 사항을 적용하는 데 잠시 시간이 걸립니다. 완료되면 사용자 테이블이 생성되었는지 Supabase에서 확인합니다. 테이블 편집기 페이지에서 테이블이 생성되었는지 확인할 수 있습니다. 아래 예시에서는 Lovable이 두 개의 테이블을 생성한 것을 볼 수 있습니다: 프로필과 이미지입니다.

슈퍼베이스 사용자용 표 편집기

이메일 주소를 사용하여 가입을 시도했는데 프로필 테이블에 새 항목이 추가된 것을 볼 수 있습니다. 이러한 값은 수동으로 업데이트할 수 있으므로 값을 삭제하거나 수정할 때 주의하세요.

좋아요. 이제 이미지 생성 기능을 진행할 수 있습니다.

애플리케이션 백엔드 구현

이미지 생성기를 예로 든 이유는 Replicate 또는 Fal과 같은 최고의 AI API 제공업체를 어떻게 활용할 수 있는지 보여드리고 싶었기 때문입니다.

예를 들어, Black Forest Labs는 Flux 이미지 모델을 만든 회사이며, Flux를 앱에 통합하는 가장좋은 방법 중 하나는 Replicate API를 사용하는 것입니다. 그러려면 replicate.com으로 이동하여 백 포레스트 랩스 공간을 찾습니다. 빠르고 저렴하기 때문에 Flux Schnell 모델을 예로 선택해 보겠습니다.

API 탭에서 샘플 코드를 복사하고 이를 사용하여 이미지 생성 기능을 구현해 보겠습니다. 프롬프트에 설명이 있어야 합니다. 이미지를 데이터베이스에 저장하고 이미지 미리 보기 섹션에 표시하는 지침을 포함하세요.

Replicate 웹사이트의 Flux Schnell 모델

import 복제 from "replicate";
const replicate = new Replicate();

const input = {
 prompt: "\"플럭스 슈넬\", 맛있는, 음식 사진, 다이나믹 샷이라는 단어가 적힌 검은 숲 가토 케이크"
};

const output = await replicate.run("black-forest-labs/flux-schnell", { input });

import { writeFile } from "node:fs/promises";
for (const [index, item] of Object).entries(output)) {
 await writeFile(`output_${index}.webp`, item);
}
//> 출력_0.webp 디스크에 기록

이제 이 API 엔드포인트를 사용하여 Lovable에 대한 프롬프트를 작성합니다.

프롬프트: Replicate의 API for Flux Schnell를 사용하여 이미지 생성기를 구현할 수 있습니다. <생성된 이미지를 화면에 표시하고 데이터베이스에도 저장합니다.   ============= PROMPT START ============= IMPORT Replicate from "replicate";
이미지를 생성할 때마다 사용자의 크레딧 을 반드시 줄이세요.

const replicate = new Replicate();

const 입력 = {
 prompt: "\"플럭스 슈넬\", 맛있는, 음식 사진, 다이나믹 샷이라는 단어가 적힌 검은 숲 가토 케이크"
};

const output = await replicate.run("black-forest-labs/flux-schnell", { input });

import { writeFile } from "node:fs/promises";
for (const [index, item] of Object).entries(output)) {
 await writeFile(`output_${index}.webp`, item);
}
//=> output_0.웹p를 디스크에 기록

============= PROMPT END

중요: 프롬프트 섹션에 API 키를 붙여넣지 마세요. 이 변수는 매우 비공개입니다. 러블리에서 요청할 때까지 기다립니다. 백엔드가 완료되면 대시보드 페이지에서 이미지를 생성해 볼 수 있습니다.

러블리 웹 앱에서 이미지 생성 샘플

러버블은 오류가 있는 경우 '수정 시도' 버튼과 함께 오류 로그를 표시합니다. 해당 버튼을 클릭하고 AI가 수정할 때까지 기다리면 됩니다.

보시다시피 이미지가 성공적으로 생성되어 화면에 표시됩니다. 파일이 저장소 컨테이너와 데이터베이스에 저장되었는지 확인하려면 Supabase의 저장소 섹션에서 콘텐츠를 찾습니다. 이미지 파일이 있을 것입니다.

슈퍼베이스에 저장된 이미지 목록

Lovable이 감지한 모든 오류는 제안 사항을 따라 신속하게 해결할 수 있습니다. 이제 결제 시스템에서 작업할 차례입니다.

스트라이프 통합

앱에서 수익을 창출하려면 Stripe 결제를 통합하세요.

Stripe 웹사이트로 이동하여 계정으로 로그인합니다. 이 시점에서 이미 Stripe 계정을 설정하고 결제를 받을 준비가 되었다고 가정해 보겠습니다. 개발 모드에서는 앱을 구축하는 동안 실제 거래가 발생하지 않도록 앱을 테스트 모드로 설정하는 것이 중요합니다.

Stripe 대시보드에서 테스트 모드로 설정하는 방법

이제 화면 왼쪽 하단에 개발자 버튼이 표시됩니다. 이 버튼을 클릭하면 API 키 탭 아래에 비밀 키가 표시됩니다. 이 비밀 키를 복사하여 나중에 사용할 수 있도록 저장하세요.

Stripe 대시보드의 API 비밀 키

제품을 생성하려면 제품 카탈로그 페이지를 열고 오른쪽 상단의 '제품 생성' 버튼을 클릭한 다음 필수 필드를 입력합니다. 제품의 가치에 합당하다고 생각되는 가격을 설정할 수 있습니다. 가격 ID를 복사하여 나중에 사용할 수 있도록 저장합니다.

Stripe에서 제품의 가격 ID를 얻는 방법

이제 러블리로 돌아가서 아래 프롬프트를 실행합니다:

프롬프트: 내 앱에 Stripe 결제를 추가할 수 있도록 도와주세요. 이 가격 ID를 사용하여 사용자를 Stripe 결제 페이지로 리디렉션합니다: price_1QXXXXXXXXXXXXXX.

러블리에서 스트라이프 연동 추가하기

러버블은 백그라운드에서 이 제품을 앱에 통합하려고 시도합니다. 마지막에 "API 키 추가" 버튼이 표시되며 이때 스트라이프 비밀키를 추가할 수 있습니다. 채팅 인터페이스에 비밀 키를 절대 붙여넣지 마세요.

SQL 실행 버튼도 클릭하여 데이터베이스가 업데이트되었는지 확인합니다. 그리고 러블리에서 비밀 키를 요청하면 Stripe에서 복사한 값을 붙여넣습니다.

스트라이프 지원이 추가되었는지 확인하려면 엣지 함수 섹션에서 확인할 수 있습니다. 목록에 스트라이프 기능이 표시될 것입니다.

슈퍼베이스의 엣지 기능 목록

사용자가 남은 크레딧이 0인 상태에서 생성 버튼을 클릭할 때마다 추가 크레딧을 구매할 수 있는 옵션이 표시되는 모달 창이 표시됩니다.

러블리에서 크레딧 구매 버튼이 있는 샘플 앱

'크레딧 구매'를 클릭하면 구매를 완료할 수 있는 Stripe 페이지로 리디렉션됩니다.

Stripe 결제 스크린샷

아직 Stripe에서 테스트 모드이므로 실제 거래가 발생하지 않도록 임시 신용카드 정보를 사용할 수 있습니다. 나중에 앱을 출시할 준비가 되면 언제든지 라이브 모드로 전환할 수 있습니다.

이미지 생성기 기능, 사용자 등록 및 인증 기능, 파일 저장 기능, 데이터베이스 업데이트 기능이 있으며 이제 결제 기능도 사용할 수 있습니다. 이미 인터넷에 배포하고 수익을 창출할 수 있는 완전히 작동하는 스타트업입니다. 몇 주 안에 백만장자가 될 수 있습니다.

훌륭합니다. 이제 다음 단계는 소스 코드를 GitHub에 업로드하는 것입니다.

GitHub 연동

GitHub는 코드를 호스팅 및 관리하고 사용자가 프로젝트에서 공동 작업할 수 있는 웹사이트입니다.

앱을 제품으로 인터넷에 배포할 계획이라면 소스 코드를 GitHub와 같은 곳에 저장하는 것이 매우 중요합니다.

그러려면 Github.com으로 이동하여 계정을 만드세요. 완료되면 Lovable로 돌아가서 오른쪽 상단에 있는 GitHub 버튼을 클릭합니다.

Lovable 프로젝트를 GitHub에 연결하기

그런 다음 리포지토리 이전 버튼을 클릭하고 로그인한 계정을 선택합니다. 코드가 GitHub로 성공적으로 마이그레이션되었는지 확인하려면 GitHub에서 보기 버튼을 클릭합니다. 프로젝트의 전체 소스 코드가 표시됩니다.

이 프로젝트는 다음 기술 스택으로 빌드되었습니다:

• Vite

• 타입스크립트

• React

• Shadcn-ui

• 테일윈드 CSS

GitHub 페이지에서 다음과 같은 모든 소스 코드 파일을 볼 수 있습니다. 복제, 포크 등 원하는 대로 할 수 있습니다.

생성한 프로젝트의 GitHub 페이지 스크린샷

이제 Lovable에서 프로젝트를 잃어버리더라도 적어도 소스 코드가 GitHub에 안전하게 저장되어 있으므로 프로젝트는 안전합니다.

자체 IDE를 사용하여 로컬에서 작업하려는 경우 리포지토리를 복제하고 변경 사항을 푸시할 수 있습니다. 푸시된 변경 사항은 Lovable에도 반영됩니다.

유일한 요구 사항은 Node.js & npm이 설치되어 있어야 합니다.

# 1단계: 프로젝트의 Git URL을 사용하여 리포지토리를 복제합니다.
git clone <your_git_url>

# 2단계: 프로젝트 디렉터리로 이동합니다.
cd <your_project_name>

# 3단계: 필요한 의존성을 설치합니다.
npm i

# 4단계: 자동 로딩 및 즉시 미리 보기로 개발 서버를 시작합니다.
npm run dev</your_project_name></your_git_url

멋지네요. 이제 웹 앱을 배포할 준비가 되었습니다.

프로젝트 배포

실제로 제품으로 배포하려면 프로젝트의 링크를 Lovable 앱에서 사용자 지정 도메인으로 변경하는 것이 중요합니다. 저는 Vercel에 더 익숙하기 때문에 그 방법을 보여드리겠습니다.

Vercel.com으로 이동하여 계정을 만듭니다. 개요 페이지에서 새로 추가 메뉴를 클릭하고 프로젝트를 선택합니다.

Vercel에 새 GitHub 프로젝트 추가하기

이 시점에서 Github에서 프로젝트를 가져와야 합니다. 따라서 프로젝트 이름을 검색해 보세요. 프로젝트가 보이지 않는다면 앱 권한을 조정해야 할 수 있습니다. 링크를 클릭하고 GitHub 계정에서 프로젝트를 찾습니다.

Vercel이 프로젝트를 임포트하고 빌드를 수행하여 문제가 없는지 확인합니다. 빌드가 성공하면 상태가 "준비됨"으로 표시됩니다.

Vercel에 새 GitHub 프로젝트 추가하기

Now click on the Domains button to add a custom domain to your app. You can pick a unique name like “image-generator-app.com” to give it a unique domain name.

Vercel에서 사용자 정의 도메인 연결하기

사용자 정의 도메인 네임 추가는 무료가 아니며 가격은 도메인 네임과 확장자(예: '.com' 또는 '.ai'에 따라 달라집니다. .com은 일반적으로 .ai 도메인 이름보다 저렴합니다.

또한 사용자 정의 도메인이 적용되기까지 몇 시간 또는 며칠이 걸립니다. 그 후에는 이제 사용자 가입과 결제를 허용하는 웹사이트가 완전히 작동합니다. 이미 비즈니스이므로 더 많은 기능을 추가하여 앱을 지속적으로 개선할 수 있습니다.

자, 이제 기본적으로 다 끝났습니다. 이 글에서 설명한 단계를 이해했다면 앞으로 며칠 안에 자신만의 제품을 만들어 수익을 창출할 수 있습니다.

마지막 정리

저는 지난 몇 년 동안 AI로 앱을 개발해 왔으며, 전문 웹 개발자가 아니더라도 이 다섯 가지 플랫폼은 항상 제가 즐겨 사용하는 플랫폼이었습니다. AI 도구를 통해 저 같은 사람이 아이디어를 실제로 돈을 버는 실제 제품으로 만들 수 있다는 것은 놀라운 일입니다. 여기까지 읽으셨다면 이러한 도구를 한 번 사용해 보시길 바랍니다. 사용법을 알게 되면 상상할 수 있는 모든 것을 만들 수 있는 초능력을 갖게 된 것 같은 기분이 들 것입니다.

특히 Stripe 통합을 사용하면 앱에서 쉽게 수익을 창출할 수 있습니다. 결제 설정이 간단하고, 창작물에 빠르게 가격을 책정하여 며칠 만에 수익을 창출할 수 있습니다.

여기서 소개한 도구는 기본 도구에 불과하다는 점을 기억하세요. 좋은 시작점이지만 다른 옵션도 많이 있습니다. 꼭 러블리만 고집할 필요는 없습니다. Bolt, Windsurf, Cursor, V0 또는 다른 것을 사용할 수 있습니다. 데이터베이스의 경우 PostgreSQL, Firebase 또는 자신에게 가장 적합한 것을 선호할 수 있습니다. 결제 플랫폼도 국가에 따라 다를 수 있습니다. Stripe 대신 LemonSqueezy 또는 PayPal이 더 나은 대안이 될 수 있습니다. 또한 앱을 배포할 때 Vercel 대신 Netlify, AWS 또는 Azure와 같은 옵션이 있습니다.

이러한 도구를 결합하는 방법은 무궁무진하며, 이것이 바로 재미입니다. 중요한 것은 일단 빌드를 시작하는 것입니다. 이 글이 도움이 되셨기를 바랍니다.