5주차 : PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기

 

제미나이로 5주차로 살아 남았네요..

1. API 연동과 냉장고를 부탁해 따라하기

1. 학습하면 느낀점

• openrouter.ai 유용함을 알게 된다.
• multimodal LLM으로 이미지 분석과 text generation AI App을 쉽게 만들 수 있다.
• 제미나이.. 무료로 바이브 코딩 접근성이 좋지만...Claude대비 약점이 보인다.
  • 생성된 코드를 테스트 못할 수 있다.
  • openrouter.ai 사용할 지정한 LLM이 실패하면... 알아서 다른 LLM을 시도하는데.. 의도치 않은, 지정하지 않은  유료 LLM을 사용한다.
• claude의 agents에 대응하는 gemini는 extension인가?
• 그래도 바이브 코딩의 세계는 신세계다

 

 

 

 

 

1. 1단계 환경 설정 메모

GEMINI에서는 API 테스트에서 이미지가 필요로 하군. OpenRouter의 무료 모델 찾기도 만만치 않네... 결국 이미지와 텍스트 모두 gemma를 사용하는 것으로 TT... gemini는 모델 테스트 실패하면 알아서 성공하는 모델을 찾아서.. 비용이 발생할 수 있네요..

 

 

2. PRD_step1.md 메모

 

제미나이는 몇번의 코드 수정을 하였지만.. 테스트 실패... 코드는 이상없으니 사람이 하라고 하네.. 괴씸한놈..

그래도.. 이미지 분석은 하는 군... 다행

 

 

 

3.  PRD_step2.md 메모

 

메인 애플리케이션을 실행해서 2단계 결과를 테스트하게 해 줘 -->  이로 인해 자동화된 직접 테스트가 불가능합니다.
따라서 2단계 구현(PRD_step2.md)도 완료되었으므로, 사용자님께서 직접 실행하고 테스트해주시길 부탁드립니다.

 

 

API 연동과 냉장고를 부탁해 강의 내용

 

 

[1단계] API 기초와 보안 환경 설정

외부 AI 모델을 내 프로그램으로 연결하는 'API'의 개념을 익히고, 보안을 유지하며 오픈라우터(OpenRouter)를 연동하는 단계입니다.

• 레슨 (Lesson)

    ◦ API의 역할: 내 앱(웨이터)이 AI 모델(요리사)에게 사진과 요청을 전달하고 결과를 받아오는 연결 고리임을 이해합니다.

    ◦ 오픈라우터(OpenRouter): 여러 AI 모델(Google, Meta 등)을 하나의 API 키로 사용할 수 있는 통합 플랫폼과 무료 모델 탐색법을 배웁니다.

    ◦ 보안 설정(.env): API 키 유출 방지를 위해 .env 파일에 키를 저장하고, gitignore를 통해 깃허브 등에 업로드되지 않도록 차단하는 원칙을 학습합니다,.

• 실습 (Practice)

    ◦ 오픈라우터에 가입하여 API 키를 발급받고, 프로젝트 폴더(Study04)에 .env 파일을 생성하여 저장합니다.

    ◦ 클로드 코드를 실행하고 /init 후 "API 키를 .env에 저장했으니 안전하게 연동해 줘"라고 요청하여 초기 설정을 마칩니다.

• 프로젝트 (Project): "API 연결 테스트"

    ◦ 무료 텍스트 모델(예: Meta Llama 3 등)의 ID를 복사하여 "안녕"이라고 인사를 건네고, "API가 정상 작동합니다"라는 응답을 확인합니다,.

• 체크리스트 (Checklist)

    ◦ [ ] .env 파일이 생성되었고 API 키가 저장되었는가?

    ◦ [ ] .gitignore 파일이 생성되어 키 유출을 막고 있는가?

    ◦ [ ] 간단한 텍스트 인식 테스트에 성공하였는가?

--------------------------------------------------------------------------------

