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

📚 21기 CTO

✍️ AI가 마케팅 컨설팅까지? — 전환율 최적화로 수임률 높이기

안재환

하려던 것 📝

• AI를 활용하여 법률 웹앱의 전환율을 최적화하고 실제 서비스 운영을 준비한 사례

• 법률 웹앱 론칭을 앞두고, 실제 운영에 필요한 법적 요건 및 마케팅 최적화를 완료하고자 함

• AI를 마케팅 컨설턴트처럼 활용하여 전환율 최적화(CRO) 분석 및 개선을 진행하고자 함

• 개인정보 처리방침, 리포트 예시, 결제 후 안내 등 실전 운영에 필요한 세부 요소를 단기간에 완성하고자 함

• 비개발자로서 AI 코딩 도구를 활용하여 고객이 실제로 사용할 수 있는 수준의 서비스를 다듬고자 함

활용한 툴 ⚒️

• Claude Code : 전환율 최적화(CRO) 전문 서브에이전트 `songmu-conversion-optimizer` 생성 및 웹사이트 분석, 개선 적용, 코드 작성 및 수정

• AI 코딩 도구 (플랫폼 명시 없음) : 웹앱 전반의 개발, 콘텐츠 미세조정, 모바일 최적화, 브랜딩 작업

진행 세부 내용 🔍

1️⃣ 법률 서비스의 기본 — 개인정보 처리방침 추가

• 시도한 방법과 접근 방식: 실제 서비스 운영에 필수적인 개인정보 보호법 준수를 위해 처리방침 페이지 추가를 AI에게 요청함.

• 사용한 프롬프트나 코드: '개인정보 보호법 준수를 위한 처리방침 페이지 추가해'

• 얻은 결과나 피드백: AI가 제1조부터 제11조까지의 전체 처리방침 페이지를 생성하고, 사건 접수 폼에 동의 체크박스를 추가함. OpenAI, Supabase, Vercel 등 실제 사용 중인 서비스의 처리 위탁 고지까지 자동으로 포함된 점이 인상적이었음.

2️⃣ 고객이 보는 것을 다듬기 — 설명과 예시 추가

• 시도한 방법과 접근 방식: 고객이 서비스(무료 AI 분석, 종합 리포트)를 쉽게 이해할 수 있도록 설명과 예시를 추가하도록 요청함.

• 사용한 프롬프트나 코드:

• '서비스 안내에 무료ai분석조회 설명란을 추가해. 무료이고 어떤 기능이 있는지를 정리해. 고객에게 어떤 이득을 줄 수 있는지에 대한 설명을 추가해.'

• '종합 사건분석 리포트의 예제 사진이 들어가 있어. 순서대로 배열해서 사람들이 볼 수 있게 해. 사진을 클릭하면 확대해서 볼 수 있도록 해.'

• 얻은 결과나 피드백: AI가 무료 분석의 혜택을 정리한 설명 블록을 생성하고, 리포트 예시를 갤러리 형태로 배치하며 클릭 시 확대되는 라이트박스 기능까지 구현하여 고객 이해도를 높임.

3️⃣ 가장 인상적인 순간 — AI가 마케팅 컨설팅을 수행

• 시도한 방법과 접근 방식: Claude Code에 전환율 최적화(CRO) 전문 서브에이전트 `songmu-conversion-optimizer`를 만들어 웹사이트 전체를 마케팅, 비즈니스, 고객 관점에서 분석하고 개선하도록 요청함.

• 사용한 프롬프트나 코드: 'songmu-conversion-optimizer 를 사용해서 프로젝트를 검토해. 마케팅, 비즈니스, 고객 관점에서 다양한 제언을 해.' / 'songmu-conversion-optimizer 가 홈페이지를 점검해. 무료 ai 사건분석조회에 나와있는 설명을 제공하고 있는지 검토해.'

• 발생한 문제와 해결 방법: AI가 '무료 AI분석 설명'과 '실제 서비스가 제공하는 기능' 간의 불일치를 찾아내어 수정하는 과정을 통해 콘텐츠 수정 → CRO 점검 → 불일치 수정 → 재점검이라는 품질 루프를 자율적으로 반복하여 해결함.

