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

📚 19기 에이전트빌더

✍️ Openai Agent Builder - 내 상품 리스트 노출

리부티너

하려던 것 📝

• OpenAI Agent Builder로 상품리스트 조회 시스템을 구축한 사례

• Agent Builder의 Vector Store에 상품 데이터를 저장하고, 사용자가 상품리스트를 조회하면 데이터를 가져와 위젯으로 예쁘게 출력하는 챗봇 시스템을 구축함

• OpenAI의 새로운 Agent Builder 기능을 탐험하고 실제 판매자 관점에서 유용한 기능을 구현함

활용한 툴 ⚒️

• OpenAI Agent Builder: 워크플로우 구성 및 백엔드 로직 처리

• OpenAI Storage (Vector Store): 상품 데이터를 벡터 형태로 저장

• Widget Builder (ChatKit Studio): 상품리스트 출력 UI 위젯 생성

• ChatKit: 프론트엔드 챗봇 UI 구성

• VSCode: 개발 환경

• Vercel: 챗봇 배포

• Github: 소스 코드 관리

진행 세부 내용 🔍

1️⃣ Agent Builder 워크플로우 구성

• https://platform.openai.com/agent-builder 에 접속하여 Agent Builder 진입함

• Start 노드와 Agent 노드를 배치하여 간단한 워크플로우를 구성함

• 웹 개발 구조로 역할을 정의함: ChatGPT(Front UI), Agent Builder(Backend), Storage(Vector Store), Widget Builder(결과 UI)

2️⃣ File Search에 상품 데이터 저장

• 상품 정보를 JSON 형식으로 작성하여 상품.txt 파일로 저장함

• 4개 상품의 id, title, sub\_title, cover 이미지, 상세 페이지 링크 정보를 포함함

• Agent Tool의 File Search 기능에 상품.txt 파일을 업로드하여 Vector Store에 저장함

3️⃣ Widget 생성 및 설정

• https://widgets.chatkit.studio/ 에서 위젯 생성을 시도함

• 상품.txt 내용을 복사하여 프롬프트로 입력하고 위젯 코드를 생성함

• 생성 과정에서 에러가 발생하여 여러 번 재시도함

• 카드 형태로 상품 이미지, 제목, 부제목, View 버튼을 포함한 UI 위젯을 완성함

4️⃣ Agent Builder에서 테스트

• Agent Builder 내에서 상품리스트 조회를 테스트함

• 원하는 결과가 정상적으로 출력되는 것을 확인함

5️⃣ ChatKit으로 프론트엔드 구축

• VSCode에서 새 폴더를 생성함

• OpenAI의 ChatKit 스타터 앱을 git clone으로 복제함

• .env.example을 .env.local로 복사함

• OPENAI_API_KEY와 NEXT_PUBLIC_CHATKIT_WORKFLOW_ID 환경변수를 설정함

6️⃣ Vercel에 배포

• 로컬 환경에서 정상 작동을 확인함

• Github에 소스 코드를 업로드함

• Vercel에서 새 프로젝트를 생성하고 Github 저장소를 연결함

• .env.local의 환경변수를 Vercel 환경변수로 등록함

7️⃣ 배포 후 도메인 등록 및 테스트

• 초기에 UI 채팅창이 나타났다가 사라지는 문제 발생함

• https://platform.openai.com/settings/organization/security/domain-allowlist 에서 Vercel 도메인을 허용 목록에 추가함

• 도메인 등록 후 정상 작동을 확인함

• https://openai-chatkit-eight.vercel.app/ 에서 '상품리스트' 키워드로 조회 가능함

📚 19기 N대리비서봇

✍️ [n8n] 나라장터(g2b) 입찰공고를 구글시트로 받아보기

하이톰

하려던 것 📝

• n8n으로 나라장터 입찰공고를 자동 수집하는 사례

• 매일 아침 또는 시간 단위로 나라장터 입찰공고를 자동으로 가져옴

• 수집한 입찰공고 데이터를 구글시트로 자동 전송하여 관리함

• 업무 자동화 도구 n8n을 활용하여 반복적인 공고 확인 작업을 효율화함

활용한 툴 ⚒️

• n8n: 나라장터 API 호출부터 구글시트 저장까지 전체 워크플로우 구성

• ChatGPT: HTTP Request 노드 설정, 숨겨진 API 탐색, JSON 데이터 파싱 및 필드 편집 지원

• 구글 클라우드 콘솔: 구글시트 API 키 발급 및 연동

• 구글시트: 수집된 입찰공고 데이터 저장 및 관리

진행 세부 내용 🔍

1️⃣ n8n 학습 및 아이디어 구체화

• 19기 N대리비서봇 스터디에서 n8n을 처음 접함

• 스터디장의 온라인 강의와 오프라인(11/15) 특강을 통해 n8n 사용법을 학습함

