[완독 챌린지 2기] 혼자 공부하는 바이브코딩 with 클로드 코드 - 5주차

혼자 공부하는 바이브코딩 with 클로드 코드 완독 챌린지 2기 커리큘럼

일정	학습 챕터
1주차	Ch 01. 나의 첫 바이브 코딩 ~ Ch 02. 효과적인 프롬프트로  AI 200% 활용하기
2주차	Ch 01. 나의 첫 바이브 코딩 ~ Ch 02. 효과적인 프롬프트로  AI 200% 활용하기
3주차	Ch 03. 클로드 코드 시작하기
4주차	Ch 04. 클로드 코드 실전 활용 Ch 05. 게임 제작으로 배우는 체계적인 개발과 관리
5주차	Ch 06. 클로드 코드에 API 날개 달기 Ch 07. 클로드 코드 AI 에이전트로 개발팀 구성하기
6주차	Ch 07. 클로드 코드 AI 에이전트로 개발팀 구성하기 Ch 08. MCP로 클로드 코드의 한계 넘어서기

 

 

 

혼자 공부하는 바이브 코딩 with 클로드 코드

https://www.hanbit.co.kr/store/books/look.php?p_code=B1785590517

 

 

 

---

 

🚶기본 미션(필수)

• PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기(Ch06 06-2)

 

OpenRouter API를 이용해서, 냉장고 사진에서 재료를 인식하고 레시피를 추천하는 웹 애플리케이션 구현

 

 

1. openrouter에서 텍스트 무료  API 선택

 

 

2. 무료 이미지 API 선택. (but 무료 이미지 API가 openrouter 사이트 내 미 제공 상태)

 

 

아이디어. Gemma 4 26B A4B를 이미지 API로 사용해보고, 실패시 변경하자.

 

 

 

Prompt

OpenRouter에서 받은 API 키를 .env 파일로 저장했어. 이 키를 안전하게 사용할 수 있도록 준비해 줘.

 

 

 

Prompt

이제 준비된 API가 실제로 작동하는지 테스트해 줘.
이미지 인식은 google/gemma-4-31b-it:free 모델을 이용하고,
텍스트 인식은 google/gemma-4-31b-it:free 모델을 이용할 거야.
API를 통한 텍스트와 이미지 인식을 각각 테스트해서 실행 결과를 알려줘.

 

 

 

 

 

Prompt

앞서 만든 OpenRouter API를 이용해서, 냉장고 사진에서 재료를 인식하고 레시피를 추천하는 웹 애플리케이션
을 만들고 싶어. 다음과 같이 3단계로 나누어서 PRD를 만들어 줘.
1단계는 이미지를 입력받고 google/gemma-4-31b-it:free 모델을 사용해서 이미지를 인식해.
2단계는 1단계에서 얻은 정보와 google/gemma-4-31b-it:free 모델을 사용해서 레시피를 생성해.
3단계는 사용자 프로필을 만들어서 레시피를 저장해.
각 단계를 PRD_step1.md, PRD_step2.md, PRD_step3.md로 나누어 저장해 줘

 

 

 

Prompt

PRD_step1.md를 실행해.

 

 

Prompt

메인 애플리케이션을 실행해서 1단계의 결과를 테스트해 줘.

 

 

Claude가 추천하는 무료 이미지 API로 교체

Prompt

google/gemma-4-26b-a4b-it:free 사용으로 이미지 인식 api를 바꿔줘

 

 

 

Prompt

이제 PRD_step2.md를 실행해 줘.

 

 

Prompt

메인 애플리케이션을 실행해서 2단계 결과를 테스트하게 해 줘

 

 

 

 

결과물. 냉장고 재료로 메뉴 추천 어플리케이션

 

 

 

 

 

 

 

 

 

끝.