▲

35,000줄짜리 요리 앱을 Vibe 코딩해봤어요

 (recipeninja.ai)
9P by GN⁺ 1일전 | ★ favorite | 댓글 1개
  • 창업자 출신 투자자가 20시간 바이브코딩 작업으로 개발한 요리 앱
  • 핵심 기능은 요리 중 손을 사용하지 않고도 조작할 수 있는 음성 비서
  • Rails 8 API 백엔드 + React 프론트엔드 + OpenAI의 실시간 음성 API
  • OpenAI의 함수-호출 기능을 활용하여 사이트 내 실시간 탐색 가능
  • Claude Code와 Gemini 2.5 Pro를 사용해 복잡한 기능 보완
  • 전체 코드 규모는 약 35,000줄
  • 음성 명령을 통해 사용자가 직접 손을 대지 않고 다양한 레시피 탐색 가능
  • 자연스러운 대화형 인터페이스 제공
  • 취미 프로젝트로 시작했지만, 실제로 유용한 기능과 사용자 경험을 갖춘 수준 높은 결과물이 나옴

Vibecoding으로 요리 앱 완성하기

  • 단 20시간 만에 직접 기획하고 만든 요리 앱 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 사용으로 내부 구조 보호
▲
GN⁺ 1일전  [-]
Hacker News 의견

  • 인상적임. 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% 이상임

답변달기