피드로 돌아가기
Dev.toFrontend
원문 읽기
Vanilla JS 기반 비동기 루프와 Gemini API를 결합한 실시간 평가 시스템
SOLSTICE SIDEBAR - AI INCIDENT DESK
AI 요약
Context
게임 엔진 없이 24시간 내에 구현해야 하는 극심한 시간 제약 발생. 복잡한 프레임워크 없이 정해진 시간 내에 실시간 이벤트 큐와 외부 AI 모델을 연동하는 가벼운 단일 페이지 애플리케이션 구조 필요.
Technical Solution
- setInterval 기반의 비동기 루프를 통한 Solstice Clock 및 무작위 기술 이상 현상 스트리밍 구현
- 외부 프레임워크를 배제한 Vanilla HTML5, CSS3, JavaScript 기반의 경량 아키텍처 설계로 런타임 오버헤드 제거
- Gemini 1.5 Flash 모델과 browser fetch POST 요청을 직접 연결하여 서버리스 형태의 AI 평가 파이프라인 구축
- Client-side localStorage를 활용한 API Key 관리 모달을 통해 보안성 및 사용자 설정 유연성 확보
- 게임 메트릭(Approval%, Stability%)과 사용자 텍스트 리포트를 결합한 프롬프트를 통해 동적 평가 결과 생성
실천 포인트
1. 외부 API 연동 시 localStorage를 활용한 사용자 키 관리 체계 검토
2. 복잡한 상태 관리가 필요 없는 소규모 프로젝트에서 Vanilla JS 비동기 루프의 효율성 확인
3. 정량적 데이터(메트릭)와 정성적 데이터(텍스트)를 결합한 LLM 프롬프트 설계 적용