Angular Admin/Dashboard 앱을 위한 i18n 전략 선택

Source: Dev.to

관리자/대시보드 앱의 일반적인 i18n 요구사항

1. 런타임 언어 전환 (리로드 없음) – 사용자가 언어를 선택하면(보통 오른쪽 상단 메뉴) UI가 즉시 업데이트되고 페이지 새로고침이 발생하지 않습니다.
2. 모듈식 번역 리소스 (네임스페이스 / 기능 범위) – 관리자 앱은 기능이 많아 모든 번역을 하나의 파일에 묶으면 유지보수가 힘들어집니다.
3. 지연 로드 번역 리소스 (필요 시 로드) – 초기 로드 시 모든 번역을 포함하지 않도록 합니다.
4. SSR/SSG 친화성 – 대부분의 관리자 앱은 CSR이지만, 문서/데모 페이지에 SSG가 필요하거나 일부 프로젝트에 SSR이 필요할 수 있습니다. i18n 아키텍처가 이러한 렌더링 모드를 어렵게 만들면 안 됩니다.
5. 안정적인 전환 경험 (키 깜빡임/불일치 UI 없음) – 관리자 사용자는 자주 이동하므로 번역 키가 잠깐 보이거나 텍스트가 일치하지 않으면 눈에 띄게 방해가 됩니다.

비교된 접근 방식

Angular 내장 i18n

장점

• 빌드 시 언어가 결정되는 사이트에 이상적(예: 마케팅 사이트, SEO 중심 페이지).
• 컴파일 타임 접근 방식으로 여러 언어 버전을 생성할 수 있습니다.

단점

• 동일한 실행 중인 앱 내에서 진정한 런타임 언어 전환이 불가능합니다. 일반적인 우회 방법은 별도의 언어 버전을 빌드하고 리다이렉트하는 것으로, 이는 페이지 리로드를 강제합니다.
• 여러 사이트 빌드를 관리해야 하므로 유지보수 부담이 증가합니다.
• 폼 상태, 검색 필터, 페이지네이션, 다중 탭 일관성, 로케일 경로와 라우트 파라미터 동기화(예: /en/..., /zh/...) 등에 문제가 발생합니다.

최적 대상
“빌드 시 언어”가 허용되는 SEO 우선 웹사이트.

ngx‑translate

장점

• 큰 커뮤니티를 보유한 성숙한 런타임 i18n 솔루션.
• 유연한 기능과 다양한 통합 옵션 제공.

단점

• 규모가 큰 관리자 앱에서는 하나의 거대한 번역 번들로 끝나기 쉬워 초기 다운로드 크기가 커집니다.

최적 대상
최대한의 유연성을 원하고 로더/네임스페이스 관리를 체계적으로 할 수 있는 팀.

ngx‑atomic‑i18n

장점

• 관리자 앱 요구에 맞게 설계됨: 기능/컴포넌트별 네임스페이스, 기본 지연 로드, 캐싱, SSR/SSG 친화성.
• “Angular용 원자적, 지연 로드 가능한 i18n”을 목표로 함.

단점

• 비교적 최신 패키지라 커뮤니티가 작고 생태계 성숙도가 낮음.
• 최신 Angular(v16 이상) 필요.

최적 대상
i18n을 별도의 과제로 만들지 않고, 기능별 지연 로드가 가능한 “설치 즉시 사용” 솔루션을 원하는 관리자 앱.

30초 퀵스타트 (개념적, 복사‑붙여넣기 친화)

npm i ngx-atomic-i18n

프로젝트 구조

src/assets/i18n/
  en/
    common.json
    users.json
  zh-Hant/
    common.json
    users.json

i18n을 한 번만 등록 (예: main.ts 혹은 app.config.ts)

import { provideAtomicI18n } from 'ngx-atomic-i18n';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAtomicI18n({
      supportedLangs: ['en', 'zh-Hant'],
      fallbackLang: 'en',
      assetsPath: 'assets/i18n',
      // default: lazy‑load namespaces on demand + cache
    }),
  ],
});

템플릿에서 번역 사용 (예시 파이프 이름: t)

{{ 'common.title' | t }}

{{ 'users.create' | t }}

런타임에 언어 전환 (리로드 없음)

import { i18n } from 'ngx-atomic-i18n';

i18n.setLang('zh-Hant');

선택 사항: 현재 페이지 네임스페이스가 렌더링 전에 로드되었는지 확인

await i18n.loadNamespace('users');

이게 전체 아이디어입니다: 기능‑스코프 네임스페이스 + 필요 시 로드 + UI 깜빡임 없는 런타임 전환.