728x90
반응형
Q : 이번엔 다국어 지원을 추가하고 싶어. 사용자 기기의 언어설정에 따라 자동으로 텍스트가 변경되도록. 기본은 영어로 하고, 한국/일본/중국/프랑스/스페인 정도 추가했으면 해.
완벽한 타이밍이야, Dalyoung! 다국어 지원은 앱의 전문성과 접근성을 확 높여주는 기능이지. React Native에서는 react-i18next와 i18next 조합이 가장 널리 쓰이고 강력해. 아래에 자동 언어 감지 + 다국어 리소스 적용까지 포함한 설정 방법을 정리해봤어:
🌍 1. 필요한 패키지 설치
npm install i18next react-i18next i18next-browser-languagedetector
npm install @react-native-async-storage/async-storage
📁 2. 언어 리소스 파일 생성
/src/locales/ 폴더에 아래와 같이 JSON 파일을 만들어줘:
- en.json
- ko.json
- ja.json
- zh.json
- fr.json
- es.json
예: en.json
{
"title": "SecureGen",
"generate": "Generate Password",
"copy": "Copy",
"length": "Password Length",
"uppercase": "Include Uppercase",
"lowercase": "Include Lowercase",
"numbers": "Include Numbers",
"symbols": "Include Symbols",
"substitute": "Substitute Characters",
"history": "Recent Passwords"
}
⚙️ 3. i18n 설정 파일 (src/i18n.js)
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import AsyncStorage from '@react-native-async-storage/async-storage';
import en from './locales/en.json';
import ko from './locales/ko.json';
import ja from './locales/ja.json';
import zh from './locales/zh.json';
import fr from './locales/fr.json';
import es from './locales/es.json';
const languageDetector = {
type: 'languageDetector',
async: true,
detect: async (callback) => {
const saved = await AsyncStorage.getItem('language');
const locale = saved || (navigator.language || 'en').split('-')[0];
callback(locale);
},
init: () => {},
cacheUserLanguage: async (lng) => {
await AsyncStorage.setItem('language', lng);
},
};
i18n
.use(languageDetector)
.use(initReactI18next)
.init({
compatibilityJSON: 'v3',
fallbackLng: 'en',
resources: {
en: { translation: en },
ko: { translation: ko },
ja: { translation: ja },
zh: { translation: zh },
fr: { translation: fr },
es: { translation: es },
},
interpolation: {
escapeValue: false,
},
});
export default i18n;
🧩 4. 앱에 적용 (App.js 또는 index.js)
import './src/i18n';
import { useTranslation } from 'react-i18next';
const { t } = useTranslation();
<Text>{t('generate')}</Text>
이제 사용자의 기기 언어 설정에 따라 자동으로 텍스트가 바뀌게 돼!
원한다면 언어 선택 드롭다운도 추가해서 수동 전환 기능도 넣을 수 있어.
다음은 번역 파일 샘플을 더 만들어줄까, 아니면 UI에 적용된 모습으로 예시 코드를 보여줄까? 😄🌐📱
반응형
Q : 위에서 얘기한 언어별로 json 작성해줘
좋아, Dalyoung! 아래는 다국어 지원을 위한 JSON 번역 파일 예시들이야. 앞서 설명한 키값(title, generate, copy 등)에 맞춰 각 언어로 번역해봤어. 이 파일들을 src/locales 폴더에 저장하면 돼:
🇺🇸 en.json (기본 영어)
{
"title": "SecureGen",
"generate": "Generate Password",
"copy": "Copy",
"length": "Password Length",
"uppercase": "Include Uppercase",
"lowercase": "Include Lowercase",
"numbers": "Include Numbers",
"symbols": "Include Symbols",
"substitute": "Substitute Characters",
"history": "Recent Passwords"
}
🇰🇷 ko.json (한국어)
{
"title": "시큐어젠",
"generate": "비밀번호 생성",
"copy": "복사하기",
"length": "비밀번호 길이",
"uppercase": "대문자 포함",
"lowercase": "소문자 포함",
"numbers": "숫자 포함",
"symbols": "특수문자 포함",
"substitute": "문자 대체",
"history": "최근 생성한 비밀번호"
}
🇯🇵 ja.json (일본어)
{
"title": "セキュアジェン",
"generate": "パスワード生成",
"copy": "コピー",
"length": "パスワードの長さ",
"uppercase": "大文字を含む",
"lowercase": "小文字を含む",
"numbers": "数字を含む",
"symbols": "記号を含む",
"substitute": "文字の置き換え",
"history": "最近生成されたパスワード"
}
🇨🇳 zh.json (중국어 - 간체)
{
"title": "安全生成器",
"generate": "生成密码",
"copy": "复制",
"length": "密码长度",
"uppercase": "包含大写字母",
"lowercase": "包含小写字母",
"numbers": "包含数字",
"symbols": "包含符号",
"substitute": "字符替换",
"history": "最近生成的密码"
}
🇫🇷 fr.json (프랑스어)
{
"title": "SecureGen",
"generate": "Générer un mot de passe",
"copy": "Copier",
"length": "Longueur du mot de passe",
"uppercase": "Inclure des majuscules",
"lowercase": "Inclure des minuscules",
"numbers": "Inclure des chiffres",
"symbols": "Inclure des symboles",
"substitute": "Substituer des caractères",
"history": "Mots de passe récents"
}
🇪🇸 es.json (스페인어)
{
"title": "SecureGen",
"generate": "Generar contraseña",
"copy": "Copiar",
"length": "Longitud de la contraseña",
"uppercase": "Incluir mayúsculas",
"lowercase": "Incluir minúsculas",
"numbers": "Incluir números",
"symbols": "Incluir símbolos",
"substitute": "Sustituir caracteres",
"history": "Contraseñas recientes"
}
📁 이 JSON 파일들은 각각 en.json, ko.json 등의 이름으로 저장해주면 되고, i18n 설정 파일에서 연결만 잘 해주면 끝이야!
언어 전환 기능을 UI에 넣고 싶다면 드롭다운이나 버튼으로 수동 전환 기능도 알려줄게.
UI에 적용된 예시도 함께 볼까? 🌐📱💬
Q : Alert.alert('문자 옵션을 하나 이상 선택해주세요');
이것도 i18n json 에 넣어줘
좋아, Dalyoung! 해당 경고 메시지도 다국어 번역에 포함시키는 게 맞아. Alert.alert('문자 옵션을 하나 이상 선택해주세요')에 들어갈 문자열을 i18n JSON에 추가하자. 내가 각 언어별로 alert_option_required 라는 키로 정리해봤어:
🌍 i18n 다국어 메시지 추가 항목
en.json
{
...
"alert_option_required": "Please select at least one character option."
}
ko.json
{
...
"alert_option_required": "문자 옵션을 하나 이상 선택해주세요."
}
ja.json
{
...
"alert_option_required": "少なくとも1つの文字オプションを選択してください。"
}
zh.json
{
...
"alert_option_required": "请至少选择一个字符选项。"
}
fr.json
{
...
"alert_option_required": "Veuillez sélectionner au moins une option de caractère."
}
es.json
{
...
"alert_option_required": "Por favor, selecciona al menos una opción de carácter."
}
🔁 코드에서의 사용 예시
import { useTranslation } from 'react-i18next';
const { t } = useTranslation();
...
if (chars.length === 0) {
Alert.alert(t('alert_option_required'));
return;
}
이제 경고 문구도 자동으로 언어에 따라 변환돼! 👌
다른 Alert 문구나 메시지들도 원하면 함께 다국어화해줄 수 있어—계속 작업할까? 🔧🌐✨
Q : 응 다른 Alert 문구와 메시지들도 작업해주고, 독일어 버전도 추가해줘
물론이지, Dalyoung! 🎯 아래는 앱에서 자주 쓰일 수 있는 Alert 및 메시지 문구들을 다국어로 정리한 거야. 기존에 사용한 키(alert_option_required) 외에도 다음과 같은 키들을 추가했어:
📋 추가된 Alert 메시지 키 목록
키 설명
| alert_option_required | 문자 옵션을 하나 이상 선택하지 않았을 때 |
| alert_password_copied | 비밀번호 복사 완료 알림 |
| alert_password_empty | 복사하려는 비밀번호가 비어 있을 때 |
| alert_history_copied | 최근 비밀번호 목록에서 복사했을 때 |
| alert_invalid_length | 비밀번호 길이가 너무 짧거나 설정되지 않았을 때 |
🌍 다국어 번역 (🇩🇪 독일어 포함)
🇺🇸 en.json
{
"alert_option_required": "Please select at least one character option.",
"alert_password_copied": "Password copied to clipboard!",
"alert_password_empty": "No password to copy.",
"alert_history_copied": "Copied from history!",
"alert_invalid_length": "Please set a valid password length."
}
🇰🇷 ko.json
{
"alert_option_required": "문자 옵션을 하나 이상 선택해주세요.",
"alert_password_copied": "비밀번호가 클립보드에 복사되었습니다!",
"alert_password_empty": "복사할 비밀번호가 없습니다.",
"alert_history_copied": "최근 목록에서 복사되었습니다!",
"alert_invalid_length": "올바른 비밀번호 길이를 설정해주세요."
}
🇯🇵 ja.json
{
"alert_option_required": "少なくとも1つの文字オプションを選択してください。",
"alert_password_copied": "パスワードをクリップボードにコピーしました！",
"alert_password_empty": "コピーするパスワードがありません。",
"alert_history_copied": "履歴からコピーされました！",
"alert_invalid_length": "有効なパスワードの長さを設定してください。"
}
🇨🇳 zh.json
{
"alert_option_required": "请至少选择一个字符选项。",
"alert_password_copied": "密码已复制到剪贴板！",
"alert_password_empty": "没有可复制的密码。",
"alert_history_copied": "已从历史记录复制！",
"alert_invalid_length": "请设置有效的密码长度。"
}
🇫🇷 fr.json
{
"alert_option_required": "Veuillez sélectionner au moins une option de caractère.",
"alert_password_copied": "Mot de passe copié dans le presse-papiers !",
"alert_password_empty": "Aucun mot de passe à copier.",
"alert_history_copied": "Copié depuis l'historique !",
"alert_invalid_length": "Veuillez définir une longueur de mot de passe valide."
}
🇪🇸 es.json
{
"alert_option_required": "Por favor, selecciona al menos una opción de carácter.",
"alert_password_copied": "¡Contraseña copiada al portapapeles!",
"alert_password_empty": "No hay contraseña para copiar.",
"alert_history_copied": "¡Copiado desde el historial!",
"alert_invalid_length": "Por favor, establece una longitud de contraseña válida."
}
🇩🇪 de.json
{
"alert_option_required": "Bitte wähle mindestens eine Zeichenoption aus.",
"alert_password_copied": "Passwort wurde in die Zwischenablage kopiert!",
"alert_password_empty": "Kein Passwort zum Kopieren vorhanden.",
"alert_history_copied": "Aus dem Verlauf kopiert!",
"alert_invalid_length": "Bitte gib eine gültige Passwortlänge an."
}
이제 Alert 메시지도 완벽하게 다국어 대응이 가능해졌어!
다음은 수동 언어 전환 UI를 추가하거나, Alert 메시지에 아이콘/스타일을 입히는 것도 도와줄 수 있어. 계속 가볼까? 😄🌐✨
Q : 독일어 버전에는 기존 내용도 추가해줘. 그리고 placeholder 문구도 각 언어별로 만들어줘
물론이지, Dalyoung! 아래는 독일어(de.json) 전체 번역 파일과 함께, 각 언어별로 사용할 수 있는 placeholder 문구도 정리해봤어. placeholder는 보통 TextInput에 들어가는 안내 문구로, "placeholder_password" 같은 키로 관리하면 좋아.
🇩🇪 de.json (독일어 전체 번역)
{
"title": "SecureGen",
"generate": "Passwort generieren",
"copy": "Kopieren",
"length": "Passwortlänge",
"uppercase": "Großbuchstaben einschließen",
"lowercase": "Kleinbuchstaben einschließen",
"numbers": "Zahlen einschließen",
"symbols": "Sonderzeichen einschließen",
"substitute": "Zeichen ersetzen",
"history": "Zuletzt generierte Passwörter",
"alert_option_required": "Bitte wähle mindestens eine Zeichenoption aus.",
"alert_password_copied": "Passwort wurde in die Zwischenablage kopiert!",
"alert_password_empty": "Kein Passwort zum Kopieren vorhanden.",
"alert_history_copied": "Aus dem Verlauf kopiert!",
"alert_invalid_length": "Bitte gib eine gültige Passwortlänge an.",
"placeholder_password": "Generiertes Passwort wird hier angezeigt"
}
🌍 placeholder_password 다국어 번역
언어 번역
| 🇺🇸 영어 (en.json) | "placeholder_password": "Your generated password will appear here" |
| 🇰🇷 한국어 (ko.json) | "placeholder_password": "생성된 비밀번호가 여기에 표시됩니다" |
| 🇯🇵 일본어 (ja.json) | "placeholder_password": "生成されたパスワードがここに表示されます" |
| 🇨🇳 중국어 (zh.json) | "placeholder_password": "生成的密码将显示在此处" |
| 🇫🇷 프랑스어 (fr.json) | "placeholder_password": "Votre mot de passe généré s'affichera ici" |
| 🇪🇸 스페인어 (es.json) | "placeholder_password": "Tu contraseña generada aparecerá aquí" |
| 🇩🇪 독일어 (de.json) | "placeholder_password": "Generiertes Passwort wird hier angezeigt" |
이제 TextInput에서 이렇게 사용할 수 있어:
<TextInput
placeholder={t('placeholder_password')}
placeholderTextColor="#999"
style={styles.input}
/>
다국어 대응이 점점 완성되어가고 있어! 다음은 언어 전환 드롭다운을 추가하거나, 설정 화면에서 언어를 수동으로 바꾸는 기능도 넣어볼까? 🌐✨
Q : '복사 완료' 와 '복사 되었습니다', place holder 내용을 추가한 버전으로 만들어줘
물론이지, Dalyoung! 기존 번역 리소스에 복사 관련 메시지를 구분해서 추가하고, placeholder 문구도 통일해서 업데이트해줄게.
✅ 새로 추가할 키
키 설명
| alert_copy_complete | 사용자 액션에 대한 “복사 완료” 메시지 |
| toast_copy_success | 복사 후 짧게 보여주는 “복사되었습니다” 피드백용 |
| placeholder_password | 비밀번호 입력/출력 필드의 placeholder 문구 |
🌍 다국어 번역 리소스 업데이트 (7개 언어)
🇺🇸 en.json
{
"alert_copy_complete": "Copy complete!",
"toast_copy_success": "Copied successfully.",
"placeholder_password": "Your generated password will appear here"
}
🇰🇷 ko.json
{
"alert_copy_complete": "복사 완료!",
"toast_copy_success": "복사되었습니다.",
"placeholder_password": "생성된 비밀번호가 여기에 표시됩니다"
}
🇯🇵 ja.json
{
"alert_copy_complete": "コピー完了！",
"toast_copy_success": "コピーされました。",
"placeholder_password": "生成されたパスワードがここに表示されます"
}
🇨🇳 zh.json
{
"alert_copy_complete": "复制完成！",
"toast_copy_success": "已成功复制。",
"placeholder_password": "生成的密码将显示在此处"
}
🇫🇷 fr.json
{
"alert_copy_complete": "Copie terminée !",
"toast_copy_success": "Copié avec succès.",
"placeholder_password": "Votre mot de passe généré s'affichera ici"
}
🇪🇸 es.json
{
"alert_copy_complete": "¡Copia completada!",
"toast_copy_success": "Copiado correctamente.",
"placeholder_password": "Tu contraseña generada aparecerá aquí"
}
🇩🇪 de.json
{
"alert_copy_complete": "Kopieren abgeschlossen!",
"toast_copy_success": "Erfolgreich kopiert.",
"placeholder_password": "Generiertes Passwort wird hier angezeigt"
}
이제 예를 들어 Android의 ToastAndroid.show(t('toast_copy_success')) 또는 Alert로 Alert.alert(t('alert_copy_complete'))처럼 사용할 수 있어.
다음은 이 메시지들을 실제 코드에 적용하는 예시도 정리해줄까? 아니면 설정 화면에서 언어 전환하는 기능을 추가해볼까? 🌐✨🛠️
728x90
Q : 마지막으로 "비밀번호 길이" 와 "길게 눌러서 복사" 를 추가해줘
물론이지, Dalyoung! 아래는 "length_label"과 "long_press_to_copy"라는 키로 다국어 번역을 추가한 버전이야. 기존 JSON 리소스에 그대로 붙여넣으면 돼:
🌍 다국어 번역 항목
키 설명
| length_label | "비밀번호 길이" 라벨 텍스트 |
| long_press_to_copy | "길게 눌러서 복사" 안내 문구 (예: 최근 비밀번호 항목 아래에 표시) |
🇺🇸 en.json
{
"length_label": "Password Length",
"long_press_to_copy": "Long press to copy"
}
🇰🇷 ko.json
{
"length_label": "비밀번호 길이",
"long_press_to_copy": "길게 눌러서 복사"
}
🇯🇵 ja.json
{
"length_label": "パスワードの長さ",
"long_press_to_copy": "長押しでコピー"
}
🇨🇳 zh.json
{
"length_label": "密码长度",
"long_press_to_copy": "长按复制"
}
🇫🇷 fr.json
{
"length_label": "Longueur du mot de passe",
"long_press_to_copy": "Appui long pour copier"
}
🇪🇸 es.json
{
"length_label": "Longitud de la contraseña",
"long_press_to_copy": "Mantén pulsado para copiar"
}
🇩🇪 de.json
{
"length_label": "Passwortlänge",
"long_press_to_copy": "Lange drücken zum Kopieren"
}
이제 UI에서 t('length_label')이나 t('long_press_to_copy')로 불러오면 자동으로 언어에 맞게 표시돼. 예를 들어 최근 비밀번호 리스트 아래에 이렇게 넣을 수 있어:
<CustomText style={styles.helper}>{t('long_press_to_copy')}</CustomText>
다국어 대응이 정말 완성도 높아졌어! 다음은 언어 전환 UI를 넣거나, 설정 화면을 만들어볼까? 🌐📱✨
728x90
반응형
'IT 정보 > AI 활용 앱개발' 카테고리의 다른 글
| [SecureGen] admob 광고 적용 전 주의 사항 (1) | 2025.06.24 |
|---|---|
| [SecureGen] 기능 추가 - 광고 삽입 (Google AdMob) (0) | 2025.06.24 |
| [SecureGen] 기능 추가 - 글꼴 변경 (0) | 2025.06.23 |
| [SecureGen] 기능 추가 - 비밀번호 생성 히스토리 관리 (1) | 2025.06.22 |
| [SecureGen] 첫 화면 개발 (0) | 2025.06.22 |