# 35,000줄짜리 요리 앱을 Vibe 코딩해봤어요 > Clean Markdown view of GeekNews topic #20109. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=20109](https://news.hada.io/topic?id=20109) - GeekNews Markdown: [https://news.hada.io/topic/20109.md](https://news.hada.io/topic/20109.md) - Type: GN+ - Author: [xguru](https://news.hada.io/@xguru) - Published: 2025-04-03T09:41:51+09:00 - Updated: 2025-04-03T09:41:51+09:00 - Original source: [recipeninja.ai](https://www.recipeninja.ai) - Points: 18 - Comments: 1 ## Summary 창업자 출신 투자자가 20시간의 Vibe 코딩으로 개발한 요리 앱으로, 음성 비서를 통해 손을 사용하지 않고 레시피를 탐색할 수 있는 기능을 핵심으로 합니다. Windsurf를 활용해 Rails 8 백엔드와 React 프론트엔드를 구축했으며, OpenAI의 실시간 음성 API와 Claude Code, Gemini 2.5 Pro를 사용해 35,000줄 규모의 앱을 완성했고, 사진 기반 레시피 가져오기, 사용자별 저장 등 기능을 빠르게 구현했습니다. 생산성 향상은 폭발적이었으나, 자동 테스트 부족, 중복 코드 리팩토링 미흡, API 응답 형식 변경으로 인한 문제 등 한계도 드러났으며, 향후 WebSocket 스트리밍과 음성 에이전트 강화를 계획 중입니다. ## Topic Body - 창업자 출신 투자자가 20시간 바이브코딩 작업으로 개발한 요리 앱 - 핵심 기능은 요리 중 손을 사용하지 않고도 조작할 수 있는 **음성 비서** - Rails 8 API 백엔드 + React 프론트엔드 + OpenAI의 실시간 음성 API - OpenAI의 **함수-호출** 기능을 활용하여 사이트 내 실시간 탐색 가능 - **Claude Code**와 **Gemini 2.5 Pro**를 사용해 복잡한 기능 보완 - 전체 코드 규모는 약 **35,000줄** - 음성 명령을 통해 사용자가 직접 손을 대지 않고 다양한 레시피 탐색 가능 - 자연스러운 대화형 인터페이스 제공 - 취미 프로젝트로 시작했지만, 실제로 유용한 기능과 사용자 경험을 갖춘 수준 높은 결과물이 나옴 ### [Vibecoding으로 요리 앱 완성하기](https://tomblomfield.com/post/778601470234918912/vibecoding-a-production-app) - 단 20시간 만에 직접 기획하고 만든 요리 앱 [recipeninja.ai](https://www.recipeninja.ai) - 작성자는 스타트업 창업자 출신으로 현재 Y Combinator 소속 투자자이며, 2015년 이후 Ruby를 거의 사용하지 않은 **'녹슨 개발자'** - 평소 요리를 즐기며 “핸즈프리 요리 앱” 아이디어를 오랫동안 보관해왔음 - 기존 요리 웹사이트는 **SEO 중심**, 앱들도 UX가 오래되었고, Paprika 같은 앱은 2009년 느낌 그대로라는 불만 #### 도구 선택과 프로젝트 시작 - 초반에는 Lovable을 이용해 단어 게임 앱을 시도했으나 한계에 부딪힘 - 이후 Windsurf를 사용해 Rails 8 API 백엔드 + React 프론트엔드 구성 - Homebrew, npm, Ruby 버전 설정, SSH 키, Heroku 설정까지 자동화 - Rails 마이그레이션도 표준 규칙에 맞게 자동 처리됨 #### 기본 기능 개발 - “Lasagne”처럼 간단한 입력으로 전체 레시피 생성 - OpenAI를 통한 레시피 텍스트 생성, ElevenLabs를 통한 음성 생성 - 단계별 음성 가이드와 이미지 출력 기능 탑재 - 보안 위험을 감지한 Windsurf가 API 키 노출 방지를 강하게 요구하는 모습도 인상적이었음 #### 기능 확장 및 반복적인 개발 흐름 - 사진 기반 “고급 레시피 가져오기” 기능을 수분 내 구현 - 콘솔 로그나 에러 메시지를 복붙하면 Windsurf가 자동으로 수정 - Google OAuth 연동 시 설정 스크린샷을 붙여넣자 잘못된 부분을 바로 캐치해줌 - 사용자별 레시피 저장, 공개/비공개 설정 등 기능 추가도 거의 자동으로 이루어짐 #### 배포 및 DNS 설정 - Heroku 배포 자동화, 일부 구버전 API 사용 문제는 문서 링크로 해결 - GoDaddy 도메인 연결도 버튼 누를 위치와 값까지 알려줘 손쉽게 설정 완료 #### AI 도구로서의 Windsurf 사용 경험 - 일부 기능은 직접 curl 요청이나 웹 미리보기를 실행해 테스트함 - Git 커밋과 Heroku 배포도 내장 터미널에서 자동 처리 - 다만 과도한 변경이나 확인 없는 커밋은 사용자 개입 필요 - 분석 기능 추가 요청 시 100개 이상의 이벤트를 추가해버리는 등 과잉 반응 #### 아쉬운 점 및 보완점 - 자동 테스트 기능이 없어 코드 변경 후 직접 테스트 필요 - 로그 tail 기능이 없어 로그를 수동 복사해 넣어야 N+1 쿼리 등을 감지함 - 중복 코드 리팩토링은 제대로 작동하지 않음 — 기능 유지하면서 코드만 모듈화하려면 구체적인 지시 필요 - API 응답 형식이 자주 변경되어 프론트엔드가 깨지는 문제 발생 - Posthog 분석 도입 실패, 음성 명령이 기존 음성과 충돌하는 문제도 발생 #### 성능 최적화 및 비용 절감 - 고해상도 이미지 문제 → 썸네일 및 중간 해상도 버전 자동 생성 - N+1 문제 자동 수정 - ElevenLabs API 키 백엔드로 이전 및 음성 캐싱 기능 추가로 비용 절감 #### 폭발적인 생산성 향상 - 매 세션마다 10~15개 기능 아이디어를 리스트업하고 30분 안에 모두 구현 - 기존이라면 몇 시간 걸릴 작업이 **1~2분 안에 구현** - 디자인 개선도 스크린샷으로 지시만 하면 시각적으로 완성도 높은 UI 생성 - DoorDash 앱의 캐러셀을 참고해 유사 디자인 구현 — 오히려 더 보기 좋다는 평가도 받음 #### 마무리 작업과 보안 이슈 - Favicon 설정도 Bash 스크립트로 자동화 - Twitter 게시 후 수백 명의 사용자 방문, 약 1,000개 레시피 생성 - 하지만 abuse 사용자에 의해 OpenAI 요금 $700 발생 - Windsurf가 15개의 방어 전략을 제시해, 10분 만에 대부분 적용하고 문제 해결 #### 향후 계획과 기술적 전망 - WebSocket 기반 **스트리밍 레시피 생성** 기능 도입 예정 - 예: “견과류 추가해줘”, “8인분으로 바꿔줘”, “미터법으로 변환해줘” 같은 지시를 실시간 반영 - 음성 에이전트 인터페이스도 구축 예정 — 화면 터치 없이 요리 중 질문 가능 - 예: “고수 없는데 대체할 재료 있어?”, “30분 타이머 설정해줘” - 기술적 배경이 있는 사용자에게는 **AI 도구가 슈퍼파워**가 되어줌 - 비개발자도 활용 가능한 방향으로 발전 중: 로그 tailing, 자동 테스트, 버전 관리 통합 예정 - 가까운 미래에는 코드 작성 95%가 AI에 의해 이뤄지는 시대 도래 가능성 언급 --- ### RecipeNinja 주요 기능 요약 - 핵심 개념: 이 앱은 단계별 음성 안내를 제공하는 **요리 보조 애플리케이션**으로, 사용자가 손을 사용하지 않고도 요리를 진행할 수 있도록 지원함 #### 백엔드 기능 (Rails API 기반) - # 사용자 인증 및 권한 관리 - Google OAuth 연동을 통한 로그인 기능 - 보안이 강화된 사용자 계정 관리 - 사용자는 자신의 비공개 레시피에만 접근 가능하며, 공개된 레시피만 타인과 공유 가능 - # 레시피 관리 기능 - 레시피 모델 구성 - 보안성을 위한 고유 공개 ID 부여 (형식: `r_` + 14자리 난수 문자열) - 사용자 소유권 명확화 (user_id 필드, NOT NULL 제약) - 레시피 공개/비공개 전환 가능 (기본값: 비공개) - 제목, 재료, 요리 단계, 조리 시간 등 다양한 정보 저장 - Active Storage와 S3를 활용한 이미지 업로드 기능 포함 - 태그 시스템 - 레시피와 태그 간 다대다(M:N) 관계 구성 - 태그는 고유 이름을 갖는 별도 모델로 구현 - 레시피-태그 간 연결을 위한 중간 모델(RecipeTag) 사용 - 태그 추가 및 제거를 위한 헬퍼 메서드 제공 - 레시피 API 엔드포인트 - CRUD 작업 지원 - 페이지네이션 기능 및 메타데이터 제공 (current_page, per_page 등) - 기본 정렬은 생성일 기준 최신순 (created_at DESC) - 태그 필터링 기능 지원 - 목록과 상세 정보를 각각 다른 시리얼라이저로 출력 (RecipeSummarySerializer, RecipeSerializer) - # 음성 생성 기능 - 음성 녹음 시스템 - 각 레시피 단계에 대한 음성 안내 생성 - Eleven Labs API 연동으로 텍스트를 음성으로 변환 - 음성 파일은 S3에 캐싱되어 반복 호출 시 API 비용 절감 - 레시피 ID, 단계 ID, 음성 ID를 조합한 고유 식별자 생성 - 음성 파일 강제 재생성 기능 제공 - 오디오 처리 - `streamio-ffmpeg` gem을 이용해 오디오 분석 수행 - Active Storage로 오디오 파일 관리 - 운영 환경에서는 S3를 활용한 저장 방식 적용 - # 레시피 가져오기 및 생성 - RecipeImporter 서비스 - OpenAI 연동을 통한 자동 레시피 생성 - 텍스트 기반 레시피를 구조화된 형식으로 변환 - 재료 및 단계를 정규화 및 파싱 처리 - 사진을 통한 레시피 가져오기 기능 포함 #### 프론트엔드 기능 (React 기반) - # 사용자 인터페이스 구성 요소 - 레시피 선택 및 탐색 - 페이지네이션이 적용된 레시피 목록 조회 - 10초 간격의 실시간 업데이트 기능 - 태그 기반 필터링 기능 제공 - 이미지 없이 요약 정보가 표시되는 레시피 카드 제공 - 각 레시피에 대해 “상세 보기” 및 “요리 시작” 버튼 제공 - # 레시피 상세 보기 - 전체 레시피 정보 출력 - 레시피 이미지 표시 - 클릭 가능한 태그 목록 제공 - 해당 페이지에서 직접 요리 시작 가능 - # 요리 중 인터페이스 - 단계별 요리 가이드 제공 - 각 단계에 대해 음성 안내 지원 - 핸즈프리 조작을 위한 키보드 단축키 지원: - 방향키(←/→): 단계 이동 - Space 키: 음성 재생/일시정지 - ESC 키: 레시피 목록으로 돌아가기 - URL 경로를 통한 단계 추적 가능 (예: `/recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1`) #### 상태 관리 및 데이터 흐름 - # Recipe Service - API를 통해 레시피 데이터 불러오기 - 페이지네이션 파라미터 지원 - 태그 기반 필터링 기능 - 레시피 데이터 캐싱 메커니즘 적용 - 상세 보기에서 사용할 이미지 URL 처리 기능 - # 인증 흐름 - 환경변수를 활용한 Google OAuth 연동 - 사용자 세션 관리 - API 요청 시 인증 헤더 자동 처리 #### PWA(Progressive Web App) 기능 - 다양한 기기에서 설치 가능한 PWA 형태 제공 - 모든 화면 크기에 대응하는 반응형 디자인 적용 - Favicon 및 앱 아이콘 지원 #### 배포 아키텍처 - # 이중 앱 구조 - `cook-voice-api`: Heroku에 배포된 Rails 백엔드 - `cook-voice-wizard`: Heroku에 배포된 React 프론트엔드 및 PWA - # 백엔드 인프라 - Ruby 3.2.2 버전 사용 - Heroku PostgreSQL 애드온을 통한 데이터베이스 구성 - Amazon S3를 활용한 파일 저장 - 환경변수를 이용한 설정 관리 - # 프론트엔드 인프라 - React 기반 애플리케이션 - 환경변수 설정으로 API 키 등 민감 정보 관리 - Heroku의 정적 빌드팩 사용 - SPA(Single Page Application) 라우팅 구성 - # 보안 조치 - HTTPS 강제 적용 - Rails Credentials 시스템 사용 - 민감 정보는 환경변수로 분리 - DB ID 대신 공개용 Public ID 사용으로 내부 구조 보호 ## Comments ### Comment 36672 - Author: neo - Created: 2025-04-03T09:41:51+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=43553031) * 인상적임. 35 kLOC는 상당한 양임. 이 앱이 얼마나 직관적이고 유지보수 가능한지 궁금함. 소스를 살펴봐야 할 것임. 좋은 Rails 코드는 간결하지만, 프론트엔드는 상당히 방대할 수 있음 * 자동화된 테스트와 네이티브 버전 관리가 구현되면 몇 달 내에 가능할 것이라는 의견은 다소 낙관적임. 그러나 결국에는 모두 가능할 것임 * 비기술적인 사람들이 프로덕션 품질의 앱을 작성할 수 있는 강력한 도구라는 의견에 대해, 비기술적인 사람들이 로그 테일링이나 버전 관리를 생각할 이유가 없다고 봄. AI가 유능한 코더가 되는 것뿐만 아니라, 제품 관리 언어를 소프트웨어 개발 언어로 번역할 수 있는 유능한 아키텍트와 시니어 SWE가 되어야 함. 이는 인간 팀과 비슷한 신뢰성을 갖추기 위해 상당한 도전이 될 것임 * Diarrhea Walnuts 레시피를 만들었는데 호두 알레르기가 있어서 문제가 생겼다는 의견. 법적 조치를 취할 것임 * Claude Code가 유용하다는 의견. 그러나 o1 Pro가 디버깅에 더 뛰어나다고 봄 * Claude Code는 시간이 지나면 문제를 해결하지만, o1 Pro를 더 자주 사용하게 됨 * o1 Pro와 Claude Code를 비교했을 때, o1 Pro가 더 빠르게 문제를 해결했음. 그러나 Claude Code의 변경 사항을 커밋했으며, o1의 피드백을 사용해 Claude가 잡지 못한 문제를 해결함 * Jian Yang과 Big Head가 새로운 앱을 만드는 것 같다는 의견 * 레시피 간소화 웹사이트를 작성한 경험이 있어, 이 프로젝트가 재미있다고 봄. 유지보수 프로젝트에서 엔지니어의 주요 가치는 맥락이라고 생각함. 맥락을 기계에 완전히 넘기면 어떻게 될지 궁금함 * 작업 요청을 받았는데, 다른 엔지니어가 이미 대부분의 코드를 작성해 하루 만에 완료할 수 있었음 * 대규모 실험에 동의하며 감사함. Cursor 같은 시스템이 대량의 코드가 거의 사용되지 않는 상황을 어떻게 처리할지 궁금함. 3k LOC가 실수로 중복되면 자동화 시스템이 이를 이해하고 수정할 수 있을지 의문임 * OpenAI의 실시간 API를 사용한 음성 응답에 대해, 앱이 인기를 끌면 비용 문제로 파산할 수 있다는 우려가 있음. OpenAI 오디오 API를 다른 경우에 사용할 계획이 있어, 이와 관련된 전략이 궁금함 * 웹사이트에서 재료를 어디서 구할 수 있는지 알려주는 'vibecode'를 만들 수 있는지에 대한 질문. 특정 재료를 찾기 어려움 * 레시피가 재미있지만, AI가 생성한 것임을 알게 되면 그 창의성이 사라진다는 의견. Comprehensive JavaScript Tutorial이 가장 마음에 듦 * 주요 기능이 음성 제어인지에 대한 질문. 다른 인기 있는 레시피 웹사이트와 비교했을 때 이 앱을 선택할 이유가 궁금함. 주로 엔지니어링/AI 테스트를 위한 연습인지에 대한 의문 * 제목에 NSFW를 추가해야 한다는 의견. 첫 페이지에 NSFW 레시피가 50% 이상임