• 얻은 결과나 피드백: AI가 Phase 1에서 4개 항목을 즉시 개선하고, Phase 2에서 4개 항목을 추가 개선하여 CTA 버튼 위치, 신뢰 요소 배치, 서비스 설명 구조, 고객 행동 유도 흐름까지 마케팅 에이전시에 의뢰할 수준의 분석과 개선을 완료함.

4️⃣ 고객 요청 반영 — 실시간 수정의 연속

• 시도한 방법과 접근 방식: 아버지(변호사)의 실시간 피드백을 받아 서비스 제목, 강조 문구, 결제 후 안내 메시지, 변호사 프로필 등 웹사이트 콘텐츠 및 기능을 즉시 수정하도록 AI에게 요청함.

• 사용한 프롬프트나 코드: '제목을 '법률사건 AI무료분석서비스'로 수정해.' / '변호사의 의견이 들어간다는 점이 중요 포인트인 것 같아. 그 부분을 강조해.' / '입금 확인 후 메시지에 영업일 3일 이내에 변호사가 이메일로 리포트를 발송할 것이라고 해.'

• 얻은 결과나 피드백: 서비스 제목 변경, 변호사 직접 검토 강조, 결제 후 안내 메시지 개선, 변호사 프로필 업데이트 등이 아버지의 피드백과 동시에 빠르게 반영됨.

5️⃣ 마무리 — 모바일 최적화와 브랜딩 완성

• 시도한 방법과 접근 방식: 웹사이트의 모바일 최적화를 점검하고, 브랜딩 강화를 위해 로고, OG 이미지, 파비콘 등을 설정하도록 요청함.

• 사용한 프롬프트나 코드: '모바일 최적화되었는지 확인해'

• 얻은 결과나 피드백: 모바일 점검을 완료하고, 프로필 이미지를 정률 로고로 교체하며, OG 이미지(SNS 공유 썸네일)와 파비콘까지 설정하여 링크 공유 시 깔끔한 미리보기가 가능하도록 서비스의 브랜딩을 최종 완료함.

📚 21기 수익화MVP

✍️ 주간업무현황 마스터 'Step 3' : 백엔드 코드깎기 + 로그인 기능 + 결제 기능

쌤_Ai_yo

하려던 것 📝

• AI 도구를 활용하여 주간업무현황 앱을 개선하고 출시를 준비하는 사례

• 배포 후에도 여전히 불완전한 상태로 인식된 주간업무현황 앱의 완성도를 높이고자 함.

• 사용자 편의성 증대, 관리자 기능 강화, 사용자 인증 및 결제 시스템 도입을 통해 앱의 기능을 확장하고자 함.

• 최종적으로 앱의 안정적인 운영 기반을 마련하고 출시 가능성을 모색하고자 함.

활용한 툴 ⚒️

• Claude코드: 코드 작성 및 수정, 기존 앱의 기능 개선 및 보완

• Firebase: Google 로그인 기능 구현, 사용자 인증 및 데이터베이스 연동

• 토스페이먼츠: 결제 플랫폼 연동, 월 구독료 결제 기능 구현

진행 세부 내용 🔍

1️⃣ 수정 작업 - 클로드코드 잡도리 - 시도한 방법: 배포 후 직접 앱을 사용하고 메뉴를 돌아다니면서 발견된 부족한 기능들을 클로드코드를 활용하여 수정 보완함. - 얻은 결과: - 팀원/팀장 설정 기능을 개선하여 팀원 본인의 업무만 수정할 수 있게 변경함. - 팀장 권한을 설정하여 주요 일정 입력 및 팀원 순서 변경이 가능하게 함. - '내 업무 입력'창에 코멘트 작성 기능을 추가함. - PDF 출력 양식을 사용자 요구에 맞춰 수정함. - 통계 기간을 사용자가 직접 선택할 수 있도록 기능을 수정함.

