소개
지난번 OpenAI Agent Builder로 아크 레이더스 챗봇을 만들었지만, 데이터 품질과 사용자 경험에서 한계가 있었습니다. 이번에는 실제로 게임을 하면서 바로 물어볼 수 있는 실용적인 챗봇으로 업그레이드하는 것이 목표였습니다.
개선하고자 한 부분:
아이템 데이터 교체
ChatKit UI를 게임 테마에 맞게 커스터마이징
Widget 적용
진행 방법
1. 데이터 수집 및 정제
문제점: 기존 데이터가 불완전하고 업데이트되지 않은 정보 다수
시도한 방법들:
❌ Commet, Claude 크롬 확장 프로그램 → 많은 양의 데이터 추출에는 부적합
✅ ChatGPT에 HTML 파일을 제공하고 CSV 변화해 달라는 방식이 좀 더 적합했음
2. CSV → JSON 변환 (Claude Code 활용)
Claude Code를 사용해 Agent Builder용 JSON 포맷으로 변환하는 python 코드를 작성해서 변환
3. Agent Builder 데이터 업데이트
기존 File 삭제 → 신규 데이터 업로드
4. Widget 실험 (실패)
하나의 답변에 Widget과 일반 텍스트를 함께 출력하려 했으나 Agent Builder에서는 안 되서 포기
시도: Widget(아이템 카드) + 추가 설명 텍스트
5. ChatKit UI 커스터마이징
작업 흐름:
Github에서 사용 중인 ChatKit 리포지토리 clone
https://chatkit.studio/playground 에서 디자인 테스트
Playground에서 코드 추출
Claude Code로 실제 코드에 적용
Git push → Vercel 자동 배포 ✨
수정한 항목:
아크 레이더스 공식 홈페이지를 LLM으로 분석해서 색상표 (디자인 가이드) 추출 후 내 챗봇에 적용
6. 배포 및 테스트
기존에 설정이 정상적으로 되어 있다면 git push 하면 자동으로 배포되는 상태 → Vercel 괜찮은듯
결과와 배운 점
✅ 성과
실사용 가능한 수준의 챗봇 완성: 게임 중 바로 물어보고 답변받을 수 있는 퀄리티
커스텀 UI 적용: 게임 분위기와 어울리는 디자인 구현
📚 배운 점
Agent Builder + ChatKit + Widget 구조나 작동 방식 파악
Vercel 지나 주부터 처음 써보는데 편리함
🚀 앞으로의 계획
1. Dify로 마이그레이션 (비용 절감): Agent Builder와 동일한 워크플로우를 Dify로 재구성
2. 데이터 자동 갱신 파이프라인 구축
3. 기능 확장: 퀘스트 가이드 추가
