문제 발견부터 수익화까지 
TTM 빌더 팀 합류하기

⚡ 주인장 자료

1인 개발자들을 위한 디자인 사이트 모음 | 웹사이트 디자인 레퍼런스, 바이브 디자인
레플릿 + 깃허브 연동하고, 공짜로 서비스 배포하기, 레플릿 꿀팁 2탄 | Replit, Github, CloudFlare
시간, 비용 절약하는 선 디자인 후 바이브 코딩, 레플릿 꿀팁 1탄 | Replit, Figma, Stitch AI, Chatgpt
바이브 코딩을 잘하기 위한 5가지 필수 원칙 | Replit, Chatgpt, 바이브코딩
돈이 될 수 있을까? 코딩 없이 서비스 만들고 검색 엔진 등록까지 | Replit, ChatGPT, 바이브코딩
바이브 코딩 뭐가 좋아? 요즘 대세 툴 4가지 맛보기 | Cursor, Replit, Lovable, V0, ChatGPT
단 30분, 3단계로 월 매출 14억 어플 따라 만들기 | 바이브 코딩, Replit, ChatGPT

단 30분, 3단계로 월 매출 14억 어플 따라 만들기 | 바이브 코딩, Replit, ChatGPT

1. 칼로리 AI 앱의 성공 사례2. 3단계 앱 만들기 계획3. ChatGPT로 앱 기획 및 정보 수집4. Replit에서 앱 개발 시작5. GPT API 키 발급 및 연결6. 앱 완성 및 테스트7. 오류 해결 및 최종 배포8. 요약 및 소감
Created by
  • T
    TTM
Created at
💬
Replit에 사용한 프롬프트

나는 음식 사진을 업로드하거나 촬영하면, AI가 이를 분석해서 음식 이름과 예상 칼로리를 알려주는 아주 간단한 웹앱을 만들고 싶어. 핵심 기능은 세 가지야.
1.
사용자가 사진을 업로드하거나 촬영할 수 있어야 해
2.
업로드된 사진을 AI가 분석해서 음식 이름과 칼로리 추정치를 텍스트로 보여줘야 해
•
가능하면 OpenAI GPT-4 Vision이나 외부 이미지 분석 API를 사용하고 싶어
3.
분석 결과를 웹페이지에 보여줘
그리고 이 웹사이트는 PWA로 배포해서, 내 스마트폰에서 앱처럼 사용할 수 있게 하고 싶어.
전체 프로젝트를 Flask 기반으로 만들고 싶고, 가능한 한 가볍고 직관적으로 구성해줘.
이 기능들을 바탕으로 초기 프로젝트 구조와 코드를 만들어줘.
이 영상은 월 매출 14억을 달성한 음식 칼로리 분석앱 ' 칼 ai'의 핵심 기능을코딩 지식 없이chatgpt와 replit을 활용하여 단 30분 만에 따라 만드는 과정을 보여줍니다.
코딩 지식 없이chatgpt와 replit을 활용하여 단 30분 만에 따라 만드는 과정을 보여줍니다.
아이디어만 있다면 누구나 AI 도구를 통해 서비스를 구현할 수 있음을 증명하며,기술 장벽이 낮아지고 있음을 강조합니다.
기술 장벽이 낮아지고 있음을 강조합니다.

1. 칼로리 AI 앱의 성공 사례

•
사진 한 장만 올리면 음식의 칼로리를 알려주는 앱이 있음
•
이 앱의 이름은 칼 AI이며, 한 달 매출이 무려 14억 원에 달함
•
영국의 한 고등학생이 GPT만으로 앱을 만들었고, 초기 투자 없이 바이럴만으로 수십억 매출을 기록함
•
창업자는 앱의 빠른 성장 이유로 오직 한 가지 핵심 가치를 단순하게 전달한 점을 꼽음 예: 음식 사진을 올리면 AI가 자동으로 분석해 칼로리를 알려줌
•
딱 한 가지 핵심 기능에만 집중한 것이 성공 요인임

2. 3단계 앱 만들기 계획

•
핵심 기능하나만 작동하는 앱을 직접 만들어볼 계획임 단계: 사진 업로드, AI 분석, 결과 출력 3단계로 구성
•
코딩을 몰라도 괜찮으며, AI가 설명만으로 코드를 짜줌
•
실제로 말로 앱을 만드는 과정을 보여줄 예정임

3. ChatGPT로 앱 기획 및 정보 수집

•
ChatGPT에 접속해 칼 AI앱에 대해 질문함
•
GPT가 알고 있는 내용과 실제 앱이 달라 공식 페이지 링크를 제공해 정확한 정보를 학습시킴
•
레플릿( Replit) 서비스를 이용해 최소한의 핵심 기능만 만드는 콘텐츠임을 GPT에 알림
•
GPT가 콘텐츠 기획을 제안해줌
•
원하는 기능을 가진 서비스를 만들기 위한 프롬프트작성법을 GPT에게 요청함
•
앱을 웹페이지처럼 쓸 수 있는 PWA(Progressive Web App) 기능 추가도 요청함 PWA란: 웹페이지를 스마트폰이나 PC에서 앱처럼 사용할 수 있게 해주는 형태임

4. Replit에서 앱 개발 시작

•
GPT에서 얻은 프롬프트를 복사해 Replit사이트로 이동함
•
프롬프트를 그대로 붙여넣고 실행함
•
진행 여부를 묻는 창이 뜨며, 최소한의 기능만 확인할 것이므로 아무 체크 없이 실행함
•
참고로 한 달에 25달러짜리 프로 요금제를 사용해야 웹사이트 배포가 가능함
•
약 3~4분 기다리면 안내 문구가 나오는데, GPT API키가 없다는 내용임

5. GPT API 키 발급 및 연결

•
안내 문구를 복사해 GPT에 해결 방법을 물어봄
•
GPT가 API 키발급 방법과 링크를 자세히 안내해줌
•
안내에 따라 키를 발급받고, 이름과 프로젝트를 설정해 키를 복사함
•
Replit에 키를 입력하니 멈췄던 기능이 다시 동작함

6. 앱 완성 및 테스트

•
명령 한 번과 GPT API키 연결만으로 서비스가 만들어짐
•
실제로 치킨 사진을 업로드해 테스트하니 원하는 결과가 잘 나옴
•
웹사이트를 사람들과 공유할 수 있도록 배포를 진행함
•
배포 환경을 설정하고, 이름도 간단히 정해 진행함

7. 오류 해결 및 최종 배포

•
약 5분 후 첫 오류가 발생함
•
Replit에서 오류 해결버튼이 있지만, GPT에게도 해결 방법을 물어봄
•
Replit의 오류 해결버튼을 눌러 적용하니 성공적으로 웹사이트 링크가 생성됨
•
웹사이트 링크를 스마트폰에 공유해 접속함
•
스마트폰에서 사파리로 접속 후, 공유 버튼과 홈 화면에 추가버튼을 눌러 앱 아이콘처럼 저장함
•
바탕화면에 앱 아이콘이 생기고, 여러 번 테스트해봄

8. 요약 및 소감

•
GPT에게 서비스 설명과 명령어를 요청해 앱을 만들었음
•
GPT에서 얻은 명령어를 Replit에 입력해 원하는 기능의 웹을 완성함
•
예상보다 오류가 적어 놀라웠음
•
이제 아이디어만 있으면 코딩을 몰라도 구현할 수 있는 시대임을 강조함
•
IT 서비스 아이디어가 있다면 댓글로 제안해달라고 요청함
•
코딩을 몰라도 IT 서비스를 만들 수 있는 커뮤니티도 운영 중임
Made with Slashpage