2️⃣ 로그인 기능 탑재 - 시도한 방법: Firebase 프로젝트를 생성하여 'Google로 로그인' 기능을 앱에 추가함. - 얻은 결과: - 4개의 Google 계정(팀장 1명, 팀원 3명)을 이용한 역할 분담 및 주간업무 입력 테스트를 성공적으로 진행함. - 팀원 순서 변경 기능, 업무 간 이동(드래그앤드롭 방식), 로그인 시 기존 소속팀 유지 기능 등이 구현됨.

3️⃣ 결제 기능 탑재 - 시도한 방법: 토스페이먼츠 결제 플랫폼을 사용하여 결제 기능을 앱에 연동함. - 사용한 프롬프트나 코드: 토스페이먼츠에서 발급받은 테스트 API key를 .env.local 파일에 설정하여 결제 시스템과 앱을 연결함. - 얻은 결과: 2명이 각각 월 구독료 5,000원을 결제하는 테스트에 성공하고, Firebase 결제 DB 연동까지 완료함.

📚 21기 주1회빌드

✍️ Voice Diary — 말하면 기록되고, 기록하면 코치가 되는 AI 다이어리

라면

하려던 것 📝

• AI 챗봇과 기록의 장점을 결합한 AI 다이어리 개발한 사례

• 매일 기록하는 고된 작업과 쌓인 기록의 활용성 부족 문제를 해결하고자 함.

• 기록은 남지만 활용되지 않고, 대화는 활용되지만 기록이 남지 않는 아이러니를 해소하고자 함.

• 음성으로 던지면 자동으로 기록되고, AI가 하루를 리뷰해주는 시스템을 구축하고자 함.

활용한 툴 ⚒️

• Claude Code : 전체 구현

• bkit : PDCA 워크플로우 적용

• Gemini : UI/UX 아이디어 및 디자인 방향 도출

• Whisper : 음성 → 텍스트 변환

• Google Sheets : 데이터 저장

• Flask : 웹 서버

• Railway : 배포

• Google OAuth : 인증

진행 세부 내용 🔍

• 1️⃣ 전체 시스템 구조를 구축함

• 텔레그램을 통해 음성/텍스트/이미지를 입력받아 AI(Claude API)가 자동 분류하고, Google Sheets에 기록한 후 AI가 하루 리뷰를 생성하여 웹 UI에서 확인하는 전체 구조를 설계함.

• 2️⃣ PDCA 워크플로우 기반 개발 방식을 적용함

• 바로 코딩 대신 문서→설계→구현→검증 흐름으로 진행하며 문제 정의 및 핵심 기능 정리(Plan), API/데이터 흐름/UI 구조 설계(Design), Claude Code로 구현(Do), 설계와 코드 비교(Check)를 수행함.

• 비개발자인 작성자에게 특히 잘 맞는 방식임을 확인함.

• 3️⃣ `/plan-ceo-review`를 통해 10배 가치 비전을 확보함

• Plan 문서 작성 후 `/plan-ceo-review` 스킬을 실행하여 '이게 10배 가치가 되려면?'이라는 질문으로 프로젝트를 '기록 자동화 도구'에서 '365일 데이터 기반 AI 웰니스 코치'로 확장함.

• 큰 그림을 처음부터 확보하여 기능 구현 방향이 흔들리지 않고 의사결정 속도가 빨라졌음을 확인받음.

• 4️⃣ `/plan-design-review`로 구현 전 검증을 수행함

• UI 리디자인 전에 `/plan-design-review`를 실행하여 설계 단계에서 문제점을 미리 발견하고 CSS/레이아웃 개선 포인트를 자동 제안받음.

• '만들고 고치는 것'이 아닌 '만들기 전에 줄이는 것'에 효과적임을 확인함.

• 5️⃣ gap 분석을 통해 설계와 구현의 싱크를 맞춤

• 구현 후에는 반드시 gap 분석을 수행하여 설계에는 있으나 코드에 없는 기능, 코드에는 있으나 설계에 반영 안 된 부분을 자동 탐지함.

• 이를 통해 빠진 기능 및 문서 불일치를 해결할 수 있었음.

• 6️⃣ Gemini와 Claude Code를 역할별로 협업시킴

• Gemini에게 plan.md와 스크린샷을 전달하며 '10x 관점에서 개선'을 요청하여 구글 시트 로그 시각화 등 디자인 아이디어를 얻음.

