🏆 AI스터디 20기 4주차 베스트 사례 큐레이션 - 바이브코딩&업무

📚 20기 클코자동화

✍️ 바이브코딩으로 프론트엔드, 백엔드, 결제 시스템까지 완성하기

보리랑수수

하려던 것 📝

• AI 툴을 활용하여 소상공인 상세페이지 자동 생성 웹사이트를 구축한 사례

• 웹사이트를 처음부터 끝까지 직접 구현하는 것을 목적으로 함

• 바이브코딩 방식을 적용하여 웹 개발 과정을 학습하고자 함

• 수익화까지 연결 가능한 구독형 서비스 웹사이트를 완성하고자 함

활용한 툴 ⚒️

• Claude Code (Opus 4.5): 코드 작성 및 수정, 웹 페이지 개발, 보안 취약점 점검에 활용함

• Firebase Studio: 개발 환경 설정 및 코드 관리, Resend API 연동에 활용함

• CloudFlare: 개발된 웹사이트를 무료로 배포하고 GitHub와 연결하는 데 활용함

• GitHub: 프로젝트 코드 저장소로 활용함

• Resend: 이메일 API를 활용하여 결과 리포트 전송 및 Supabase SMTP 설정에 활용함

• Toss Payments: 웹사이트의 결제 시스템을 구현하는 데 활용함

• Supabase: 데이터베이스 구축, 회원 가입/로그인, OAuth(소셜 로그인) 기능 구현에 활용함

• Gemini: 상품 상세페이지에 필요한 레포트 및 상품 이미지를 생성하는 데 활용함

• Google Cloud: 구글 소셜 로그인을 위한 OAuth 클라이언트 설정 및 관리에 활용함

진행 세부 내용 🔍

• React + Vite 기반의 Serverless 환경을 설정하고, Firebase Studio에 가입함

• GitHub 레포지토리를 생성하고 Claude Code를 설치하여 개발 환경을 마련함

• Cloudflare에 가입하고 GitHub 레포지토리와 연결하여 배포 준비를 마침

2️⃣ 상품 상세페이지 화면 디자인 및 생성 기능을 구현함

• 소상공인을 위한 상품 상세페이지 서비스를 만들기 위해 제품 사진, 상품 설명, 가격을 입력하는 화면을 Claude Code에 요청하여 구성함

• Gemini API를 연동하여 최신 데이터 업데이트, 미리보기 환경, 로컬 실행 기능을 구현함

• 드래그 앤 드롭으로 사진을 업로드하는 기능을 추가하였으며, Gemini를 활용하여 AI가 보고서 내용을 토대로 상세페이지를 자동 생성하도록 디자인함

• 생성된 상세페이지(3x3)에서 이미지 생성 실패 문제가 발생하였으나, 관련 프롬프트를 통해 코드를 수정하여 해결함

3️⃣ 결제 시스템을 연동함

• 웹사이트에 결제 시스템을 붙이기 위해 처음에는 Polar를 시도했으나 진행이 어려워 토스페이먼츠로 변경하고, 중간에 포스원도 검토했다가 최종적으로 토스페이먼츠 가이드 문서를 참고하여 구현함

• Claude Code에 토스페이먼츠 가이드 문서를 제공하고 결제 시스템 구현을 요청하여 기능을 개발함

• 현재는 테스트 결제 시스템으로 운영되고 있음을 확인함

4️⃣ 이메일 전송 기능을 구현함

• Resend.com에 가입하여 이메일 전송 서비스를 활용할 준비를 함

• 도메인(localshopaihub.com)을 가비아에서 등록하고, Resend API 문서를 참고하여 API 키를 Firebase Studio 작업 폴더에 저장함

• Claude Code에 Resend API를 이용하여 결과 리포트를 이메일로 전달하는 기능 구현을 요청하여 개발을 완료함

5️⃣ 회원 가입 및 로그인 기능을 구현함

• Supabase에 가입하고 프로젝트를 생성하여 데이터베이스와 인증 시스템을 구축함

• Claude Code에 Supabase 문서를 참조하여 회원 가입 및 로그인 기능 구현을 요청하고, 구현 후 테스트를 진행함

• 초기에는 인증 이메일 발송이 지연되거나 멈추는 문제가 발생했으나, 이는 Supabase의 무료 요금제 Rate Limits(시간당 2명 가입 제한) 때문이었음을 확인하고, Resend를 SMTP로 연결하여 이메일 전송 제한을 3,000건까지 늘려 해결함

6️⃣ 소셜 로그인 및 마이페이지 기능을 구현함

