본문 바로가기
버블 개발/중급

71. App text (중급) : 버블 앱 텍스트 (자동번역) 설정, 다중어 사용 설정, 글로벌 언어 앱 설정

by 스타트업 사업가 마르코 2023. 8. 8.
이 글에서는 버블의 정적 데이터인 앱 텍스트의 정의와 사용법에 대해 이해를 돕고 있습니다. 
  • 애플리케이션 텍스트 및 메시지의 줄임말인 앱 텍스트(App text)는 앱에서 사용할 수 있는 일종의 텍스트 문자열 데이터베이스입니다.
  • 단일 언어로 사용할 수 있지만 Bubble을 사용하면 모든 문자열을 다른 언어로 번역하여 사용자에게 다국어 앱을 제공할 수도 있습니다. 

 

(1) 앱 텍스트(App text)의 정의

애플리케이션 텍스트는 Bubble의 정적(Static) 데이터 기능의 일부입니다.
  • 즉, 데이터베이스처럼 동적(Dynamic)이지 않으며 각 데이터의 변경 사항이 있을 때마다 앱을 다시 배포해야 합니다.
  • 따라서 기사 글 및 제품 설명과 같은 긴 텍스트 문자열을 저장하기 위한 것이 아니라 헤더, 메뉴 옵션 및 버튼 레이블(이름)과 같은 짧은 콘텐츠를 저장하기 위한 것입니다.
  • 앱 텍스트는 애플리케이션 코드의 일부가 되며 페이지 로드 시 모든 사용자에게 다운로드됩니다. 그러므로 보안에 신경 써야 하는 중요한 정보를 저장하는 데 이러한 문자열을 사용해서는 안 됩니다.

 

(2) 앱 텍스트 할당

1. 앱 텍스트는 모든 표현식에서 사용할 수 있습니다.

  • 즉, 동적 텍스트를 허용하는 모든 element 속성에 할당할 수 있습니다.
  • 여기에는 텍스트 element, 버튼 및 확인란의 레이블, 텍스트 입력 필드, 도구 설명 등이 포함됩니다.

App text 예시
Input 예제 - App text 예시

 

2. 앱 텍스트는 모든 동적 표현(Dynamic expression)에서 사용할 수 있습니다.

  • 위의 스크린샷에서는 My input이라는 앱 텍스트를 텍스트 Input 요소의 placeholder로 사용하고 있습니다.
  • 이것은 또한 워크플로, element 조건 및 동적 표현식을 삽입할 수 있는 다른 모든 위치에서 사용할 수 있음을 의미합니다.
  • 위의 예에서 앱 텍스트를 데이터 소스로 선택하고 내 입력을 연산자로 선택했습니다.
  • 이것은 표시하려는 특정 문자열의 ID이므로 먼저 생성해야 합니다.

 

(3) 앱 텍스트 편집

앱 텍스트 편집기에 접속하려면 Settings > language로 이동합니다.

App text 설정
App text 설정

 

1. General settings

  • 여기에서 앱의 기본 언어와 사용자의 언어 설정을 결정하는 참조 필드를 찾을 수 있습니다. (위의 그림)

 

2. Application text & messages

여기에서는 추가한 모든 사용자 지정 텍스트 문자열과 Bubble의 핵심 텍스트를 찾을 수 있습니다.

  • 왼쪽 열은 텍스트의 ID입니다. 위의 Input 예제에서 텍스트의 ID는 My input 이었습니다.
  • 왼쪽에 Text ID가 있고 오른쪽에 사용자에게 표시될 문자열이 있습니다.

1) CORE - Text

  • Core 텍스트는 Bubble이 기본적으로 포함하고 있는 텍스트 문자열입니다.
  • 문자열을 변경할 수 있지만 삭제할 수 없으며 해당 ID는 정적으로 유지됩니다.
  • 이러한 문자열은 Bubble의 핵심 기능에 연결된 다양한 오류/정보 메시지를 다룹니다.
  • 이러한 기본 제공 텍스트는 이미 사용 가능한 모든 언어로 번역되어 있기 때문에 언어 설정 시 각 언어로 번역되어 보입니다.

 

2) Element - Text (플러그인의 이름으로 적혀있음)

  • 일부 element와 플러그인은 자신이 기능적으로 설명해야 하는 텍스트 문자열도 추가합니다.
  • 위치는 CORE TEXT  하단에 자동으로 추가합니다.
  • 예를 들어 다중 파일 업로더 플러그인은 업로드 취소 및 파일 제거와 같은 텍스트를 추가합니다.

 

(4) 여러 언어 추가

앱 텍스트는 여러 언어로 설정되며 IETF 언어 태그 코드를 사용하여 각 언어와 지역 방언을 식별합니다.

 

*IETF 언어란?
IETF 언어 태그는 인터넷에서 널리 사용되는 언어 코드 목록입니다. 영국 영어(en_gb) 및 미국 영어(en_us)와 같은 언어 변형을 구별하기 위해 ISO 639와 같은 다양한 표준을 결합합니다. IETF(Internet Engineering Task Force)는 인터넷에 대한 자발적인 표준을 만들기 위해 노력하는 조직입니다.

 

