이 섹션에서는 사용자 입력으로 텍스트 및 숫자를 받는 요소를 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
텍스트 및 숫자 입력은 사용자가 자체 텍스트 문자열 및 숫자를 응용 프로그램에 제공할 수 있게 하며 이는 나중에 데이터베이스에 저장하거나 다른 방식으로 사용될 수 있습니다.
다양한 시나리오에서 유용한 몇 가지 다른 요소가 있으며 이러한 요소는 서로 다른 종류의 서식 및 사용자 경험을 처리하도록 설정할 수 있습니다.
Input elements
입력 요소는 단일 행 평문에 사용되지만 여러 가지 다른 옵션에서 콘텐츠 형식을 지정할 수 있게 해줍니다. 아래 목록에 나열된 Field type returned는 입력이 반환하는 데이터베이스 필드 형식을 지정합니다.
How Bubble stores text formatting
Android 기기에서 예측 텍스트 기능 덕분에 일부 마스크를 사용한 콘텐츠 형식은 약간 다른 UX를 갖습니다. 이는 US Phone, Percentage, Currency, Date, Euro date 및 Text(숫자만)와 관련이 있습니다.
Android 기기에서 입력은 사용자가 무엇이든 입력하도록 허용하고 사용자가 타이핑을 멈춘 후에만 콘텐츠를 마스크와 일치시킵니다.
이것은 입력에 의해 생성된 최종 데이터에 영향을 미치지 않습니다.
Text
입력은 모든 텍스트 값을 수용합니다.
반환되는 필드 유형: 텍스트
입력은 이메일 주소처럼 서식이 지정된 텍스트 값만 수용합니다.
반환되는 필드 유형: 텍스트
Password
입력은 모든 종류의 텍스트 값을 수용하지만 작성된 문자는 별표로 대체됩니다.
반환되는 필드 유형: 텍스트
Integer
입력은 정수만 수용합니다. 계산에 사용될 수 있는 숫자를 수집해야 하는 경우에 사용합니다(텍스트로 저장된 숫자와 달리). 이 옵션을 선택하면 동적 최소값과 최대값을 지정할 수 있습니다.
반환되는 필드 유형: 숫자
Decimal
입력은 정수 또는 소수를 수용합니다. 최소값 및 최대값을 지정할 수 있으며 포함할 소수점의 개수도 지정할 수 있습니다. 또한 사용자가 타이핑하는 동안 자동으로 천 단위 구분 기호를 포함하도록 입력을 설정할 수 있습니다. 이 설정은 오로지 심미적인 요소이며 최종 값에는 영향을 미치지 않습니다.
반환되는 필드 유형: 숫자
Address
지리적 주소입니다. 이 옵션을 사용하면 입력이 Google Maps로 주소를 자동으로 유효성 검사합니다. 입력은 사용자가 타이핑하는 동안 자동으로 유효한 주소를 검색하지 않으므로 사용자는 이미 유효한 주소를 제공해야 합니다(예: Google Maps에서 직접 복사/붙여넣기). 사용자가 입력하는 동안 Google Maps 검색 결과를 볼 수 있게 하려면 대신 Search box 요소를 사용하는 것이 좋습니다.
반환되는 필드 유형: 주소
US phone
이 입력은 올바르게 서식이 지정된 미국 전화번호를 수용합니다. 값은 텍스트로 저장됩니다.
반환되는 필드 유형: 텍스트
Percentage
이 입력은 사용자의 입력을 백분율로 서식 지정하고 20%와 같은 입력을 수용하여 Bubble이 제공된 백분율 포인트의 올바른 숫자 등가물로 자동으로 저장합니다. 예를 들어 20%는 숫자 0.2로 저장되고 150%는 숫자 1.5로 저장됩니다.
반환되는 필드 유형: 숫자
Currency
입력은 정수 또는 소수점을 포함한 모든 숫자를 수용하며 자동으로 입력을 선택한 통화로 서식 지정합니다(예: $20). 최소값 및 최대값, 포함할 소수점의 개수를 지정할 수 있습니다. 또한 사용자가 타이핑하는 동안 자동으로 천 단위 구분 기호를 포함하도록 입력을 설정할 수 있습니다. 통화 및 천 단위 구분 기호 설정은 실제 값에는 영향을 미치지 않습니다.
반환되는 필드 유형: 숫자
Date
입력은 어떤 날짜든 수용하지만 시간은 포함하지 않습니다. 사용자가 입력하는 동안 입력 값은 mm/dd/yyyy로 자동으로 서식이 지정되어 사용자가 올바른 방식으로 날짜를 제공하도록 안내됩니다. 입력에 대한 특정 시간대를 지정할 수 있으며 Bubble은 사용자의 현재 시간대와의 모든 오프셋을 자동으로 계산합니다. 특정 시간대가 제공되지 않은 경우 사용자의 현재 시간대가 사용됩니다. 날짜는 주어진 날짜의 자정(00:00)에 저장됩니다.
반환되는 필드 유형: 날짜
Euro date
입력은 어떤 날짜든 수용하지만 시간은 포함하지 않습니다. 사용자가 입력하는 동안 입력 값은 dd/mm/yyyy로 자동으로 서식이 지정되어 사용자가 올바른 방식으로 날짜를 제공하도록 안내됩니다. 입력에 대한 특정 시간대를 지정할 수 있으며 Bubble은 사용자의 현재 시간대와의 모든 오프셋을 자동으로 계산합니다. 특정 시간대가 제공되지 않은 경우 사용자의 현재 시간대가 사용됩니다. 이 콘텐츠 형식과 Date 형식 간의 차이는 순전히 시각적입니다.
반환되는 필드 유형: 날짜
Text (numbers only)
이 입력은 정수만 수용하며 결과는 텍스트로 저장됩니다. 이는 사용자가 입력한 대로 정확히 유지되어야 하는 숫자 값(예: 선행 제로가 손실되지 않는 국제 전화 번호, 우편 번호 및 주문 번호)을 저장하려는 경우 유용합니다.
반환되는 필드 유형: 텍스트
Storing numbers as text versus storing them as numbers
Multiline input
이름에서 알 수 있듯이 멀티 라인 입력 요소를 사용하면 여러 줄의 텍스트를 수용할 수 있는 텍스트 입력 요소를 설정할 수 있습니다. 일반적인 텍스트 입력과 마찬가지로 이 요소는 일반 텍스트만 지원하며 볼드, 이탤릭 및 헤더와 같은 사용자 정의 서식을 제공하지 않습니다.
사용자가 여러 줄의 텍스트를 제공해야 하지만 볼드, 이탤릭 및 헤더와 같은 서식을 추가하지 않도록하려면 멀티 라인 입력 요소를 사용하십시오.
반환되는 필드 유형: 텍스트
Rich Text Editor
리치 텍스트 편집기는 플러그인입니다. Bubble이 만들었지만 사용하기 전에 앱에 설치해야 합니다.
리치 텍스트 편집기는 텍스트에 색상, 글꼴, 글머리 기호 및 링크와 같은 서식을 추가할 수 있는 또 다른 멀티 라인 입력 요소입니다. 리치 텍스트 편집기 플러그인을 사용하면 사용자가 텍스트에 고급 서식을 추가할 수 있습니다.
Hidden toolbar
리치 텍스트 편집기 요소에는 텍스트를 선택할 때만 툴바가 표시되는 미니멀한 디자인을 제공하는 설정이 있습니다.
위의 선택한 옵션보다 더 적은 서식 설정을 표시하도록 선택할 수도 있습니다. 스크린샷에는 사용 가능한 옵션의 전체 스위트가 표시됩니다.
More ways to learn
Core reference: text input
Video lessons