• Claude Code에게 얻은 디자인 방향을 반영한 구현을 요청하여, 디자인은 Gemini, 구현은 Claude Code가 강점을 보이며 AI를 역할별로 나누는 방식이 효과적임을 확인함.

• 7️⃣ 입력 채널과 분석 채널을 분리함

• 텔레그램은 짧은 피드백용으로, 웹 UI는 하루 종합 리뷰용으로 분리하여 반복되는 피드백 문제를 해결함.

• 8️⃣ AI 리뷰 구조를 개선함

• '오늘의 요약' 카드와 '종합 리뷰' 영역으로 구성하고 마크다운 렌더링을 적용하여 읽기 경험을 개선함.

• 9️⃣ AI 협업 방식을 정립함

• 기획자는 '무엇/왜'를 담당하고 AI는 '어떻게'를 담당하는 방식으로, '이거 정리해줘', '방향 바꿔줘', '이 방식으로 구현해줘' 등의 지시로 개발을 진행함.

• 🔟 Railway 배포 과정의 어려움을 해결함

• redirect_uri_mismatch, 환경변수 설정 위치 오류, 로그 미설정 등 다양한 배포 문제에 직면함.

• `logging.basicConfig(level=logging.INFO)`를 추가하여 로그를 설정하고 문제를 해결함.

• '설정했다'와 '올바른 곳에 설정했다'는 다르다는 핵심 교훈을 얻음.

📚 21기 개발환경셋팅

✍️ 비개발자의 바이브 코딩 입문기: 이걸 다 깔으라구요? (5) Docker

Nile_나일

하려던 것 📝

• Docker 컨테이너 기반 개발 환경 구축 및 웹 서비스 실행 학습 사례

• 애플리케이션을 신속하게 구축, 테스트, 배포할 수 있는 Docker의 기본 개념을 이해하고 설치하여 활용하고자 함

• 가상화 도구인 Docker를 사용하여 개발 환경 구축의 복잡성과 환경 종속성 문제를 해결하고자 함

• 내 컴퓨터에 직접 설치하지 않고 가벼우면서도 개발 환경을 테스트, 스테이징, 운영 서버까지 동일하게 배포할 수 있는 장점을 활용하고자 함

활용한 툴 ⚒️

• Gemini : Uptime Kuma의 기능 및 활용 목적에 대해 질문하여 이해하는 데 사용함

진행 세부 내용 🔍

• 1️⃣ Docker 개념 이해 및 설치 진행함

- Docker가 애플리케이션을 신속하게 구축, 테스트, 배포할 수 있는 소프트웨어 플랫폼임을 학습함. OS 커널을 공유하여 가볍고 빠르며, 애플리케이션과 종속성을 패키징해 환경에 구애받지 않고 실행하는 컨테이너 기반의 오픈소스 가상화 도구임을 이해함. - 이미지, 컨테이너, 레지스트리 등 Docker의 핵심 용어를 학습함. 이미지는 프로그램 실행 정보가 담긴 설계도이고, 컨테이너는 이미지를 바탕으로 만들어진 실행 환경이며, 레지스트리는 이미지를 공유하는 온라인 저장소임을 파악함. - Docker 설치 페이지(Windows-install)에서 기본 옵션으로 빠르고 어렵지 않게 설치를 완료함. 설치 완료 후 컴퓨터를 재부팅하고 터미널에서 `docker --version` 명령어로 설치를 확인함.

• 2️⃣ Docker 작동 테스트를 수행함

- 터미널에 `docker run hello-world` 명령어를 입력하여 첫 번째 컨테이너를 실행함. - 명령어 실행 후 Docker로부터 환영 메시지를 받아 Docker가 정상적으로 작동함을 확인함.

• 3️⃣ 웹 서버(Nginx)를 실행함