• Supabase의 인증 설정에서 Google Auth Providers를 활성화하고 Google Cloud Platform에서 새로운 프로젝트를 생성함

• Google Cloud에서 OAuth 클라이언트 ID를 생성하고, 승인된 JavaScript 원본(배포 URL)과 승인된 리디렉션 URI(Supabase Callback URL)를 설정함

• 생성된 구글 클라이언트 ID와 보안 비밀번호를 Supabase에 등록한 후, Claude Code에 Supabase 구글 로그인 문서를 참조하여 구글 로그인 기능 구현을 요청함

• 마이페이지 기능(내 정보, 비밀번호 재설정, 탈퇴)을 구현하기 위해 Claude Code에 요청하여 개발하고, 회원 탈퇴 시 Supabase의 접근 권한을 가진 삭제 함수를 만들고 Access Token을 활용하여 구현함

7️⃣ 보안 취약점 점검을 진행함

• 개발 과정 중 수시로 Claude Code에 '지금 보안취약점 점검해줘' 프롬프트를 사용하여 보안 사항을 점검하며 개발을 진행함

📚 20기 린디에이전트

✍️ 워크플로우를 넘어서 결과물로... 린디 AI 경쟁사 판매가 분석 자동화 완성기

조유진

하려던 것 📝

• 경쟁사 판매가 데이터를 수집하고 구글 스프레드시트에 자동 누적한 사례

• 기존 워크플로우에서 결과가 끊기거나 저장되지 않아 자동화가 불완전했던 문제를 해결하고자 함

• 실행 시 결과가 끝까지 실행되고, 그 결과가 외부 저장소(구글 스프레드시트)에 자동으로 누적되는 구조를 완성하고자 함

• 이를 통해 수집된 데이터가 일관된 형태로 자동으로 쌓이도록 하여 진정한 자동화를 구현하고자 함

활용한 툴 ⚒️

• 린디 (Lindy) : 워크플로우 자동화 및 구축

• 클로드 (Claude) : 컬럼명 정의 및 순서 강제 지정을 위한 도움

• 구글 스프레드시트 (Google Spreadsheet) : 자동화된 결과물의 외부 저장소로 활용

• ChatGPT (Agent Step 내부) : 경쟁사 판매가 데이터 수집 및 정리

진행 세부 내용 🔍

• 1️⃣ 3주차 워크플로우의 한계 파악함

• 기존에는 'Message Received → Agent Step (ChatGPT가 경쟁사 판매가 수집 및 정리) → 결과 텍스트 출력' 흐름으로 워크플로우가 구성되어 있었음

• 하지만 토큰 부족으로 중간에 출력이 끊기거나, 실행 결과를 저장할 곳이 없어 매번 새로운 저장 결과가 생성되는 문제가 있었음

• 2️⃣ `Append rows` 액션을 추가하여 자동 저장 구조를 구축함

• 기존 워크플로우에 'Google Spreadsheet – Append rows 액션 노드'를 추가하여 최종 흐름을 'Message Received → Agent Step → Append rows'로 변경함

• 이 변경을 통해 워크플로우 실행 시 결과가 구글 스프레드시트에 바로 누적되기 시작함

• 3️⃣ 예상치 못한 컬럼 정렬 문제를 인지함

• `Append rows`를 추가했음에도 불구하고, 원하는 컬럼 순서대로 행이 스프레드시트에 들어가지 않는 문제가 발생함

• 문제의 원인은 자동화 도구가 한글 컬럼명을 이해하지 못하고, 영어 알파벳 순으로 정렬하는 방식으로 작동하고 있었기 때문임을 파악함

• 4️⃣ 컬럼명을 영문으로 강제 정의하여 문제 해결 및 결과물 누적을 확인함

• 클로드의 도움을 받아 컬럼명을 '영문 접두어 + 컬럼명(영문버전)' 형식으로 변경함 (예: `a_seller (판매처)`, `b_price (가격)` 등)

• 사용한 프롬프트는 `각 행은 반드시 다음 필드 순서를 따라야 합니다:\n1. a_seller (판매처)\n2. b_price (가격)\n3. c_stock (재고상태)\n4. d_option (옵션)\n5. e_shipping (배송비)\n6. f_link (링크)` 임

• 이 해결책으로 `Append rows`가 의도한 순서 그대로 행을 추가하기 시작했으며, 결과물이 안정적으로 누적되는 것을 확인했음

• 이제 [상품명]을 입력하고 [실행 버튼]만 누르면 항상 같은 포맷의 결과가 스프레드시트에 누적되는 자동화를 완성함

📚 20기 CTO

✍️ 한글 속청 웨이브 파일을 유튜브 대신 원음 그대로 듣는 앱 개발

