Bubble.io에서 다국어 사이트를 구축하기 위한 단계별 가이드로 전세계적인 커뮤니케이션이 가능한 힘을 해제하세요 - 바로 오늘 당신의 청중을 확장하세요!
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
단계 1: 애플리케이션 텍스트 편집기에 접속하세요.
Bubble.io에서 다국어 사이트를 만들려면 먼저 앱의 언어 설정이 모두 들어있는 애플리케이션 텍스트 편집기에 접속해야 합니다. Bubble의 '설정' 영역으로 이동하고 옵션에서 '언어'를 선택하세요. 여기에는 앱의 기본 언어에 대한 일반 설정과 사용자 언어 환경 설정에 대한 구체적인 설정이 있습니다.
단계 2: 기본 언어 설정
앱의 기본 또는 첫번째 언어를 정의하세요. 이 설정은 날짜 형식과 사용자가 특정 언어를 지정하지 않았을 때 일부 요소가 어떻게 작동할지를 결정합니다. 기본 언어는 '언어' 탭 내의 일반 설정 영역에서 설정할 수 있습니다.
단계 3: 애플리케이션 텍스트 번역
'언어' 아래의 '애플리케이션 텍스트 및 메시지' 섹션에서 앱을 번역하기 시작하세요. 여기에서는 왼쪽 열에 텍스트 ID 목록과 오른쪽 열에 해당 텍스트 문자열이 표시됩니다. 이들은 버튼 레이블, 메뉴 옵션 또는 오류 메시지와 같은 작은 텍스트 덩어리로, 앱이 지원해야 하는 모든 언어로 번역해야 합니다.
단계 4: 번역용으로 내보내기
애플리케이션 텍스트를 모두 CSV 파일로 내보낼 수 있으며, 이 파일은 앱 에디터에 액세스할 필요가 없는 번역가와 공유할 수 있습니다. 이 CSV 파일에는 기본 언어로 표시된 모든 텍스트 ID와 문자열이 포함됩니다.
단계 5: 번역 및 재임포트
번역가가 원하는 언어로 텍스트 문자열을 모두 번역한 후, 텍스트 ID가 변경되지 않고 CSV의 구조가 유지되는지 확인하세요. '임포트' 기능을 사용하여 번역된 텍스트를 Bubble로 다시 가져옵니다.
단계 6: 여러 언어 추가
언어 설정에서 Bubble에서 제공하는 표준화된 코드를 사용하여 추가 언어를 추가하세요. 각 언어에 대해 해당하는 코드를 입력하십시오. 애플리케이션 텍스트는 여러 언어가 고려된 설계로, Bubble은 이들을 고유한 언어 코드로 인식합니다.
단계 7: 사용자에게 언어 할당
앱에 사용자 프로필이 있으면 사용자의 언어 선호도를 기록하기 위한 필드를 설정할 수 있습니다. 이 필드에는 앱에서 설정한 언어와 일치하는 유효한 언어 태그를 포함해야 합니다. 이 필드는 애플리케이션 텍스트 편집기에서 할당하여 애플리케이션을 사용자의 언어로 표시할 수 있게 합니다. 사용자가 언어 환경을 설정하지 않은 경우, 기본 언어가 사용됩니다.
단계 8: URL 매개 변수를 통한 언어 설정
사용자가 URL 매개 변수를 통해 앱 언어를 설정할 수 있게 합니다. 이는 앱의 URL에 "?lang=code"를 추가하여 수행할 수 있으며 여기서 "code"는 프랑스어(프랑스)의 경우 "fr_fr" 또는 러시아어(러시아)의 경우 "ru_ru"와 같은 언어 코드입니다.
단계 9: 앱 테스트
언어 설정이 완료되고 텍스트가 번역되면 다양한 언어로 응용 프로그램을 철저히 테스트하세요. 오른쪽에서 왼쪽으로 작성되는 언어(RTL)에 특히 주의하시기 바랍니다. 이들은 앱 디자인에 영향을 미칠 수 있습니다. 모든 번역된 문자열이 정확하게 표시되고 사용자 경험이 모든 언어에서 일관되게 유지되는지 확인하세요.
단계 10: 라이브로 전환
마지막으로, 다국어 설정이 테스트되어 작동이 확인되면 애플리케이션을 배포하여 변경 사항을 적용하세요. 앱 텍스트에서 변경사항이 있을 경우 새로운 번역을 반영하기 위해 앱 또는 페이지를 새로 고침하십시오.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.