- 터미널에 `docker run -d -p 8080:80 --name my-web nginx` 명령어를 입력하여 Nginx 웹 서버 컨테이너를 실행함. 이 명령어를 직접 타이핑하며 용어에 익숙해지는 노력을 함. - `-d` 옵션으로 컨테이너를 백그라운드 모드로 실행하여 터미널 종료 시 컨테이너도 함께 종료되는 것을 방지함. `-p 8080:80` 옵션으로 내 컴퓨터의 8080 포트와 컨테이너의 80 포트를 연결하여 포트 포워딩을 설정함. - `--name my-web`으로 컨테이너 이름을 'my-web'으로 지정하고, `nginx` 이미지를 사용하여 컨테이너를 생성함. Nginx가 전 세계적으로 많이 쓰이는 웹 서버 소프트웨어 설계도임을 확인함. - 크롬 브라우저에서 `http://localhost:8080`에 접속하여 Nginx 웹 서버가 정상적으로 작동하는 것을 확인함.

• 4️⃣ 데이터베이스(Postgres)를 실행함

- 터미널에 `docker run -d -p 5432:5432 --name my-db -e POSTGRES_PASSWORD=1346 postgres` 명령어를 입력하여 PostgreSQL 데이터베이스 컨테이너를 실행함. - `-p 5432:5432` 옵션으로 내 컴퓨터의 5432 포트와 컨테이너의 5432 포트를 연결함. 5432가 PostgreSQL의 표준 포트 번호임을 학습함. `--name my-db`로 컨테이너 이름을 'my-db'로 지정함. - `-e POSTGRES_PASSWORD=1346` 옵션을 사용하여 컨테이너 내부에서 사용할 환경변수(비밀번호)를 설정함. PostgreSQL 이미지는 보안을 위해 비밀번호가 설정되지 않으면 실행되지 않도록 설계되어 있음을 이해함. - 브라우저에 `http://localhost:5432`로 접속을 시도했으나, localhost에서 전송한 데이터가 없다는 Empty Response를 받음을 확인함.

• 5️⃣ 모니터링 대시보드(Uptime Kuma) 서비스를 실행함

- `docker run -d -p 3001:3001 --name kuma louislam/uptime-kuma` 명령어를 입력하여 Uptime Kuma 컨테이너를 실행함. `louislam`이 이미지 제작자의 ID임을 확인함. - `http://localhost:3001`에 접속하여 로그인 창을 확인하고 회원가입을 통해 대시보드에 접근함. - Gemini에게 Uptime Kuma가 무엇을 모니터링하는지 질문하여, 앞으로 만들 서비스들의 정상 작동 여부 및 오류를 실시간으로 감시하여 보기 좋은 UI로 보여주는 도구임을 파악함. 구글, 네이버 등 범용 서비스를 등록하여 내 인터넷 문제인지 서버 문제인지를 판별할 수 있음을 확인함.

• 6️⃣ 개발자 유틸리티 모음(it-tools) 서비스를 실행함

- `docker run -d -p 8081:80 --name tools corentinth/it-tools` 명령어를 입력하여 it-tools 컨테이너를 실행함. - `http://localhost:8081`에 접속하여 다양한 개발자 유틸리티 도구들이 포함된 웹 화면을 확인함. 인스타그램 주소로 QR 코드를 생성하는 등 일부 기능을 직접 사용해 봄. - 계획했던 4개의 서비스 중 2개의 서비스(Uptime Kuma, it-tools)만 실습해 봄을 언급함.

• 7️⃣ 실행 중인 서비스를 확인하고 정리함

- `docker ps` 명령어로 현재 실행 중인 컨테이너 목록을 확인함. `ps`가 Process Status의 줄임말임을 이해함. - `docker ps -a` 명령어로 실행 중인 컨테이너뿐만 아니라 종료된 컨테이너까지 모두 확인할 수 있음을 파악함. - `docker stop [컨테이너이름]` 명령어로 서비스를 중지하고, `docker rm [컨테이너이름]` 명령어로 중지된 컨테이너를 삭제함. - `docker rmi [이미지이름]` 명령어로 이미지를 삭제하는 방법을 확인함. - `docker system prune -a` 명령어로 모든 컨테이너, 이미지, 네트워크 등을 일괄 삭제하는 전체 대청소 기능을 수행함. `Y`를 입력해야 실행되며, 실행 후 `docker ps -a`로 확인했을 때 리스트가 깨끗해진 것을 확인함.

