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

📚 15기 크롬익스텐션

✍️ 웨일 브라우저 퀵서치 기능 카피해서 Cursor AI로 크롬익스텐션 만들기

전석환

요약

• 네이버 웨일의 퀵서치 기능을 크롬 익스텐션으로 개발한 사례

• 웹 개발 경험이 없는 초보자가 AI 및 API를 활용해 기술적 도전을 성공적으로 수행하고자 함

• 🍯 PRD 문서를 통한 체계적 계획과 단계적 개발은 프로젝트의 성공가능성을 높인다.

활용 툴

• Cursor AI - 코드 생성 및 파일 자동화

• Gemini API - 드래그된 텍스트에 대한 검색 및 번역 실행

진행 방법

1. PRD 문서 작성 (프로젝트 요구사항 및 계획 수립)

2. Cursor AI로 초기 코드 및 구조 생성 (todo.md 파일 생성 지시)

3. 텍스트 드래그 기능 구현 (아이콘 자동 실행)

4. 팝업창에서 번역과 검색 탭 분리 구현 (Gemini API 활용)

5. 사이드 패널 기능 추가 시도 (Google SidePanel 문서 참고)

6. 소스 코드 리팩토링 (기능별 파일 생성)

7. 문제 발생 시 코드 수정 (주기적 백업 및 코드 변경 적용)

8. 유튜브 검색 기능 추가 (사이드 패널 확장)

9. 사이드 패널 콘텐츠 클릭 문제 해결 (다음 과제로 남김)

📚 15기 앱스스크립트

✍️ Apps Script 활용해서 공공데이터 API로 데이터 가져온 후에 Google Sheet로 정리하기

푸디_

요약

• 공공데이터 API를 Google Sheets와 연동하는 사례

• Apps Script로 공공데이터포털의 부동산 데이터를 자동 수집 및 정리하는 워크플로우 구현

• 🍯 API 데이터 추출 후 스프레드시트로 전환하면 다양한 분석 도구와 쉽게 연계 가능하다.

활용 툴

• Google Apps Script - 데이터 수집 및 스프레드시트 기록 자동화

• Google Sheets - 수집된 데이터 정리 및 저장

진행 방법

1. API Key 준비 (공공데이터포털에서 인증키 발급받기)

2. Apps Script 프로젝트 시작 (Google Sheets에서 스크립트 편집기 열기)

3. API 호출 코드 작성 (URLFetchApp으로 API 데이터 가져오기)

4. 데이터 파싱 및 정리 (JSON 데이터에서 필요한 필드 추출)

5. Google Sheets에 데이터 기록 (헤더와 데이터 행 추가하기)

6. 자동화 스크립트 테스트 및 수정 (결과 확인 및 오류 수정)

📚 15기 스트림릿입코딩

✍️ 척추측만증 자가진단 앱 만들어보기

윤현성

요약

• AI로 척추측만증 자가진단 앱을 개발한 사례

• 청소년과 학생이 간편하게 척추 상태를 관리할 수 있도록 스마트폰 카메라로 진단 가능한 앱을 개발하고자 함

• 🍯 지속적인 피드백과 개선을 통해 실용적인 진단 도구로 발전시켜 나가는 것이 중요하다.

활용 툴

• Cursor AI - 피드백 분석 및 코드 개선 제안

• OpenCV - 이미지 분석을 통한 척추 만곡도 측정

• Plotly - 데이터 시각화 및 진행 상황 그래프화

진행 방법

1. 척추측만증 관련 자료 수집 (ChatGPT로 질병에 대한 이해)

2. 진단 앱의 목표와 사용자 정의 (청소년과 수험생 중심)

3. PRD 작성 및 기술 스택 선정 (Cursor AI 활용)

4. 자가진단 기능 구현 (OpenCV로 이미지 분석)

5. 운동 가이드와 기록 관리 기능 개발 (Plotly로 시각화)

6. Streamlit으로 사용자 인터페이스 구축 (UI 설정 및 테스트)

