1. 들어가며
AI 번역 서비스는 이제 누구나 쉽게 사용할 수 있는 시대가 되었습니다. ChatGPT API를 활용하면 고품질 번역기를 직접 제작할 수 있는데, 이는 단순히 API 호출만으로도 가능합니다. 이번 글에서는 ChatGPT API를 활용해 나만의 번역 웹앱을 만드는 방법을 소개합니다.
2. 준비물
번역 웹앱 제작을 위해 필요한 도구는 다음과 같습니다.
- OpenAI API Key – OpenAI 개발자 페이지에서 발급
- 프론트엔드 환경 – HTML, CSS, JavaScript
- 서버 환경(선택) – Node.js 또는 Python Flask
- 기본적인 프로그래밍 지식
3. API 구조 이해하기
OpenAI API를 사용해 번역을 하려면 **프롬프트(prompt)**를 번역 지시문 형태로 작성해 ChatGPT 모델에 전달하면 됩니다. 예를 들어, 한국어를 영어로 번역하려면 다음과 같이 요청할 수 있습니다.
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "gpt-4o-mini",
messages: [
{ role: "system", content: "You are a translation assistant." },
{ role: "user", content: "Translate the following text from Korean to English: 안녕하세요" }
]
})
});
const data = await response.json();
console.log(data.choices[0].message.content);
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "gpt-4o-mini",
messages: [
{ role: "system", content: "You are a translation assistant." },
{ role: "user", content: "Translate the following text from Korean to English: 안녕하세요" }
]
})
});
const data = await response.json();
console.log(data.choices[0].message.content);
4. 번역 웹앱 제작 과정
(1) HTML 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AI 번역기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ChatGPT AI 번역기</h1>
<textarea id="inputText" placeholder="번역할 내용을 입력하세요"></textarea>
<button id="translateBtn">번역하기</button>
<div id="output"></div>
<script src="app.js"></script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>AI 번역기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ChatGPT AI 번역기</h1>
<textarea id="inputText" placeholder="번역할 내용을 입력하세요"></textarea>
<button id="translateBtn">번역하기</button>
<div id="output"></div>
<script src="app.js"></script>
</body>
</html>
(2) CSS 스타일
body { font-family: Arial, sans-serif; max-width: 600px; margin: auto; padding: 20px; }
textarea { width: 100%; height: 120px; margin-bottom: 10px; }
button { padding: 10px 20px; }
#output { margin-top: 20px; padding: 10px; border: 1px solid #ddd; }
textarea { width: 100%; height: 120px; margin-bottom: 10px; }
button { padding: 10px 20px; }
#output { margin-top: 20px; padding: 10px; border: 1px solid #ddd; }
(3) JavaScript 코드
const API_KEY = "YOUR_API_KEY";
document.getElementById("translateBtn").addEventListener("click", async () => {
const text = document.getElementById("inputText").value;
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "gpt-4o-mini",
messages: [
{ role: "system", content: "You are a translation assistant." },
{ role: "user", content: `Translate this text to English: ${text}` }
]
})
});
const data = await response.json();
document.getElementById("output").innerText = data.choices[0].message.content;
});
document.getElementById("translateBtn").addEventListener("click", async () => {
const text = document.getElementById("inputText").value;
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "gpt-4o-mini",
messages: [
{ role: "system", content: "You are a translation assistant." },
{ role: "user", content: `Translate this text to English: ${text}` }
]
})
});
const data = await response.json();
document.getElementById("output").innerText = data.choices[0].message.content;
});
5. 개선 아이디어
- 언어 선택 기능 추가 (한국어 ↔ 영어, 일본어 등)
- 번역 이력 저장 기능 구현
- UI/UX 향상 – 모바일 반응형 디자인 적용
- 발음 기능 – TTS(Text-to-Speech) API 연동
6. 마무리
이렇게 하면 누구나 쉽게 ChatGPT API를 활용한 번역 웹앱을 만들 수 있습니다. 오픈소스 기반으로 확장하면 상용 수준의 번역 서비스로 발전시킬 수도 있습니다.