🏆 AI스터디 17기 4주차 베스트 사례 큐레이션 - 개발&자동화

📚 17기 CTO

✍️ 공유 회의실 예약시스템 Vercel 배포

리부티너

하려던 것 📝

• Vercel을 통해 공유 회의실 예약 시스템을 배포하고 결제 기능을 추가하려 한 사례

• 기존 프로젝트의 안정적인 배포와 사용자 경험 개선을 목적으로 함

• 구글 로그인과 결제 시스템 통합을 통한 서비스 완성을 목표로 함

활용한 툴 ⚒️

• Vercel: 프로젝트 배포 및 환경변수 설정

• Supabase: 데이터베이스 연동

• Google Cloud Console: 소셜 로그인 설정

진행 세부 내용 🔍

• Github 저장소를 Vercel 프로젝트로 지정하여 배포 시작함

2️⃣ API Route 에러 해결

• Next.js 15 버전의 params 매개변수 변경으로 인한 에러 발생함

• 코드 수정을 통해 문제 해결함

3️⃣ 환경변수 설정

• Supabase 연동 에러 발생함

• Vercel 프로젝트 설정에서 환경변수를 수동으로 입력하여 해결함

4️⃣ 구글 로그인 구현

• Redirect\_URI 에러 발생함

• Google Cloud Console에서 도메인과 리디렉션 URI 추가로 해결함

📚 17기 노션n8n롱폼

✍️ AI 기반 쇼츠 자동화: n8n 해커톤에서 CU 행사 상품 홍보 영상 기획부터 영상 생성까지의 과정

지니_

하려던 것 📝

• CU 편의점 행사상품을 소개하는 쇼츠 자동 생성 시스템을 구축한 사례

• 상품 타겟 선정부터 대본 작성, 영상 제작까지 전 과정 자동화 구현함

• 시간 제약으로 기획과 영상 제작 부분에 집중하여 구현함

활용한 툴 ⚒️

• n8n : 워크플로우 자동화 구축

• elevenlabs : 나레이션 음성 생성

• flux-pro : 이미지 생성

• kling-video : 이미지를 영상으로 변환

• creatomate : 최종 쇼츠 영상 제작

• Google Sheets : 데이터 관리

진행 세부 내용 🔍

• 구글 시트에서 타겟 리스트 관리 및 상품 선정함

• 타겟과 상품 정보를 기반으로 대본을 작성함

• 각 단계의 output을 하나의 item으로 통합함

2️⃣ 영상 제작 영역

• elevenlabs로 대본을 나레이션으로 변환함

• LLM Chain으로 이미지 프롬프트를 생성함

• flux-pro로 상품 특성을 반영한 이미지를 생성함

• kling-video로 5초 영상을 제작함

• 효과음을 생성하고 영상과 병합함

3️⃣ SNS 자동 발행 영역

• 스케줄 업로드 및 첫 댓글 자동화 계획을 수립함

📚 17기 n8n실전예제

✍️ 매일 아침 4대 국내 주요 신문사 뉴스 요약본을 메일로 받아보기

해피매지션

하려던 것 📝

• 4대 국내 신문사의 뉴스를 하나의 이메일로 통합하여 자동으로 요약받는 사례

• 신문사별 다른 데이터 형식 통합과 접근 제한 해결하기

• 정보 과부하 해소와 업무 효율성 높이기

활용한 툴 ⚒️

• n8n: 전체 워크플로우 설계 및 실행

• RSS Read: 매일경제, 조선일보 뉴스 수집

• 네이버 뉴스 API: 한국경제, 한겨레 뉴스 수집

• Google Gemini: 뉴스 내용 요약

• Gmail: 최종 결과물 발송

진행 세부 내용 🔍

• RSS Read로 4개 언론사 피드 동시 수집 시도함

• HTTP Request로 본문 스크래핑 시도했으나 차단됨

• 웹사이트 403 Forbidden Error로 실패함

2️⃣ 2차 시도: 병렬 처리 방식 도입

• 4개 신문사 처리 라인을 독립적으로 구성함

• RSS와 네이버 뉴스 API 혼용 방식 도입함

• 동기화 문제로 일부 결과만 전송되는 현상 발생함

3️⃣ 3차 시도: 직렬 처리 방식으로 성공

• 이전 결과에 새로운 요약을 누적하는 방식 도입함

• Code 노드로 기사 개수 제한 및 HTML 형식 변환함

• 모든 신문사의 뉴스를 순차적으로 처리하여 성공함

📚 17기 카톡봇뉴스레터

✍️ 유명유튜바 클론 만들고 카톡 통합, RAG + 바이브코딩 등등 몸에 좋은거, 있어 보이는거 다 장착한 카톡봇 만들기

샘호트만

하려던 것 📝

• 해외 영상 컨텐츠를 자동으로 학습하고 질의응답할 수 있는 시스템을 구축한 사례

• 카카오톡에서 질문하면 관련 영상의 타임스탬프로 이동하여 학습 가능

• 유튜브 채널 크리에이터의 지식을 복제하고 활용하고자 함

활용한 툴 ⚒️

• n8n: 워크플로우 자동화 및 데이터 수집

• Supabase: 벡터 데이터베이스 저장

• msgbot: 카카오톡 메시지 처리

• lovable: 대시보드 구축

• GPT 4.1 mini/nano, Gemini 2.5 flash/flash-lite: 언어모델