7. 지속적 피드백 수집 및 기능 개선 (사용자 테스트와 코드 최적화)

📚 15기 노코드버블

✍️ 멘탈과 습관 관리로 성공을 도와주는 웹/앱 만들기 (버블, gpts 연결)

드리

요약

• AI를 활용해 멘탈과 습관 관리 앱을 개발한 사례

• 사용자의 멘탈과 습관 관리 문제를 해결하기 위해 웹/앱을 개발하고자 함

• 🍯 미래의 자신을 설정하고 이를 기반으로 현재의 습관과 멘탈을 조절할 때 더욱 효과적이다.

활용 툴

• 버블 - 웹/앱 개발 및 데이터 구조 설계

• GPT API - 멘탈 관리 상담 및 데이터 생성

진행 방법

1. 회원가입 및 로그인 페이지 디자인 (웹 기본 형식 구성)

2. 데이터 타입 구성 (User, FutureGoal, Conversation)

3. 사용자 목표 입력 페이지 설정 (원하는 성공상 입력 받기)

4. GPT 모델 생성 (사용자의 질문에 답변하는 시스템 구축)

5. API 연동 시도 (GPT와의 데이터 교환 설계 준비)

6. 대화 요약만 버블로 데이터 전송 (속도 및 비용 최적화 시도)

📚 15기 n8n에이전트

✍️ 15분 만에 완성? 버스 안에서 만든 우리 회사 홈페이지

김혜미

요약

• 노코드 툴로 15분 만에 회사 홈페이지를 제작한 사례

• AI 기반 노코드 툴을 이용해 빠르게 홈페이지를 구축하여, 전통적인 웹 개발의 시간 소요 문제를 해결하고자 함

• 🍯 회사의 구체적인 정보를 AI에 제공하면 더 맞춤화된 결과를 얻을 수 있다.

활용 툴

• Lovable - 간단한 정보 입력으로 웹사이트 제작

• VS Code - 웹사이트 편집 및 번역 작업

진행 방법

1. 회사 정보 제공 (회사명, 서비스 유형, 주요 색상 설정)

2. Lovable 사용해 웹사이트 기본 틀 생성 (템플릿 선택 및 기능 추가)

3. 모바일에서 웹사이트 제작 요청 (15분 내 작업 시작 및 진행)

4. 추가 편집 및 Git 연동 (노트북에서 웹사이트 코드 수정 및 관리)

5. 다국어 지원 요청 (대화창에서 원하는 언어로 설정)

6. 로고 파일 업로드 (자동 반영된 결과 검사 및 수정)

7. 웹사이트 검토 및 수정 작업 (부족한 부분 대화로 보완)

📚 15기 CTO

✍️ 어쩌다보니 1W1M(1주1서비스) 챌린지 - 1. 시각화 자료관리 체계 Constella

타이칸

요약

• 시각화 자료 관리를 위한 AI 도구 활용 사례

• 시각 자료 관리와 하이라이트 기능을 갖춘 관리 체계 구축 문제를 해결하고자 함

• 🍯 지속적인 실패와 시도를 통해 더 나은 기술과 기능을 발전시킬 수 있다.

활용 툴

• Claude - HTML 문서 생성 및 노트 관리

• Supabase - 인증 및 데이터베이스 관리

진행 방법

1. 문제 정의 (시각 자료 관리의 불편함 인식)

2. 기술 및 기능 기획 (필요한 기능을 중심으로 간략히 설명)

3. UI 디자인 제시 (이미지 사이트에서 디자인 선택)

4. UX 구현 및 수정 (기능 구현 후 피드백을 기반으로 개선)

5. 시제품 개발 (Next.js, React 등 프론트엔드 기술 활용)

6. 테스트 및 개선 (Playwright 등 도구 이용해 테스트)

7. 사용자 피드백 수집 및 개선 방향 설정 (사용자 반응 관찰 후 계획 수립)