혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch6 - (2)
[바이브코딩] 클로드 코드(Claude Code)로 '냉장고 레시피 추천 Web' 뚝딱 만들어봤습니다!
안녕하세요! 앵그리비버's IT를 부탁해의 앵그리비버입니다. 🦫✨
요즘 개발자 커뮤니티에서 가장 핫한 키워드가 뭔지 아시나요? 바로 **'바이브 코딩(Vibe Coding)'**과 **'클로드 코드(Claude Code)'**입니다! 명령만 몇 줄 던져주면 알아서 기획서(PRD)를 나누고, 백엔드 서버부터 프론트엔드 UI까지 한 번에 뚝딱 만들어준다니... 저도 궁금해서 가만히 있을 수 없었죠.
그래서 지난주에 터미널을 열고 **"냉장고 사진을 올리면 AI가 재료를 인식해서 레시피를 추천해주는 웹 서비스"**를 직접 만들어봤습니다! 결론부터 말씀드리면? 생각보다 너무 빠르고 똑똑합니다... 약간 무섭기도 하네요...
💡 기획은 3단계로! PRD 나누기
Claude Code CLI 환경에서 **"OpenRouter API를 이용해 냉장고 사진을 인식하고 레시피를 추천하는 3단계 PRD를 작성해줘"**라고간단히 프롬프트를 입력했더니, 클로드가 프로젝트 구조를 자동으로 파악하고 PRD_step1.md, PRD_step2.md, PRD_step3.md 파일로 정리해주더라고요. 작성 내용을 요약해서 보여주는 꼼꼼함까지 보여주네요!
- Step 1: 냉장고 이미지 인식 (OpenRouter를 통한 Gemma 3 27B Vision API 연동 & 재료 태그 추출)
- Step 2: AI 레시피 생성 및 추천 UI (인식된 재료 기반 레시피 3개 생성, 필터링, 재생성)
- Step 3: 회원가입/로그인 & 레시피 저장 (JWT 인증, FastAPI + SQLite 데이터베이스 구축)
Step 1 구현 명령을 내리니, FastAPI 기반의 서버와 HTML/CSS/JS 프론트엔드가 순식간에 생성되었습니다. `http://localhost:8000`에 접속해보면 보시는 것처럼 깔끔하고 모던한 카드 형태의 파일 업로드 UI가 나타납니다. 냉장고 사진을 끌어다 놓거나 클릭해서 업로드하면 실시간으로 미리보기 창이 뜹니다.
📸 냉장고 사진 한 장으로 시작되는 마법
깃허브 예제에 있던 냉장고 사진(냉장고.jpg)을 업로드하고 '재료 인식하기' 버튼을 눌렀습니다. `gemma-3-27b-it:free` 비전 모델이 작동합니다. 분석이 끝나면 계란, 토마토, 오이, 양상추, 귤 등 인식된 식재료들이 파란색 태그 형태로 자동 생성됩니다! 사용자가 원하는 대로 태그를 삭제하거나 밑에 입력창에서 직접 추가할 수도 있어 편의성이 아주 뛰어납니다.
(참고) 냉장고 사진 다운로드 받는 곳 - 링크
스케일링 로딩이 지나더니 계란, 당근, 토마토, 양상추, 오이 등 16가지 식재료를 기가 막히게 뽑아내더군요! 추출된 태그 중 잘못된 게 있다면 클릭해서 X로 삭제하거나 직접 입력해서 추가할 수 있는 수동 편집 기능까지 깔끔하게 구현되었습니다.
🍳 진짜 요리법까지 추천해 준다고?
인식된 재료를 바탕으로 **'레시피 추천받기'**를 누르면 `recipe.html` 페이지로 이동합니다. AI가 '계란 샌드위치', '메추리알 장조림', '오이 토마토 샐러드' 같은 실생활 레시피 카드를 만들어줍니다. 조리 시간, 난이도, 상세 조리법 모달창까지 제공되니 진짜 당장 요리하고 싶어지더라고요!
- **계란 샌드위치** (15분 / 쉬움)
- **메추리알 장조림 & 귤** (25분 / 보통)
- **오이 토마토 샐러드** (10분 / 쉬움)
각 카드에서 **'조리법 보기'**를 누르면 모달 창으로 단계별 요리 순서가 나오고, **'저장'** 버튼을 누르면 회원 계정에 저장되는 로직까지 완벽하게 연동됩니다.
🍳 추천 레시피를 마이페이지에 저장까지!
마이페이지 & 조리법 모달 (`mypage.html`)
- 로그인 후 마이페이지로 가면 내가 저장한 레시피 목록(최신순 정렬)이 나열됩니다.
- 레시피를 클릭하면 팝업 모달이 열리면서 **필요 재료 목록**과 **1-2-3 단계별 조리 순서**를 한눈에 확인할 수 있습니다!
### Q1. 개발 언어를 전혀 몰라도 명령만으로 완성되나요?
**A. 네, 정말 가능합니다! 하지만 '프로젝트 흐름'은 알고 계셔야 합니다.**
이번 프로젝트에서도 제가 직접 친 코드는 단 한 줄도 없었습니다. 전부 터미널에서 "Step 1 프론트엔드 만들어줘", "429 에러 처리해줘", "Step 3 로그인 DB 만들어줘" 같은 자연어 프롬프트뿐이었죠.
다만 '기획 -> 이미지 인식 API 연동 -> 레시피 생성 -> DB 저장'이라는 전체적인 서비스 구조를 머릿속으로 그리실 수 있다면 훨씬 더 원하는 결과물에 가까워집니다!
### Q2. 중간에 오류가 나면 어떻게 해결하나요?
**A. 에러 메시지를 그대로 복사해서 Claude에게 보여주면 끝납니다.**
무료 AI API 특성상 429 Rate Limit 에러나 서버 통신 502 에러가 간혹 발생했는데요. 터미널의 Claude Code는 자신이 실행한 명령의 결과와 에러 로그를 스스로 감지합니다. 터미널에서 Claude가 알아서 에러 로그를 분석하고 예외 처리를 추가해 준 덕분에 금방 해결할 수 있었습니다.
### Q3. 실제 완성된 앱의 퀄리티는 어떤가요?
**A. 토이 프로젝트나 스타트업 MVP(최소 기능 제품) 수준으로 손색없습니다.**
사진 업로드, 태그 수정 UI, 모달창 조리법 보기, 조리시간/난이도 필터링, 회원가입 JWT 보안까지 단 몇 시간 만에 완벽하게 동작하는 웹 앱이 나왔습니다. 디자이너가 없어도 CSS 프레임워크를 활용해 깔끔한 라이트모드 UI를 뽑아내 주더라고요.
단순히 코드 몇 줄 짜주는 수준을 넘어, 프로젝트 전체 스택을 설계하고 완성시켜주는 경험이 정말 대단하네요. 여러분도 냉장고 속 남은 재료 처리하기 난감하셨다면, 클로드 코드로 나만의 레시피 앱 한 번 만들어보시는 건 어떨까요?
오늘도 즐거운 바이브코딩 하세요! 파이팅! 🔥