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

📚 17기 노션n8n롱폼

✍️ Gmail 알림 지옥에서 벗어난 나만의 자동화 여정

Khai

하려던 것 📝

• Gmail의 수많은 메일을 자동 필터링하고 요약해서 텔레그램으로 받아보는 사례

• 메일 폭탄에 시달리는 상황을 개선하고자 함

• 중요 메일만 골라보고 쉽게 관리하는 시스템 구축하고자 함

활용한 툴 ⚒️

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

• Google Gemini: 메일 내용 요약

• Telegram: 알림 수신 및 피드백 처리

• Gmail API: 메일 조회 및 처리

진행 세부 내용 🔍

1️⃣ Gmail 연동 및 필터링

• Gmail Trigger로 5분마다 새 메일 감지함

• 자바스크립트로 광고/스팸 필터링 구현함

• 블랙리스트 기반 발신자/제목 필터링 적용함

2️⃣ 메일 요약 시스템 구축

• Google Gemini와 LLM Chain 활용하여 한글 요약 생성함

• 상세한 시스템 프롬프트 작성하여 일관된 요약 포맷 유지함

• 개인정보 및 불필요 정보 제외 로직 구현함

3️⃣ 텔레그램 알림 시스템

• 요약된 메일 내용을 텔레그램으로 전송함

• 보관/삭제/별표 기능 버튼 추가함

• 버튼 클릭 이벤트에 따른 메일 처리 자동화함

시행착오 ⚠️

• 워크플로우 공유 기능 오류 발생함

• 첨부파일 처리 방법 개선 필요함

📚 17기 CTO

✍️ 비개발자의 진짜 바이브코딩 모바일앱 제작기; (Onboarding) 수면건강 진단 기능 only

Sylvie Kim

하려던 것 📝

• 수면무호흡증 환자를 위한 맞춤형 회복 플랫폼 SOOMi를 개발하는 사례

• 치료 효과를 실감할 수 있는 직관적인 UI/UX 설계

• 수면 병원과 협업하여 테스트베드 진행

활용한 툴 ⚒️

• Bolt PRD GPT: PRD 문서 초안 작성

• Bolt: 프로토타입 제작

• SOOMi Communicator: 콘텐츠 생성

• GitHub: 리포지토리 관리

• Cursor: 코드 에디팅

진행 세부 내용 🔍

1️⃣ 기획 및 설계

• Bolt PRD GPT를 활용하여 초기 기획안을 작성함

• 수면 데이터를 감정과 컨디션 중심으로 표현하는 UX 설계함

2️⃣ 개발 환경 구축

• React와 TypeScript 기반의 프로젝트 세팅함

• Zustand, Tailwind CSS, Framer Motion 등 주요 라이브러리 설정함

3️⃣ 프로토타입 제작

• Bolt를 활용하여 온보딩 플로우 프로토타입 제작함

• 모바일 퍼스트 UX 적용하여 반응형 디자인 구현함

시행착오 ⚠️

• 온보딩 화면의 과도한 텍스트 문제 발생

• 사용자 회복 경험 설계의 어려움 직면

• Git 커밋/푸시 등 개발 루틴 미정착

📚 17기 n8n실전예제

✍️ [ 17기 n8n 실전예제 ] 텔레그램봇 만들고 n8n 연결해 이미지 추출하기 (성공)

코리원

하려던 것 📝

• 일본어 교과서 공부 과정을 텔레그램 봇과 이미지 인식으로 자동화한 사례

• 매일 하는 일본어 학습 루틴을 효율화하고자 함

• 교과서 이미지에서 텍스트를 추출하여 학습 자료로 활용하고자 함

활용한 툴 ⚒️

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

• Telegram Bot: 이미지 입력 채널로 활용

• OpenAI Analyze Image: 이미지 텍스트 분석

• Claude: 문장 해석 및 문법 설명 생성

진행 세부 내용 🔍

1️⃣ 텔레그램 봇 연동

• 텔레그램 봇을 통해 교과서 이미지 수신 기능 구현함

• n8n과 텔레그램 봇 연동 설정함

2️⃣ 이미지 처리 과정

• HTTP Request로 file id 추출함

• 실제 이미지 다운로드를 위한 HTTP Request 구현함

• image/jpeg 라벨링을 위한 코드 추가로 mime 에러 해결함

3️⃣ 텍스트 추출 및 가공

• 어학 특화 Claude 모델로 이미지 텍스트 정리함

• Basic LLM Chain으로 추출 텍스트 가공함

시행착오 ⚠️

• JSON 형식 이해와 에러 처리에 많은 시간이 소요됨

• mime 에러로 인한 추가 코드 작성이 필요했음

📚 17기 프리랜서n8n

✍️ 그 끝은 원대할 B2B 교육 제안서 자동화를 꿈꾸며 (w/t n8n & Lovable)

윤누리

하려던 것 📝

• 교육 요청부터 제안서 발송까지 자동화하여 운영 효율을 높이려는 사례

• 반복적인 교육 요청 처리 업무 자동화함

• 맞춤형 교육 제안서 자동 생성 및 발송 시스템 구축함

활용한 툴 ⚒️

• Airtable : 교육 요청 데이터베이스 구축 및 설문 폼 생성

• n8n : 워크플로우 자동화 설정

• OpenAI API : 맞춤형 커리큘럼 추천

• Lovable : 랜딩페이지 제작

• GPTs : PRD 작성

• GitHub & Cursor : 코드 수정 및 관리

진행 세부 내용 🔍

