Study
[5주 차] API 활용하기 『혼자 공부하는 바이브 코딩 with 클로드 코드』
by yousw1128
2026. 2. 7.
개요
- 이번 주엔 OpenRouter 사이트의 API를 이용해 이미지 인식을 활용한 레시피 추천 웹 페이지를 제작해 보았습니다.
🧊 냉장고를 부탁해 앱 만들기
API 준비
- 냉부앱? 냉장고 이미지를 넣었을 때, 재료를 파악하여 레시피를 제공하는 시스템을 구성할 겁니다.
- 여기서 이미지 인식용 AI와 결과에 활용할 텍스트 기반 AI의 API를 가져와줄 건데요.
- 교재와 똑같이 Gemma와 GPT API를 선택해 줬습니다.
- 영상에선 일련의 이유로 GPT를 활용하지 못했지만 저는 정상 작동해서 그대로 진행했습니다.
- 이번 강의에선 PRD를 오로지 CLI 화면에서 단계를 나누어 진행했는데요.
1. 이미지 인식 → 2. 레시피 생성 → 3. 레시피 저장
- 위 3단계를 각각 PRD_step1, 2, 3.md로 생성해 따라갔습니다.
Step 1. 이미지 인식
- 1단계 이미지 인식 부분에선 이렇게 사진을 넣을 수 있게 하는 기능을 구현했습니다.
- 근데 이름이 왜 냉장고 파먹기지..?
- 강의에서 주어진 입력 예제를 그대로 삽입해 주었고요.
- 여기서 분석을 누르면 어떤 재료가 어느 정도 있는지 파악을 하는 구조입니다.
- 지금까진 전부 완성을 한 상태로 글을 썼기에 중간 과정이 계속 스킵됐었죠?
- 큰 시행착오를 겪은 것도 아니고 굳이 필요한 부분은 아니라 안 넣었는데 원래는 이런 식으로 진행이 막혀요.
- 물론 첫 PRD에 이미 어느 정도 원하는 게 다 들어가 있으면 바로 되기도 하고요! 😎
Step 2. 레시피 생성
- 앞선 재료 리스트에서 레시피 추천을 누르면 본격적인 추천 앞에 카테고리를 고르게 됩니다.
- 한식, 양식, 중식, 일식 등 다양한 종류와 난이도, 인분까지 조절할 수 있는데..
- 솔직히 요리가 막막할 때 이런 AI를 항상 꿈꿨는데 생각보다 잘 만들어져서 신기했어요. 😮
- 아무튼 추천 레시피를 여러 개 받을 수 있고, 카테고리를 변경하거나 재료를 다시 고를 수 있네요.
- 이런 식으로 레시피를 클릭하면 상세하게 알려줍니다.
Step 3. 레시피 저장
- PRD 3단계를 진행시키니 팝업 맨 아래에 저장 버튼이 생겼습니다.
- 여기서 저장을 하려면 계정을 요구하더라고요!
- 이런 로그인 창이 구현돼있으면 여러 가지 검증해 보고 싶은 욕구가 생기지만 글이 길어지니 이번엔 참겠습니다.
- 회원가입을 완료하니 우측 상단에 프로필이 생겼고, 내 레시피를 모아두는 공간이 생겼어요.
- 몇 마디 말도 안 했는데 이렇게 고퀄리티의 웹 사이트가 뚝딱 만들어졌습니다!!
AI 에이전트로 냉부앱 UX 디자인 개선하기
AI 에이전트 생성하기
- AI 에이전트는 큰 틀만 정해져있으면 그 안에서 스스로 판단하며 작업을 수행합니다.
- 클로드 코드 자체가 AI 에이전트인 셈이죠.
- 그런데, 클로드에는 특별한 개념이 하나 더 있습니다.
서브 에이전트
- 서브 에이전트는 회사처럼 에이전트에게 역할을 부여하고 해당 역할만 수행하게 하는 AI 도우미입니다.
/agents
- 를 통해 생성을 시도할 수 있고, 에이전트가 만들어지면 이름을 지정해 작업을 시키면 됩니다.
- 명령어를 입력하면 위 화면을 볼 수 있습니다.
- 이 이후에 몇 가지 설정을 더 하게 되는데, 중요한 부분만 보자면!
- 가장 중요한 AI 설정 프롬프트고요.
- 여기서 이 에이전트는 누구고, 어떤 역할인지 지정하게 됩니다.
- 한글로 적으면 자동으로 영어 이름을 지어줘요 😎
- 혼란 방지용 색상을 고른 뒤 넘어가면 완성입니다.
에이전트 활용하기
- 이 과정을 통해 코드 리뷰어, 최적화 전문가, UX 디자이너 에이전트를 고용했습니다.
- 이때 프롬프트는? "🧑💼가 코드를 분석하고, 👨💻는 분석 결과를 토대로 최적화해. 🧑🎨는 UX디자인을 개선해 줘."와 같이 넣어주면 됩니다.
- 이번 프로젝트에 로그인 로직이 들어간 만큼 SQLI, DB 관련 취약점이나 기타 보안 위협을 막으려고 하네요.
- 이제 수정된 디자인을 봅시다!
- ...엥?
- 디자인이 똑같은데 무언가 잘못된 걸까요?
- 아닙니다. UX라는 건 눈에 보이는 디자인. 즉, UI를 수정할 뿐만 아니라
- 사용자의 행동(클릭, 마우스 움직임, 상호작용)까지 고려하기 때문에 눈에 보이는 디자인이 아닌 세밀한 부분이 수정되어 체감이 크게 안 되는 것입니다.
마무리
- 이렇게 AI 에이전트를 이용해 "냉장고를 부탁해" 앱을 만들어 보았습니다.
- API에 AI라니.. 웹에선 못 만들게 없을 것 같습니다.
- 다음 주가 벌써 마지막인데요. 빠른 시일 내에 돌아오겠습니다.