• 업무 중 자동화 가능한 영역을 탐색하여 나라장터 입찰공고 수집 아이디어를 도출함

• 스터디장에게 질의하여 n8n을 통한 자동화 가능성을 사전 확인함

2️⃣ 워크플로우 설계 및 단계별 구현

• HTTP 요청 → 결과 편집 → 구글시트 전송의 기본 구조를 설계함

• 처음부터 완성하지 않고 단계별로 하나씩 노드를 추가하며 발전시킴

• 1차 완성 워크플로우는 HTTP Request, Split Out, Edit Fields, Append row in Sheet 노드로 구성됨

3️⃣ HTTP Request 노드 구성

• 나라장터 제공 URL 서비스에 n8n으로 직접 접근 시도함

• 접근 불가 문제 발생: '접근 가능 브라우저가 아니라고 안내' 메시지 확인됨

• ChatGPT에 해결 방법을 질의하여 숨어있던 실제 API를 탐색함

• 복잡한 과정을 거쳐 최종 API를 도출하고 헤더 및 바디 설정을 완료함

• API 호출에 최종 성공함

4️⃣ Split Out 노드와 Edit Fields 노드 구성

• HTTP Request에서 받은 JSON 결과를 항목별로 분리하는 작업 수행함

• ChatGPT의 도움을 받아 필요한 항목들을 추출함

• 원하는 형식으로 데이터 필드를 편집함

5️⃣ 구글시트 연동 (Append row in Sheet 노드)

• 스터디장 제공 자료 'GCC(구글 클라우드 콘솔) API 만들기'를 참고함

• 카드 결제정보 입력 후 구글 클라우드 콘솔에서 API 키를 발급받음

• 구글시트에 'g2b 입찰목록' 파일을 미리 생성함

• n8n에서 발급받은 API 키를 입력하여 구글시트와 연동함

6️⃣ 워크플로우 실행 및 결과 확인

• 완성된 워크플로우를 실행하여 구글시트에 데이터가 정상 전송됨을 확인함

• 나라장터 API가 한 번에 10개의 데이터만 제공하는 제한사항을 발견함

📚 19기 챗GPT앱

✍️ Apps in ChatGPT 1주차 스터디 경험담

자레드

하려던 것 📝

• 코딩 경험 없이 ChatGPT 커스텀 GPT와 로컬 서버를 연동함

• VS Code 등 개발 환경 구축 및 실습 프로젝트를 실행함

• ngrok을 활용하여 로컬 서버를 외부에 노출하고 ChatGPT와 연동함

활용한 툴 ⚒️

• VS Code: 코드 편집 및 프로젝트 관리

• ChatGPT: 개발자 모드로 커스텀 GPT 연동 테스트

• Claude Code: 코드 작성 지원

• Git: 실습용 프로젝트 클론

• Node.js & pnpm: 프로젝트 빌드 및 서버 실행

• ngrok: 로컬 서버를 외부에 노출하여 ChatGPT와 연동

진행 세부 내용 🔍

1️⃣ 개발 환경 구축

• 온라인 스터디 참여 중 VS Code 미설치 상태임을 확인함

• 다음날 다시보기를 통해 VS Code 설치 및 필수 도구들을 순차적으로 설치함

• 오프라인 모임에서 스터디장의 도움으로 부족한 부분을 보완함

2️⃣ 프로젝트 설정

• 새로운 폴더를 생성하여 작업 공간을 지정함

• Git clone 명령어로 실습용 프로젝트를 다운로드함

• npm과 pnpm을 설치하여 패키지 관리 환경을 구축함

3️⃣ 서버 실행

• pnpm run build 명령어로 프로젝트를 빌드함

• server 폴더에서 pnpm start 명령어로 로컬 서버를 실행함

• 포트 8000번에서 서버가 정상 동작함을 확인함

4️⃣ 외부 연동 설정

• cmd 창에서 ngrok http 8000 명령어를 실행함

• ngrok을 통해 생성된 공개 URL을 확보함

5️⃣ ChatGPT 연동 및 테스트

• ChatGPT를 개발자 모드로 전환함

• 연동 앱 및 커넥터 설정에서 ngrok 주소를 입력함

• 새 채팅에서 'pizza show me pizza album' 명령어를 입력함

• 연동된 서버로부터 피자 앨범 결과를 정상적으로 받아옴

📚 19기 카톡봇

✍️ 11번가 셀러 인증 자동화 봇 만들기: n8n과 FastAPI, Playwright로 도전한 자동화 여정

황금호랑이

하려던 것 📝

• 매일 반복되는 11번가 셀러 인증 절차를 자동화한 사례

• 4개의 11번가 셀러 계정에 대한 매일 반복되는 인증 작업을 자동화함

• 인증번호 요청부터 수신, 입력까지의 전체 프로세스를 자동으로 처리함

