여기에서 앱의 시각적 모양을 디자인할 수 있습니다. 페이지에 요소를 그리고, 드래그하여 크기를 조정하고, 속성과 모양을 조정할 수 있습니다. 신규 사용자의 경우 여기에서 시작하는 것이 좋습니다. 새 요소를 추가하려면 왼쪽의 팔레트에서 요소 유형을 클릭한 다음 페이지에서 클릭하고 끌어서 삽입합니다. 요소를 두 번 클릭하면 속성 편집기가 표시되며, 여기서 요소의 모양과 동작을 사용자 지정할 수 있습니다. 요소를 마우스 오른쪽 버튼으로 클릭하면 추가 편집 옵션이 있는 드롭다운 메뉴가 표시됩니다.
시작하기 위한 자세한 내용은
사용자 인터페이스 구축하기
가이드를 참조하세요.
UI 빌더
UI 빌더 하위 탭에서는 페이지에 새 요소를 추가하고 기존 요소를 수정할 수 있습니다. 버블 페이지는 기본적으로 "보이는 그대로 표시되는"(WYSIWYG) 편집 환경으로, 이 탭에서 생성하는 모든 내용이 일반적으로 앱의 최종 사용자에게 표시됩니다. 컨테이너 및 시각적 요소에는 페이지 또는 요소의 반응형 동작을 제어하는 레이아웃 설정도 있습니다. 반응형 페이지를 디자인할 때 최종 사용자의 화면이 커지거나 작아짐에 따라 페이지의 레이아웃이 부드럽게 확장됩니다.
앱에는 여러 페이지를 포함할 수 있으며, 실제로 최종 사용자가 존재하지 않는 앱의 URL을 방문할 경우 표시되는 404 페이지와 최종 사용자가 비밀번호를 재설정하는 데 사용하는 reset_pw 페이지 등 몇 가지 페이지가 기본적으로 제공됩니다. 왼쪽 상단의 상단 표시줄에 있는 드롭다운을 통해 새 페이지를 만들거나 다른 페이지(또는 재사용 가능한 요소)를 편집하도록 전환할 수 있습니다.
요소 트리
요소 트리에는 현재 페이지에 존재하는 모든 요소가 표시됩니다. 들여쓰기는 컨테이너와 해당 컨테이너의 콘텐츠 간의 관계를 나타내며, 여러 수준의 중첩이 있을 수 있습니다(예: 그룹 내 그룹 내...).
Loading…
트랜스크립트:
이 빠른 팁에서는 요소 트리를 사용하여 요소를 끌어서 놓아 위치를 변경하는 방법에 대해 알아 보겠습니다. 새로운 반응 형 엔진에서 작동하는 방식은 다음과 같습니다. 트리의 요소를 클릭하고 드래그하여 캔버스에서 위치를 변경할 수 있습니다. 요소 트리에서 끌어서 놓는 이러한 요소는 끌어서 놓은 상위 컨테이너 레이아웃 유형에 따라 위치가 변경되며 초기 위치는 다음에 따라 달라집니다. 부모 컨테이너가 열리거나 닫힌 경우 예를 들어 컨테이너가 고정되거나 정렬되어 있고 요소 트리에서 닫혀있는 경우 드래그한 요소는 왼쪽 상단에 배치되고 기본적으로 가장 높은 z 인덱스, 즉 컨테이너의 모든 요소 앞쪽으로 배치됩니다. 이는 행과 열에서도 동일합니다. 이러한 닫힌 컨테이너 레이아웃으로 드래그한 요소는 맨 아래에 배치되고 기본적으로 이러한 컨테이너의 마지막 위치 또는 가장 높은 순서가됩니다. 요소 트리에서 컨테이너가 열리면 요소를 원하는 위치로 끌어서 놓을 수 있으므로이 요소를 선택하여 그룹에서 페이지로 가져 오려면 다음과 같이 할 수 있습니다. 다른 그룹에 배치하려면 그룹을 아래로 내리고 원하는 위치에 요소를 배치하거나 닫힌 그룹 위로 마우스를 가져 가면 요소를 선택할 수 있습니다. 이 자동으로 열리므로 배치 할 위치를 선택할 수 있습니다. 또한 컨테이너를 드래그하여 선택하여 이동하고 페이지의 다른 컨테이너간에 섞을 수도 있습니다. 요소를 드롭 한 컨테이너 레이아웃을 알고 있는지 확인하여 시각적 모양이 갑자기 변경되어 놀라지 않도록하십시오. 실수를 한 경우 언제든지 취소 할 수 있습니다. 자세한 내용은 버블 아카데미를 확인하십시오.
