피드로 돌아가기
How I Built a Scalable i18n System in Nuxt 3 — Rolling Out New Languages One Page at a Time
Dev.toDev.to
Frontend

Data-driven i18n 설계를 통한 38개 페이지의 점진적 언어 확장 최적화

How I Built a Scalable i18n System in Nuxt 3 — Rolling Out New Languages One Page at a Time

Genglin Zheng2026년 5월 5일10분intermediate

AI 요약

Context

전역 설정 기반의 nuxt-i18n 라이브러리 사용 시, 일부 페이지의 번역 누락에도 모든 페이지에 hreflang 태그가 생성되는 문제 발생. 잘못된 SEO 메타데이터 노출로 인한 검색 엔진 랭킹 하락 위험과 콘텐츠 불일치라는 기술적 제약 직면.

Technical Solution

  • JSON 데이터 구조 자체를 Feature Flag로 활용하여 페이지별 언어 지원 여부를 결정하는 Data-driven 아키텍처 설계
  • useLocaleHead()가 생성한 전체 링크 목록을 페이지별 지원 언어 리스트와 대조하여 필터링하는 filterHreflangLinks 유틸리티 구현
  • ISO 639-1 표준(ja, zh)을 엄격히 적용하여 검색 엔진 최적화를 위한 hreflang 값의 정확성 확보
  • '현재 로케일 → English → 빈 객체' 순의 Fallback Chain을 구축하여 번역 미완료 시에도 런타임 에러를 방지하는 안정적 렌더링 구조 채택
  • 언어 추가 시 설정 파일 수정 없이 개별 도구 JSON에 키 값만 추가하면 즉시 반영되는 무중단 배포 워크플로우 구축

실천 포인트

- 라이브러리의 기본 동작이 비즈니스 요구사항과 충돌할 경우, 중간 필터 계층(Interceptor)을 통해 출력을 제어할 것 - 기능 활성화 여부를 코드나 설정 파일이 아닌, 콘텐츠 데이터의 존재 여부와 결합하여 관리함으로써 운영 공수를 절감할 것 - SEO와 직결되는 메타데이터는 실제 렌더링되는 콘텐츠의 상태와 1:1로 동기화되는지 검증할 것

태그

#hreflang#SEO#Feature Flag#Nuxt 3#i18n
원문 읽기