혼자 공부하는 바이브 코딩 with 클로드 코드 | 조태호 | 한빛미디어 - 예스24
하버드의과대학교수, 국회의원, 실리콘밸리 벤처캐피탈 창립파트너 등 국내외 전문가 강력 추천!코딩 몰라도, 아이디어만 있으면 앱을 만드는 시대를 위한 실습형 AI 코딩 입문서저자 직강 유튜
www.yes24.com
✅5주 차 진도: Ch 06 ~ 07
- 🚶기본 미션(필수)
- PROJECT 9. 냉장고를 부탁해 앱 만들고 캡처하기
⠀
- 🏃추가 미션(선택)
- AI 에이전트 팀 구축하기
- AI 디자인 에이전트를 활용해 냉장고를 부탁해 앱 UX 디자인 개선하고 캡처하기
|
code-reviewer로 ‘냉장고를 부탁해’ 애플리케이션 코드 전체를 리뷰한 뒤, 발견한 문제를 performance-optimizer가 수정해서 성능 최적화한 다음, ux-designer가 사용자 경험을 개선하게 해 줘
|
Chapter 06 클로드 코드에 API 날개 달기
06-1 클로드 코드에서 API 설정하기
API의 개념과 활용 방법
- API: Application Programming Interface
AI 모델 선택하기
- OpenRouter
- API 키 발급하기
- 무료 AI 모델 탐색
- 이미지 인식 AI 모델 탐색
- 텍스트 생성 AI 모델 탐색
AI 모델 연결하고 테스트하기
- API 키 등록하기
|
이제 준비된 API가 실제로 작동하는지 테스트해 줘.
이미지 인식은 google/gemma-3-12b-it:free 모델을 이용하고,
텍스트 인식은 openai/gpt-oss-20b:free 모델을 이용할 거야.
API를 통한 텍스트와 이미지 인식을 각각 테스트해서 실행 결과를 알려줘.
|
06-2 클로드 코드와 API로 만드는 ‘냉장고를 부탁해’
애플리케이션 구현을 위한 PRD 작성하기
|
앞서 만든 OpenRouter API를 이용해서, 냉장고 사진에서 재료를 인식하고 레시피를 추천하는 웹 애플리케이션
을 만들고 싶어. 다음과 같이 3단계로 나누어서 PRD를 만들어 줘.
1단계는 이미지를 입력받고 google/gemma-3-12b-it:free 모델을 사용해서 이미지를 인식해.
2단계는 1단계에서 얻은 정보와 openai/gpt-oss-20b:free 모델을 사용해서 레시피를 생성해.
3단계는 사용자 프로필을 만들어서 레시피를 저장해.
각 단계를 PRD_step1.md, PRD_step2.md, PRD_step3.md로 나누어 저장해 줘
|
| 각 단계 요약 1단계: 이미지 업로드 → AI 재료 인식 → 재료 목록 편집 2단계: 재료 + 옵션(요리종류/난이도/시간) → AI 레시피 생성 → 최대 3개 추천 3단계: 회원가입/로그인 → 레시피 저장 → 즐겨찾기/히스토리 관리 |
1단계: 냉장고 이미지에서 재료 인식하기
2단계: 레시피 생성하기
3단계: 사용자 프로필에 레시피 저장하기
Chapter 07 클로드 코드 AI 에이전트로 개발팀 구성하기
07-1 클로드 코드의 AI 에이전트 이해하기
- 에이전트
나의 첫 에이전트, 코드 리뷰어
- 클로드 코드 서브에이전트
- 코드 리뷰어 에이전트 생성하기
| 코드 리뷰어: 코드를 읽고 버그는 없는지, 코딩 규칙에 따라 올바르게 작성되었는지를 점검하고 성능 최적화를 제안하는 전문 코드 품질 검토자. |
| code-reviewer에게 냉장고를 부탁해 어플리케이션 코드를 검토하게 해줘. |
최적화 에이전트
UX 디자인 에이전트
서브에이전트 협업 테스트하기
|
code-reviewer로 ‘냉장고를 부탁해’ 애플리케이션 코드 전체를 리뷰한 뒤, 발견한 문제를 performance-optimizer가 수정해서 성능 최적화한 다음, ux-designer가 사용자 경험을 개선하게 해 줘
|