1️⃣ 데이터베이스 구축

• Airtable Omni 기능으로 교육 요청 테이블 생성함

• 커리큘럼 모듈 테이블에 더미 데이터 구성함

• 설문 폼 자동 생성하여 데이터 수집 준비함

2️⃣ 자동화 워크플로우 설정

• webhook으로 폼 제출 감지 기능 구현함

• OpenAI API 연동하여 커리큘럼 추천 로직 구현함

• HTML 형식의 자동 이메일 발송 시스템 구축함

3️⃣ 랜딩페이지 개발

• GPTs로 기획서 작성 후 Lovable로 구현함

• GitHub 리포지토리 연동 및 Cursor로 코드 수정함

• Airtable 폼 임베딩 완료함

시행착오 ⚠️

• n8n 유료 플랜 제약으로 실제 테스트 진행하지 못함

• 이메일 템플릿 디자인 개선 필요함

• 실제 커리큘럼 데이터 미반영 상태임

📚 17기 Cursor웹앱

✍️ windsurf로 구현하는 API 및 Password 관리 프로그램 만들기

케네스

하려던 것 📝

• API 키와 웹사이트 비밀번호를 안전하게 관리하는 데이터베이스 기반 웹 프로그램 개발 사례

• 개인 사용 목적의 보안 관리 도구 개발

• API 키와 비밀번호의 안전한 저장 및 관리 기능 구현

활용한 툴 ⚒️

• Product Requirement Documents Writer GPT: PRD 문서 작성

• Cursor: GUI 구현

• SQLite: 데이터베이스 구현

진행 세부 내용 🔍

1️⃣ PRD 작성

• Product Requirement Documents Writer GPT를 활용하여 상세 요구사항 문서 작성

• API 키 관리, 비밀번호 관리, 보안 기능 등의 요구사항 정의

2️⃣ 기능 구현

• 로그인 페이지 구현

• API 키 관리 기능(추가/업데이트/삭제) 구현

• 웹사이트 비밀번호 생성 및 관리 기능 구현

• 원클릭 복사 기능 추가

시행착오 ⚠️

• 내용이 부족하여 요약하지 못했습니다

📚 17기 카톡봇뉴스레터

✍️ "카카오톡은 원래 이렇게 쓰는 것이다" n8n webhook으로 '무한확장 자동화봇' 만드는 비법.. 이 글을 본 후 당신의 카톡은 24시간 일하는 비서가 됩니다 🚨💀

샘호트만

하려던 것 📝

• 카카오톡 메시지를 n8n 웹훅으로 연동하여 자동 응답 기능을 구현한 사례

• 메신저봇과 n8n을 활용한 워크플로우 자동화 구축

• RAG 기반 질의응답 시스템을 카카오톡에 연동하여 지식 공유

활용한 툴 ⚒️

• n8n : 웹훅 워크플로우 구축

• 메신저봇 : 카카오톡 자동화 구현

• Claude : Rhino JS 코드 작성 및 수정

• Cursor : 코드 개선 및 디버깅

진행 세부 내용 🔍

1️⃣ n8n 웹훅 워크플로우 구축

• Webhook, Edit Fields, Respond to Webhook 노드 구성

• 웹훅 트리거 설정 및 응답 포맷 정의

• 테스트/프로덕션 URL 분리 운영

2️⃣ 메신저봇 Rhino JS 코드 구현

• Claude와 Cursor를 활용한 코드 작성

• 웹훅 연동 코드 버전별 테스트 및 디버깅

• 설정 부분 커스터마이징 (봇 이름, 웹훅 URL, 대상 채팅방 등)

3️⃣ RAG 시스템 연동

• 세일즈 관련 유튜브 영상 자막 데이터 수집

• FastAPI 서버로 STT 처리 및 번역

• 벡터DB 구축 및 질의응답 시스템 연동

시행착오 ⚠️

• Rhino JS 코드 구현 과정에서 빈 메시지 전송 문제 발생

• 메신저봇 오류 메시지 ("개발자에게 문의하세요") 해결 과정

• 웹훅 body/query 파라미터 전달 문제 해결

📚 17기 Figma

✍️ 피그마 스터디

정민_

하려던 것 📝

• 피그마 메이크를 활용한 UI 자동화 및 프로토타이핑에서 배포까지 연결하는 사례

• 디자이너-개발자 간 커뮤니케이션 시간 단축

• AI 기반 디자인 자동화로 생산성 향상 가능성 확인

활용한 툴 ⚒️

• Figma Make: UI 디자인 자동화

• Claude: 디자인 프롬프트 작성 및 개선

• Replit: 웹앱 배포 플랫폼

진행 세부 내용 🔍

1️⃣ 피그마 기초 학습

• 디자인 템플릿을 활용하여 기본 기능 학습함

• AI 도입 흐름을 디자이너 관점에서 이해함

2️⃣ 피그마 메이크 실습

• 블랙 & 화이트 기반의 심플한 스타일 특징 파악함

• 프롬프트와 레퍼런스 조합으로 원하는 스타일 구현함

3️⃣ 프로젝트 관리 서비스 UI 제작

• 개발 목표 설정부터 결과물 확인까지 전 과정 실습함

• 디자인-퍼블리싱 자동화 가능성 확인함

시행착오 ⚠️

• GPT 대비 Claude가 디자인 프롬프트 작성에 더 효과적임을 발견함

• 프롬프트와 레퍼런스의 명확한 정의가 결과물 퀄리티에 큰 영향을 미침