오쌤_oSam

하려던 것 📝

• 대충영어 회원들에게 웨이브 TTS 음원 제공 웹앱 개발 사례

• 대충영어 회원들이 웨이브(WAV) TTS로 제작한 파일을 음질 손상 없이 들을 수 있도록 웹앱을 만들고자 함.

• 유튜브 음원(AAC 포맷, 48kHz 샘플링)이 두뇌 인지 부하를 초래하여 에너지 소모가 많다는 연구 결과가 있으며, 전문 음악 서비스들이 무손실 음원을 사용하는 배경이 있었음.

• 음질 손실 없이 고품질 음원을 사용자에게 제공하여 학습 효율을 높이고자 함.

활용한 툴 ⚒️

• typecast: WAV 음성 파일 제작에 활용함.

• vrew: WAV 음원에 자막을 추가하고, 다빈치 리졸브로 내보내기 위한 전처리 과정에 활용함.

• 다빈치 리졸브 (DaVinci Resolve): 영상 제작(MOV) 및 음원 코덱을 Linear PCM으로 설정하여 고품질 음원이 포함된 영상 제작에 활용함.

• 파이어베이스 (Firebase) 스토리지: 제작된 영상을 업로드하고 웹앱을 통해 음질 손실 없이 청취할 수 있도록 서비스하는 데 활용함.

진행 세부 내용 🔍

• 1️⃣ Typecast로 WAV 음성 제작

• 시도한 방법: typecast 서비스를 활용하여 음성 파일을 생성함.

• 사용한 프롬프트나 코드: (내용이 부족하여 요약하지 못했습니다)

• 발생한 문제와 해결 방법: (내용이 부족하여 요약하지 못했습니다)

• 얻은 결과나 피드백: 음성 다운로드 시 MP3 대신 WAV 포맷을 선택하여 원음 손실 없는 음성 파일을 제작함.

• 2️⃣ Vrew로 자막 추가 및 내보내기

• 시도한 방법: Vrew 데스크탑 버전을 사용하여 제작된 WAV 음원에 자막을 정리함.

• 사용한 프롬프트나 코드: (내용이 부족하여 요약하지 못했습니다)

• 발생한 문제와 해결 방법: (내용이 부족하여 요약하지 못했습니다)

• 얻은 결과나 피드백: 자막이 추가된 파일을 DaVinci Resolve로 내보내기 위한 준비를 마침.

• 3️⃣ 다빈치 리졸브로 영상 제작

• 시도한 방법: Vrew에서 내보낸 파일을 다빈치 리졸브에서 사용하여 영상을 제작함.

• 사용한 프롬프트나 코드: (내용이 부족하여 요약하지 못했습니다)

• 발생한 문제와 해결 방법: (내용이 부족하여 요약하지 못했습니다)

• 얻은 결과나 피드백: 내보내기 시 음원 코덱을 Linear PCM으로 선택하여 음질 손실 없는 MOV 형식의 영상을 제작함.

• 4️⃣ 파이어베이스 스토리지에 영상 업로드 및 웹앱 연동

• 시도한 방법: 제작된 MOV 영상을 파이어베이스 스토리지에 업로드함.

• 사용한 프롬프트나 코드: (내용이 부족하여 요약하지 못했습니다)

• 발생한 문제와 해결 방법: (내용이 부족하여 요약하지 못했습니다)

• 얻은 결과나 피드백: 웹앱을 통해 업로드된 영상을 음질 손실 없이 청취할 수 있도록 연동하는 과정을 진행함.

📚 20기 맞춤형자동화

✍️ 로그인, 결제, 동영상 재생까지 만들어본 EduVibe 강의 판매 플랫폼 구축기

뭉게뭉게

하려던 것 📝

• AI 툴을 활용하여 결제 가능한 강의 판매 사이트를 구축한 사례

• 결제 가능한 강의 판매 사이트를 직접 구축함.

• 교육사업 홍보·모집 자동화 및 랜딩페이지 고도화 계획 중, 개발 방향을 변경하여 결제 기능 구현에 흥미를 느껴 LMS 사이트 구축으로 전환함.

• 강의 판매에 필요한 핵심 기능(결제, 로그인, 동영상 재생, 관리자 페이지 등)을 전반적으로 구현하여 실제 서비스 가능한 형태를 만듦.

활용한 툴 ⚒️

• ChatGPT : PRD 작성 및 Lovable 프롬프트 재작성

• Lovable : LMS 초안 및 핵심 기능(로그인, 결제, 관리자 페이지) 구현, GitHub 연동, 소스 코드 관리, Supabase 연동

