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

📚 15기 스트림릿입코딩

✍️ Cursor로 텍스트 게임 만들기 - 회사원 생존기

준철

요약

• Cursor를 활용해 텍스트 게임을 제작한 사례

• 게임 제작 가능성을 검토하고, 실제로 게임을 실행해보며 실행 오류 등을 해결하는 과정을 거쳤음

• 🍯 커서 도구와 함께 스트림릿으로 직관적인 UI를 제공할 수 있다.

활용 툴

• GPT - 게임 아이디어 추천 및 프롬프트 생성

• Cursor - 게임 제작용 코딩 및 실행

• GitHub - 코드 저장 및 버전 관리

• Streamlit - 게임 실행 및 인터페이스 제공

진행 방법

1. GPT에게 게임 아이디어 요청 (텍스트 기반 추천 게임 목록 확보)

2. Cursor에 프롬프트 입력 (게임 코드 작성 및 초기 설정)

3. GitHub에 코드 업로드 (버전 관리 및 코드 저장)

4. Streamlit으로 게임 실행 (웹 기반 UI 제공 및 실행 확인)

5. 실행 오류 발생 확인 (코드 오류 또는 설정 문제 파악)

6. 오류 수정 후 재실행 (정상화면 구현 및 UI 업데이트)

7. 최종 검토 및 배포 (게임 시작, 진행, 종료 화면 확인)

📚 15기 앱스스크립트

✍️ 음원파일 피드백-2탄

낭만나비

요약

• AI 도구를 활용해 음원 파일을 분석하고 웹앱으로 변환하는 사례

• GPT-4가 느려지는 상황에서 구글 AI 스튜디오와 다양한 도구로 문제를 해결하려 함

• 🍯 앱스스크립트로 웹앱을 구축할 때 초기 설정과 테스트는 꼭 확인해야 한다.

활용 툴

• GPT-4o - 초기 코드 작성 및 음원 분석

• Claude - 스크립트 작성에 대한 피드백 제공

• Google AI 스튜디오 - 웹앱 제작 및 디버깅

• Azure AI services - 음원 파일 분석

진행 방법

1. 필요한 AI 툴 선정 (GPT-4o, Claude, Google AI 스튜디오, Azure AI)

2. Azure API 키 설정 (API 키 받는 과정 및 연동)

3. Google 드라이브 폴더 모니터링 설정 (스크립트 속성 추가)

4. 웹앱 HTML 페이지 구성 (파일 업로드 폼 및 상태 표시)

5. 파일 업로드 및 처리 기능 구현 (doPost 함수 작성)

6. 베이스64 데이터를 저장하고 분석 (uploadFileFromBase64 함수 작성)

7. 어플리케이션 테스트 및 문제 해결 (로그 확인, 오류 진단)

8. 웹앱 배포 및 최종 테스트 (여러 디바이스에서 확인)

📚 15기 노코드버블

✍️ 🎾 버블로 만든 피클볼 예약 시스템 : 무지한 자의 오만기 💥

sonixx

요약

• 피클볼 코트 예약 시스템을 AI를 활용해 구축한 사례

• 관계형 데이터 구조를 익히고 예약 시스템의 로직을 개선하기 위해 프로젝트 진행

• 🍯 노코드 툴도 제대로 활용하려면 데이터 구조 설계가 필수적이다.

활용 툴

• Bubble - 피클볼 코트 예약 시스템 개발

• ChatGPT - 구현 과정에서 조언 및 아이디어 제공

진행 방법

1. 피클볼 코트 예약 시스템 목표 설정 (관계형 데이터 구조 학습)

2. 노코드 툴인 Bubble 선택 및 초기 설계 (쉬운 사용 기대)

3. 예약 기능 구현 (코트, 날짜, 시간 선택 등)

4. 데이터 구조 문제 해결 (옵션셋 대신 데이터타입 사용)

