이 섹션에서는 Bubble 편집기에서 사용 가능한 시각적 요소를 설명합니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
시각적 요소는 페이지에 배치할 수 있는 요소로, 다른 요소(그룹)를 포함할 수 없고 입력(입력 요소)을 수용할 수 없습니다. 일반적으로 두 가지 목적을 제공합니다.
•
정보를 표시하거나 페이지의 미학에 기여하기 위함
•
버튼 클릭을 수락하기 위함
위의 그림에서 모든 요소는 시각적 요소입니다. 텍스트, 이미지 및 버튼이 포함됩니다.
시각적 요소 카테고리에는 다음과 같은 요소가 포함되어 있습니다.
Text
텍스트 요소로 편집할 수 없습니다. 위의 이미지의 헤더 및 본문 복사본은 모두 텍스트 요소입니다.
Video lessons
Button
버튼은 클릭 워크플로에 최적화된 중앙 정렬된 텍스트가 있는 모양입니다.
Video lessons
Iocn
아이콘 요소를 사용하면 다양한 디자인의 큰 카탈로그에서 표시할 아이콘을 선택할 수 있습니다. Bubble은 아이콘을 사용합니다.
Video lessons
Link
링크 요소를 사용하면 사용자 정의 텍스트 및 대상을 지정할 수 있는 링크를 설정할 수 있습니다. 내부 페이지 중 하나를 동적으로 가리킬 수 있으며(해당 페이지로 데이터를 보낼 수 있음) 또는 정적 및/또는 외부 링크를 가리킬 수 있습니다.
Video lessons
Image
이미지 요소를 사용하면 앱에 이미지를 배치할 수 있습니다. 이 요소는 png, jpg, svg, webp 및 gif와 같은 모든 널리 사용되는 이미지 유형을 지원합니다.
Video lessons
Shape
모양 요소는 페이지에 사각형을 추가하며 크기를 조정하고 둥글게 만들고 다양한 방식으로 스타일을 지정할 수 있습니다.
Video lessons
Alert
경고 요소는 일정 시간 동안 텍스트 메시지를 표시한 다음 사라지는 막대를 추가합니다. 성공 및 오류 메시지와 같은 일시적인 메시지를 표시하는 데 사용됩니다.
Video lessons
Video
비디오 요소를 사용하면 앱에서 스트리밍 비디오를 구현할 수 있습니다. 이 요소는 YoutTube 및 Vimeo를 지원합니다.
Video lessons
HTML
HTML 요소를 사용하면 페이지에 HTML 코드 스니펫을 배치할 수 있습니다. Bubble의 시각적 편집기로 달성할 수 없는 앱에 사용자 정의 HTML 코드를 포함해야 할 때 유용할 수 있습니다. 이는 HTML 코드, CSS 스타일 및 JavaScript 코드일 수 있습니다.
HTML 요소의 전형적인 사용 사례는 다음과 같습니다.
•
타사 위젯 임베드
•
요소 스타일 또는 애니메이션을 위한 사용자 정의 CSS 사용
•
Javascript로 사용자 정의 기능 추가
Video lessons
Map
지도 요소를 사용하면 사용자가 완전히 탐색 가능한 페이지에 Google 지도를 구현할 수 있습니다.
Video lessons
Built on Bubble
이 요소를 사용하면 작은 "코드 없이 만든 Bubble" 로고를 앱에 추가할 수 있습니다.
