Gemini AI 검색 설정 가이드
Gemini AI 검색 설정 가이드
📋 개요
블로그에 AI 대화형 검색 기능이 추가되었습니다! 무료 Gemini API를 사용하여 블로그 내용을 기반으로 자연스러운 대화가 가능합니다.
🚀 빠른 시작 (5분 소요)
1단계: Gemini API 키 발급 (무료)
- Google AI Studio 접속
- URL: https://aistudio.google.com/app/apikey
- API Key 생성
- “Create API Key” 버튼 클릭
- 프로젝트 선택 또는 새로 생성
- API 키 복사
- 무료 한도 확인
- 분당 15회 요청 (RPM)
- 하루 100명 방문자 기준으로 충분함
- 완전 무료!
2단계: API 키 설정
- 파일 열기
js/ai-search.js - API 키 교체
// 7번째 줄 찾기 const GEMINI_API_KEY = 'YOUR_GEMINI_API_KEY_HERE'; // 발급받은 API 키로 변경 const GEMINI_API_KEY = 'AIzaSyAbc123...'; // 실제 키 입력 - 저장 및 커밋
git add js/ai-search.js git commit -m "Add Gemini API key for AI search" git push
⚠️ 보안 주의사항:
- API 키는 클라이언트에 노출되므로, 반드시 API 키에 HTTP Referer 제한을 설정하세요
- Google Cloud Console에서 API 키 → Restrictions → HTTP referrers 설정
- 허용할 도메인:
https://thdev.tech/*
💬 사용 방법
검색창 열기
- 헤더 검색 버튼 클릭
- 또는
/키 입력
질문하기
예시 질문:
- "Kotlin Flow 사용법 알려줘"
- "안드로이드 성능 최적화 방법"
- "Compose 시작하기"
대화 이어가기
AI의 답변 후 추가 질문 가능:
👤 "Kotlin Flow 사용법 알려줘"
🤖 "Flow는 비동기 데이터 스트림..."
👤 "LiveData와 차이점은?"
🤖 "LiveData는 Lifecycle을 고려하는 반면..."
검색창 닫기
ESC키- 배경(오버레이) 클릭
- X 버튼 클릭
🎨 주요 기능
✅ 구현된 기능
- 🔍 전체 블로그 검색 (제목, 본문, 태그)
- 💬 AI 대화형 답변
- 📄 관련 글 링크 자동 추가
- 🌙 다크모드 지원
- 📱 모바일 반응형
- ⌨️ 키보드 단축키 (
/,ESC) - 🎯 컨텍스트 유지 (대화 이어가기)
🔧 기술 스택
- 검색 엔진: Fuse.js (클라이언트 사이드)
- AI: Gemini 1.5 Flash (Google)
- 비용: 완전 무료
- 응답 속도: 1-2초
💰 비용 및 한도
무료 티어
- 요청 한도: 15 RPM (분당 15회)
- 일일 한도: 21,600회 (충분!)
- 실제 사용량: 10-20회/일 예상
예상 시나리오 (하루 100명 방문)
- 검색 사용: 10명
- AI 질문: 5회
- 추가 질문: 3회
- 총 요청: 약 8회/일
✅ 결론: 무료 한도 내에서 충분히 운영 가능!
🛠️ 트러블슈팅
문제 1: “API key not configured” 오류
해결책:
js/ai-search.js파일에서 API 키 확인YOUR_GEMINI_API_KEY_HERE를 실제 키로 교체했는지 확인
문제 2: “API key invalid” 오류
해결책:
- API 키가 올바른지 확인
- Google AI Studio에서 새 키 발급
문제 3: 검색 결과가 없음
해결책:
search.json파일이 올바르게 생성되었는지 확인- Jekyll 서버 재시작
문제 4: AI 답변이 느림
원인:
- Gemini API 응답 시간 (1-2초 정상)
- 네트워크 상태 확인
🔐 보안 설정 (중요!)
API 키 제한 설정
- Google Cloud Console 접속
- https://console.cloud.google.com/apis/credentials
- API 키 선택
- 생성한 API 키 클릭
- Restrictions 설정
```
Application restrictions:
- HTTP referrers (websites)
Website restrictions:
- https://thdev.tech/*
- http://localhost:4000/* (로컬 테스트용) ```
- API restrictions 설정
```
Restrict key:
- Generative Language API ```
📊 모니터링
사용량 확인
- Google AI Studio 접속
- Usage 탭에서 일일/월간 사용량 확인
알림 설정
- 무료 한도 80% 도달 시 이메일 알림 설정 권장
🎯 커스터마이징
추천 질문 변경
_includes/ai-search.html 파일에서:
<button class="suggestion-btn" data-question="나만의 질문">
버튼 텍스트
</button>
AI 답변 톤 변경
js/ai-search.js 파일에서 프롬프트 수정:
const prompt = `당신은 thdev.tech 블로그의 친절한 AI 도우미입니다.
...
4. 친근하고 도움이 되는 톤으로 답변하세요 // 이 부분 수정
...`;
검색 결과 개수 조정
js/ai-search.js 파일에서:
const relevantPosts = searchPosts(question, 5); // 5개 → 원하는 개수
📝 FAQ
Q: API 키가 노출되어도 안전한가요?
A: 클라이언트에서 API 호출하므로 키가 노출됩니다. 하지만 HTTP Referer 제한을 설정하면 본인의 도메인에서만 사용 가능합니다.
Q: 비용이 발생할 수 있나요?
A: Gemini 1.5 Flash는 무료 티어가 매우 관대합니다. 하루 100명 방문 기준으로는 무료 한도를 초과하기 어렵습니다.
Q: 다른 AI 모델로 변경 가능한가요?
A: 네! js/ai-search.js에서 API URL과 요청 포맷만 변경하면 OpenAI, Claude 등 다른 AI 사용 가능합니다.
Q: 검색 품질을 높이려면?
A:
search.json에서truncate: 2000을 더 큰 값으로 변경 (본문 더 많이 포함)- Fuse.js threshold 값 조정 (더 엄격하거나 느슨하게)
🚀 다음 단계
추가 개선 아이디어
- 검색 분석
- 인기 검색어 추적
- Google Analytics 연동
- 캐싱
- 자주 묻는 질문 미리 답변 생성
- LocalStorage에 캐싱
- 다국어 지원
- 영어 질문도 답변 가능하도록
- 음성 입력
- Web Speech API 연동
📞 문의
문제가 발생하거나 개선 제안이 있으시면:
- GitHub Issues
- 이메일: [email protected]
즐거운 AI 검색 되세요! 🎉