피드로 돌아가기
I Built an AI That Speaks Fluent LinkedIn (And It's Terrifying)
Dev.toDev.to
AI/ML

Gemini API와 Next.js 15로 구현한 엔터프라이즈 jargon 번역 엔진

I Built an AI That Speaks Fluent LinkedIn (And It's Terrifying)

Sasanka Rath2026년 4월 4일3intermediate

Context

일상 언어와 기업용 전문 용어 사이의 괴리 발생. 단순 번역을 넘어 분석 지표 제공과 단계별 수준 조절 기능 필요. April Fools 챌린지를 위한 고도화된 오버엔지니어링 스택 적용.

Technical Solution

  • Next.js 15 App Router와 React 19 기반의 최신 프런트엔드 아키텍처 설계
  • Google Gemini 2.5 Flash-Lite 모델을 서버 사이드 API 프록시 구조로 연결하여 API 키 노출 차단
  • AbortController를 이용한 25초 타임아웃 설정 및 Strict CSP 적용으로 브라우저의 직접적인 API 호출 원천 봉쇄
  • 단일 번역 요청당 분석 지표 및 엣지 케이스 처리를 위해 5개의 독립적인 AI 호출과 구조화된 JSON 출력 스키마 설계
  • Upstash Redis 기반 Sliding Window 알고리즘을 적용하여 IP당 분당 20회 요청 제한 및 인메모리 폴백 메커니즘 구현
  • Deterministic index arithmetic 방식의 파티클 생성 로직으로 React SSR 및 Hydration mismatch 문제 해결

Impact

  • IP당 분당 20회 요청 제한(20 req/min)
  • 최대 3개의 동시 요청 제한
  • 자체 호스팅 기반 13 KB 규모의 Tailwind CSS 최적화

Key Takeaway

생성형 AI 모델의 일관된 응답을 위해 정교한 시스템 프롬프트와 구조화된 출력 스키마 정의가 필수적임. 서버리스 환경에서 외부 API 연동 시 보안 헤더와 CSP 설정을 통한 클라이언트 사이드 유출 방지 설계가 중요함.


SSR 환경에서 랜덤 UI 요소 생성 시 Math.random() 대신 결정론적 알고리즘을 사용하여 Hydration 오류를 방지할 것

원문 읽기