Next.js 15, Cloudflare Pages, 그리고 DeepSeek으로 AI 프롬프트 생성기를 구축한 방법

2026년에 AI 도구를 만드는 것은 그 어느 때보다 쉬워졌지만, 올바른 아키텍처(Architecture)를 설계하는 데는 약간의 고민이 필요합니다. 여기 제가 4개의 모델, 6개의 언어를 지원하고 대규모 레이트 리미팅 (Rate Limiting)을 처리하는 무료 AI 프롬프트 생성기를 구축한 방법이 있습니다.

문제 (The Problem)

저는 다음과 같은 프롬프트 빌더를 원했습니다:

1. 기본적인 프롬프트 구성을 위해 오프라인 우선 (Offline-first) 방식으로 작동할 것
2. 명시적으로 요청될 때만 AI를 사용할 것 (비용 제어)
3. 서로 다른 필드 세트를 가진 여러 모델을 지원할 것
4. 데이터베이스 없이 IP당 레이트 리미팅 (Rate Limiting)을 처리할 것
5. 전 세계 CDN에 무료로 배포할 것

아키텍처 개요 (Architecture Overview)

프론트엔드 (Frontend): Next.js 15 정적 내보내기 (Static Export)

저는 output: 'export' 모드를 사용하여 Next.js 15를 사용했습니다. 이는 어떤 CDN에서도 서비스할 수 있는 정적 HTML/CSS/JS를 생성합니다. 핵심적인 프롬프트 구축은 순수 프론트엔드에서 이루어집니다:

interface PromptField {
  key: string;
  options: string[];
...

각 모델은 프롬프트를 조립하는 자체 필드 설정과 조인 (Join) 함수를 가집니다. 조인 함수는 사용자가 선택한 옵션을 가져와 토글에 따라 영어 또는 중국어 프롬프트를 출력합니다.

백엔드 (Backend): Cloudflare Pages Functions

AI 정제 (Refinement)를 위해 Cloudflare Pages Functions를 서버리스 백엔드로 사용했습니다. 여기서 핵심적인 통찰은 Cloudflare Functions가 전 세계 에지 (Edge) 위치에서 실행되므로 지연 시간 (Latency)이 최소화된다는 점입니다.

// functions/api/[[path]].ts
case '/api/prompt-refine': {
  const prompt = payload.prompt as string;
...

레이트 리미팅 (Rate Limiting): D1 데이터베이스

레이트 리미팅 (Rate Limiting)을 위해 Cloudflare D1 (SQLite 호환 서버리스 데이터베이스)을 사용했습니다. 각 IP는 ${ip}:${day}를 키로 하는 카운터를 할당받습니다. Redis가 필요하지 않습니다. D1은 이 사용 사례에 충분히 빠릅니다.

async function checkRateLimit(env, request, limit) {
  const ip = request.headers.get('CF-Connecting-IP');
  const day = new Date().toISOString().split('T')[0];
...

AI 통합 (AI Integration): DeepSeek API

저는 DeepSeek의 JSON 응답 모드(JSON response mode)를 선택했습니다. 덕분에 마크다운(markdown)을 파싱하거나 코드 블록에서 텍스트를 추출할 필요가 없습니다. 시스템 프롬프트(system prompt)는 AI가 유효한 JSON만 반환하도록 지시합니다: