실시간 언어 전환
<html lang> 값을 바꾸면 페이지 전체가 즉시 번역됩니다. 새로고침이나 별도 URL 없이 사용자가 보던 화면 그대로 언어만 바뀝니다.
새로고침 없는 실시간 다국어 전환
코드 한 줄로
서비스를 세계로.
coForward L10N은 번역할 요소에 data-l10n만 표시하면 페이지를 다시 만들지 않고도 원하는 언어로 바꿔 보여줍니다. 번역은 화면을 보면서 에디터로 바로 등록합니다.
프로젝트 운영 현황
신규 고객사 온보딩 일정이 변경되었습니다.
배포 일정은 11월 20일로 예정되어 있습니다.
// 언어 전환은 이 한 줄이면 충분합니다
document.documentElement.lang = 'ko';
document.documentElement.lang = 'ko';
62개지원 언어 코드
2줄스크립트 태그만으로 설치
0회언어 전환 시 새로고침
1개속성으로 번역 대상 지정
이런 서비스를 위해 설계했습니다
- 해외 진출 SaaS
- 글로벌 쇼핑몰
- 관광·예약 서비스
- 공공기관 안내
- 사내 업무 시스템
Features
번역 그 이상.
다국어 운영에 필요한 모든 것.
번역문을 보여주는 것에서 끝나지 않습니다. 문구 등록부터 번역 입력, 미리보기, 동적 화면까지 다국어 서비스 운영의 실제 흐름을 지원합니다.
비주얼 에디터
실제 화면을 보면서 문구를 눌러 바로 번역을 입력합니다. 개발자 없이 운영자가 직접 관리합니다.
동적 콘텐츠 자동 감지
나중에 추가된 목록, 알림, 팝업도 data-l10n만 있으면 현재 언어로 자동 번역됩니다.
태그와 스타일 유지
문장 속 강조 태그와 줄바꿈을 그대로 지키면서 어순이 다른 언어로 자연스럽게 번역합니다.
속성까지 번역
title, placeholder, alt도 함께 번역해 접근성과 사용성을 지킵니다.
영역별 그룹 사전
같은 문구라도 메뉴, 본문, 팝업 등 영역마다 다른 번역을 지정할 수 있습니다.
프로젝트 API 키
프로젝트별 API 키와 운영자 로그인으로 번역 등록 권한을 관리합니다.
JSON 사전 내보내기
등록된 번역을 JSON 사전으로 내려받아 정적 페이지와 앱에서도 사용합니다.
Markup
속성 하나로 표시하고,
나머지는 맡기세요.
기존 HTML 구조를 바꿀 필요가 없습니다. 상황별 마킹 방법과 실제로 만들어지는 사전 키를 확인해 보세요.
기본 문장
번역할 요소에 data-l10n을 붙입니다. 값은 비워 두어도 됩니다.
HTML
<h1 data-l10n>프로젝트 운영 현황</h1>사전 키
"프로젝트 운영 현황"
ENProject Operations
강조 태그가 있는 문장
문장 속 태그는 자리표시자로 바뀌어, 번역문에서 위치를 옮겨도 태그와 스타일이 유지됩니다.
HTML
<p data-l10n>
배포 일정은 <span>11월 20일</span>로
예정되어 있습니다.
</p>사전 키 → 번역문
"배포 일정은 [[sub-1]]로 예정되어 있습니다."
→ "The release is scheduled for [[sub-1]]."ENThe release is scheduled for Nov 20.
줄바꿈
<br>는 [[br]]로 처리되어 번역문에서도 같은 위치에서 줄이 바뀝니다.
HTML
<p data-l10n>
주요 일정입니다.<br>
최종 배포는 11월 20일입니다.
</p>사전 키
"주요 일정입니다.[[br]]최종 배포는 11월 20일입니다."
ENKey dates.
Final release is on Nov 20.
Final release is on Nov 20.
속성 번역
본문이 없는 입력창과 이미지는 data-l10n에 이름을 지정하면, 속성 문구를 번역합니다.
HTML
<input data-l10n="taskTitle"
placeholder="업무 제목을 입력하세요">사전 키
"INPUT-taskTitle" placeholder: "업무 제목을 입력하세요"
ENplaceholder = "Enter a task title"
영역별 그룹
상위 요소에 그룹을 지정하면 같은 원문도 영역에 맞는 번역을 쓸 수 있습니다.
HTML
<nav data-l10n-group="menu"> <a data-l10n>현황</a> </nav>
사전
"현황" → "Status Report" menu › "현황" → "Dashboard"
EN · menuDashboard
동적 콘텐츠
스크립트로 추가한 요소도 감지해 현재 언어로 번역합니다. 별도 호출이 필요 없습니다.
JavaScript
const p = document.createElement('p');
p.setAttribute('data-l10n', '');
p.textContent = '신규 업무가 등록되었습니다.';
list.appendChild(p);결과
// 추가되는 즉시 번역
"A new task has been added."ENA new task has been added.
Visual Editor
화면을 보면서
바로 번역하세요.
번역 파일을 주고받을 필요가 없습니다. 운영자가 실제 화면에서 문구를 고르고 번역을 입력하면 즉시 반영됩니다.
로그인
프로젝트 계정으로 로그인합니다. 로그인 상태는 24시간 유지됩니다.
일괄등록
화면의 모든 번역 대상 문구를 원문으로 한 번에 등록합니다.
항목 편집
문구 위의 마커를 눌러 언어별 번역을 입력하고 저장합니다.
미리보기
번역보기와 원본보기로 결과를 바로 비교합니다.
Languages
62개 언어 코드,
원하는 시장 어디든.
ISO 639-1 언어 코드를 기준으로 동작합니다. 필요한 언어만 골라 번역을 추가하면 됩니다.
한국어English日本語简体中文繁體中文
EspañolFrançaisDeutschPortuguêsItaliano
РусскийTiếng ViệtไทยBahasa IndonesiaBahasa Melayu
العربيةहिन्दीTürkçeNederlandsPolski
SvenskaУкраїнськаМонголFilipino
+ 38개 언어
Developers
스크립트 두 줄로
완성되는 다국어.
- 01
기존 마크업 그대로
HTML 구조와 CSS를 바꾸지 않고 속성만 추가합니다.
- 02
프레임워크 무관
순수 JavaScript ES 모듈로 동작해 PHP, 정적 사이트 어디에나 붙습니다.
- 03
격리된 에디터 UI
에디터와 마커는 Shadow DOM으로 렌더링되어 페이지 스타일과 충돌하지 않습니다.
<!-- 1. 번역할 요소 표시 --> <h1 data-l10n>프로젝트 운영 현황</h1> <!-- 2. 사전 + 뷰어 스크립트 --> <script src="coForward_l10n_dictionary.js"></script> <script src="/api/l10n/coForward_l10n_init.js" data-from="ko" data-to="en" type="module"></script>
<!-- 운영자 페이지에서만 사용 --> <script src="/api/l10n/coForward_l10n_editor_init.js" data-key="YOUR_API_KEY" data-from="ko" data-to="en" type="module" defer></script> // API 키 검증 → 사전 로드 → 화면 번역 → 에디터 표시
// 어디서든 lang만 바꾸면 페이지 전체가 번역됩니다 document.documentElement.lang = 'en'; // 언어 선택 상자와 연결 select.addEventListener('change', (e) => { document.documentElement.lang = e.target.value; });