• Apify: 유튜브 대본 수집

• 구글 문서: 보고서 저장

진행 세부 내용 🔍

• n8n을 이용해 대상 채널의 데이터를 bulk로 수집함

• 영상 제목, 설명, URL 등 기본 정보 획득함

2️⃣ 유튜브 대본 수집

• Apify를 활용하여 무료 한도 내에서 대본 데이터 수집함

• 1000개 이하 데이터 처리에 적합함

3️⃣ 대본 처리 및 맥락 생성

• 타임스탬프 정보를 추가하여 직접 이동 가능하게 함

• Anthropic의 Contextual Retrieval 방식 적용하여 맥락 강화함

• API Rate Limit 회피를 위해 배치 처리 구현함

4️⃣ 벡터 데이터베이스 구축

• Supabase에 청크, 맥락, 대본, 메타데이터, 임베딩 벡터 저장함

• n8n과의 호환성 문제로 다른 벡터DB 이관 검토 중임

5️⃣ 카카오톡 연동

• n8n wrapper를 이용해 카카오톡 봇 구현함

• 키워드별 다른 웹훅 주소 할당하여 분리 운영함

📚 17기 Figma

✍️ FigmaMake 164번 프롬프트 시도를 통해 얻은 교훈

진여진

하려던 것 📝

• FigmaMake에서 스크롤 애니메이션과 인터랙티브 배경을 구현한 사례

• DB 연결과 기능 구현을 중심으로 웹앱 개발을 진행함

• 프로젝트 등록, 로그인, 댓글 등 기본적인 CRUD 기능 구현함

활용한 툴 ⚒️

• FigmaMake: 웹 프로토타입 제작

• Firebase: 데이터베이스 구축

• Claude: 코드 작성 및 디버깅 참조

진행 세부 내용 🔍

• Firebase를 선택하여 KV Store 방식으로 데이터베이스 구현함

• 프로젝트 등록 CRUD 페이지를 구현함

• Google 생태계의 다양한 기능을 통합 활용함

2️⃣ 스크롤 애니메이션 구현

• App.tsx를 중심으로 스크롤 애니메이션 기능 구현함

• 공식 문서를 참조하여 모달 구조 문제를 해결함

• 디버깅을 통해 구현 완료함

3️⃣ 인터랙티브 배경 구현

• Claude를 통해 참조 코드를 먼저 생성함

• 생성된 코드를 FigmaMake에 적용함

• F12 개발자 모드를 통한 Element 디버깅으로 문제 해결함

📚 17기 프리랜서n8n

✍️ n8n 으로 유튜브 요약하여 쓰레드 포스팅 하기 - 2탄

써머_

하려던 것 📝

• 유튜브 영상 내용을 자동으로 요약하여 쓰레드에 포스팅하는 자동화 사례

• 격일로 AI가 요약한 유튜브 콘텐츠를 쓰레드에 자동 게시함

• 반복 작업을 효율적으로 처리하고자 함

활용한 툴 ⚒️

• n8n: 워크플로우 자동화 구축

• youtube-transcript.io API: 유튜브 영상 대본 추출

• Google Sheets: 데이터 관리 및 처리

• ChatGPT: 텍스트 요약

• Thread API: 포스팅 자동화

진행 세부 내용 🔍

• 격일 아침 8시 스케줄링 설정함

• 구글 시트에 유튜브 링크와 포스팅 체크값 관리함

2️⃣ 유튜브 영상 처리

• youtube-transcript.io API로 대본 추출함

• Code 노드로 텍스트 데이터만 필터링함

3️⃣ 콘텐츠 생성 및 포스팅

• ChatGPT로 대본 내용 요약함

• Thread API로 원글 1개와 댓글 3개 구조로 포스팅함

• auto_publish_text 옵션 활용함

4️⃣ 리팩토링

• Sub workflow로 기능 모듈화함

• 유튜브 링크 요약과 쓰레드 포스팅 기능 분리함

📚 17기 Cursor웹앱

✍️ 커서 AI 로 '스터디 플래너' 웹 사이트 만들어보기1 - PRD.MD와 TODO.MD로 개발 시작하기

상상러

하려던 것 📝

• 커서 AI를 활용하여 학생용 스터디 플래너 웹사이트를 개발한 사례

• 스터디 플래너 웹 개발을 위한 PRD.MD와 TODO.MD 작성부터 시작하여 로컬 구현까지 진행

• VITE+REACT 기반의 모바일/PC 호환 웹 애플리케이션 개발

활용한 툴 ⚒️

• Cursor AI: 코드 작성, PRD/TODO 문서 생성, 오류 해결

• Vercel: 웹사이트 배포

• Supabase: 데이터베이스 관리

• Node.js: 로컬 개발 환경

진행 세부 내용 🔍

• 역할 개선 프롬프트를 통해 AI의 전문성 정의함

• 아이디어 제안 프롬프트로 구체적인 요구사항 전달함

• PRD.MD와 TODO.MD 파일 생성 요청함

2️⃣ 개발 환경 설정

• VITE+REACT 기반 프로젝트 생성함

• .ENV 파일 수동 생성하여 Supabase 연동 설정함

• npm run dev 명령어로 로컬 서버 구동함

3️⃣ 오류 해결 및 UI 개선

• Tailwind CSS 관련 오류 수정함

• 경로 문제 해결을 위해 cd app 명령어 활용함

• UI 레이아웃 조정하여 가시성 개선함