[2단계] 멀티모달 모델 선정 및 비용 관리

이미지를 보는 눈(Vision Model)과 레시피를 쓰는 뇌(Text Model)를 각각 선정하고, 무료 사용 시 발생하는 제한(Rate Limit)을 관리하는 법을 배웁니다.

• 레슨 (Lesson)

    ◦ 모델 이원화: 이미지 인식용(예: Google Gemma 2 27B)과 텍스트 생성용(예: Meta Llama 3) 모델을 각각 선정하여 비용과 성능을 최적화합니다.

    ◦ 비용 및 제한 관리: 오픈라우터의 'Activity' 탭에서 토큰 사용량과 비용(0원 확인)을 모니터링하고, 사용량 제한(Rate Limit) 오류 시 다른 모델로 교체하는 법을 익힙니다,.

• 실습 (Practice)

    ◦ 오픈라우터에서 'Pricing'을 'Free'로 설정하여 무료 이미지/텍스트 모델을 검색하고 모델 ID를 복사합니다.

    ◦ "이미지는 젬마 모델, 텍스트는 라마 모델을 사용해서 테스트해 줘"라고 구체적으로 지시하여 두 모델의 연동 상태를 점검합니다.

• 프로젝트 (Project): "식재료 인식기"

    ◦ 냉장고 사진 샘플을 다운로드하여 저장하고, 사진을 입력했을 때 계란, 양배추 등의 재료 목록이 텍스트로 추출되는지 확인합니다.

• 체크리스트 (Checklist)

    ◦ [ ] 이미지 모델과 텍스트 모델이 각각 오류 없이 작동하는가?

    ◦ [ ] 냉장고 사진 속 재료가 텍스트로 변환되었는가?

    ◦ [ ] 오픈라우터 대시보드에서 사용 내역(Activity)이 확인되는가?

--------------------------------------------------------------------------------

[3단계] 내부 PRD 생성 및 앱 완성

클로드 웹을 거치지 않고 터미널 내부에서 기획(PRD)부터 개발, 수정까지 원스톱으로 진행하여 완성된 웹 앱을 만듭니다.

• 레슨 (Lesson)

    ◦ 내부 PRD 생성: "3단계 개발 계획(이미지 인식→레시피 생성→저장)을 세워줘"라고 요청하여 PRD_Step1.md 등의 기획 문서를 클로드 코드 내부에서 생성하는 법을 배웁니다,.

    ◦ 단계별 실행: 기획된 Step 문서를 하나씩 실행하며 기능을 점진적으로 구현하고, 브라우저(localhost)에서 즉시 확인하는 워크플로우를 익힙니다.

    ◦ 가이드라인 수정: CLAUDE.md에 "이미지 인식 실패 시 에러 메시지를 보여줘"와 같은 예외 처리 규칙을 추가하여 앱의 안정성을 높입니다,.

• 실습 (Practice)

    ◦ Step 1 & 2: 이미지 업로드 UI(Step 1)와 레시피 생성 기능(Step 2)을 연달아 구현하고 테스트합니다,.

    ◦ Step 3: 회원가입 및 로그인 기능을 추가하여 나만의 레시피를 저장하는 기능을 구현합니다.

• 프로젝트 (Project): "나만의 냉장고 셰프 앱"

    ◦ 완성된 앱에 실제 냉장고 사진을 올리고, 분석된 재료로 레시피를 추천받은 뒤 '저장' 버튼을 눌러 보관함에 저장되는지 확인합니다.

• 체크리스트 (Checklist)

    ◦ [ ] PRD 파일들(Step 1, 2, 3)이 프로젝트 폴더에 자동 생성되었는가?

    ◦ [ ] 웹 브라우저에서 사진 업로드부터 레시피 생성까지 끊김 없이 진행되는가?

    ◦ [ ] 로그인 후 '레시피 저장' 기능이 정상 작동하는가?

 

 

-