🏆 AI스터디 15기 3주차 베스트 사례 큐레이션 - AI개발

📚 15기 크롬익스텐션

✍️ 크롬 익스텐션 클론하는 세가지 방법

성장피터

요약

• AI 도구로 크롬 익스텐션 기능을 클론하는 사례

• Vibe Coding 중 특정 기능의 클론/벤치마킹을 위한 AI 도구 활용

• 🍯 클론 과정에서 수도코드와 AI의 Work with 기능을 적극 활용하면 생산성을 높일 수 있다.

활용 툴

• Chrome Extension Source Viewer - 크롬 익스텐션 소스 코드 다운로드용

• Cursor IDE - 코드 이해 및 분석용

• ChatGPT Desktop - AI를 통한 코드 맥락 이해 및 작성 지원

진행 방법

1. 소스 코드 다운로드 (Chrome Extension Source Viewer 사용)

2. 소스 코드 폴더 열기 (Cursor IDE 활용)

3. 기능 클론/벤치마킹 (Code 복사, Pseudocode 생성 또는 ChatGPT Work with 기능 사용)

4. 필요한 코드 복사 및 붙여넣기 (개발자 이해 기반)

5. 수도코드 요청 및 해당 코드 구현 (비개발자 위한 Pseudocode 활용)

6. Work with 기능 통한 코드 학습 및 작성 요청 (ChatGPT 활용)

📚 15기 앱스스크립트

✍️ [G.A.S] 초등학교 배정 아파트단지 표시 서비스

청소반장

요약

• 초등학교 배정 아파트단지를 지도에 표시하는 서비스를 만든 사례

• 예비 초등학생 학부모를 위해 아파트와 초등학교 정보를 지도에 표시하여 도움을 주고자 함

• 🍯 API 활용 계획을 세울 때, 실제 구현 전 철저한 사전 지식을 쌓는 것이 중요하다.

활용 툴

• Google Apps Script - 프론트엔드 개발

• Excel-GoogleDrive/Googlesheet - 데이터베이스 관리

• Google Gemini, Claude, ChatGPT - 프롬프트 코딩 및 서비스 구체화

진행 방법

1. 초등학교 및 배정 아파트단지 데이터 수집 (공간데이터마켓/공공데이터포털 활용)

2. 데이터 정리 및 통합 (Python 코드로 데이터 병합, vscode 사용)

3. 서비스 기획 (스마트대디의 GPTs 참고하여 서비스 방향 설정)

4. 프롬프트 코딩 (Claude를 시작으로 ChatGPT, Gemini 순으로 코딩)

5. 지도 API 설정 시도 (네이버 및 카카오 API 검토, 구글 API 준비)

6. 초등학교 입력값 시나리오 작성 (API 실패 대비 시나리오 준비)

7. 코드 수정 및 데이터 연동 (code.js 및 index.html 조정, 구글 시트에 데이터 업로드)

📚 15기 n8n에이전트

✍️ n8n + Gemini 로 일본 화장품 회사 뉴스레터 자동 요약 & 메일링 시스템 만들기

제이드

요약

• 일본 화장품 회사의 뉴스를 자동 요약 및 발송한 사례

• 일본어 사이트의 빠른 업데이트에도 불구하고 뉴스피드나 수동 검색의 불편함을 자동화가 해결함

• 🍯 자동화로 정보 수집의 효율성을 극대화하면 인적 자원을 절약할 수 있다.

활용 툴

• n8n - 전반적인 워크플로우 자동화

• HTTP Request + HTML Extract - RSS 없는 뉴스사이트 크롤링

• RSS Read - 피드 기반 뉴스 수집

• Google Gemini - 기사 요약 및 번역

• Gmail - 이메일 발송

진행 방법

1. RSS 피드 뉴스 수집 (피드 사용하여 뉴스 데이터 수집)

2. 뉴스 데이터를 JSON 형태로 가공 (코드로 정리)

3. AI로 뉴스 요약 및 번역 실행 (Google Gemini 활용)

4. 번역 결과 HTML 이메일로 가공 (코드로 변환)

5. 비피드 뉴스 사이트 크롤링 (HTTP Request로 데이터 획득)

6. 뉴스 링크 리스트 추출 (HTML Extract로 변환)

7. 뉴스 세부 URL 생성 (상대경로를 절대경로로 변경)

8. 각 뉴스 상세 페이지에서 데이터 추출 (뉴스 본문 등 확보)

9. 뉴스 요약 및 번역 처리 (AI Agent로 진행)

10. 번역된 뉴스 HTML 이메일로 가공 (코드 정리)

11. 두 경로의 결과 통합 (Merge Tool로 통합)

12. 이메일 전송 (Gmail로 뉴스 발송)

📚 15기 노코드버블

✍️ 버블 AI가 만들어 준 다국어 XML 종량제 서점, GPT로 커스터마이징 과제 찾기

최원혁

요약

• AI를 활용해 다국어 XML 종량제 서점을 운영한 사례

• 다국어 콘텐츠 수요증가에 대응하기 위해 AI 번역 도구를 활용해 사이트 구축 및 커스터마이징을 시도함

• 🍯 AI 활용 시 문제를 미리 파악하고 해결책을 찾는 데에서 큰 도움이 된다.

활용 툴

• 버블 AI - 사이트 구축 및 번역 기능 제공

• GPT - 시스템 구조 이해 및 DB 문제 해결 조언

진행 방법

1. 사이트 구성 이해 (버블 AI가 생성한 사이트의 구조를 조사)

2. 서비스 구성도 및 DB 구조 그림 획득 (GPT 통해 사이트 구조 파악)

3. Admin 계정 문제 해결 (버블 구조에서 admin 역할 설정 확인)

4. 자료 업로드 테스트 (admin으로 로그인 후 XML 자료 업로드 시도)

5. 기존 데이터 불러오기 문제 진단 (GPT로 문제 원인 파악)

6. 과금 연동 문제 파악 (버블 AI의 기존 과금 시스템 분석)

7. 서비스 단순화 조언 수집 (구글스튜디오AI의 요약 기능 활용 방법 논의)

📚 15기 CTO

✍️ GPT와 n8n으로 자동 문서 정리해보려다 날린 이야기

이사라

요약

• GPT와 n8n을 활용하여 자동 문서 정리 시스템을 구축한 사례

• 수작업 없이 자동으로 노트를 정리해주는 시스템을 구축했으나, 저장 전 새로고침으로 데이터가 소실된 문제가 발생

• 🍯 자동화 시스템에서는 중간 저장과 복원 기능을 중점적으로 고려하는 것이 중요하다.

활용 툴

• n8n - 워크플로우 자동화

• GPT - 문장 요약 및 마크다운 문서 생성

• Obsidian - 노트 저장

진행 방법

1. 사용자 문장을 입력 (채팅창에 한 문장 입력)

2. n8n으로 프롬프트 전달 (문장 정보를 GPT로 전송)

3. GPT가 마크다운 형식 반환 (정리된 문서 생성)

4. n8n으로 노트 저장 준비 (마크다운 내용 저장 준비)

5. 최종 저장 전 새로고침 (데이터 소실 발생)