내 블로그에 AI 조수 심기: Groq & Gemini API 호출

1. 도입: 왜 직접 AI API를 연동하는가?

요즘은 웹사이트에서 직접 AI를 쓰는 시대입니다. 하지만 단순히 API 키만 넣고 “Hello”를 주고받는 수준을 넘어, **실제 서비스 수준의 UX(사용자 경험)**를 갖추려면 생각보다 챙길 것이 많습니다.

오늘은 제 블로그 **’Mana’s Lab’**의 AI 조수를 업그레이드하며 겪은 시행착오와 해결책을 공유합니다.

---

2. 핵심 해결책: 429 Resource Exhausted 에러 처리

무료 티어 API를 쓰다 보면 가장 자주 마주치는 것이 바로 **할당량 초과(429 에러)**입니다.

• 문제: 에러가 나면 화면에 아무 반응이 없거나 콘솔에만 찍혀 사용자가 답답해함.
• 해결: PHP에서 받은 에러 객체를 분석해 채팅창에 투명한 빨간색 배경의 전용 메시지를 띄우도록 커스텀 CSS를 적용했습니다.

이제 “잠시 후 다시 시도해 주세요”라는 안내가 시각적으로 명확하게 전달됩니다.

---

3. UX의 한 끗: Tab 키로 모델 광속 전환

여러 모델(Gemini 1.5, 2.5 등)을 테스트할 때 일일이 마우스로 콤보박스를 클릭하는 건 매우 번거로운 일입니다.

• 구현 기능: 입력창에서 Tab을 누르면 다음 모델, Shift + Tab을 누르면 이전 모델로 즉시 변경.
• 디테일: * e.preventDefault()로 포커스 이동 차단.
  • setTimeout과 clearTimeout을 조합해 2초간 입력창 placeholder에 현재 바뀐 모델명을 표시.
  • setCookie를 연동해 새로고침 후에도 선택한 모델 유지.

이렇게 하면 키보드에서 손을 떼지 않고도 다양한 모델의 성능을 즉시 비교해 볼 수 있습니다.

---

4. 청각적 디테일: TTS(음성 합성) 최적화

AI의 답변을 귀로 듣는 것도 중요하죠. 하지만 브라우저 TTS는 첫 로딩 시 목소리 목록을 가져오는 데 시간이 걸려 기본 음성이 나오는 버그가 있습니다.

• 해결: onvoiceschanged 이벤트를 감시하여 구글 한국어 음성을 우선적으로 매칭하도록 로직을 짰습니다.
• 이탈 방지: 페이지를 닫거나 새로고침할 때 소리가 계속 나오지 않도록 beforeunload 이벤트에서 synth.cancel()을 실행해 깔끔하게 마무리했습니다.

---

5. 마무리하며

AI 기술은 빠르게 변하지만, 그것을 다루는 개발자의 디테일이 사용자에게는 가장 큰 차이로 다가옵니다.

이번 포스팅에서 다룬 코드는 블로그 하단에서 확인하실 수 있습니다. 여러분도 여러분만의 스마트한 AI 조수를 만들어 보세요!

---