5. UI 테스트 및 문제 해결 (버블 조건문 정교화)

6. MVP 버전 완성 및 차후 개선 계획 수립 (결제 API 연동 예정)

📚 15기 CTO

✍️ 동그란 토마토의 동그란 귀여움 구독 서비스 런칭 도전기

이사라

요약

• AI를 활용해 귀여운 서비스를 제공하는 웹페이지를 개발한 사례

• 프론트엔드 개발 지식 없이도 AI 도구를 활용해 페이지 구성을 시도함

• 🍯 AI를 활용하면 비전문가도 기술적 진입장벽을 낮출 수 있다.

활용 툴

• GitHub Copilot - 코드 작성 및 오류 해결

• YouTube - 학습 자료 및 문제 해결 가이드

진행 방법

1. 웹사이트 개발 아이디어 수립 (동그란 토마토 컨셉으로 귀여운 서비스 구상)

2. GitHub Copilot과 연동 (코드 자동 생성 및 수정 시도)

3. YouTube로 오류 해결 방법 탐색 (관련 강의 시청 및 참고)

4. 프론트엔드 코드 작성 및 실행 (코드 구성 및 작동 확인)

5. 여러 시도 및 오류 수정 반복 (오류 분석 및 코드 개선)

6. 최종 웹페이지 구성 완료 (디자인 및 기능 점검 후 배포)

📚 15기 n8n에이전트

✍️ 회의록 작성 AI Agent 만들기 #2 - n8n 욕심 버리기

고종범

요약

• AI로 다양한 형식의 회의록을 자동으로 처리하는 사례

• 다양한 형태의 회의록 파일을 효율적으로 관리하고 번역까지 포함하여 처리하려는 문제를 해결

• 🍯 기능에 충실하고 불필요한 기능은 배제하면 개발이 더 쉬워진다.

활용 툴

• Agentic RAG - 회의록 요약 및 번역 처리

• Slack API - 최종 회의록 전송

진행 방법

1. 원본 파일 수집 (녹음, PDF, TXT 형식의 파일)

2. 파일 형식별 처리 준비 (오디오, PDF, 텍스트로 구분)

3. 회의 요약 및 번역 작업 구분 (별도의 Agent로 분리)

4. 각 파일 형식에 맞춰 AI 작업 실행 (요약 및 번역 수행)

5. 결과물 회사 시스템 서버를 통해 전달 (프록시 서버 사용)

6. 최종 회의록을 Slack으로 전송 (회사 내 공유)

📚 15기 크롬익스텐션

✍️ 잘 만든 크롬 익스텐션 소스를 분석해서 나만의 버전으로 복제하기

전석환

요약

• 크롬 익스텐션의 사이드 패널 문제를 다른 익스텐션 소스를 분석해 해결한 사례

• 크롬 익스텐션에서 사이드 패널 콘텐츠 차단 문제를 해결하기 위해 다른 소스를 분석하고 익스텐션을 복제하여 문제 해결 시도

• 🍯 클론 코딩은 단순 복제가 아닌 문제 해결을 위한 창의적 전략이 될 수 있다.

활용 툴

• CRX - 다른 익스텐션 소스 코드 분석

• Cursor AI - 수도 코드 작성 및 크롬 익스텐션 개발 지원

진행 방법

1. 문제점 검토 (Manifest, CSP 등 가능성 분석)

2. CRX로 소스 코드 다운로드 (SidePanel 기능 위주로 분석)

3. 수도 코드 작성 (Side Panel 구성 및 iFrame 로딩 코드 확인)

4. pseudocode.md 작성 후 프로젝트에 반영 (새 프로젝트 구성)

5. Cursor AI로 크롬 익스텐션 개발 (코드 작성, 정책 문제 해결)

6. iframe 관련 정책 코드 수정 (iFrame 정책 문제 해결 시도)

7. 크롬 정책 변경 여부 확인 (최종 소스 수정 및 검토)