코딩

AI 서비스 수익 공개 및 Replit 바이브 코딩으로 '테토 에겐 테스트' 만들기 [조코딩]

capstone012 2025. 9. 5. 08:05
반응형
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 플랫폼 접속하기

      1. Replit 플랫폼에 접속합니다.
      2. 무료 또는 유료 요금제를 선택하여 계정을 생성합니다.
        • 무료 요금제는 10개의 퍼블릭 앱을 만들 수 있습니다.
        • 유료 요금제는 에이전트 모드 및 개인 앱 제작이 가능합니다.

2단계: 아이디어 구체화 및 AI 에이전트 활용 (바이브 코딩)

      1. 만들고 싶은 서비스의 아이디어를 구체적으로 정리합니다.
        • 예: '테토 에겐 테스트' 성격 유형 테스트 사이트 만들기.
      2. Replit의 AI 에이전트에게 자연어 프롬프트로 지시합니다.
        • Agent Mode를 사용하여 전체적인 웹사이트를 한 번에 생성하도록 요청합니다.
        • 텍스트뿐만 아니라 웹사이트 링크나 문서 내용을 복사해 프롬프트에 붙여 넣어 아이디어의 참고 자료로 활용할 수 있습니다.
        • 에이전트가 제안하는 계획을 확인하고 승인합니다.

3단계: 생성된 서비스 수정 및 보완하기

      1. AI 에이전트가 생성한 초기 버전을 확인합니다.
        • 이때 질문지, CSS 스타일, 반응형 디자인, 서버 등이 자동으로 생성됩니다.
      2. 세부적인 수정이 필요할 경우 Assistant Mode를 활용합니다.
        • Assistant Mode를 사용하여 '질문 순서를 랜덤하게 바꿔줘' 또는 '다크 모드와 라이트 모드를 추가해줘'와 같이 세부적인 지시를 내립니다.
        • 다국어 지원처럼 복잡한 기능도 Assistant Mode를 통해 쉽게 추가할 수 있습니다.

4단계: 완성된 서비스 배포하기

      1. 모든 수정이 완료되면 'Deploy' 버튼을 클릭하여 웹사이트를 배포합니다.
      2. 배포 과정에서 도메인 이름 설정, 머신 파워(CPU) 조절 등 간단한 설정을 할 수 있습니다.
      3. 배포가 완료되면 즉시 공유 가능한 웹사이트 링크가 생성됩니다.

5단계: 수익화 (선택 사항)

    1. 구글 애드센스(웹사이트)나 애드몹(앱)을 추가하여 수익을 창출합니다.
    2. 운영비가 '0원'에 가깝기 때문에 꾸준한 수익을 기대할 수 있습니다.
반응형
LIST