전체 설정 가이드
Bubble.io 앱을 다국어로 만들기 위해 GoLocal!를 설치, 구성 및 사용하는 데 필요한 모든 것입니다.
안전한 Bubble 데이터, 안정적인 UI 번역, 명시적인 다국어 로직
Bubble의 플러그인을 업데이트하세요. 플러그인 탭을 탭한 후 아래 기능을 테스트해 보세요. Project 구성, 번역 및 청구는 GoLocal 프로젝트에 계속 연결됩니다. 앱 개발자는 Bubble의 HTML 헤더에 스크립트를 붙여넣거나 유지 관리할 필요가 없습니다. 게시된 플러그인 버전에는 지원되는 런타임이 포함되어 있습니다.
편집 가능한 데이터는 그대로 유지됩니다.
일반 입력, 여러 줄 입력, Quill 편집기 및 기타 contenteditable 영역은 사용자가 입력하는 동안 역번역되지 않습니다.
재사용 가능한 콘텐츠 제외
중복된 HTML ID 대신 do_not_translate_selectors를 사용하여 사용자가 입력한 데이터베이스 값과 반복 그룹 셀을 선택합니다.
안전한 자동 역방향 조회
Bubble SearchBox, 드롭다운, 레거시 MultiDropdown 및 Select2 MultiDropdown는 번역된 선택 사항을 소스 언어 값과 일치시킬 수 있습니다.
GoLocal Query 요소
해당 입력이 소스 언어 텍스트 검색, 조건 또는 API 필터를 구동하는 경우에만 일반 입력당 하나의 독립적인 GoLocal Query 요소를 사용하십시오.
1 플러그인 설치
GoLocal!는 다음과 같이 사용할 수 있습니다. 무료 플러그인 Bubble.io 마켓플레이스에서. 설치 비용은 전혀 들지 않습니다. 플러그인 자체 비용은 $0입니다. API 키를 사용하여 GoLocal! 프로젝트에 연결할 때만 청구가 적용됩니다.
Bubble 편집기 → 플러그인 탭을 엽니다.
"+ 플러그인 추가"를 클릭하고 "GoLocal" 또는 "자동 번역기"를 검색하세요.
GoLocal! — 자동 번역기를 설치하세요. 이미 설치되어 있는 경우 최신 게시 버전으로 업데이트하세요.
GoLocal! 요소를 페이지(일반적으로 재사용 가능한 헤더)로 드래그하세요. 요소가 보이지 않습니다.
2 계정 만들기 및 Project
플러그인을 활성화하려면 API 키. API 키는 프로젝트를 생성할 때 GoLocal! 대시보드에 생성됩니다.
에이 5일 무료 평가판 자동으로 시작됩니다. 신용 카드가 필요하지 않습니다. 당신의 API 키 즉시 생성됩니다.
API 키를 복사하세요. Bubble에서 플러그인을 구성할 때 필요합니다.
myapp.bubbleapps.io, 정확히 입력하세요.3 플러그인 구성
GoLocal! 요소를 클릭하세요. 최소한 설정 한 필드:
최소 필수 설정:
api_key→ GoLocal! 프로젝트의 API 키를 붙여넣으세요.API 키만 사용하면 GoLocal!는 프로젝트 구성을 로드하고, 방문자의 브라우저 또는 저장된 위젯 선택을 사용하고, 표시되는 UI 텍스트를 번역하고, 언어 전환기를 표시합니다.
4 플러그인 필드 - 참조
api_key필수GoLocal! 대시보드에 있는 프로젝트의 API 키입니다.
도메인 바인딩 — 클라이언트측 코드에 포함해도 안전합니다.
source_language선택사항앱 원래 언어의 2자리 코드입니다. 예: en, uk, de.
GoLocal 프로젝트에 소스 언어가 이미 구성되어 있는 경우 일반적으로 이 항목을 비워 둡니다. 의도적으로 프로젝트/작업자 값을 재정의해야 하는 경우에만 설정하세요.
target_language선택사항일반적으로 이 필드는 비워 둡니다. 위젯과 방문자의 지속적인 선택은 페이지 로드 전반에 걸쳐 활성 언어를 제어합니다.
다음과 같이 하드 코딩된 값 fr 요소가 초기화될 때마다 해당 언어를 강제하고 방문자의 선택을 무시할 수 있습니다. Bubble 앱이 의도적으로 언어 상태를 소유하고 모든 페이지에 하나의 안정적인 언어 코드를 제공하는 경우에만 동적 값을 바인딩하세요.
enabled선택사항번역 활성화 여부를 제어하는 체크박스입니다. 기본값: 확인됨.
show_widget선택사항내장된 언어 전환기 위젯을 표시합니다. 기본값: 확인됨. Bubble 앱이 자체 언어 제어 및 호출을 제공하는 경우에만 끄십시오. switch_language.
widget_position선택사항위젯 위치: bottom-right (기본값), bottom-left, top-right, top-left.
dataset_1선택사항즉시 로딩을 위해 Bubble 데이터베이스를 사전 번역하세요.
구조화된 형식(권장):
// Bubble 설정:
(카테고리) :format as text를 검색하세요.
내용: {이 카테고리의 제목 ; 이 카테고리의 이름 ; 이 카테고리의 본문}
구분 기호: ,
// 다른 유형을 추가합니다:
:append (Cures) :format을 텍스트로 검색하세요.
내용: {이 치료법의 제목 ; 이 치료법의 이름 ; 이 치료법의 처방}
구분 기호: ,
내부 필드 { } 로 구분 ; — 다음으로 구분된 블록 ,. 참조 데이터세트 자세한 내용은.
do_not_translate_ids선택사항쉼표로 구분된 요소 ID 절대로 번역하지 마세요. 그룹/컨테이너 ID를 지정하면 모든 하위 항목이 제외됩니다.
예: user-bio, code-block, brand-section
HTML ID는 고유해야 합니다. 반복 그룹 셀에서 동일한 ID를 재사용하지 마십시오. 대신 클래스와 함께 do_not_translate_selectors를 사용하세요.
do_not_translate_selectors선택사항저장된 그대로 유지되어야 하는 재사용 가능하거나 반복되는 콘텐츠를 위한 CSS 선택기입니다. 일치하는 요소와 해당 요소의 모든 하위 항목이 제외됩니다.
예: .gl-user-content, [data-user-content], [id^="gl-user-content-"]
사용자가 입력한 데이터베이스 값 및 반복 그룹에 권장됩니다. 클래스 또는 ID 접두사 선택기는 중복된 HTML ID를 생성하지 않고도 많은 행을 안전하게 일치시킬 수 있습니다.
private_translate_ids선택사항요소 번역되었습니다 하지만 번역 전역적으로 캐시되지 않습니다.. 사용자별 데이터(이름, 주소)에 사용합니다.
예: user-name, order-address
콘텐츠가 사용자가 입력한 그대로 유지되어야 하는 경우 이 필드를 사용하지 마십시오. 대신 do_not_translate_selectors를 사용하여 제외하세요.
5 데이터 세트 — Bubble 데이터베이스 번역
대부분의 Bubble 앱은 데이터베이스의 데이터를 표시합니다. 데이터 세트가 없으면 동적 콘텐츠가 첫 번째 보기에서 번역되어 눈에 띄는 지연이 발생합니다. 데이터세트는 모든 내용을 사전 번역합니다. 즉시 로딩.
형식 1: 구조적 - 다중 필드 항목용(권장)
각 항목을 포장합니다. {}, 별도의 필드 ; (세미콜론), 사용 , 항목 사이의 구분 기호로 사용됩니다.
// Bubble: (카테고리) :format을 텍스트로 검색합니다.
내용: {이 카테고리의 제목 ; 이 카테고리의 이름 ; 이 카테고리의 본문}
구분 기호: ,
// 추가: (Cures) :format을 텍스트로 검색합니다.
내용: {이 치료법의 제목 ; 이 치료법의 이름 ; 이 치료법의 처방}
구분 기호: ,
// 결과: {건강;웰니스;가이드...},{뷰티;스킨케어;루틴...},{아스피린;안심;2x...}
{} 분할 ; — 블록 분할 , — 텍스트의 쉼표는 안전합니다.형식 2: 단순 — 단일 값 목록의 경우
쉼표가 없는 짧은 값의 경우(범주 이름, 태그):
내용: 이 카테고리의 이름 구분 기호: ,
// 출력: 전자제품,의류,책,장난감
중요: 텍스트에 쉼표가 포함될 수 있는 경우 항상 구조화된 형식을 사용하세요. {field;field} 포장.
normalized_query 필터나 조건에서만. 전체 Bubble 가이드를 참조하세요.6 Bubble 상태, 이벤트 및 작업
기본 GoLocal! 요소는 페이지 번역을 소유하고 활성 언어를 Bubble에 노출합니다. 조건 및 이벤트의 상태를 사용하여 번역 수명 주기의 올바른 지점에서 워크플로를 시작합니다.
1. 런타임 준비
translator_ready = yes GoLocal이 초기화되었음을 의미합니다. 이는 모든 동적 Bubble 요소의 번역이 완료되었음을 의미하지 않습니다.
2. 언어 변경
language_changed 활성 언어가 변경되면 실행됩니다. 읽기 current_language 여기.
3. 합격 완료
translation_complete 번역 일괄 처리가 완료된 후 실행됩니다. 동적 콘텐츠는 이후 배치를 생성할 수 있습니다.
current_languagetext활성 두 글자 언어 코드입니다. PDF 링크, Bubble 조건부 및 앱 소유 언어 UI에 사용하세요.
detected_languagetext런타임에서 보고된 감지된 소스/브라우저 언어입니다.
translator_readyyes/no예, 번역 런타임이 초기화된 후에는 가능합니다.
is_translatingyes/no예, GoLocal이 번역 패스를 처리하는 동안입니다.
translation_completeyes/no가장 최근 패스의 완료 플래그입니다.
total_textsnumber현재 런타임 세션에서 관찰된 텍스트 항목 수입니다.
cached_local / cached_bundle / cached_servernumber진단 캐시 카운터. 지원 및 성능 확인에 유용합니다.
번역됨 / 오류 / tokens_usednumber런타임 번역 및 오류 카운터.
last_error / preload_statustext진단을 위한 최신 런타임 오류 및 사전 로드 상태입니다.
요소 작업
switch_language— 필수 작업 필드로 전환target_lang, 예를 들어fr.Start_translation— 관찰과 번역을 시작하거나 재개합니다.Stop_translation— 다시 시작할 때까지 관찰 및 번역을 중지합니다.rescan_dom— Bubble 팝업, 재사용 가능한 요소 또는 반복 그룹 업데이트 후에 렌더링된 콘텐츠를 명시적으로 스캔합니다.
예: 프랑스어 PDF 링크 표시
링크 또는 그룹에 Bubble 조건을 생성합니다. When GoLocal! A's current_language is "fr". 방문자가 언어를 전환할 때 워크플로를 실행해야 하는 경우 다음을 사용하세요. When GoLocal! A language_changed. 기다릴 필요가 없습니다 translation_complete 선택한 언어를 읽으면 됩니다.
7 사용자 데이터, 양식 및 반복 그룹
GoLocal은 인터페이스 텍스트를 번역하지만 사용자가 입력하거나 생성한 데이터는 안정적으로 유지되어야 합니다. 현재 런타임은 일반 입력, 여러 줄 입력, Quill 편집기 및 기타를 보호합니다. contenteditable 사람이 입력하는 동안 영역.
기본적으로 안전함
- • 입력 및 여러 줄 입력 값은 입력한 대로 정확하게 저장됩니다.
- • Quill
.ql-editor입력하는 동안 다른 편집 가능한 영역은 건너뜁니다. - • 이메일, 비밀번호, 숫자, 날짜, ID, 파일은 항상 원래 Bubble 값을 사용해야 합니다.
디스플레이에는 제외가 필요합니다.
저장된 사용자 콘텐츠가 나중에 일반 Bubble 텍스트 요소로 표시되면 GoLocal은 그것이 UI 복사본인지 사용자 데이터인지 알 수 없습니다. 해당 표시 요소 또는 가장 작은 컨테이너를 번역 불가 영역으로 표시합니다.
권장되는 반복 그룹 설정
- 1. 사용자 콘텐츠를 표시하는 Text 요소만 선택합니다. 버튼, 제목 및 정적 레이블이 계속 번역되어야 하는 경우 전체 반복 그룹을 제외하지 마십시오.
- 2. 각 행에 고유한 동적 ID를 부여합니다.gl-user-content-현재 셀 사물의 고유 ID
- 3. GoLocal 요소에 하나의 선택기를 추가합니다.do_not_translate_selectors = [id^="gl-user-content-"]
Bubble 설정 또는 재사용 가능한 요소가 사용자 정의 클래스를 적용할 수 있는 경우, .gl-user-content 더욱 간단합니다. 해당 클래스를 한 번 추가하십시오. do_not_translate_selectors.
지원되는 번역 없음 마커
런타임은 다음을 존중합니다. data-tr-skip, data-no-translate, translate="no"및 중첩됨 .notranslate 강요. 구성된 ID 및 CSS 선택기 필드는 가장 쉬운 Bubble 기본 방법으로 남아 있습니다.
건너뛰기 대 개인 번역
do_not_translate_* 원래 값을 유지합니다. private_translate_ids 여전히 값을 변환하지만 공유 글로벌 캐시를 방지합니다. 내용을 실제로 번역해야 하는 경우에만 비공개 번역을 사용하세요.
home 또는 check_box. 아이콘이 텍스트로 지원되는 경우 가장 작은 아이콘/컨트롤 컨테이너를 제외하여 문자 모양 키워드가 번역되지 않도록 하세요.8 번역 편집기 및 수동 수정
탐색 라벨, 제목, 버튼, 도움말 텍스트 및 번역 검토가 필요한 기타 문구 등 고정된 제품 사본에 번역 편집기를 사용하세요. 수동 항목은 잠겨 있으며 나중에 자동 번역으로 대체되지 않습니다.
좋은 수동 수정
소스 업그레이드 계획 → 프랑스 제품 문구 검토 Améliore 르 계획. 이것은 안정적인 인터페이스 사본이며 편집기에 속합니다.
한 번에 한 행씩 사용자 데이터를 수정하지 마세요.
다음과 같이 고객이 만든 이름 거주지에서의 진통 Bubble 표시 요소에서는 제외되어야 합니다. 수천 개의 신원 번역을 추가하는 것은 번역 금지 구역을 안전하게 대체하는 것이 아닙니다.
- 1. GoLocal 대시보드에서 프로젝트를 열고 다음을 선택하세요. 번역.
- 2. 정확한 소스 구문과 언어 쌍을 검색하세요.
- 3. 목표값을 편집하거나 번역 추가 새로운 정확한 소스 문구를 위해.
- 4. 저장합니다. 항목이 표시되어 있습니다. 매뉴얼, 번들 버전이 변경되고 런타임이 프로젝트 사전을 새로 고칩니다.
- 5. 문구가 렌더링되는 정확한 Bubble 경로를 다시 테스트하세요. 사용
rescan_dom비정상적인 타사 렌더링 후에 해당 문구가 나타나는 경우에만 해당됩니다.
en → fr, 아니 auto → fr. 런타임은 프로젝트의 확인된 소스 쌍을 요청합니다.9 번역 작동 방식
GoLocal은 렌더링된 Bubble DOM를 관찰하고 프로젝트 번들 및 로컬 캐시의 번역을 먼저 적용한 다음 누락되거나 변경된 문구만 요청합니다. Bubble가 나중에 렌더링하는 팝업, 재사용 가능한 요소 및 반복 그룹을 계속 관찰합니다.
초기 페이지 로드
런타임은 소스 및 대상 언어를 확인하고, 현재 프로젝트 번들을 로드하고, 표시되는 UI 텍스트를 스캔하고, 내장된 깜박임 방지 흐름을 통해 페이지를 표시합니다.
캐시된 번역
알려진 문구는 재생성되지 않고 번들 또는 브라우저 캐시에서 적용됩니다. 변경된 번들 버전은 오래된 캐시 값을 무효화합니다.
동적 Bubble 콘텐츠
DOM 관찰자는 새로 렌더링된 팝업, 재사용 가능한 요소, 조건부 표시 그룹 및 반복 그룹 셀을 선택합니다. rescan_dom는 명시적인 대체입니다.
10 문제 해결 및 릴리스 테스트
페이지가 한 가지 언어로 재설정됩니다.
Bubble 앱이 의도적으로 언어를 소유하지 않는 한 모든 페이지에서 target_language를 비워두고 재사용 가능한 GoLocal 요소를 남겨두세요. 초기화 시 하드 코딩된 값이 다시 적용됩니다.
위젯이 없습니다
show_widget가 선택되어 있는지, 최신 플러그인 버전이 설치되었는지, 의도한 하나의 GoLocal 요소만 페이지를 제어하는지 확인하세요. 그런 다음 Bubble 단계별 디버거 모드 외부에서 테스트합니다.
팝업 또는 새 반복 그룹 행이 번역되지 않은 상태로 유지됩니다.
요소가 표시될 때까지 기다립니다. 관찰자는 일반적으로 자동으로 그것을 찾습니다. 타사 요소가 비정상적으로 렌더링되는 경우 팝업이나 그룹이 표시된 후 rescan_dom를 실행하세요.
입력하는 동안 입력 또는 서식 있는 텍스트 변경
플러그인을 업데이트하고, 현재 런타임을 확인하고, 저장 워크플로가 번역된 표시 텍스트나 normalized_query가 아닌 원래 입력/편집기 값을 읽는지 확인합니다.
사용자가 만든 프랑스어 텍스트가 다시 번역됩니다.
do_not_translate_selectors를 통해 디스플레이 텍스트/컨테이너를 제외합니다. 주변의 모든 정적 UI가 아니라 가장 작은 동적 값을 보호합니다.
수동 수정이 자동으로 돌아갑니다.
현재 수동 항목이 잠겨 있습니다. 런타임에서 사용되는 것과 동일한 소스 텍스트와 정확한 언어 쌍을 편집했는지 확인한 다음 프로젝트, 경로, 구문 및 테스트 시간을 지원팀에 보냅니다.
월/요일 이름은 영어로 유지됩니다.
기본 브라우저 또는 Bubble 날짜 선택기 크롬은 브라우저/제어 로케일을 따릅니다. GoLocal은 주변 라벨을 번역하지만 내부 날짜 선택기 UI를 다시 작성하지 않습니다.
Chrome는 자체 페이지 번역을 제공합니다.
플러그인은 이미 GoLocal 자체가 실행되도록 허용하면서 브라우저 번역을 위해 문서를 번역하지 않음으로 표시합니다. 플러그인을 업데이트하세요. 두 번째 번역 확장 프로그램이나 스크립트를 추가하지 마세요.
번역 후 텍스트가 다르게 줄 바꿈됩니다.
GoLocal은 Bubble 타이포그래피를 유지합니다. 번역된 문구는 더 길 수 있으므로 모든 중단점에서 Bubble 최소 너비, 최대 너비, 높이 맞춤, 오버플로 및 반응 규칙을 확인하세요.
Bubble 승인 체크리스트
- ✓새로 고치지 않고 소스 → 대상 → 소스를 전환합니다.
- ✓모든 Bubble 페이지와 재사용 가능한 헤더 사이를 탐색합니다.
- ✓페이지 로드 후 팝업을 열고 반복 그룹 행을 로드합니다.
- ✓일반 및 서식 있는 텍스트 필드를 입력하고, 붙여넣고, 편집하고, 저장하고, 다시 엽니다.
- ✓각 반복 그룹 내에서 제외된 사용자 데이터 값 하나를 테스트합니다.
- ✓SearchBox, 드롭다운, 레거시/Select2 MultiDropdown 검색을 테스트합니다.
- ✓모든 current_language 조건부 링크와 PDF/리소스 링크를 테스트하세요.
- ✓Chrome, Safari, 모바일 너비 및 비공개 세션을 다시 테스트합니다.
[GoLocal v4].11 가격및 청구
세 가지 계획, 모두 포함 무제한 번역 단어 및 무제한 대상 언어.
| 특징 | Starter | Pro | Business |
|---|---|---|---|
| 월간 가격 | $15/mo | $35/mo | $89/mo |
| 연간 가격 | $149/yr | $349/yr | $890/yr |
| 대상 언어 | 무제한 | 무제한 | 무제한 |
| MAU 제한 | 30K | 150K | 1M |
| Pro객체 | 1 | 1 | 2 |
MAU
번역을 본 순 방문자입니다. 봇이 필터링되었습니다. 10% 초과분 무료, 이후 $3/10K 추가.
언어
모든 유료 플랜에는 언어별 추가 비용 없이 무제한 대상 언어가 포함됩니다.
5일 무료 평가판
모든 새로운 프로젝트는 무료 평가판으로 시작됩니다. 신용 카드가 필요하지 않습니다.
12 파트너 Program
GoLocal!를 추천하고 수익을 창출하세요
추천 링크를 공유하고 적립하세요 반복 커미션 당신이 데려오는 모든 유료 고객에 대해.
파트너로 등록
대시보드 → 파트너 탭 → "파트너 Program 가입". 고유한 추천 링크를 받으세요.
링크를 공유하세요
블로그, YouTube, Bubble 포럼, 소셜 미디어, 튜토리얼 또는 고객과 직접 소통할 수 있습니다.
커미션 받기
각 추천 사용자의 구독 기간 동안 반복되는 커미션입니다.
돈을 받으세요
잔액이 최소 기준액에 도달하면 은행 송금이나 PayPal을 통해 지급을 요청하세요.
앱을 다국어로 만들 준비가 되셨나요?
무료 플러그인을 설치하고, 프로젝트를 만들고, API 키를 붙여넣으세요. 그러면 Bubble 앱이 모든 언어를 구사합니다.