프론트 i18n·동적 번역

문제: 브라우저 자동 번역에 맡긴 화면

서비스는 구글 번역 위젯으로 화면 전체를 번역하고 있었습니다. 번역은 화면이 그려진 뒤 DOM을 바꾸는 방식이라, 비동기로 불러온 데이터와 외부 영역은 번역되지 않았고 새로고침할 때마다 결과가 달랐습니다. 번역된 문구가 길어져 레이아웃이 깨지기도 했습니다.

접근: 정적 문구는 i18n, 동적 콘텐츠는 허용한 영역만 자동 번역

자동 번역을 전부 끄는 것에서 시작했습니다. 앱 전체에 번역 제외 표식을 달고, 화면 문구는 vue-i18n의 KO·EN·JA 번역 파일로 옮겼습니다. 다만 사용자가 쓴 업무 제목·본문이나 채팅처럼 미리 번역할 수 없는 글은 남습니다. 방식을 비교한 뒤, 승인된 영역만 자동 번역을 허용하는 선택형 방식을 골랐습니다. 개인정보, 파일명, URL은 허용 영역에서 뺐습니다.

구현

• 언어 결정 순서를 한 곳으로 모았습니다(언어 쿠키 → 과거 번역 쿠키 → 브라우저 언어 → 한국어). 고른 언어는 HTML lang과 API 요청의 Accept-Language에도 똑같이 실립니다.
• 날짜·시간, 상태 라벨, 검증·오류·알림 문구를 locale 기준으로 바꿨습니다.
• 글자가 들어간 이미지는 언어별 이미지를 쓰도록 하고, 디자이너용 등록 가이드를 남겼습니다.
• CMS 기반 메인 사이트(Next.js·Craft CMS)는 next-intl로 헤더·푸터· 검색·FAQ·블로그를 옮기고, 중복된 언어 쿠키와 개발 환경에서 태그 관리 스크립트가 자동 번역을 다시 넣는 문제를 고쳤습니다.