⚡ Special Assignment
나만의 AI 챗봇 만들기
Gemini 2.5 Flash API로 직접 AI와 대화하는 챗봇을 만들어요!
코드를 복사 → GitHub에 붙여넣기 → 3곳만 수정하면 끝!
1
Gemini API 키 발급받기
진행 중
AI를 쓰려면 API 키가 필요해요. 내가 누군지 Google에 알려주는 비밀 코드예요.
- aistudio.google.com/apikey 접속
- 구글 계정으로 로그인 (선생님·부모님 계정 추천)
- "Create API key" 버튼 클릭
- 생성된 키를 메모장에 따로 저장해두기 📋
🔑예시: AIzaSyA1b2C3d4E5… (절대 다른 사람에게 공유 금지!)
⚠️ 주의
API 키는 코드 안에 그대로 들어가요. GitHub에 공개된 레포에 올라가니 무료 한도 안에서만 사용하세요. 이상하다 싶으면 AI Studio에서 키를 재발급하면 돼요!
2
GitHub에 새 레포지토리 만들기
대기 중
내 코드를 저장할 GitHub 레포지토리를 만들어요.
- github.com 접속 → 로그인
- 오른쪽 위 "+" → "New repository"
- Repository name: my-chatbot (영어로!)
- Public 선택 (나중에 배포하려면 공개여야 해요)
- "Add a README file" 체크 ✅
- "Create repository" 클릭!
🐙레포 이름 예시: my-chatbot / ai-friend / gemini-bot
3
코드 복사 → GitHub 파일로 붙여넣기
대기 중
GitHub 레포 안에서 바로 파일을 만들 수 있어요. 아래 코드를 통째로 복사해서 GitHub 에디터에 붙여넣기만 하면 돼요!
- 만든 레포 페이지에서 "Add file" → "Create new file"
- 파일 이름: chatbot.html 입력
- 아래 전체 복사 버튼 클릭 후 에디터 안에 붙여넣기
- 아직 저장하지 말고 → 4단계로!
📄 chatbot.html
로딩 중...
4
딱 3곳만 수정하고 저장하기
대기 중
GitHub 에디터에서 Ctrl+H (찾아 바꾸기)로 아래 내용을 수정해요!
✏️ 수정할 3곳
① API 키 (필수!)
const API_KEY = "여기에_내_API_키_붙여넣기";
→ 1단계에서 발급한 API 키로 교체하세요.
② 챗봇 이름 (선택)
<h1>나의 AI 친구</h1>
→ 예) 🦊 코딩 도우미 여우 / 📚 공부 친구 / 🍳 요리사 봇
③ 챗봇 역할 (선택)
const SYSTEM_PROMPT = `너는 친절한 코딩 선생님이야...`;
→ 예) "너는 요리사야, 레시피를 알려줘" / "너는 영어 선생님이야"
수정 완료 후 화면 아래 "Commit changes" → "Commit changes" 버튼 클릭!
💡 TIP
Commit message(설명) 칸엔 "나의 챗봇 추가" 또는 "Add chatbot" 이라고 써요.
5
Cloudflare Pages로 배포해서 공유하기 🎉
대기 중
GitHub 레포를 Cloudflare에 연결하면 전 세계에서 접속 가능한 링크가 생겨요!
- pages.cloudflare.com 로그인
- "Workers & Pages" → "Create application" → "Pages"
- "Connect to Git" → GitHub 계정 연결 → 레포 선택
- Build settings 기본값 그대로 → "Save and Deploy"
- 배포 완료! 주소: [레포명].pages.dev/chatbot.html
💡 자동 배포
GitHub에서 파일을 수정·저장(commit)하면 Cloudflare가 자동으로 다시 배포해줘요!
🏆 특별과제 완료!
직접 AI 챗봇을 만들고 세상에 공개했어요!
진짜 개발자네요 🎉 친구들에게 링크를 공유해보세요!