피드로 돌아가기
The Longest Night: break four ciphers before sundown, then answer Turing's question
Dev.toDev.to
Frontend

Zero-dependency 단일 파일 아키텍처와 Gemini AI 연동을 통한 Turing Test 구현

The Longest Night: break four ciphers before sundown, then answer Turing's question

LJDaniel2026년 6월 21일7intermediate

Context

별도 빌드 과정이나 외부 프레임워크 없이 브라우저에서 즉시 실행 가능한 고밀도 게임 구현 필요. 특히 클라이언트 사이드 정적 페이지에서 API Key 노출 없이 Gemini AI 모델을 안전하게 통합해야 하는 보안 제약 존재.

Technical Solution

  • Vanilla JS와 Canvas API를 활용하여 외부 라이브러리 의존성을 제거한 단일 index.html 구조 설계
  • API Key 보안을 위해 Cloudflare Worker를 Proxy 계층으로 도입하여 서버 사이드에서 Gemini API 키 관리 및 요청 제어
  • IP 기반 Rate Limiting과 서버 사이드 Persona/Token Cap 설정을 통한 AI 모델 오남용 방지 및 비용 최적화
  • Live AI 응답 불가 시 '사용자 키 입력' 및 '스크립트 기반 응답'으로 이어지는 Graceful Degradation 전략 적용
  • WebAudio API를 통한 절차적 사운드 생성 및 Daylight 변수와 연동된 Low-pass Filter 설계로 게임 상태를 청각적으로 피드백
  • 텍스트 렌더링 시 딕셔너리 기반의 'Gold-glow' 프리뷰 로직을 통해 튜토리얼 없는 UX 유도

["Client-side AI \ud1b5\ud569 \uc2dc API Key \ub178\ucd9c \ubc29\uc9c0\ub97c \uc704\ud55c Serverless Proxy \ub3c4\uc785 \uac80\ud1a0", "\uc11c\ube44\uc2a4 \uc911\ub2e8 \ubc29\uc9c0\ub97c \uc704\ud574 Live AI -> Custom Key -> Static Script \uc21c\uc758 Degradation \uacbd\ub85c \uc124\uacc4", "UX \ubcf5\uc7a1\ub3c4\ub97c \ub0ae\ucd94\uae30 \uc704\ud574 \ud29c\ud1a0\ub9ac\uc5bc \ub300\uc2e0 \ub370\uc774\ud130 \uae30\ubc18\uc758 \uc2e4\uc2dc\uac04 \uc2dc\uac01\uc801 \ud53c\ub4dc\ubc31(\uc608: Glow effect) \uc801\uc6a9", "\uc678\ubd80 \ub9ac\uc18c\uc2a4 \ub85c\ub529 \uc2dc\uac04\uc744 \uc904\uc774\uae30 \uc704\ud574 WebAudio API \ub4f1\uc744 \ud65c\uc6a9\ud55c \uc808\ucc28\uc801 \ucf58\ud150\uce20 \uc0dd\uc131 \uace0\ub824"]

원문 읽기