1. 사용자의 언어 필드 설정

Bubble의 사용자에게는 언어 설정 필드가 내장되어 있지 않지만 필요한 경우 필드를 설정할 수 있습니다.

 

1) 필드 이름은 중요하지 않지만 필드가 작동하려면 유효한 IETF 언어 태그를 반환해야 합니다.

  • 즉, 필드의 데이터에는 이미 정의되어있는 약어 중 하나와 일치하는 텍스트를 포함해야 합니다.
  • 사용자의 언어 필드는 ko_kr과 같은 언어의 언어 코드 중 하나를 반환해야 합니다.

 

2) 필드를 설정했으면 사용자 유형의 언어 필드 드롭다운을 사용하여 사용자의 언어 설정을 제어하도록 해당 필드를 할당합니다.

  • 설정한 필드를 선택하면 Bubble이 필드의 값에 자동으로 응답하여 사용자의 언어로 문자열을 표시합니다.
  • 필드가 비어 있으면 Bubble은 앱의 기본 언어로 설정된 언어로 설정됩니다.

 

2. 텍스트 번역

텍스트를 번역하려면 현재 편집 중인 메시지 및 텍스트 드롭다운에서 번역할 언어를 선택합니다.
  • 다른 언어를 선택하면 문자열이 변경되는 것을 볼 수 있습니다.
  • 해당 언어로 번역되지 않은 문자열은 “번역 없음”으로 표시됩니다.

 

(5) 번역 내보내기 및 가져오기

Bubble을 사용하면 모든 언어 문자열을 CSV 파일로 내보낸 다음 필요한 조정을 한 후 파일을 다시 가져올 수도 있습니다.

이렇게 하면 Bubble 편집기에 대한 액세스 권한을 부여하지 않고도 문자열을 번역하도록 다른 사용자를 효율적으로 초대할 수 있습니다.

  1. Export 버튼을 클릭하고 Bubble이 생성하는 CSV 파일을 다운로드합니다.
  2. 파일에 필요한 조정을 하지만 Text ID가 변경되지 않았는지, 파일을 다운로드했을 때의 열이 그대로 유지되는지 확인하십시오.
  3. Import 버튼을 클릭 하고 완성된 파일을 선택합니다.

 

*주의사항
CSV 파일을 가져오면 CSV 파일의 셀이 비어 있는 경우에도 모든 문자열을 덮어씁니다.
문자열을 내보낼 때 그대로 유지하려면 파일에 남아 있는지 확인하십시오.

 

(6) 앱 텍스트 FAQ

1. 텍스트 문자열이 해당 언어로 번역되지 않은 경우 Bubble은 무엇을 표시합니까?

  • 사용자가 언어를 선택했고 페이지의 문자열이 해당 언어로 번역되지 않은 경우 “번역 없음”이 대신 표시됩니다.
  • preview 모드로 미리 보기 시, 디버거의 오른쪽 하단에 있는 Bubble의 오류 콘솔도 페이지의 경고를 표시합니다.

 

2. 사용자의 언어 필드가 비어 있으면 어떻게 됩니까?

  • 사용자에 대한 필드를 언어 필드로 설정했는데 해당 필드가 비어 있거나 유효하지 않은 언어 코드를 반환하는 경우 Bubble은 앱의 기본으로 설정된 언어로 인식합니다.

 

3. 앱 텍스트는 성능에 어떤 영향을 줍니까?

  • 추가하는 앱 텍스트 문자열은 애플리케이션 JavaScript 소스 코드 파일의 일부가 됩니다. 이것은 귀하의 페이지를 여는 모든 사용자에게 다운로드된다는 것을 의미합니다.
  • 성능상의 이유로 Bubble은 사용자가 선택한 언어로만 텍스트를 다운로드합니다. 이것이 사용자의 언어를 변경하려면 업데이트된 JavaScript 파일을 생성하고 다운로드할 수 있도록 페이지로드가 필요한 이유입니다.
  • 앱 텍스트 문자열을 요소에 직접 배치하는 것보다 성능에 부담이 되지 않습니다.
  • 여러 장소에서 사용되는 경우 한 번만 저장하면 되므로 더 가볍습니다.
  • 앱을 번역할 계획이 없더라도 모든 문자열을 한 곳에 유지하는 것이 유용할 수 있습니다.

 

4. 앱 텍스트는 오른쪽에서 왼쪽 쓰기(RTL)를 지원합니까?

  • 예, 앱 텍스트는 아랍어, 히브리어 및 우르두어와 같은 RTL 언어를 지원합니다. LTR과 RTL 언어 간에 전환하려는 경우 앱 디자인을 조정해야 할 수 있으므로 두 언어 모두에서 애플리케이션을 테스트하는 것이 좋습니다.