[ React ] 다국어 처리를 구현할 때, 발생가능성이 있는 이슈들과 해결법

728x90

1. 텍스트 번역 관련 이슈
(1) 번역 품질

문제	문제 설명	해결방법
문맥의 부재	단어 단위 또는 문장 단위 번역 시 문맥을 고려하지 않아 부자연스러운 번역이 발생	번역 시 전체문맥을 전달하도록 문맥 번역 옵션 지원 전문 번역사나 번역 관리시스템 사용
전문 용어 관리	기술적 용어나 도메인 특화된 용어가 잘못 번역될 가능성	용어집과 번역메모리(TM)을 사용해 일관성 유지
다의어 처리	동일한 단어가 다양한 의미를 가질 때 적절한 번역 선택이 어려움	번역 전, 텍스트에 주석을 추가하거나 문맥을 명확히 작성

(2) 번역 관리

문제	문제 설명	해결방법
번역 누락	신규 콘텐츠를 추가했을 때 번역 문자열을 누락하는 문제	i18n라이브러리 사용 시, 기본언어와 모든 언어 파일을 비교하는 자동검증도구 사용(i18next-parser, Lokalise)
중복 번역	동일한 문구가 여러 번 번역되어 번역 비용이 증가	키 기반 접근방식 사용 (ex, JSON번역 키) 중복 키를 탐지하는 도구로 번역 파일 최적화

2. 문자 인코딩 및 렌더링 이슈
(1) 문자 인코딩

문제	문제 설명	해결방법
인코딩 불일치	UTF-8, UTF-16 등 다양한 인코딩 방식으로 인해 데이터가 깨지거나 올바르게 표시되지 않음	모든 파일 및 데이터베이스를 UTF-8로 설정 <meta charset="utf-8" /> 서버와 클라이언트 간 인코딩 설정 일치 확인 - HTTP헤더(Content-Type: text/html; charset=UTF-8)
특수 문자 처리	이모지, 악센트, 유니코드 문자 등이 제대로 표시되지 않는 문제	특수문자 문제는 유니코드 이스케이프 방식 사용

(2) 텍스트 방향

문제	문제 설명	해결방법
RTL(오른쪽에서 왼쪽)	아랍어, 히브리어 등은 텍스트 방향이 오른쪽에서 왼쪽으로 설정되어야 함	RTL지원을 위해 CSS에 diresction: rtl추가
혼합 방향성	LTR(왼쪽에서 오른쪽)과 RTL 텍스트가 혼합된 경우 레이아웃이 깨질 수 있음	CSS Logical Properties(margin-inline-start)를 사용해 양방향 레이아웃을 관리 dir속성을 HTML요소에 적용하여 혼합 방향성을 처리

3. 다국어 데이터 처리

문제	문제 설명	해결방법
키-값 구조의 관리	번역 파일(JSON, YAML 등)의 키와 값이 불일치하거나 불완전할 경우 오류 발생	번역 키-값 구조를 자동으로 동기화하는 도구 사용 (예: i18next, PhraseApp, Crowdin) 번역 누락 검출 도구 활용 (gettext, i18next-parser)
동적 콘텐츠	서버에서 제공되는 동적 콘텐츠(예: 사용자 입력 텍스트)를 올바르게 다국어 처리하는 데 어려움	동적 데이터에 대해 런타임 번역 적용(예: i18next의 t()함수로 문자열 처리 사용자 입력 데이터에 대해 로케일 설정 적용

4. 날짜, 시간, 숫자 형식
(1) 지역별 형식 차이

문제	문제 설명	해결방법
날짜 형식	YYYY/MM/DD(한국, 일본) vs. MM/DD/YYYY(미국) vs. DD/MM/YYYY(유럽)	Intl.DateTimeFormat API사용 new Intl.DateTimeFormat('ko-KR', { dateStyle: 'long' }).format(new Date());
시간 형식	12시간제 vs. 24시간제

(2) 숫자 및 통화

문제	문제 설명	해결방법
숫자 구분	천 단위 구분(1,000 vs 1.000 vs 1 000)	Intl.NumberFormat API 사용 new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.56);
소수점 구분	소수점 마크(1.5 vs 1,5)
통화 형식	화폐 기호의 위치와 스타일이 지역마다 다름($100 vs 100€)

5. 폰트 및 레이아웃 이슈

문제	문제 설명	해결방법
글꼴 지원	• 특정 언어(중국어, 일본어, 아랍어 등)의 문자를 지원하지 않는 글꼴 사용 시 텍스트가 깨짐. • 다양한 스크립트(한자, 키릴문자 등)를 지원하는 폰트를 선택해야 함.	글로벌 글꼴 패키지 사용 (Noto Sans, Roboto) 각 언어별 대체 글꼴 설정 폰트 로딩 최적화 (웹폰트 사용시, font-display : swap)
레이아웃	• 텍스트 길이 차이: 언어마다 텍스트 길이가 다르므로 UI 요소가 깨질 수 있음(예: 버튼 크기 부족). • 줄바꿈 문제: 다국어 문자열의 줄바꿈 규칙이 서로 다름	텍스트 길이 차이를 고려한 반응형 디자인 번역 적용 시 텍스트 길이를 미리 분석하여 적절한 공간 확보