• Gemini : 관리자 페이지 구현을 위한 Lovable 프롬프트 작성

진행 세부 내용 🔍

• ChatGPT에 LMS 개발 전문가 역할을 부여하여 `EduVibe`의 프론트엔드 중심 PRD 작성을 요청함.

• `당신은 LMS(Learning Management System) 개발 전문가입니다. 첨부된 그림은 참조하세요. 저는 EduVibe를 개발하고 싶습니다. PRD를 작성해 주세요. PRD에는 프론트 엔드 중점으로 작성해 주세요.\n\n첨부파일 : xxx교육센터` 프롬프트를 사용하며 첨부파일 참조가 더 좋은 방법임을 확인함.

• PRD를 Lovable 프롬프트 형식으로 재작성하도록 ChatGPT에 요청함.

• `당신은 Lovable 프롬프트 전문가입니다. Lovable 프롬프트로 다시 작성해 주세요.` 프롬프트를 활용함.

2️⃣ Lovable 프롬프트 실행

• ChatGPT로 작성된 Lovable 프롬프트를 실행하여 `EduVibe`의 초안을 구현하고, GitHub를 연동하여 프롬프트 실행 시마다 Commit이 되어 소스 코드 관리를 용이하게 함.

• 일반 로그인 및 구글 ID 로그인을 구현함.

• 토스페이먼트 개발자센터 문서를 참조하여 결제 기능을 구현 요청했으나, 첨부한 `javascript-node.zip` 파일을 Lovable이 인식하지 못하는 문제가 발생함. 하지만 Lovable과의 티키타카를 통해 에러를 해결하고 zip 파일 없이도 기능이 구현됨을 확인함.

• '수강 신청하기' 버튼 로직과 데이터베이스 연동을 위해 슈도코드로 프롬프트를 작성했으며, `if ('로그인이 됨' == 참 && '본인 수강 강의' == 거짓) ...` 프롬프트를 통해 백엔드 데이터베이스 생성 및 결제 정보 저장을 포함한 두 가지 기능이 성공적으로 구현됨.

3️⃣ 관리자 페이지 프롬프트 작성(Gemini)

• `eduvibe` 관리자 페이지 생성을 위한 Lovable 프롬프트 작성을 Gemini에 요청하면서 기존 소스 코드를 zip 파일(`eduvibe-flow-main.zip`)로 첨부했으나, 파일 개수(10개 이상) 제한으로 Gemini가 인식하지 못하는 문제가 발생함.

• 이 문제를 해결하기 위해 GitHub repository를 private에서 public으로 변경한 후 Gemini에 GitHub repository를 추가하여 관리자 페이지 프롬프트 작성을 요청함.

4️⃣ 관리자페이지 구현(Lovable)

• Gemini가 생성한 관리자 페이지 프롬프트를 Lovable에 실행하여 관리자 페이지를 구현함.

• 좌측 사이드바와 함께 대시보드(총 사용자 수, 매출액, 강좌 수 등 통계 차트), 회원 관리(Supabase 'profiles' 테이블 연동), 강좌 관리(새 강좌 등록 및 수정 폼), 결제 및 수강 내역(Supabase 'enrollments' 테이블 연동) 등의 요구사항을 반영함.

• `현재 구축 중인 LMS 'eduvibe'의 관리자 페이지(/admin)를 새롭게 만들고 싶어. 다음 요구사항을 반영해서 구현해줘: ...` 와 같은 상세 프롬프트를 활용함.

5️⃣ 기타 사항

• 개발 중 에러 발생 시 크롬의 '개발자 도구' 콘솔을 활용하여 재프롬프팅으로 문제를 해결함.

• 한 화면에 표시되지 않는 긴 페이지를 캡처하기 위해 GoFullPage 크롬 확장 프로그램을 사용함.

• Supabase의 `courses`, `enrollments`, `lessons`, `profiles` 테이블 및 스토리지를 초기화하는 SQL 구문을 사용함.

• Lovable의 파일 올리기 기능으로 이미지를 분석하여 해당 내용에 적합한 파일명을 자동으로 추천받고, 코드가 꼬였을 때는 Revert 기능을 활용하여 이전 상태로 되돌림.

📚 20기 HRD자동화

✍️ [HRD자동화2]Typebot -헬스장 예약 make 연결 문자발송

거땅1

하려던 것 📝

• Typebot과 Make를 연동하여 헬스장 예약 문자 자동 발송을 구현한 사례

• 헬스장 예약 내용을 문자 메시지로 자동 발송하는 방법을 찾고자 함

• 이전에 예약 링크를 이메일로 발송했던 경험이 있음

