blevels

Home / AI / AI 바이브코딩 / AI로 실시간 번역기 만들기 — DeepL API 연동 1시간 완성

VIBE

AI로 실시간 번역기 만들기 — DeepL API 연동 1시간 완성

게시일 2026-04-30수정일 2026-04-30
공식 링크
On this page

DeepL API는 무료 플랜으로도 월 500,000자까지 번역이 가능하다. 입력창·언어 선택·결과 표시·복사 버튼 네 가지 요소만 있으면 실용적인 번역기가 완성된다.

:::callout type=info 이 튜토리얼은 Cursor 1.0 / Claude Sonnet 4.6 / Next.js 16 / DeepL Free API 기준입니다 (2026-04). 도구 업데이트 시 검토 필요. :::

목표

DeepL API를 연동해 텍스트를 즉시 번역하는 웹 앱을 1시간 안에 만든다. 한국어·영어·일어·중국어 4개 언어 선택, 실시간 디바운스 번역, 복사 버튼을 포함한 완전한 UI를 AI와 함께 구현한다.

준비물

  • DeepL 계정 (deepl.com, 무료 플랜 500K자/월)
  • DeepL API Free 키 — 계정 → Account summary → Authentication Key
  • Node.js 20 이상
  • Cursor IDE

1단계 — 프로젝트 생성 및 API 키 등록

npx create-next-app@latest deepl-translator --typescript --tailwind --app
cd deepl-translator
npm install deepl-node
# .env.local
DEEPL_API_KEY=발급받은_api_key_here

DeepL Free API는 api-free.deepl.com 엔드포인트를 사용한다. API 키 마지막 두 글자가 :fx이면 Free 플랜이다. deepl-node SDK는 키 값으로 자동 감지한다.

AD

2단계 — 번역 API Route 생성

src/app/api/translate/route.ts를 만들고 Cursor에 아래 프롬프트를 입력한다.

deepl-node SDK를 사용해 텍스트를 번역하는 Next.js API route를 만들어줘.
요청 body에서 text와 targetLang을 받아 DeepL로 번역하고 결과를 반환.
빈 텍스트 입력 시 빈 문자열을 반환해 불필요한 API 호출을 방지해줘.
import * as deepl from 'deepl-node';

const translator = new deepl.Translator(process.env.DEEPL_API_KEY!);

export async function POST(request: Request) {
  const { text, targetLang } = await request.json();

if (!text?.trim()) {
    return Response.json({ translation: '' });
  }

const result = await translator.translateText(
    text,
    null,  // 소스 언어 자동 감지
    targetLang as deepl.TargetLanguageCode
  );

return Response.json({ translation: result.text });
}

지원 언어 코드: 한국어 KO, 영어 EN-US, 일어 JA, 중국어 간체 ZH

3단계 — 실시간 번역 UI 구현

src/app/page.tsx를 열고 Cursor에 아래 프롬프트를 입력한다.

DeepL 번역기 UI를 만들어줘.

- 왼쪽: 원문 입력창 + 소스 언어 자동 감지 표시
- 오른쪽: 번역 결과 텍스트
- 상단: 목표 언어 탭 (한국어 / 영어 / 일어 / 중국어)
- 입력 후 500ms 디바운스로 자동 번역 API 호출
- Tailwind CSS, 로딩 스피너 포함

디바운스 훅은 아래 패턴을 Cursor에 제시하면 자동 통합된다.

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

return debouncedValue;
}
AD

4단계 — 복사 버튼 및 글자 수 카운터 추가

Cursor에 아래 프롬프트를 입력한다.

번역 결과 영역에 클립보드 복사 버튼을 추가해줘.
클릭 시 "복사됨!" 텍스트가 2초간 표시되고 원래 아이콘으로 복귀.
원문 입력창 하단에 글자 수 카운터도 표시해줘 (최대 5000자 제한, 초과 시 경고).

5단계 — 빌드 및 배포 검증

npm run build   # 타입 오류 및 빌드 오류 확인
npm run dev     # http://localhost:3000 최종 검증

Vercel 배포 시 Project Settings → Environment Variables에 DEEPL_API_KEY를 추가한다.

결과

동작 확인 체크리스트:

  • [ ] 텍스트 입력 후 500ms 이내 번역이 자동 시작되는가
  • [ ] 언어 탭 전환 시 현재 입력 텍스트가 즉시 재번역되는가
  • [ ] 복사 버튼 클릭 후 클립보드에 번역 텍스트가 저장되는가
  • [ ] 5000자 초과 입력 시 경고 메시지가 표시되는가

다음 단계

문서 파일 번역은 translator.translateDocument(), 특정 용어 고정 번역은 translator.createGlossary()로 확장할 수 있다.

관련 튜토리얼: deepl-api / nextjs / cursor

AD