배경 및 목적
비개발자로서 MVP 개발이란 무엇인지 이해하기
버블과 친해지기 🫧🫧
도대체 어떤 주제를 정해야 하는지 고민하기 전에 일단 무엇이든 만들어 보기
참고 자료
버블의 기초: 허세임님 투표앱 만들기 강의
버블의 디자인과 데이터, 워크 플로우 이해하기
버블과 AI 연결: 버블 공식 가이드 영상 - 버블로 AI 서비스 만들기
그룹을 사용해 레이아웃 구성하기
조건이 맞는 경우에만 동작하는 요소 만들기
HTTP 요청 메소드인 POST 방식 이해하기
동적 요소 사용하기
ChatGPT를 API로 호출하여 값을 주고 받기
활용 툴
Claude: 브레인 스토밍, 아이디어 구체화, 기획서 작성 (성구님의 가이드 따름)
Bubble: 초간단 레시피 MiniCook 앱 제작, API를 이용하여 AI와 연결
ChatGPT 4o-mini: API로 요청하여 요리 이름 또는 재료에 맞춘 레시피 생성
Dall-e3: API로 요청하여 레시피에 맞춘 요리 이미지 생성
제작 결과: MiniCook 앱 메인 페이지 사용 이미지
실행 과정
1. 아이디어 (Claude 활용)
가장 간단하며 AI의 기능을 활용하는 주제로 "초간단 레시피 제공 앱" 선정
요리 이름 또는 재료를 입력하면 간단한 재료로 짧게 요리하는 방법 안내
아이디어를 구체화하고 고려 사항 확인, 앱의 명칭과 카피라이팅 생성
앱 명칭: MiniCook
카피라이팅: Cook smart, Cook mini
2. 기획 (Claude 활용)
기획서 1Pager 작성
정보구조도 작성
메인 화면 UI 제작
메인 화면 구성 요소 정리
시작 화면: 입력창에 요리 이름 또는 재료를 입력
Generate Recipe: API 호출, 입력을 전달하고 프롬프트에 따른 레시피 생성
펜딩 화면: 레시피가 만들어지는 동안 생성중이라는 화면 표시
레시피 화면: 레시피 생성 완료 후 보이기
조리예 보기: API 호출, 레시피를 전달하고 프롬프트에 따라 이미지 생성
펜딩 화면: 이미지가 만들어지는 동안 생성중이라는 화면 표시
조리예 이미지: 이미지 생성 완료 후 음식 이미지 보이기
Save recipt: Bubble 데이터베이스에 레시피 등 정보 저장
New recipt: 같은 주제 또는 재료로 새로운 레시피 생성
하단 메뉴: Recent recipe, My page, Setting 표시
백엔드 프로세스 구조도 작성
create-post: API로 ChatGPT 4o-mini를 호출
- 시스템/유저 프롬프트를 통해, 소스를 읽어들이고 레시피를 생성
- 생성 중엔 "Pending_post", 완료 후 "Complete_post" 상태로 표시create-image: API로 Dall-e3를 호출
- 시스템/유저 프롬프트를 통해, 레시피를 읽어들이고 이미지를 생성
- 생성 중엔 "Pending_image", 완료 후 "Complete_image" 상태로 표시
3. MiniCook 앱 메인 페이지 제작 (Bubble 활용)
앱의 구성 요소를 결정, 전체 스타일 요소 입력, 포인트 컬러로 #FF0000 사용
데이터베이스 구성
앱 구성 요소 트리와 사용자 화면 제작 (실제로는 세로로 길게 연결)
OpenAI API 설정 (버블 공식 가이드 영상 - 버블로 AI 서비스 만들기 참고)
백엔드 워크플로우 구성 (버블 공식 가이드 영상 - 버블로 AI 서비스 만들기 참고)
레시피 생성 액션인 create-post를 위한 프롬프트 (Claude 활용)
시스템 프롬프트
You are MiniCook, an AI chef specialized in creating simple, delicious, and safe recipes with minimal ingredients and steps. Your goal is to provide recipes that anyone can easily follow, resulting in tasty meals. Always prioritize food safety and avoid unusual or potentially harmful ingredient combinations. Keep the cooking process straightforward and efficient, focusing on bringing out the best flavors with the least complexity.
유저 프롬프트
Create a recipe based on the following input: [User Input]Follow these guidelines:
1. Use no more than 5 main ingredients.
2. Limit the cooking steps to a maximum of 5.
3. Ensure the total cooking time is under 30 minutes.
4. Provide a creative name for the dish.
5. List the ingredients with approximate quantities.
6. Describe each cooking step briefly but clearly.
7. Include a short description of the final dish (1-2 sentences).
8. Write the entire recipe in Korean.
9. Use appropriate emojis for ingredients and cooking steps to make the recipe visually appealing.
Format the recipe as follows:
- 요리 이름:
- 짧은 설명:
- 간단 재료:
- 조리 방법:
Remember to keep the recipe simple, safe, and delicious, adhering to the MiniCook philosophy of minimal effort for maximum taste.
이미지 생성 액션인 create-image를 위한 프롬프트 (Claude 활용)
시스템 프롬프트
You are a professional food photographer for a high-end culinary magazine. Your task is to create beautiful and appetizing food images that match the given recipes. The photos should have photorealistic quality and be suitable for a gourmet magazine spread. The composition should be simple and clean, focusing on the food presented in an appropriate dish or container.유저 프롬프트
Create a food image for the following recipe: [post's recipe]Please follow these guidelines when generating the image:
1. Produce a hyperrealistic, photographic quality image.
2. Compose the shot with the food as the central focus.
3. Use appropriate, stylish dishware that complements the food.
4. Ensure the lighting enhances the food's texture and colors, making it look appetizing.
5. Keep the background simple and uncluttered, possibly with a soft blur.
6. Incorporate small details that add to the realism, such as steam, droplets, or garnishes.
7. Make sure the overall image looks professionally styled and photographed.
8. The mood of the image should match the recipe's character (e.g., cozy for comfort food, elegant for gourmet dishes).
9. Avoid any unrealistic or cartoon-like elements.
10. The final image should look like it belongs in a high-end culinary magazine or cookbook.
Remember, the goal is to make the viewer want to reach into the image and taste the food immediately.
버튼 워크플로우 구성 (버블 공식 가이드 영상 - 버블로 AI 서비스 만들기 참고)
결과 및 인사이트
성구님과 GPTaku님이 알려주신 자료가 크게 도움이 되었습니다.
허세임님 투표앱 만들기 강의를 먼저 보고, 버블 공식 가이드 영상 - 버블로 AI 서비스 만들기를 잘 따라하면 기초적인 앱을 충분히 구성할 수 있습니다.기획부터 프롬프트까지, Claude는 정말 찰떡같이 내 마음을 알아주네요. 😁
버블 자체에 관심이 많아 시작했는데, 너무나 멀었습니다. MiniCook 앱도 처음엔 2개의 페이지와 탭들로 구상했었는데... 사용할 수 있는 버블 기능에 한계가 있다보니 그야말로 MVP가 되었습니다. 🤣
버블에서 API로 Dall-e3 를 호출할 때 "상태 코드: 429, 오류 코드: 1015"가 발생하며 이미지 생성이 안되는 이슈가 있습니다. OpenAI 측의 문제로 알려져 있어 별다른 해결책이 없었고 (참고: Bubble Forum) 일정 시간 이후 재시도하니 이미지 생성이 되었습니다.
기획부터 결과물까지 보다 알차고 의미있는 MVP 제작에 도전하고 싶습니다! 🤩