📚 21기 수익화MVP

✍️ SNS 콘텐츠 생성 비서 고급 프롬프트 공개! (Facebook, Instagram, Threads, X, LinkedIn, Stibee 등)

코아_AI작가

📚 21기 고마워클코

✍️ SaaS 기업 AI 지원사업 작성기

Diane

하려던 것 📝

• AI 에이전트를 활용하여 정부지원사업 계획서를 자동 생성 및 검토한 사례

• 기술 이해 부족과 다양한 지원사업 규칙으로 인한 계획서 작성의 어려움을 해결하고자 함.

• 기술 스택, 인력 계획 등 실제 수행 가능 범위 판단의 어려움과 지원사업별 상이한 작성 가이드라인에 대한 대응이 필요했음.

• 내부 자료를 기반으로 지식/정보를 추출하고 구조화하여 단계별로 계획서를 작성하며, 검수 과정을 통해 통합본 초안을 생성하고자 함.

활용한 툴 ⚒️

• Claude.md: 6개 스킬셋 에이전트 시스템 전체 관리 및 수행에 활용함.

• Claude Code: 코드 작성 및 수정, IDE Extension 활용에 사용됨.

진행 세부 내용 🔍

1️⃣ 공고 해석 에이전트 설계 및 적용함

• 시도한 방법과 접근 방식: 공고문, 양식별 분류, 작성 가이드, 평가표를 대조하여 공고의 요구사항을 구조화하고 작성 기준 프레임을 도출함.

• 얻은 결과나 피드백: 지원사업마다 다른 공고의 핵심 요구사항과 평가 기준을 명확히 이해하고 분류할 수 있었음.

2️⃣ 기술 PM 에이전트 설계 및 적용함

• 시도한 방법과 접근 방식: 보유 기술, 인력, 기간, 난이도를 기준으로 현실적인 과제 볼륨을 산정하고자 함. 외부 공고문과 내부 기업 소개, 기술/서비스 소개 자료를 매핑하여 과제 범위 기반의 수행 수준 초안을 도출함.

• 얻은 결과나 피드백: 기업의 역량에 맞는 현실적인 기술 수행 계획을 수립하는 데 기여함.

3️⃣ 산업 리서치 에이전트 설계 및 적용함

• 시도한 방법과 접근 방식: 공고가 요구하는 산업별 문제 정의, 정책 맥락, 시장 스토리를 수집하고자 함. 웹 리소스(해외/국내 산업 및 기술 동향, 정책)를 활용하여 산업/정책/수요 맥락을 정리함.

• 발생한 문제와 해결 방법: Claude Code 등 IDE Extension보다 웹/앱 채널의 리서치 품질이 떨어지는 문제가 발생하여, 채널별 품질 차이를 고려하여 활용 방법을 조절함.

4️⃣ 예산·수치 정합성 에이전트 설계 및 적용함

• 시도한 방법과 접근 방식: 인력, 기간, WBS, 성과지표, 예산 간의 숫자 정합성을 확인하고자 함. 수행계획서 양식, 작성 가이드, 기업 내부 인력 및 예산 자료를 활용하여 WBS, 인력, 예산 정합 구조 초안을 도출함.

• 얻은 결과나 피드백: 계획서 내 숫자의 논리적 일관성을 확보하여 신뢰도를 높임.

5️⃣ 계획서 작성 에이전트 설계 및 적용함

• 시도한 방법과 접근 방식: 정부지원사업식 문체에 맞게 목차별 초안을 작성하고자 함. 수행계획서 양식과 회사/기술/서비스 소개 자료를 바탕으로 목차별 수행계획서 초안을 생성함.

• 얻은 결과나 피드백: 셋팅이 잘 되어 있으면 초안을 빠르게 생성할 수 있었음.

6️⃣ 심사관 시뮬레이션 에이전트 설계 및 적용함

• 시도한 방법과 접근 방식: 공고 가이드라인, 목차별 작성 기준, 분량/형식/표현 적합성을 심사자 관점에서 검수하고자 함. 논리의 비약, 과장, 설득력 부족, 차별성 부족 등의 항목을 검수하여 가이드라인 및 평가 항목 기준 검수를 수행함.