• 인증 타이밍을 놓쳐 재요청하는 번거로움을 해결하고자 함

활용한 툴 ⚒️

• n8n : 자동화 워크플로우 제작 및 웹훅 생성

• Playwright : 11번가 웹페이지 접속 및 자동 로그인, 인증 처리

• FastAPI : n8n 대체 실험용 백엔드 로직 구현

• 커서, 클로드코드 : 웹훅 생성 자동화 및 코드 작성 보조

• Cloudflare : n8n 로컬 설치 후 도메인 연결

진행 세부 내용 🔍

1️⃣ n8n 초기 셋업 및 학습

• n8n을 로컬에 설치하고 Cloudflare를 통해 도메인을 연결함

• 노드 사용법에 익숙하지 않아 초기 작업을 중단함

• 18기 카톡봇 스터디 시작 후 김현우 스터디장님의 가이드를 바탕으로 재도전함

2️⃣ Playwright를 활용한 웹 접속 테스트

• 보안 문제를 우려했지만 다행히 11번가 웹페이지 접속에 성공함

• 로그인 엘리먼트를 찾지 못해 한참 헤맴

• 개발자도구를 활용해 직접 element 값을 찾아 AI에게 정확한 정보를 전달하여 해결함

3️⃣ 예외 처리 로직 최적화

• AI가 인증 실패 시나리오를 과도하게 많이 추가하여 로직이 복잡해짐

• 유지보수가 어려워질 것으로 판단하여 불필요한 예외 처리를 제거하도록 지시함

• 반복 방지를 위해 작업 지침 가이드 작성을 지시함

4️⃣ 웹훅과 인증번호 처리 타이밍 문제 발생

• 커서/클로드코드를 통해 n8n 웹훅 생성은 쉽게 완료함

• 인증번호 요청 후 수신까지 대기 시간이 필요한데 타이밍 처리에 실패함

• n8n만으로는 시간차를 둔 인증번호 처리가 어렵다는 것을 파악함

5️⃣ 작업 큐 방식 도입으로 문제 해결

• 김현우 스터디장님의 조언으로 작업 큐 방식을 적용함

• 인증요청 → 대기 큐 → 인증번호 수신 → 확인 완료의 단계별 처리 구조를 구축함

• DB 처리 방식으로도 확장 가능한 구조임을 확인함

• 카카오톡으로 인증번호 요청부터 사용자 확인까지 자동화에 성공함

6️⃣ FastAPI를 활용한 대체 구현 실험

• n8n 없이 FastAPI로 동일한 로직을 구현해봄

• 메신저봇(인증시작) → FastAPI 호출(접속 & 인증요청) → 카톡메시지 전달 → 메신저봇(인증메시지 전달) → FastAPI 호출(인증처리 & 로그아웃) 흐름으로 구성함

• n8n보다 더 깔끔하게 작동함을 확인하며 도구 선택에 대한 고민을 하게 됨

📚 19기 Cursor

✍️ 블로그 자동 게시앱 개발을 위한 코딩 에이젼트 비교(Cursor, OpenAI Codex, Gemini3 Antigravity)

김상현

📚 19기 회고리포트

✍️ 매일 아침, 내 일정을 함께 정리해주는 GPT 만들기 ✨

정재환

하려던 것 📝

• 매일 아침 일정을 대화형으로 정리해주는 GPT를 만든 사례

• 매일 아침 복잡한 일정을 편안하게 정리할 수 있도록 함

• 9 to 6 근무 시간을 3개의 집중 업무 블록으로 나눠 효율적으로 관리함

• 하루의 핵심 업무를 목적과 생각의 흐름으로 정리하고자 함

활용한 툴 ⚒️

• GPTs : 맞춤형 대화 흐름과 행동 로직 지정, 일정 자동 조정 및 워크로그 템플릿 생성

• Obsidian : 마크다운 노트 저장 및 일정/워크로그 관리

진행 세부 내용 🔍

1️⃣ 근무 시간 블록 구조 설계

• 9 to 6 근무를 기준으로 3개의 초집중 업무 블록(10:00~11:30, 14:00~15:30, 16:00~17:30)을 중심으로 구성함

• 각 집중 블록 사이에 준비 및 리뷰 시간을 배치하여 업무 효율을 높임

• 09:00~10:00은 메일 확인과 하루 일정 정리, 12:00~13:00은 점심 및 휴식, 17:30~18:00은 데일리 리뷰로 배정함

2️⃣ Agent Jay v5의 대화 흐름 설계

• 컨디션 체크 단계에서 기분, 몸 상태, 집중력을 확인하며 대화를 시작하도록 설정함

• 고정 일정(회의, 외근 등)을 먼저 입력받아 기본 스케줄에 반영함

• 핵심 업무 목표 3가지를 중요도와 시급도 기준으로 수집하고 자동으로 집중 블록에 배치함

