Bubble

Explore

Bubble

신규 회원? 여기에서 시작하기

애플리케이션 편집기

애플리케이션 에디터를 사용하여 앱을 디자인, 빌드, 유지 관리 및 확장할 수 있습니다. 편집기는 여기에 설명된 7개의 주요 탭을 중심으로 구성되어 있습니다. 또한 Bubble에서 빌드할 때 사용할 여러 가지 주요 도구와 기능도 있습니다. 여기에는 이러한 도구 중 몇 가지가 강조 표시되어 있습니다.

⁠

대본: (00:00) [음악] 버블에 오신 것을 환영합니다 버블을 사용하여 코드없이 웹 애플리케이션을 구축 할 수있는 시각적 프로그래밍 언어입니다. 이 시리즈에서는 기존 프로그래밍 프레임 워크에 필요한 끝없는 설정없이 마켓 플레이스, 소셜 네트워크 또는 CRM과 같은 모든 것을 구축 할 수 있습니다 우리는 처음부터 버블을 배울 것입니다 우리는 그것이 어떻게 작동하고 애플리케이션의 기반을 구축하도록 도울 것입니다 시작하겠습니다 먼저 내 애플리케이션으로 이동하여 새 앱을 클릭하십시오 고유 한 이름을 지정해야합니다 (00:36) 선택적으로 여기에서 더 많은 정보를 입력하거나이 예제에 대해 미리 정의 된 템플릿에서 시작할 수 있습니다. 새 버블 애플리케이션을 만들 때 만들기를 누르면 어시스턴트가 나타나면 단계별로 진행되는 몇 가지 일반적인 설정 기능을 안내합니다. 첫 번째는 브라우저 탭에 표시되는 애플리케이션의 제목입니다. 기본적으로 이미 입력 한 고유 한 앱 이름이므로 그대로 두겠습니다. 또한 애플리케이션의 기본 언어를 변경하여 이메일에 반영되는 (01:03) 앱이 날짜 형식 및 기타 통신을 보낼 것입니다 목록을 드롭 다운하여 현재 지원되는 모든 언어를 보거나 더 추가하도록 요청할 수 있습니다 다음으로 브라우저 탭의 제목 옆에 작은 아이콘이있는 경우 지금 업로드 할 수 있습니다 나중에 언제든지 다시 돌아올 수 있지만 지금은 다음을 클릭하겠습니다. 마지막으로 앱이 외부 API에 연결할 경우 버블의 플러그인 에코 시스템에서 플러그인을 설치하여 앱의 기능을 확장 할 수 있습니다 (01:32) 버블의 API 커넥터를 사용하면 이 화면에서 플러그인으로 설치할 수 있으며, 이것으로 버블 애플리케이션이 설정되고 다음 단원에서 에디터와 새 앱을 미리 보는 방법에 대해 배울 준비가 된 것입니다.

기본 탭

Design tab

여기에서 앱의 시각적 모양을 디자인할 수 있습니다. 페이지에 요소를 그리고, 드래그하여 크기를 조정하고, 속성과 모양을 조정할 수 있습니다. 신규 사용자의 경우 여기에서 시작하는 것이 좋습니다.

새 요소를 추가하려면 왼쪽의 팔레트에서 요소 유형을 클릭한 다음 페이지에서 클릭하고 끌어서 삽입합니다. 요소를 두 번 클릭하면 속성 편집기가 표시되며, 여기서 요소의 모양과 동작을 사용자 지정할 수 있습니다. 요소를 마우스 오른쪽 버튼으로 클릭하면 추가 편집 옵션이 있는 드롭다운 메뉴가 표시됩니다.

Workflow tab

워크플로 탭에서는 페이지를 프로그래밍하는 워크플로를 정의할 수 있습니다. 다양한 워크플로는 이벤트를 나타내는 상자로 표시됩니다.

이벤트 또는 작업을 클릭하면 속성 편집기와 유사한 패널이 표시됩니다. 여기에서 작업에 대해 설정해야 하는 다양한 필드를 정의할 수 있습니다. 예를 들어 '이메일 보내기' 액션을 클릭하면 '받는 사람'이라는 필드가 있는 패널이 열리며, 여기서 이메일을 보낼 주소를 정의할 수 있습니다. 이 정보가 동적인 경우 코드 없이 동적 표현식을 작성할 수 있는 컴포저를 사용하여 추가할 수 있습니다.

Data tab

데이터 탭에서는 데이터 구조를 보고 수정할 수 있습니다. 애플리케이션에서 사용되는 다양한 데이터 유형과 각 데이터 유형에 대한 필드를 확인할 수 있습니다. '앱 데이터' 섹션에는 실제 데이터가 표시됩니다. Excel 유형 보기에는 생성된 항목이 표시되며, 항목을 쿼리, 내보내기, 수정 및 삭제할 수 있습니다. 개인정보 보호 섹션에서는 애플리케이션의 데이터를 적절한 사용자가 볼 수 있도록 개인정보 보호 규칙을 정의할 수 있습니다. 이는 고급 기능이지만 프로덕션 환경에서 애플리케이션을 사용하는 즉시 설정해야 하는 기능입니다.

