웹 애플리케이션을 개발하다 보면 다국어 지원을 위해 언어별 JSON 파일을 관리해야 하는 경우가 많습니다. 매번 수동으로 JSON 파일을 수정하는 것은 번거로울 뿐만 아니라 실수를 유발할 수 있죠.
이번 포스트에서는 구글 시트를 활용해 다국어 데이터를 관리하고, Apps Script를 통해 자동으로 JSON 파일을 생성하는 방법을 알아보겠습니다.
참고로, 구글 시트가 아닌, MS Excel 파일을 Node.js로 JSON 다국어 파일 생성하기 (XLSX to JSON)는 해당 링크를 통해 확인하실 수 있습니다.
📋 1단계: 구글 시트 작성
먼저 다국어 데이터를 정리할 구글 시트를 만들어보겠습니다.
시트 구조 예시
| key | ko | en | jp |
|---|---|---|---|
| greeting | 안녕하세요 | Hello | こんにちは |
| welcome | 환영합니다 | Welcome | ようこそ |
| button.ok | 확인 | OK | OK |
📌 다국어 엑셀 파일 작성 시, 언어 스크립트의 key 값은 통일되어야 합니다.
💡 작성 팁
- key 컬럼: 중첩 구조를 원한다면 점(.)으로 구분하여 작성합니다 (예:
button.ok,menu.home) - 언어 컬럼: 헤더에는 언어 코드를 명확히 작성합니다 (ko, en, jp 등)
- 일관성 유지: 모든 Key에 대해 모든 언어의 번역을 빠짐없이 작성합니다
📁 2단계: 구글 드라이브 폴더 설정
폴더 생성 및 시트 저장
- 구글 드라이브에 새 폴더를 생성합니다
- 작성한 구글 시트를 해당 폴더에 저장합니다
폴더 ID 확인
폴더 ID는 URL에서 확인할 수 있습니다:
https://drive.google.com/drive/folders/${YOUR_FOLDER_ID}?dmr=1&ec=wgc-drive-hero-goto
^^^^^^^^^^^^^^^^^^
이 부분이 폴더 ID입니다💡 참고: 이 폴더 ID는 나중에 Apps Script 코드에서 사용되므로 복사해두세요!
⚙️ 3단계: Apps Script 설정
앱 스크립트 생성
- 구글 시트에서 확장 프로그램 → Apps Script 클릭
Drive API 서비스 추가
- Apps Script 편집기 왼쪽 사이드바에서 서비스(+) 클릭
- Drive API 추가
🔧 4단계: 코드 작성
아래 코드를 Apps Script 편집기에 붙여넣으세요:
function exportToJSON() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getActiveSheet();
const range = sheet.getDataRange();
const values = range.getValues();
const header = values[0]; // First row as header (key, ko, en, ...)
const languages = header.slice(1); // Get language codes (ko, en, jp...)
// Initialize an object to hold language data
const languageData = {};
languages.forEach(lang => {
const langCode = lang;
languageData[langCode] = {};
});
// Process rows starting from the second row (actual data)
for (let i = 1; i < values.length; i++) {
const row = values[i];
const key = row[0]; // The first column is the key
languages.forEach((lang, index) => {
const langCode = lang;
const value = row[index + 1]; // Get value for current language
// Handle nested keys (e.g., "button.ok")
setNestedValue(languageData[langCode], key, value);
});
}
// Create and save JSON files
const folderId = 'YOUR_GOOGLE_DRIVE_FOLDER_ID'; // Replace with your desired folder ID
const folder = DriveApp.getFolderById(folderId);
for (const langCode in languageData) {
const fileName = `${langCode}.json`;
const fileContent = JSON.stringify(languageData[langCode], null, 2); // Pretty print JSON
// Create or update file in Google Drive
const existingFiles = folder.getFilesByName(fileName);
if (existingFiles.hasNext()) {
const file = existingFiles.next();
file.setContent(fileContent);
} else {
folder.createFile(fileName, fileContent, 'application/json');
}
}
Browser.msgBox("JSON files exported successfully to Google Drive!");
}
// Helper function to set nested properties
function setNestedValue(obj, path, value) {
const parts = path.split('.');
let current = obj;
for (let i = 0; i < parts.length; i++) {
const part = parts[i];
if (i === parts.length - 1) {
current[part] = value;
} else {
if (!current[part] || typeof current[part] !== 'object') {
current[part] = {};
}
current = current[part];
}
}
}🔧 코드 수정사항
위 코드에서 다음 부분을 수정해야 합니다:
const folderId = 'YOUR_GOOGLE_DRIVE_FOLDER_ID'; // 2단계에서 복사한 폴더 ID로 교체▶️ 5단계: 실행 및 확인
스크립트 실행
- Apps Script 편집기 상단의 실행 버튼 클릭
- 첫 실행 시 권한 승인 필요 (Google 계정 로그인 및 권한 허용)
- 실행 완료되면 Apps Script의 실행 로그를 통해 확인할 수 있습니다.
결과 확인
실행 완료 후, 구글 드라이브의 지정된 폴더에서 다음과 같은 JSON 파일들이 생성된 것을 확인할 수 있습니다:
ko.json
{
"greeting": "안녕하세요",
"welcome": "환영합니다",
"button": {
"ok": "확인"
}
}en.json
{
"greeting": "Hello",
"welcome": "Welcome",
"button": {
"ok": "OK"
}
}