반응형
SMALL
AI 서비스 운영 및 바이브 코딩 요약
1. AI 서비스 '동물상 테스트'의 성공 사례 (00:00-01:12)
- 서비스 소개: 얼굴 사진을 통해 사용자에게 공룡상, 강아지상, 고양이상 등을 알려주는 '동물상 테스트' 서비스입니다.
- 성과: 2020년 12월 17일 실시간 검색어 1위를 기록했으며, 다양한 언어를 지원하여 글로벌 서비스로 확장되었습니다.
- 수익 구조: 웹사이트는 구글 애드센스, 앱은 구글 애드몹을 통해 수익을 창출합니다.
- 특징: 영어권 사용자가 더 많을 정도로 글로벌 인기를 얻었으며, 인스타그램 스토리 바이럴을 통해 12.6만 명의 참여를 이끌어냈습니다.
- 운영비: 놀랍게도 운영비는 '0원'입니다.
2. 운영비 '0원'의 비결 (01:12-01:49)
- 클라우드플레어 페이지스: 정적 웹페이지는 클라우드플레어 페이지스의 무제한 대역폭(Unlimited Bandwidth)을 무료로 사용하여 운영됩니다.
- 기술 스택: HTML, CSS, JavaScript, jQuery로 구성되었습니다.
- AI 모델: AI 모델은 온 디바이스에서 실행되는 TensorFlow.js 기반의 'Teachable Machine'을 사용합니다. GPU 없이 브라우저에서 직접 AI 연산이 가능하여 서버 운영비가 발생하지 않습니다.
3. 지속적인 수익 창출 및 기타 성공 사례 (01:49-03:28)
- 수익 현황: 트렌드가 끝났음에도 불구하고 2024년 12월 기준 월 70만 원의 수익을 올리고 있으며, 하루 약 11-12달러의 수익이 꾸준히 발생하고 있습니다.
- 총 수익: 2022년 이후 누적 수익을 정리했을 때, 매월 꾸준한 수익이 발생하고 있어 '부동산 하나를 가지고 있는 것'과 같다고 비유합니다.
- 다른 사례: 다른 개발자들이 만든 'AI 관상 테스트'는 일주일에 1천만 원, '첫인상 테스트'는 3일 만에 1천만 원의 수익을 올린 사례도 소개됩니다.
4. '바이브 코딩'과 Replit 소개 (03:28-05:44)
- 바이브 코딩: AI 에이전트에게 자연어 프롬프트로 지시하여 코드를 작성하게 하는 방식을 의미합니다. 기술 자체보다 '무엇을 만들 것인가'가 중요해진 시대적 흐름을 반영합니다.
- Replit: AI 코딩 플랫폼으로, 바이브 코딩 기능을 지원하며 배포까지 한 번에 가능한 올인원 서비스입니다.
- Replit 장점:
- Agent Mode: 복잡한 기능을 한 번에 구현합니다.
- Assistant Mode: 코드의 특정 부분을 조금씩 수정할 때 사용합니다.
- 풀스택 지원: 프롬프트 한 줄만으로도 클라이언트와 서버를 모두 포함하는 풀스택 서비스 제작이 가능합니다.
- Replit 요금제: 무료(Public App 10개), 유료(월 20달러, 에이전트 및 개인 앱 사용 가능) 요금제가 있으며, 제휴 링크와 쿠폰을 통해 할인 혜택을 제공합니다.
- Replit 신뢰성: 구글 CEO 순다 피차이도 Replit을 사용한 경험이 있다고 언급하여 플랫폼의 신뢰성을 강조합니다.
5. Replit을 이용한 '테토 에겐 테스트' 제작 과정 (05:44-14:07)
- 제작 시작: 요즘 유행하는 '테토 에겐 테스트'를 만들기로 결정합니다.
- 프롬프트 입력: 나무위키의 '테토에겐' 관련 내용을 복사하여 프롬프트에 넣고, '성격 유형 테스트 사이트'를 만들어 달라고 지시합니다.
- AI 에이전트의 작업: AI 에이전트가 사용자의 요청을 분석하고, 성별 선택 페이지, 4단계 설문지, 결과 페이지, 공유 기능 등 완벽한 계획을 수립합니다.
- 기능 구현:
- 자동 생성: 질문지, CSS 스타일, 리액트 클라이언트, 서버까지 자동으로 만들어집니다.
- 반응형 디자인: 아이폰 12 Pro 등 다양한 기기에 맞게 반응형으로 구현됩니다.
- 수정 기능: '어시스턴트 모드'를 통해 질문 순서를 랜덤하게 바꾸거나, 다크 모드/라이트 모드를 추가하고, 한국어와 영어 다국어 서비스를 쉽게 구현합니다.
- 배포: 'Deploy' 버튼 클릭 한 번으로 자동 스케일링, 도메인 설정까지 완료되어 즉시 웹사이트가 배포됩니다.
- 최종 완성: 단 5개의 프롬프트와 클릭만으로 완벽한 기능의 웹사이트가 완성되며, 친구들과 공유하여 사용할 수 있는 상태가 됩니다.
6. 결론 (14:07-14:50)
- 총평: AI 플랫폼 Replit을 통해 코드를 직접 건드리지 않고도 클릭 몇 번으로 실제 서비스가 가능한 웹사이트를 제작할 수 있습니다.
- 추가 혜택: 제휴 링크 및 할인 코드를 통해 Replit 유료 서비스를 더 저렴하게 이용할 수 있습니다.
AI 서비스 제작을 위한 단계별 플로우차트
이 문서는 '바이브 코딩'을 활용해 AI 웹 서비스를 만드는 과정을 초보자도 쉽게 따라 할 수 있도록 정리한 것입니다.
1단계: 준비 - Replit 플랫폼 접속하기
-
- Replit 플랫폼에 접속합니다.
- 무료 또는 유료 요금제를 선택하여 계정을 생성합니다.
- 무료 요금제는 10개의 퍼블릭 앱을 만들 수 있습니다.
- 유료 요금제는 에이전트 모드 및 개인 앱 제작이 가능합니다.
2단계: 아이디어 구체화 및 AI 에이전트 활용 (바이브 코딩)
-
- 만들고 싶은 서비스의 아이디어를 구체적으로 정리합니다.
- 예: '테토 에겐 테스트' 성격 유형 테스트 사이트 만들기.
- Replit의 AI 에이전트에게 자연어 프롬프트로 지시합니다.
- Agent Mode를 사용하여 전체적인 웹사이트를 한 번에 생성하도록 요청합니다.
- 텍스트뿐만 아니라 웹사이트 링크나 문서 내용을 복사해 프롬프트에 붙여 넣어 아이디어의 참고 자료로 활용할 수 있습니다.
- 에이전트가 제안하는 계획을 확인하고 승인합니다.
- 만들고 싶은 서비스의 아이디어를 구체적으로 정리합니다.
3단계: 생성된 서비스 수정 및 보완하기
-
- AI 에이전트가 생성한 초기 버전을 확인합니다.
- 이때 질문지, CSS 스타일, 반응형 디자인, 서버 등이 자동으로 생성됩니다.
- 세부적인 수정이 필요할 경우 Assistant Mode를 활용합니다.
- Assistant Mode를 사용하여 '질문 순서를 랜덤하게 바꿔줘' 또는 '다크 모드와 라이트 모드를 추가해줘'와 같이 세부적인 지시를 내립니다.
- 다국어 지원처럼 복잡한 기능도 Assistant Mode를 통해 쉽게 추가할 수 있습니다.
- AI 에이전트가 생성한 초기 버전을 확인합니다.
4단계: 완성된 서비스 배포하기
-
- 모든 수정이 완료되면 'Deploy' 버튼을 클릭하여 웹사이트를 배포합니다.
- 배포 과정에서 도메인 이름 설정, 머신 파워(CPU) 조절 등 간단한 설정을 할 수 있습니다.
- 배포가 완료되면 즉시 공유 가능한 웹사이트 링크가 생성됩니다.
5단계: 수익화 (선택 사항)
-
- 구글 애드센스(웹사이트)나 애드몹(앱)을 추가하여 수익을 창출합니다.
- 운영비가 '0원'에 가깝기 때문에 꾸준한 수익을 기대할 수 있습니다.
반응형
LIST
'코딩' 카테고리의 다른 글
| 천재 개발자가 만든 코딩 AI, TIDEWAVE, 그냥 알아서 다 만들어줌 [친절한 개발자, 제임스] (1) | 2025.09.05 |
|---|---|
| "업무 전부 자동화" 여러 AI를 합쳐서 커스텀하는 구글의 역대급 AI 에이전트 출시..[월텍남] (1) | 2025.09.05 |
| 클로드 코드 무료 템플릿 300개+ 결국 나와버렸습니다. [코드팩토리] (3) | 2025.09.05 |
| 이 영상 하나만 보시면 됩니다. | 모든 Claude Code 세팅, 효과적인 워크플로우, 추천하는 서비스들 [개발동생] (1) | 2025.09.05 |
| ‘이 기능’ 켜져 있으면 카드번호, 계좌번호, 비밀번호 싹 다 털립니다. 지금 바로 이 설정 꺼주세요! [슬기로운디지털생활] (1) | 2025.09.05 |