Styles tab

스타일 탭에서는 인터페이스에서 요소가 가질 수 있는 다양한 스타일을 정의할 수 있습니다. 스타일은 비슷한 유형의 요소(예: 텍스트 요소)에 적용할 수 있는 공유 속성(예: 배경색, 글꼴 크기 등)의 집합입니다. 스타일을 사용하면 보다 일관된 인터페이스를 만들 수 있으며 테마를 빠르게 변경할 수 있습니다. 가능하면 언제든지 스타일을 사용하는 것이 좋습니다.

Plugins tab

플러그인은 Bubble의 핵심 기능을 확장하는 방법입니다. 예를 들어, 커뮤니티에서 구축한 요소를 사용하거나 Stripe로 신용카드를 청구하거나 사용자에게 Facebook에 가입할 수 있는 기능을 제공하려면 애플리케이션에 플러그인을 설치해야 합니다. 플러그인 탭에서 플러그인을 설치할 수 있습니다. 플러그인이 설치되면 필요한 경우 각 플러그인에 대한 매개변수를 입력할 수 있습니다. 예를 들어 Stripe 플러그인을 사용하려면 Stripe에서 받은 API 키를 입력해야 합니다.

플러그인 탭은 플러그인을 검토하고 평가할 수 있는 곳이기도 합니다. 대부분의 플러그인은 커뮤니티에 의해 만들어지기 때문에 평가와 리뷰는 Bubble 생태계를 건강하게 유지하고 플러그인 빌더가 플러그인을 개선하는 데 매우 중요합니다.

Settings tab

이 탭에서는 애플리케이션 구독 및 유료 애드온을 제어할 수 있습니다. 설정 탭에는 애플리케이션을 시작하기 전에 정의해야 하는 몇 가지 애플리케이션 전체 설정도 있습니다. 이러한 설정은 색상 팔레트 정의, 사용자 지정 글꼴 추가부터 비밀번호 정책 설정, 앱 비공개 설정 등에 이르기까지 다양합니다.

Logs tab

이 탭은 앱이 라이브 상태이거나 실행 모드에서 테스트할 때 유용합니다. 서버 로그를 사용하여 과거 이벤트 및 워크플로 문제를 진단하고 워크플로 실행 및 업로드 스토리지 측면에서 예약된 작업과 앱 사용량을 확인할 수 있습니다.

조심하세요!

동일한 앱에서 버블 애플리케이션 편집기를 위해 열려 있는 여러 브라우저 탭을 동시에 사용하면 예기치 않은 동작이 발생할 수 있습니다!

주요 도구

Property Editor

The Property Editor 은 각 페이지의 다양한 요소를 디자인하고 이벤트와 액션을 사용자 지정하는 데 사용하는 기본 패널입니다. 드래그 가능한 팝업으로 요소, 작업 또는 이벤트에 대해 채울 수 있거나 채워야 하는 다양한 필드를 표시합니다. 요소를 두 번 클릭하거나 이벤트 또는 액션을 한 번 클릭하면 나타납니다. 상단 표시줄에서는 편집 중인 요소/액션/이벤트의 이름을 변경할 수 있으며, 오른쪽의 아이콘을 사용하면 요소 검사기, 댓글 패널 또는 일부 상황에 맞는 비디오를 표시할 수 있습니다.

⁠

Appearance

요소의 전반적인 모양과 관련된 컨트롤입니다. 여기에는 데이터 유형, 데이터 소스, 스타일 및 전환 설정이 포함됩니다.

Layout

페이지에 있는 요소의 전체 레이아웃과 관련된 컨트롤입니다. 여기에는 너비, 높이, 컨테이너 레이아웃 유형, 페이지 가시성 및 여백이 포함됩니다.

Conditionals

조건문을 사용하면 특정 상황에서 페이지 요소가 작동하고 표시되는 방식을 제어할 수 있습니다. 이 탭은 이전과 동일하게 유지됩니다.

App Search Tool

여러 페이지와 요소가 있는 경우 현재 사용자의 이메일을 사용하는 모든 요소 또는 특정 스타일을 가진 모든 요소를 찾아야 하는 상황에 처할 수 있습니다. 편집기 상단 표시줄에 있는 돋보기 아이콘을 클릭하면 검색 도구가 표시됩니다. 요소, 작업 등을 검색할 수 있습니다. 항목을 클릭하면 편집기의 오른쪽 페이지/탭으로 이동합니다.

⁠

'텍스트 포함' 옵션은 표시 이름이 아닌 기본 메타데이터에 검색된 텍스트의 일부가 포함된 모든 요소를 일치시킵니다. 예를 들어, 필드 이름을 변경할 때 해당 필드 메타데이터의 모든 항목의 이름을 변경하지 않는데, 이는 매우 느리기 때문이며, 대신 새 표시 이름을 표시해야 하는 곳에만 새 표시 이름을 표시하도록 Bubble 편집기에 지시합니다.

Issue Checker

