해외파트너센터 개발 오픈기- 3.글로벌 대응을 위한 다국어 처리 작업

문제 상황

• 기존 파트너 센터 레포에 해외 서비스를 추가하며 국내외 페이지를 함께 처리해야 하는 상황
• 공통 레이아웃과 디자인 시스템을 유지하면서도 언어별 화면과 메뉴 차이를 대응해야 하는 요구
• 서버 리소스가 부족해 번역 JSON을 프론트엔드에서 직접 관리해야 하는 제약

선택 이유

• i18next와 react-i18next 조합이 React에서 널리 쓰이고 커스터마이징이 유연한 점
• 팀 내 사용 경험과 지속적인 유지보수 가능성, 정보 접근성 고려
• Next.js 환경에서 도메인 기반 언어 감지와 SSR 호환성이 필요한 점

구조와 흐름

• i18next에 언어 감지기와 react-i18next 초기화를 연결해 전역 i18n 구성
• resources 객체에 ko, en을 분리해 번역 키를 언어별로 관리
• I18nextProvider와 useTranslation으로 컴포넌트 단위에서 문자열 치환 적용

주의할 점

• Next.js에서 window 접근 시 서버 사이드 렌더링 오류 가능성으로 typeof window 조건 필요
• JSON key 규칙이 흐트러지면 유지보수 난이도 상승
• 수동 관리 방식은 번역 수정 시 반복 작업과 휴먼 에러 가능성 증가

적용해볼 점

• 초기에는 공식 문서 기준으로 최소 세팅부터 검증
• 언어 코드와 번역 키 규칙을 사전에 통일
• 확장 가능성과 운영 리소스를 함께 고려해 관리 방식 선택