나는 폰트에러를 마주했던 적이 있다.
글로벌 글꼴을 사용했지만, 나라마다 선호하는 폰트가 있기에 그거에 맞춰서 해줘야함
그로써 아래의 코드대로 폰트에러를 해결했었다

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 언어별 번역 파일 임포트
import translationEN from './locales/en/translation.json';
import translationKO from './locales/ko/translation.json';
import translationJA from './locales/ja/translation.json';

const resources = {
  en: {
    translation: translationEN
  },
  ko: {
    translation: translationKO
  },
  ja: {
    translation: translationJA
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'ko', // 기본 언어 설정
  fallbackLng: 'ko', // 기본적으로 사용할 언어 설정
  interpolation: {
    escapeValue: false
  }
});

// 언어 변경 시 폰트 설정
i18n.on('languageChanged', (lng) => {
  // i18n.on('languageChanged')를 사용하여 언어가 변경될 때 실행할 작업을 정의
  document.documentElement.lang = lng; // <html> 태그의 lang 속성 업데이트

  // 일본어인 경우 Meiryo UI 폰트를 적용
  if (lng === 'ja') {
    // 일본어(ja)가 선택되었을 때, document.documentElement.style.fontFamily로 일본어 폰트를 적용
    document.documentElement.style.fontFamily = "'Meiryo UI', sans-serif";
    // 한국어랑 영어 폰트는 Noto Sans KR
  } else {
    document.documentElement.style.fontFamily = "'Noto Sans KR', sans-serif";
  }
});

export default i18n;

6. 검색 및 정렬 이슈

문제	문제 설명	해결방법
정렬 방식	각 언어마다 알파벳/문자의 정렬 규칙이 다름(예: 한글 초성 정렬, 일본어 가나 순서)	정렬 라이브러리 또는 로케일 지원 정렬 기능 사용 ['가', '나', '다'].sort(new Intl.Collator('ko-KR').compare);
검색 기능	다국어 문서에서 검색할 때, 언어별 형태소 분석이 필요함(예: 한글 조합형 처리, 일본어의 후리가나)	각 언어에 맞는 형태소 분석기 또는 라이브러리 사용 한글: KoNLPy, 일본어: Kuromoji.

7. 문화적 차이

문제	문제 설명	해결방법
언어적 맥락	동일한 표현이라도 문화권에 따라 다르게 이해될 수 있음(예: 축약어, 속어 등)	민감한 표현은 전문가나 현지화 팀의 검수를 거침 테스트 그룹 피드백 활용
금기 표현	특정 문화권에서 민감하거나 금기시되는 단어와 표현을 피해야 함	금기표현을 번역단계에서 필터링하도록 번역 규칙 설정 현지 문화 검토 단계 추가

8. 운영 및 유지보수

문제	문제 설명	해결방법
번역 파일의 동기화	코드 및 번역 파일을 별도로 관리할 경우 번역 파일 업데이트가 누락될 가능성	CI/CD파이프라인에 번역 파일 동기화 검증 추가 변경된 번역 키를 자동으로 감지하는 툴 사용
테스트	각 언어마다 UI와 기능이 동일하게 동작하는지 확인하는 테스트가 필요	번역 적용 후, UI와 기능 테스트를 병행 도구: BrowserStack, Playwright

9. SEO와 URL 구조

문제	문제 설명	해결방법
다국어 URL	• 언어별로 적합한 URL 구조 설정 필요(예: /en, /ko) • 검색 엔진이 언어별 페이지를 올바르게 인식하도록 설정 필요	언어 코드 기반URL설정 (예. /en, /ko) 검색 엔진에 다국어 페이지를 표시하려면 hreflang메타태그 사용
hreflang 설정	검색 엔진에 언어 및 지역을 지정하지 않으면 SEO 성능이 저하될 수 있음	HTML의 <head>에 올바른 hreflang태그를 추가 <link rel="alternate" hreflang="en" href="https://example.com/en" /> <link rel="alternate" hreflang="ko" href="https://example.com/ko" />

이렇게 다국어처리를 할때, 일어날 수 있는 이슈들과 해결방법에 대해 GPT를 통해 물어봤고 해결방법도 알게되었다
아직 다 경험해본게 아니라서 막상 닥치면 당황하겠지만 이렇게라도 미리 예방주사를 맞아보았다
그래도 나중에 조금이라도 기억하겠지 나자신 화이팅

저작자표시 비영리

'2. FrontEnd > React' 카테고리의 다른 글

[ React ] 리액트의 render phase와 commit phase (0)	2025.01.17
[ React ] useEffect와 useLayoutEffect의 차이점 (0)	2025.01.16
[ React ] 다국어 처리 i18next (0)	2024.11.22
[ React ] 다국어 코드 중복 제거하는 리팩토링 후기 (0)	2024.11.20
[ React ] useState 초기값 설정 에러 (0)	2024.10.11

'2. FrontEnd > React' 카테고리의 다른 글

티스토리툴바