• AI를 활용하여 Typebot과 Make의 연동 과정을 진행하고 싶어 함

활용한 툴 ⚒️

• ChatGPT: Typebot과 Make의 연결 과정 및 문자 발송 방법을 문의하고 안내받음

• Typebot: 예약 플로우를 생성하고 HTTP Request 블록을 활용하여 데이터 전송

• Make: Typebot으로부터 웹훅을 받아 문자 발송 모듈(쏠라피)과 연동하여 자동화 구현

• 쏠라피: Make를 통해 문자 메시지(SMS)를 실제로 발송하는 데 사용

진행 세부 내용 🔍

• 1️⃣ AI 활용하여 연동 방법 탐색함

• 2️⃣ Typebot에서 HTTP Request 블록을 설정함

• 3️⃣ Make에서 웹훅 및 쏠라피 모듈을 설정함

• 4️⃣ 연동 기능을 테스트하여 결과를 확인함

📚 20기 안드로이드앱

✍️ [멀티에이전트 프로젝트] 기계음 이상탐지2(모델 학습 및 성능 검증)

준PM

하려던 것 📝

• AI 멀티 에이전트 기반 이상탐지 모델 개발 자동화 사례

• 정제된 데이터를 바탕으로 실제 현장에서 작동하는 머신러닝 모델을 구축하고자 함.

• 구축된 모델의 과적합 방지 및 실무 환경 강건성을 검증하고자 함.

• 모델링 및 검증 전 과정을 자동화하여 최종 리포트까지 생성하고자 함.

활용한 툴 ⚒️

• `@model-master`: 최적의 머신러닝 모델 학습 및 구축을 수행함.

• `@validator-bot`: 구축된 모델의 강건성을 검증하고 과적합을 방지함.

• `@report-wizard`: 분석 리포트 생성 및 문서화 작업을 수행함.

• `@data-whisperer`: 데이터 준비 및 전처리 과정을 담당함 (전체 파이프라인에서 언급됨).

• `SMOTE`: 불균형 데이터를 해소하기 위해 활용함.

• `Random Forest`, `XGBoost`: 지도학습 모델로 선정하여 학습을 진행함.

• `pypandoc`: Markdown 문서를 Word로 변환하는 리포트 변환 스킬의 기반으로 활용됨.

• 슬래시 커맨드 `/all-in-one`: 전체 워크플로우를 한 번에 실행하는 파이프라인 자동화의 트리거로 사용됨.

진행 세부 내용 🔍

• 1️⃣ 전문가팀 소개 및 역할 부여

• 2️⃣ 머신러닝 모델 학습 수행

• 3️⃣ 모델 강건성 검증 및 과적합 방지

• 4️⃣ 최종 리포트 자동화 및 배포

• 5️⃣ 파이프라인 자동화 및 슬래시 커맨드 적용

📚 20기 AI스튜디오빌드

✍️ 초등생 생활습관 형성 앱-구글 시트에 데이터 저장까지 해 봄

기린꽃

하려던 것 📝

• 초등학생 자녀의 올바른 습관 형성을 돕는 앱 개발 사례

• 부모의 잔소리를 줄이고 아이가 스스로 습관을 점검하며 성취감과 재미를 느낄 수 있는 앱을 개발하고자 함.

• 구글 앱시트와 구글 시트를 활용하여 앱 기능을 구현하고 사용자의 활동 데이터를 저장하고자 함.

• 앱 활동 후 데이터가 자동으로 구글 시트에 전송되도록 구현하여 아이가 활동 내역을 확인하고 기록하는 습관을 형성하고자 함.

활용한 툴 ⚒️

• Google AppSheet: 초등학생 습관 형성 앱의 기능 및 사용자 인터페이스 구현

• Google Sheets: 앱 활동 데이터 저장 및 관리

• AI 기반 텍스트 생성 기능 (추정): '나를 칭찬해!' 메뉴의 칭찬 문구 자동 생성, '오늘의 깔깔 유머' 넌센스 퀴즈 생성

• AI 기반 이미지 생성/편집 기능 (추정): '오늘의 응원 친구' 및 '자기 전 체크' 시 달님 위 동물 이미지 구현 및 수정 시도

진행 세부 내용 🔍

• 1️⃣ 초등학생 습관 형성 앱 기획 및 개발을 착수함

• 2️⃣ 핵심 기능 구현 및 사용자 인터랙션을 설계함

• 3️⃣ 오늘의 모험 세션 기능을 개발하고 수정함

• 4️⃣ 추가적인 재미 및 동기 부여 기능을 도입함

• 5️⃣ 보상 시스템 및 데이터 연동을 구축함