44. Visual element (초급) : 버블의 시각적 요소 정의 특징, 종류, Text, Button, Icon, Link, Image, Shape, Alert, Video, HTML, Map

이 섹션에서는 Bubble 편집기에서 사용할 수 있는 시각적 요소에 대해 설명합니다.

(1) Visual element 정의

 

1. Visual element 특징

• 다른 element(요소)를 포함할 수 없음
• 입력(Input element)을 허용할 수 없음
• 페이지에 배치할 수 있는 요소

 

2. Visual element 용도

• 정보를 표시하거나 페이지에 시각적 아름다움 기여
• 버튼 클릭을 수락하려는 용도

버블의 Visual element 종류

(2) Visual element 종류

1. Text (텍스트)

• 편집할 수 없는 텍스트 element(요소)입니다. 헤더와 본문 같은 element는 모두 텍스트 element입니다.

 

2. Button (버튼)

• 버튼은 가운데 정렬된 텍스트가 있는 도형입니다. 클릭하여 workflow를 작동시키는 동작에 최적화되어 있습니다.

 

3. Icon (아이콘)

• 아이콘 element를 사용하면 다양한 디자인의 대규모 카탈로그에서 표시할 아이콘을 선택할 수 있습니다. Bubble은 FontAwesome 라이브러리를 사용합니다.

 

4. Link (링크)

• 링크 element를 사용하면 사용자 지정 텍스트 및 대상으로 링크를 설정할 수 있습니다. 내부 페이지 중 하나를 동적으로 가리키거나(해당 페이지로 데이터 보내기 포함) 정적 및/또는 외부 링크를 가리킬 수 있습니다.

 

5. Image (사진)

• 이미지 element를 사용하면 앱에 이미지를 배치할 수 있습니다. 이 element는 png, jpg, svg, webp 및 gif와 같이 널리 사용되는 모든 이미지 유형을 지원합니다.

 

6. Shape (모양)

• 모양 element는 페이지에 사각형을 추가하여 다양한 방식으로 크기를 조정하고, 둥글게 하고, 스타일을 지정할 수 있습니다.

 

7. Alert (경고 알림)

• 경고 element는 텍스트 메시지가 사라지기 전에 설정된 시간(초) 동안 텍스트 메시지를 표시할 수 있는 막대를 추가합니다. 성공 및 오류 메시지와 같은 임시 메시지를 표시하는 데 사용됩니다.

 

8. Video (동영상)

• 비디오 element를 사용하면 앱에서 스트리밍 비디오를 구현할 수 있습니다.
• 이 element는 YouTube 및 Vimeo를 지원합니다.

 

9. HTML element (HTML 요소)

• HTML element를 사용하면 페이지에 HTML 코드를 배치할 수 있습니다.
• Bubble의 시각적 편집기를 통해 구현할 수 없는 사용자 지정 HTML 코드를 앱에 포함해야 할 때 유용할 수 있습니다.
• HTML 코드, CSS 스타일 및 JavaScript 코드가 될 수 있습니다.

 

• HTML element의 일반적인 사용 사례는 다음과 같습니다.
  • 타사 위젯 포함
  • 사용자 정의 CSS를 사용하여 요소 스타일 지정 또는 애니메이션 적용
  • Javascript로 사용자 정의 기능 추가

 

10. Map (지도)

• 지도 element를 사용하면 사용자가 탐색이 가능한 Google 지도를 페이지에 구현할 수 있습니다.

 

11. Built on Bubble (버블 로고)

• 이 element를 사용하면 앱에 작은 Bubble로고를 추가할 수 있습니다. (로고는 Built without code : Bubble )