크롬 확장 프로그램의 다국어 지원 자동화하기
크롬 확장 프로그램을 글로벌하게 배포하려면 여러 언어를 지원하는 것이 필수입니다. 그러나 모든 언어를 일일이 번역하고 관리하는 과정은 상당한 시간과 노력을 필요로 합니다. 오늘은 이 번거로운 작업을 자동화하여 효율적으로 관리할 수 있는 방법을 소개하겠습니다. 특히, AI 번역 API인 DeepSeek를 활용하여 간단하게 크롬 웹 확장의 다국어 지원을 구현하는 방식을 알아보겠습니다.
1. 번역 자동화를 위한 사전 준비
먼저 Node.js 환경에서 작동할 수 있도록 필요한 라이브러리를 설치합니다.
npm install axios dotenv
다음으로 프로젝트 루트에 .env
파일을 만들고, 발급받은 DeepSeek API 키를 아래와 같이 설정합니다.
DEEPSEEK_API_KEY=여러분의_API_키
2. 코드의 핵심 기능 분석
제공된 코드의 주요 기능은 다음과 같습니다.
- 파일 시스템 관리: Node.js의 내장 모듈
fs
와path
를 이용하여 로컬 언어 파일을 읽고 저장합니다. - API 통신 관리: Axios를 이용해 DeepSeek API에 번역 요청을 보내고 응답을 처리합니다.
3. 자동 번역 요청 및 처리
아래의 translateLocaleMessages
함수가 DeepSeek API로 번역 요청을 처리합니다.
async function translateLocaleMessages(sourceLang, targetLang, sourceJson) {
const prompt = `아래는 텍스트 파일이야, 번역해줘. 마크다운의 language는 넣지 말아줘. value는 ${targetLang.language} 언어로 번역해줘.\n${sourceJson}`;
const response = await deepseekClient.post('/v1/chat/completions', {
model: "deepseek-reasoner",
messages: [{ role: "user", content: prompt }],
temperature: 0.7,
max_tokens: 8192
});
return response.data.choices[0].message.content.replaceAll("```json", "").replaceAll("```", "");
}
4. 번역 결과 저장
번역된 결과는 다음 함수에서 자동으로 로컬 디렉토리에 저장됩니다.
async function translateLocale(sourceLang, targetLang, sourceFilePath, targetFilePath) {
const sourceJson = fs.readFileSync(sourceFilePath, 'utf8');
const translatedMessages = await translateLocaleMessages(sourceLang, targetLang, sourceJson);
const dir = path.dirname(targetFilePath);
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, { recursive: true });
}
fs.writeFileSync(targetFilePath, translatedMessages, 'utf8');
}
5. 전체 번역 프로세스 자동화
다음 메인 함수를 통해 설정된 모든 타겟 언어로 자동 번역이 이루어집니다.
(async function(){
const sourceLang = langJson.find(value => value.language_code === 'ko');
for (const [index, targetLang] of langJson.entries()) {
if(targetLang.language_code !== sourceLang.language_code){
await translateLocale(
sourceLang,
targetLang,
getLocalePath(sourceLang.language_code),
getLocalePath(`${index}.${targetLang.language}`)
);
}
}
})();
6. 번역 자동화의 장점
이 자동화 시스템은 다음과 같은 이점을 제공합니다.
- 효율성 향상: 번역 작업 시간을 획기적으로 단축합니다.
- 유지보수 용이성: 새로운 언어 추가와 기존 번역의 업데이트가 편리합니다.
- 확장성: 다양한 언어 지원을 간단히 확장할 수 있습니다.
7. 언어팩
[
{
"language": "그리스어",
"language_code": "el",
"language_kor": "Ελληνικά"
},
...
]
결론
DeepSeek API 기반 자동 번역을 이용하면 크롬 확장 프로그램을 손쉽게 글로벌 시장에 대응할 수 있습니다. 앞으로도 다양한 AI 도구와 기술을 통해 개발 효율성을 높이는 방안을 지속적으로 소개해 드리겠습니다.
'Dev' 카테고리의 다른 글
Node.js로 chrome webapp 이미지 자동 리사이징하기: sharp와 fs-extra 활용 (0) | 2025.04.04 |
---|---|
크롬 확장 프로그램의 핵심, manifest.json 가이드 (0) | 2025.04.02 |
크롬 확장 앱 개발: 팝업(Popup)과 사이드 패널(Side Panel)의 차이점 및 활용 방법 (1) | 2025.03.31 |
크롬 웹앱에서 다국어 지원 (5) | 2025.03.23 |
크롬 브라우저 성능 극대화 가이드: 하드웨어/소프트웨어 최적화 전략 (2) | 2025.03.10 |