[혼공바이브코딩] 1주차_나의 첫 바이브코딩
[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작
[혼공바이브코딩] 3주차_클로드 코드 시작하기
[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱
[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리
[혼공바이브코딩] 5주차-1_클로드 코드에 API 날개 달기
[혼공바이브코딩] 5주차-2_클로드 코드 AI 에이전트로 개발팀 구성하기
[혼공바이브코딩] 6주차_MCP로 클로드 코드의 한계 넘어서기
5주차 시작하기 전에 복습도 할 겸, 로또번호 생성기를 만들었습니다.
네, 제가 그 유명한 한탕주의입니다. 한탕주의도 시대에 걸맞게 AI기반 한탕주의로!
직접 기획해서 제작하니까 더 재미있네요.
이렇게 앱을 만들어서 수익성을 추구하면 제 워드프레스 서버비정도는 벌 수 있지 않을까 하는 기대도 합니다.
도메인이 있으면 블로그에 달고 있는 구글애드센스도 앱에 달 수 있다고 하니, 나중엔 그것도 해보려구요.
API란?
API(Application Programming Interface)는 프로그램과 프로그램 사이를 연결하는 다리.
간단한 요청만으로 복잡한 기능을 가져다 쓸 수 있게 해주는 통신 규칙입니다.
오픈라우터(OpenRouter)란?
오픈라우터는 여러 AI 모델 API를 한곳에 모아 제공하는 통합 플랫폼입니다.
윈도우에서 [메모장]을 실행한 뒤, ‘OPENROUTER_API_KEY=’라고 입력하고 발급받은 오픈라우터의 API키를 붙여넣습니다. 그리고 파일 이름을 ‘.env’라고 입력하고 [파일 형식]을 반드시 [모든 파일]로 변경하여 [인코딩]을 [UTF-8]로 선택하고 저장합니다.
무료 API만들 필터링하기 위해 좌측 사이드바에서 ‘Prompt pricing’ 필터를 찾고 슬라이더의 핸들을 드래그해 ‘FREE’에 맞춥니다.
사용할 모델을 고르고 이 모델의 이름을 기억해 놓아야 합니다.
이미지 모델 : google/gemma-3-27b-it:free
텍스트 모델 : openai/gpt-oss-120b:free
작업중인 폴더를 터미널로 실행한 후 claude code 를 실행합니다.
/init작업 환경을 처음 상태로 만드는 명령
| 상황 | /init 필요? | 이유 |
|---|---|---|
| 방금 프로그램 켰을 때 | 불필요 | 이미 깨끗한 상태 |
| 작업 중간에 새 작업 시작 | 필요할 수 있음 | 이전 맥락이 방해 |
| 이상한 답 반복 | 필요 | 세션 꼬였을 가능성 |
| 프로그램 재실행 후 | 보통 불필요 | 이미 리셋된 상태 |
OpenRouter에서 받은 API 키를 .env 파일로 저장했어. 이 키를 안전하게 사용할 수 있도록 준비해 줘.
프로그래밍 언어를 선택하라는 선택창이 나와서 파이썬을 선택했습니다.
이제 준비된 API가 실제로 작동하는지 테스트해 줘.
이미지 인식은 google/gemma-3-27b-it:free 모델을 이용하고,
텍스트 인식은 openai/gpt-oss-120b:free 모델을 이용할 거야.
API를 통한 텍스트와 이미지 인식을 각각 테스트해서 실행 결과를 알려줘.
데이터 학습 허용이 켜져 있는데 왜 이런 메시지가 뜨는지 모르겠네요.
OpenRouter는 요청을 모델 단위가 아니라 “엔드포인트 정책” 기준으로 막습니다.
잘못된 요청도 권한 문제처럼 반환하는 경우가 많아서 “무료 모델은 학습 허용 필요” 같은 메시지가 진짜 원인이 아닌데도 튀어나오는 경우가 있습니다.
아래를 쭉 내려가 보니 사용할 수 없는 모델에 openai/gpt-oss-120b:free 가 있습니다.
무료 모델이 Unavailable 되는 이유는 보통 이 중 하나입니다.
- 무료 크레딧 소진
- 일시적 공급 중단
- 계정 신뢰도 / 지역 / 트래픽 제한
- OpenRouter 내부 정책 변경
- ZDR / Privacy 설정 변경 이력으로 인한 제한
특히 gpt-oss-* (free) 계열은 가장 먼저 막히는 무료 모델이라 자주 이렇다고 하네요.
Meta: Llama 3.3 70B Instruct (free) 로 변경해서 다시 테스트합니다.
이제 준비된 API가 실제로 작동하는지 테스트해 줘.
이미지 인식은 google/gemma-3-27b-it:free 모델을 이용하고,
텍스트 인식은 meta-llama/llama-3.3-70b-instruct:free 모델을 이용할 거야.
API를 통한 텍스트와 이미지 인식을 각각 테스트해서 실행 결과를 알려줘.
성공했습니다! 모델 선택도 신중히 해야겠군요…
‘냉장고를 부탁해’ 앱 만들기
냉장고 사진을 업로드하면 식재료를 인식하고, 그 재료로 만들 수 있는 레시피를 추천하는 앱.
복잡한 앱은 작은 단위로 나누어 점진적으로 개발하여 문제 발생 시 바로 수정 가능하도록 합니다.
이미지 인식 모델 : google/gemma-3-27b-it:free
텍스트 인식 모델 : meta-llama/llama-3.3-70b-instruct:free
3단계 개발 계획
- PRD_step1.md : 이미지 인식
- PRD_step2.md : 레시피 생성
- PRD_step3.md : 레시피 저장
claude -c이전 작업에 그대로 이어서 작업하게 하는 명령어.
앞서 만든 OpenRouter API를 이용해서, 냉장고 사진에서 재료를 인식하고 레시피를 추천하는 웹 애플리케이션
을 만들고 싶어. 다음과 같이 3단계로 나누어서 PRD를 만들어 줘.
1단계는 이미지를 입력받고 google/gemma-3 -27b-it:free 모델을 사용해서 이미지를 인식해.
2단계는 1단계에서 얻은 정보와 meta-llama/llama-3.3-70b-instruct:free 모델을 사용해서 레시피를 생성해.
3단계는 사용자 프로필을 만들어서 레시피를 저장해.
각 단계를 PRD_step1.md, PRD_step2.md, PRD_step3.md로 나누어 저장해 줘
어우 갈수록 오래걸리기 시작했습니다.
중간에 에러들이 막 뜨고 난리였는데 1단계부터 이러니까 조금 긴장됩니다.
예제사진을 넣어보니까 정말 인식이 됩니다? 와우 신기!
근데말이죠, 레시피를 확인해보면 한자도 섞여 있고 오타도 있고 영 완벽하지가 않습니다.
일단 계속해서 진행해보죠.
메인 애플리케이션을 실행해서 1단계의 결과를 테스트해 줘.
2단계까지 실행하고 테스트까지 끝마쳤습니다.
CLAUDE.md 파일에 가이드 라인을 추가해 줍니다.
OpenRouter API를 이용해서 실제 AI 모델이 이미지를 인식하고 레시피를 생성하게 해줘.
매번 실행할 때마다 API가 정확히 작동했는지, AI 모델이 문제없이 실행되었는지를 파악하고, 문제가 있다면 어떤 문제가 있었는지를 보고해.
현재 프로젝트의 CLAUDE.md 내용을 확인해 줘.
지금까지 만든 앱을 방금 저장한 가이드라인을 참고해서 점검해 줘.
가이드라인에 따라 정확하게 상태를 테스트해서 보고해줘.
이미지 분석에 실패하면 실패했다고 정직하게 웹 브라우저에 표시하게 해줘.
완성도가 영… 맘에 안드는군요.
남은 3단계까지 전부 실행하고 테스트했습니다만, 어색한 한국어와 한자는 그대로 입니다.
MBTI 관련 앱을 기획 중이었는데, AI 기능을 넣을까 말까 고민중이었거든요?
이렇게 완성도가 떨어진다면 수작업을 해야할지도 모르겠네요.
핵심 키워드 정리
- API : 프로그램 간 통신을 위한 다리, 통신 규칙
- 오픈라우터 : 여러 AI 모델 API를 한 곳에 모은 통합 플랫폼
- API 키 : 사용자를 인증하는 비밀 열쇠
- .env / .gitignore : API 키 저장 및 보안 관리 파일
- 다중 AI 모델 연동 : 이미지 인식 + 텍스트 생성 모델 함께 활용
- PRD 단계별 개발 : 복잡한 앱을 작은 단위로 나누어 점진적 구현
