프론트 i18n·동적 번역
서비스 화면과 CMS 기반 메인 사이트에 다국어 구조를 적용했습니다.
- Vue 2 서비스 화면 KO·EN·JA i18n 적용과 선택형 동적 자동 번역
- 글자가 들어간 이미지의 언어별 적용과 등록 가이드 작성
- Next.js·Craft CMS 메인 사이트 i18n 적용, 언어 전환 쿠키 간섭 수정
- Vue 2
- vue-i18n
- Next.js
- Craft CMS
- GraphQL
전체 프로젝트
지비피엘 주식회사 · 업무 매칭 플랫폼 고객사
운영 반영다국어(i18n) 서비스 전환
브라우저 자동 번역에 기대던 서비스를 KO·EN·JA 다국어 구조로 전환
브라우저 자동 번역으로 영어 화면을 제공하던 업무 매칭 플랫폼을 프론트·CMS·백엔드 기준정보까지 KO·EN·JA 다국어 구조로 바꾸고, 전체 화면을 전수검수해 운영에 반영했습니다.
- Period
- 2026-09 - 2026-11
- Scope
- 3 areas
- Vue 2
- vue-i18n
- Next.js
- Craft CMS
- GraphQL
- Java
- Spring Boot
- SQL
문제와 접근
기존에는 브라우저 자동 번역으로 화면 전체를 번역했습니다. 비동기로 불러온 데이터와 GraphQL로 불러오는 CMS 콘텐츠는 번역되지 않았고, 번역된 문구 길이 때문에 UI가 깨지기도 했습니다.
- 정적 문구는 i18n 번역 파일로, API·DB·사용자 입력은 선택형 동적 자동 번역으로 나눠 처리
- 메뉴·쿠폰·행정구역 등 기준정보를 백엔드에서 다국어로 내려주도록 변경
- 화면마다 다르게 번역된 용어를 하나의 용어 기준안으로 통일
- 전체 라우트를 언어별로 열어 보는 전수검수로 누락을 찾아 보완
Contributions
수행한 역할
기준정보 다국어·운영 반영
백엔드 기준정보와 서버 메시지를 다국어로 제공하고, 운영 DB에 안전하게 반영했습니다.
- 메뉴·코드·쿠폰·행정구역 응답에 다국어 이름 추가
- 다국어 DB 이관 스크립트와 검증 기준을 갖춘 운영 반영 SQL 작성
- 개발 DB와 운영 SQL 번역값 차이를 맞추는 보정 SQL 작성
- Java
- Spring Boot
- SQL
다국어 전수검수·용어 기준
전체 화면을 언어별로 검수하고, 흩어진 번역 용어를 하나의 기준으로 맞췄습니다.
- 라우트별 KO·EN·JA 정적 문구, 동적 콘텐츠, 한국어 복귀, 레이아웃 검수표 작성
- 검수에서 재현한 미번역·한글 고정 문구를 수정하고 재검수
- 화면마다 다르게 쓰인 영어·일본어 용어를 기준안으로 정리해 프론트·DB에 일괄 적용
- QA
- Localization
Blog