• 얻은 결과나 피드백: 심사 통과 가능성이 높은 최종 계획서를 도출하는 데 기여함.

📚 21기 내삶자동화

✍️ 클로드 디스패치로 게임 게시판 크롤러를 더 편리하게 만든 이야기

멍멍_

하려던 것 📝

• 자체 제작 게임 게시판 크롤러의 수동 실행 과정을 자동화한 사례.

• 목적: 평소 게임 게시판 데이터를 수집하는 자체 제작 크롤러의 반복적이고 귀찮은 수동 조작 과정을 해결하고자 함.

• 배경: 기존 크롤러는 기능적으로 잘 작동했으나, 루리웹 게임 게시판 접속부터 URL 추출, 크롤러에 정보 입력까지 9단계의 수동 과정이 필요하여 사용이 번거로웠음.

• 해결하고자 한 내용: Claude의 디스패치(Dispatch)와 스킬(Skill) 개념을 활용하여 루리웹 게임 게시판 정보 검색 및 크롤러 실행 과정을 완전 자동화하고자 함.

활용한 툴 ⚒️

• Claude: 사용자의 요청에 따라 브라우저 조작, 데이터 추출, 툴 간 이동, 정보 자동 입력 등 일련의 작업을 자율적으로 실행하는 디스패치 에이전트 역할을 수행함.

• OpenClaw (디스패치/스킬 개념): Claude에게 특정 요청이 왔을 때 미리 정의된 순서와 로직으로 작업을 처리하도록 지시하는 행동 지침을 제공하는 데 활용함.

진행 세부 내용 🔍

• 1️⃣ 크롤링 과정 분석 및 스킬 뼈대 생성함

• Claude에게 기존의 9단계 수동 크롤링 과정을 화면으로 직접 시연하며 설명함.

• Claude는 사용자의 시연을 바탕으로 `SKILL.md` 파일의 뼈대를 직접 작성해 줌.

• 2️⃣ 루리웹 게임 게시판 URL 자동 추출 로직 구현함

• Claude가 `https://bbs.ruliweb.com/game`에 자동 접속하여 사용자가 요청한 게임명을 검색 입력창에 입력하고 '찾기' 버튼을 클릭하게 함.

• 검색 결과 페이지에서 해당 게임 게시판의 고유 번호를 URL에서 추출하여 `https://bbs.ruliweb.com/game/{게시판번호}` 형태로 가공하게 함.

• 3️⃣ 로컬 크롤러(localhost:3050) 자동 설정 및 실행 로직 구현함

• 추출된 게시판 URL과 사용자가 요청한 시작/종료 페이지 정보를 `http://localhost:3050` 크롤러의 '데이터 수집' 메뉴에 자동 입력하게 함.

• '크롤링 시작' 버튼을 자동으로 클릭하여 크롤링 작업을 시작하게 함.

• 크롤링 시작 후 로그 창에서 정상 작동 여부를 확인하게 함.

• 4️⃣ 검색 결과 엣지 케이스(Edge Case) 처리 로직 추가함

• 검색 결과가 1개일 때는 사용자에게 묻지 않고 바로 크롤링을 진행하도록 함.

• 검색 결과가 여러 개일 때는 목록을 텍스트로 정리하여 사용자에게 보여주고 선택을 요청하여, 선택된 항목으로 진행하게 함. (예: '바이오하자드 레퀴엠'과 '바이오하자드 4' 중 1번 선택)

• 검색 결과가 없을 때는 크롤링을 멈추고 게임명을 다시 확인해달라고 사용자에게 요청하게 함.

• 5️⃣ 스킬 파일(SKILL.md) 상세 정의 및 패키징함

• `SKILL.md` 파일에 디스패치 흐름, 검색 결과 처리 로직, 시작/종료 페이지 기본값(1) 설정, 크롤러 실행 중 주의사항(localhost:3050 실행 여부, 타임아웃 경고 등)을 상세히 정의함.

• 완성된 스킬 파일을 `.skill` 형식으로 패키징하여 설치 및 공유가 가능하게 만듦.