이 섹션에서는 텍스트와 숫자를 사용자 입력(Input form)으로 허용하는 element에 대해 설명합니다.
- 사용자는 텍스트 및 숫자 Input form(입력 양식)을 통해 데이터베이스에 저장하거나 다른 용도로 사용할 수 있는 텍스트 문자열과 숫자를 애플리케이션에게 제공할 수 있습니다.
- 다양한 시나리오에서 유용한 몇 가지 element(요소)가 있으며 이러한 element(요소)는 다양한 종류의 서식 및 사용자 경험을 처리하도록 설정할 수 있습니다.
(1) Input (입력) 종류
Input form(입력 형식)는 한 줄 일반 텍스트(a single-line plaintext)에 사용되지만 다양한 옵션에서 콘텐츠 형식을 지정할 수 있습니다.
- 아래 목록의 설명에서 반환된 필드 유형(Field type returned)은 input이 반환할 데이터베이스 필드 형식의 종류를 지정합니다.
참고 1: Bubble이 텍스트 서식을 저장하는 방법
Bubble은 BBCode라는 마크업 언어를 사용하여 굵게, 기울임 꼴, 글머리 기호 등의 텍스트 서식을 저장합니다. BBCode는 텍스트에 서식을 추가할 때 자동으로 생성 및 적용됩니다.
- BBCode는 HTML보다 사용하기 더 간단하고 안전합니다. 그 이유는 기능이 제한적이고 선택된 수의 태그만 허용하기 때문입니다. 이렇게 하면 사용자가 앱을 손상시킬 수 있는 CSS 또는 Javascript와 같은 악성 코드를 업로드할 수 없습니다.
- HTML 형식이 지정된 텍스트를 E-mail로 바로 전송하려는 경우와 같이 html사용이 유용한 경우가 있습니다. Bubble의 기본 제공 텍스트 편집기는 HTML 형식을 지원하지 않지만 플러그스토어에는 BBCode 대신 HTML 형식으로 텍스트를 저장할 수 있는 외부 플러그인이 있습니다.
- Rich Text Editor에 대한 플러그인 스토어를 검색하면 이를 지원하는 몇 가지 Plugin를 얻을 수 있습니다.
- 위의 설명처럼 일반 텍스트 element는 HTML도 지원하지 않습니다. HTML 형식의 텍스트를 표시하려면 내장 HTML element를 사용할 수 있습니다.
참고 2 : Android 기기의 텍스트 예측 기능
안드로이드 시스템은 입력(input)에는 텍스트 예측 기능이 있습니다. 이로 인해 입력과 관련된 일부 콘텐츠 형식은 일반 입력 양식과 사용자 겸험이 약간 다릅니다.
- 이는 미국 전화번호, 백분율, 통화, 날짜, 유로 날짜 및 텍스트(숫자만 해당)에 적용됩니다.
: 다른 점
- Android 장치에서 입력(input)을 통해 사용자는 무엇이든(어떤 형식의 데이터든) 입력할 수 있으며, 사용자가 입력을 중지한 후에만 이 입력 데이터에 대한 형식을 검사합니다.
- 이것은 입력(input)에 의해 생성된 최종 데이터에 영향을 미치지 않습니다.
1. 텍스트 : Text
- 입력(input)은 모든 텍스트 값을 허용합니다.
- 반환된 필드 유형(Field type returned): 텍스트 : Text
2. 이메일 : Email
- 입력(input)은 이메일 주소와 같은 형식의 텍스트 값만 허용합니다.
- 반환된 필드 유형(Field type returned): 텍스트 : Text
3. 비밀번호 : Password
- 입력(input)은 모든 종류의 텍스트 값을 허용하고 문자를 쓰면 별표로 대체됩니다.
- 반환된 필드 유형(Field type returned) : 텍스트 : Text
4.정수 : Integer
- 입력(input)은 정수만 받습니다. 나중에 계산에 사용할 수 있는 숫자 값을 수집해야 할 때 사용합니다. (텍스트로 저장된 숫자와 반대)
- 이 옵션을 선택하면 동적으로 최솟값 및 최댓값을 지정할 수 있습니다.
- 반환된 필드 유형(Field type returned): 숫자 : number
5. 소수 : Decimal
- 입력은 모든 정수 또는 십진수를 허용합니다. 포함할 소수 자릿수뿐만 아니라 최솟값과 최댓값을 지정할 수 있습니다. 사용자 유형으로 천 단위 구분 기호를 자동으로 포함하도록 입력을 설정할 수도 있습니다.
- 이 설정은 다른 숫자형식과 비교해서 보여지는 부분의 차의일 뿐이며 최종 값에는 영향을 미치지 않습니다.
- 반환된 필드 유형(Field type returned): 숫자 : number
6. 주소 : Address
- 지리적 주소, 이 옵션을 사용하면 입력이 자동으로 Google 지도로 주소를 확인합니다. 입력은 사용자가 입력할 때 유효한 주소를 자동으로 검색하지 않으므로 사용자는 이미 유효한 주소를 제공해야 합니다. (예: Google 지도에서 직접 복사/붙여 넣기)
- 유용한 팁으로, 사용자가 입력할 때 Google 지도 검색 결과를 볼 수 있도록 하려면 검색 상자요소(search box element)를 붙여서 사용하면 유효한 주소를 얻을 수 있습니다.
- 반환된 필드 유형(Field type returned): 주소 : Adress
7. 미국 전화 : US phone
- 이 입력은 올바른 형식의 미국 전화번호를 허용합니다. 값은 텍스트로 저장됩니다.
- 반환된 필드 유형(Field type returned): 텍스트 : Text
8. 백분율 : Percentage
- 이 입력은 사용자 입력의 형식을 백분율로 지정하고 20%와 같은 입력을 허용합니다. Bubble은 제공된 백분율 포인트에 해당하는 올바른 수치로 자동으로 저장합니다. 예를 들어 20%는 숫자 0.2로 저장되고 150%는 1.5로 저장됩니다.
- 반환된 필드 유형(Field type returned): 숫자 : number
9. 통화 : Currency
- 입력은 모든 정수 또는 십진수를 허용하며 선택한 통화(예: $20 )로 입력 형식을 자동으로 지정합니다.
- 포함할 소수 자릿수뿐만 아니라 최솟값과 최댓값을 지정할 수 있습니다. 사용자 유형으로 천 단위 구분 기호를 자동으로 포함하도록 입력을 설정할 수도 있습니다. 통화 및 천 단위 구분 기호 설정은 일종의 표시일 뿐이며 최종 값에는 영향을 주지 않습니다.
- 반환된 필드 유형(Field type returned): 숫자 : number
10. 날짜 : Date
- 입력 형식(input form)은 모든 날짜형식을 허용하지만 시간은 포함하지 않습니다. 사용자가 입력하는 동안 자동으로 입력 값을 mm/dd/yyyy 형식으로 지정하여 올바른 방식으로 날짜를 제공하도록 안내합니다.
- 입력에 대해 시간기준(time zone)을 지정할 수 있으며 Bubble은 사용자의 현재 시간기준(time zone)으로 차이점이 있는지 자동으로 계산합니다.
- 시간기준(time zone)을 설정하지 않으면 않으면 사용자의 현재 시간기준(time zone)이 자동으로 사용됩니다. 날짜는 지정된 날짜의 오전 12시(00:00)에 저장됩니다.
- 반환된 필드 유형 (Field type returned) : 날짜 : Date
11. 유로 날짜 : Euro date
- 이 콘텐츠 형식과 위의 날짜(date) 형식의 차이점은 오직 시각적으로 dd/mm/yyyy 형식(일/월/년)으로 표시된다는 점입니다. (date형식은 mm/dd/yyyy형식 → 월/일/년)
- 반환된 필드 유형(Field type returned): 날짜 : Date
12. 텍스트(숫자만) : Text (numbers only)
- 이 입력은 정수만 허용하며 결과는 텍스트로 저장됩니다. 이는 사용자가 입력한 대로 정확하게 유지되어야 하고(예: 제일 앞의 0을 지우지 않고) 국제 전화번호, 우편 번호 및 주문 번호와 같은 계산 유형에 사용되지 않는 숫자 값을 저장하려는 경우에 유용합니다.
- 반환된 필드 유형(Field type returned): 텍스트 : Text
참고 3: 숫자를 텍스트로 저장하는 것과 숫자로 저장하는 것
1) 둘의 차이점은 무엇입니까?
: Bubble 데이터베이스는 숫자 값을 저장하는 데 사용할 수 있는 두 가지 필드 유형인 텍스트와 숫자를 제공합니다.
그러면 숫자를 텍스트 문자열로 저장하려는 이유는 무엇입니까?
- 그렇게 하는 것이 유용한 몇 가지 시나리오가 아래에 있습니다.
2) 제일 앞의 0을 포함해야 하는 경우
- 정수(숫자)에서 첫 번째 0은 값이 없음을 나타내며 데이터베이스에 저장될 때 무시됩니다. 결국 045와 45는 수학적 관점에서 같은 것이고 0은 혼란을 더하고 데이터베이스의 전체 크기를 증가시킬 뿐입니다.
- 하지만 때로는 첫 번째에 0이 필요합니다. 예를 들어 전화번호나 우편번호는 0으로 시작할 수 있으며 전체 값을 보존하려면 텍스트로 저장해야 합니다.
3) 데이터를 텍스트로 전달해야 하는 경우
- 때때로 API를 통해 외부 시스템과 통신할 때 해당 시스템은 숫자 값이 텍스트로 전달될 것으로 예상할 수 있습니다.
- 이 경우 나중에 변환할 필요가 없도록 데이터베이스에 텍스트로 저장하는 것이 유용할 수 있습니다.
4) 언제 무엇을 사용할 것인가
- 정적으로(static) 유지되고 어떤 종류의 계산에도 포함되지 않는 숫자 값으로 작업할 때 텍스트를 사용해야 합니다.
예시)
- 전화번호
- 우편번호
- 우편번호
- 제품/부품 번호
- 다음과 같이 계산하거나 집계해야 할 수 있는 값으로 작업할 때 숫자를 사용해야 합니다.
- 생년월일
- 나이
- 개수 및 총계(예: 품목 장바구니 및 장바구니의 총 가치)
- 재무 번호
- 요일을 나타내는 데 사용되는 값과 같은 열거형 값(예: 일요일 = 0, 월요일 = 1 등)
(2) Multiline Input (여러 줄 입력)
이름에서 알 수 있듯이 Multiline 입력 element를 사용하면 여러 줄의 텍스트를 허용하는 텍스트 입력 요소를 설정할 수 있습니다.
- 일반 텍스트 입력과 마찬가지로 이 요소는 일반 텍스트만 지원하며 사용자 정의 형식(type)을 지원하지 않습니다.
- 사용자가 여러 줄의 텍스트 입력은 가능하여야만 하고 bold, 기울임 및 머리글과 같은 서식을 추가할 수 없도록 하려고 할 때 Multiline 입력 요소를 사용합니다. 반대로 서식을 허용하게 하려면 아래의 Rich and Text editor를 사용합니다.
- 반환된 필드 유형(Field type returned): 텍스트 : Text
(3) Rich Text Editor (서식 있는 텍스트 편집기)
리치 텍스트 편집기는 플러그인입니다.
1. Rich Text Editor (서식 있는 텍스트 편집기) Plugin 설치
Bubble에서 공식적으로 만들었지만 사용하기 전에 플러그인 스토어에서 앱에 설치해야 합니다.
- Rich Text Editor는 사용자가 색상, 글꼴, 글머리 기호 및 링크와 같은 서식을 사용하여 서식 있는 텍스트를 입력할 수 있는 또 다른 Multiline Input(여러 줄 입력) 요소입니다.
- Rich Text Editor를 사용하면 사용자가 텍스트에 고급 서식을 추가할 수 있습니다.
2. Tooltip으로 사용 (숨겨진 도구 모음으로 사용)
Rich Text Editor 요소는 일부 텍스트를 선택할 때만 도구 모음이 표시되는 ‘Tooltip’의 디자인을 제공하는 설정과 함께 제공됩니다.
- 위의 설정보다 더 적은 형식 설정을 표시하도록 선택할 수도 있습니다. (좌측)
- 아래 스크린샷은 사용 가능한 옵션을 보여줍니다. (우측)