Bubble은 매우 개방적이기 때문에 디자인할 때 실수를 할 수 있으며, 아마도 실수를 할 것입니다. 실수에는 누락된 필드 또는 일관되지 않은 유형의 문제(예: '현재 사용자에게 요금 청구' 작업에서 가격을 숫자로 입력해야 하는데 텍스트 필드 유형을 사용하는 경우)가 포함될 수 있습니다. 문제 검사기는 앱을 실시간으로 검사하여 수정할 문제를 나열합니다. 문제가 발생하면 바로 상단 표시줄에 빨간색 경고 아이콘이 표시되며, 이 경고 아이콘을 클릭하면 목록이 표시됩니다. 검색 도구와 마찬가지로 각 항목을 클릭하면 올바른 위치로 이동하여 해당 이슈를 강조 표시합니다.

이슈로 인해 실행 모드에서 앱이 작동하지 않을 수 있으므로 이슈 목록은 항상 가능한 한 짧게(가급적 0개 항목으로) 유지하는 것이 중요합니다. 문제가 있는 경우 사용자가 사용하는 앱의 라이브 버전에 배포할 수 없습니다.

⁠

Preview

Bubble에서 새 앱을 만들면 앱을 실행할 준비가 된 것입니다. 언제든지 미리 보기를 클릭하면 현재 편집 중인 페이지에서 애플리케이션이 실행됩니다.

Version Control

요금제에서 허용하는 내용에 따라 앱을 원하는 시점으로 되돌릴 수 있습니다. 삭제해서는 안 되는 페이지를 삭제하고 변경 사항을 되돌릴 수 없는 등 문제가 발생한 경우 앱을 삭제하기 이전 시점으로 복원할 수 있습니다.

주요 기능

실시간 저장

Bubble은 실시간으로 앱을 자동으로 저장합니다. 요소, 작업, 설정 등을 수정하는 즉시 변경 사항이 저장됩니다. 상단 표시줄에 잠시 동안 '저장 중' 알림이 표시되며, 저장 프로세스가 완료되는 즉시 '저장됨'으로 변경됩니다.

가끔 알림이 빨간색으로 바뀔 수 있는데, 이는 인터넷 연결이 한동안 안정적이지 않았기 때문입니다. 이 경우 앱 작업을 잠시 중단하고 연결이 정상으로 돌아오는지 확인해야 합니다. 그렇지 않은 경우 편집기를 새로 고치는 것이 정상 상태로 돌아가는 가장 좋은 방법입니다. 새로 고치면 마지막으로 변경한 내용이 손실될 수 있습니다. 알림이 빨간색으로 바뀌면 색상이 변경된 후 앱에 대한 변경 사항이 손실될 수 있으므로 앱에서 계속 작업하지 마세요.

실행 취소 및 다시 실행

하나의 브라우저 세션 내에서 앱에 대한 모든 수정 사항은 실행 취소/재실행할 수 있습니다. 상단 표시줄의 두 아이콘을 모두 클릭하여 변경 사항을 되돌리거나 다시 적용할 수 있습니다. 변경 사항은 현재 페이지에 표시되지 않는 편집기의 일부 영역에서 발생할 수 있으므로 해당 버튼의 기능이 보이지 않는 경우 주의해서 사용하세요.

다중 사용자 편집

한 명 이상의 사용자가 동시에 앱을 수정할 수 있습니다(사용자를 초대하려면 유료 요금제를 사용 중이어야 합니다). 다른 사용자가 내가 있는 앱을 수정하면 다른 사용자의 마우스가 움직이는 것을 볼 수 있습니다. 이 기능은 두 사람이 동시에 같은 요소를 수정하는 것을 방지하는 데 유용합니다.

바로 가기

더 빠르게 빌드할 수 있도록 편집기에 몇 가지 단축키가 추가되었습니다. 복사 붙여넣기 외에도 단축키를 사용하여 버튼에 워크플로를 추가하고 컴포저를 탐색할 수 있습니다(여러 작업 중). 도움말 메뉴의 단축키 패널에서 현재 사용 가능한 단축키 목록을 확인할 수 있습니다.

튜토리얼 동영상

도움말 메뉴에서는 아카데미의 일부 동영상을 시청할 수 있는 옵션이 있습니다. 요소를 처음 그릴 때 표시되는 상황에 맞는 동영상도 있습니다. 속성 편집기에서 '?' 아이콘을 클릭하여 시청할 수도 있습니다. 이 동영상은 때때로 이전 버블 사용자 인터페이스 테마를 보여 주지만, 여전히 최신 콘텐츠이며 새로운 요소/작업을 시작하는 데 도움이 됩니다.

핵심 참조에 액세스

편집기에서 '참조 보기' 툴팁을 통해 문서에 액세스할 수 있습니다. 아이콘이나 필드 위에 몇 초 동안 마우스를 갖다 대면 도구 설명이 표시됩니다. 도구 설명을 클릭하면 새 탭이 열리고 문서 내 올바른 위치로 이동합니다. 이미 열려 있는 문서가 있다면 즉시 올바른 위치로 리디렉션됩니다.

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.