• 기타 업무(Task)를 오전/오후로 나눠 정리하도록 구성함

3️⃣ 일정 충돌 자동 조정 로직 구현

• 고정 일정이 집중 업무 블록과 겹칠 경우 Buffer나 Objective 블록을 자동으로 조정함

• 변경 전·후 시간표를 표 형식으로 제시하고 사용자의 동의를 받는 절차를 추가함

• 사용 중 큰 오류 없이 안정적으로 작동하며 충돌 조정 로직이 잘 작동함을 확인함

4️⃣ 마크다운 요약 및 워크로그 템플릿 생성

• 최종 일정을 깔끔한 마크다운 형식으로 자동 출력하도록 설정함

• Objective 시작 시 작업 목적, 전략, 가정을 묻고 단계별 체크리스트와 예상 산출물까지 정리하는 Worklog 템플릿을 생성함

• Obsidian과 연동하여 노트를 저장하고 하루를 돌아보는 루틴을 자연스럽게 만듦

📚 19기 1인풀스택

✍️ 루비 온 레일즈로 나만의 홈페이지를 만들어 보고자...

써비_이상수

하려던 것 📝

• 기존 컨설팅 홈페이지를 벤치마킹하여 재구조화한 사례

• 기존 홈페이지의 구조적 한계를 개선하고 AI 서비스를 추가하여 명확한 가치 전달 구조로 재설계함

• 루비 온 레일즈를 활용하여 실제 작동하는 프로토타입 홈페이지를 구현함

• 서비스를 경영·세무·노무/법무 컨설팅, AI 경영자문, AI 활용 기초교육의 3가지 축으로 재정리함

활용한 툴 ⚒️

• Ruby on Rails : 홈페이지 프로토타입 개발 및 이미지 처리 헬퍼 메서드 구현

• AI(구체적 도구 미명시) : 벤치마크 사이트 구조 분석, PRD 및 프로젝트 문서 작성, 코드 작업 진행

진행 세부 내용 🔍

1️⃣ 벤치마크 사이트 구조 분석

• Zenithtax 홈페이지를 벤치마킹 대상으로 선정함

• 섹션별 흐름을 Hero → 공감 → 설명 → 신뢰 → CTA 순서로 파악함

• AI에게 벤치마크 사이트 구조 분석을 요청하고, 기존 홈페이지 내용을 토대로 새 홈페이지를 만들기 위한 PRD, 프로젝트 플랜, ToDo list 문서 작성을 지시함

2️⃣ 기존 서비스 내용 점검 및 보완

• 기존 홈페이지의 컨설팅 중심 내용, 후기, 차별화, CTA 요소를 확인함

• AI를 활용한 경영자문과 AI 기본교육 내용을 추가하여 서비스 범위를 확장함

• AI에게 기존 내용에 AI 관련 서비스를 통합하여 보완하도록 요청함

3️⃣ 서비스 구조 재설계

• 최종적으로 3가지 서비스 축으로 명확히 정리함: 경영·세무·노무/법무 컨설팅, AI 경영자문, AI 활용 기초교육

• 각 서비스의 차별화 포인트와 타겟 고객을 구체화함

4️⃣ 프로젝트 문서화 작업

• 머릿속 아이디어를 구체적인 문서로 체계화함

• PRD.md에 목적, 대상 고객, 섹션 구성 등 제품 요구사항을 정리함

• PROJECT\_PLAN.md에 기획 → 와이어프레임 → 디자인 → 개발 → 콘텐츠 작성 → 테스트 순서로 작업 흐름을 작성함

• TODO\_LIST.md에 세부 실행 작업 리스트를 나열함

• DOCS.md에 위 문서들을 정리한 인트로 문서를 작성함

• AI에게 ToDo list 순서에 맞춰 진행하도록 지시함

5️⃣ 섹션별 카피라이팅 작성

• Hero 섹션에 문제-대상-솔루션을 명확히 표현하는 문장을 작성함

• 공감 섹션에 경영자의 실제 고민을 반영한 공감 문장을 구성함

• 서비스 설명 섹션에 각 서비스가 필요한 상황과 제공 가치를 설명함

• 후기 섹션에 실제 효과 사례를 배치함

• 마지막 CTA에 '이제 당신의 차례입니다' 형식의 행동 유도 메시지를 작성함

6️⃣ 루비 온 레일즈 프로토타입 개발

• Hero 섹션에 SVG 이미지를 추가하고 app/assets/images 폴더에 저장함

• 반응형 이미지, 자동 프로필 아바타, 플레이스홀더 처리 기능을 포함한 이미지 처리 헬퍼 메서드를 개발함

• 후기 섹션에 사용자 이니셜로 프로필을 대체하는 기능을 구현함

• 실제 작동하는 프로토타입 홈페이지를 완성함