『혼자 공부하는 바이브 코딩 with 클로드 코드』- 5주차 미션

https://www.inflearn.com/challenge/6-week-course-self-s/dashboard?cid=342648

[지금 무료][6주 과정] 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 2기 챌린지 |

---

벌써 절반 이상의 미션이 끝나가다니

시간이 정말 빨라..ㅎㅎ

 

---

API란?

프로그램과 프로그램 사이의 연결 다리 역할, 간단한 요청만으로 복잡한 기능을 쓰게 해주는 통신 규칙

 

그 중에서 무료 API를 제공하는 웹사이트인 '오픈라우터'-> 한 가지 API로 여러 AI 모델들을 사용할 수 있음https://openrouter.ai/

OpenRouter

 

UI가 변경되어서 강의에서는 내 프로필--> KEYS로 들어갔다면, 이제는 프로필-> WorkSpaces-> API Key로 들어가야함!

 

Create New Key 누르고 한 번 생성된 Key는 창을 닫으면 사라지기 때문에 반드시~! 복사해놓기

멘토님께서 알려주신대로 메모장에서 Key를 복사해넣고 저장하기

그리고 .env로 파일명 저장할 것

---

이제 다시 사이트에서 Models 클릭 후 무료 모델로 설정하고

Ex)

Input Modalities-> Image-> 원하는 모델 선택

google/gemma-4-31b-it:free (모델명 복사!)

아래 모델을 선

Input Modalities-> Text-> 원하는 모델 선택

openai/sora-2-pro (모델명 복사!)

---

이제 기본 세팅은 완료되었으니 터미널로 가서 클로드 불러오기

 

https://github.com/taehojo/vibecoding/blob/master/PROMPTS.md#04%EC%9E%A5-%ED%81%B4%EB%A1%9C%EB%93%9C-%EC%BD%94%EB%93%9C-%EC%8B%A4%EC%A0%84-%ED%99%9C%EC%9A%A9

vibecoding/PROMPTS.md at master · taehojo/vibecoding

여기서 프롬프트 확인 가능!

 

 

1> /init

 

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

 

 

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

 

 

이놈이 알아서,, 유료 버전으로 전환했다..

나는 분명 FREE 버전을 쓰라고 했는데,,

 

내가 선택한 모델들로는 안 돌려지는 것 같아서

모델을 변경

이미지--> google/gemma-4-26b-a4b-it:free

텍스트--> openai/gpt-oss-20b:free

 

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

 

 

---

필수 미션

<냉장고를 부탁해 앱 만들기>

 

이미지 인식 모델: 냉장고 식재료 분석

텍스트 인식 모델: 맞춤 레시피 추천

 

이제는 클로드 웹이 아닌 클로드 코드 내에서 PRD를 단계별로 실행

 

 

<프롬프트>

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

 

 

 

PRD_step1.md를 실행해.

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

 

 

이제 PRD_step2.md를 실행해 줘.

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

 

 

서버 연결에 문제가 있어서 step3까지 한번 진행하고 서버 재연결...

 

 

이제 PRD_step3.md를 실행해 줘.

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

 

별표 기능을 누르면 저장도 가능하다!

조리법도 추천해줌!

 

 

홈페이지 UI를 변형하고 싶어서 구구절절 프롬프트를 작성해서 명령하였다.

나의 목표는 추억의 플래시 게임인 '슈의 라면가게'와 같은 UI를 만드는 것,,ㅋㅋㅋ(이거 아는 사람은 최소 20대 초중반,,)

그리고 운동하는 사람들을 위한 식단도 추천

예를 들면 운동직후에는 닭가슴살, 계란 등 고단백 식단으로 구성하는 것을 추천하는 시스템 구현

 

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이런 걸 원한게 아닌데,,음 그래도..이전보다는 만족 (っ`•ω•´c)

 

이번에는 구글에서 다운받은 이미지를 업로드해보았다

 

재료 수량미상 문제가 미해결로 남아있어서 다시 수정

 

 

 

- 레시피 추천

(밤에 작성하고 있는데 배고프다ㅏ,,)

 

 

 

디자인을 좀 더 귀엽게 수정해서 재료 옆에 이미지가 뜨도록 변경

수정사항

 

좀 더 귀여워진 디자인 ,,

 

---

추가미션

 

<AI 개발팀 구축과 앱 만들기>

 

새로운 프로젝트이므로 /init하고 .env 파일은 새로운 폴더에 복사해넣기

 

 

[프롬프트]

 

1> 제품 기획 관리자: 전체 개발 일정을 관리하는 프로덕트 매니저로서 PRD를 작성하여 제품의 목표, 기능, 사용자 요구사항을 정의한다

2> 백엔드 개발자: 서버 아키텍처 설계, API 개발, 데이터 처리, 외부 서비스 통합, 보안 및 성능 최적화를 담당하는 서버 사이드 개발 전문가. 안정적이고 확장 가능한 백엔드 시스템 구축.

3> 프론트엔드 개발자: 사용자 인터페이스 설계 및 구현, 반응형 디자인, 웹 접근성, 성능 최적화를 담당하는 클라이언트 사이드 개발 전문가.

4> 품질 보증 엔지니어: 전체 시스템의 기능 테스트, 에러 처리 검증, 성능 최적화, 코드 리뷰를 수행하는 품질 관리 전문가. 버그 발견, 사용성 개선사항 제안.

5> AI 통합 전문가: LLM 및 AI 서비스 통합, 프롬프트 최적화, 모델 파인튜닝, AI 파이프라인 구축을 담당하는 인공지능 전문가. 여기서는 OpenRouter API를 통해 DeepSeek 모델과 연동하여 텍스트 생성, 요약을 구현하는 LLM 활용 전문가

 

에이전트 생성완료

 

<프롬프트>

AI 공감 다이어리를 만들어 줘. 오늘 있었던 일을 한 줄로 쓰면, AI가 감정을 분석하고 공감하며 위로해 주는 일기 애플리케이션이야.
backend-architect가 OpenRouter API를 연동해서 감정 분석과 공감 메시지를 생성하는 기능을 구현해 줘.
DeepSeek V3.1 무료 모델을 사용하고, API 키는 현재 폴더의 ‘.env’ 파일에 저장된 것을 사용해.
frontend-developer가 따뜻하고 편안한 느낌의 일기장 UI를 만든 다음, qa-engineer가 실제로 여러 상황에서 문제없이 작동하는지 테스트해 줘.
문제를 발견하면 완전히 해결할 때까지 수정하고, 최종 버전을 브라우저에서 바로 열 수 있는 ‘index.html’ 파일로 만들어 줘.

 

이제는 공감 다이어리 만들 차례

생각보다 시간이 많이 소요됨 ㅠ