• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
리소스 문제로 현재 번역은 중단한 상태입니다. 저를 대신해 번역을 리드하고 싶은 분이 있다면 연락 주세요!
프로퍼티 편집기는 페이지의 요소를 구성하는 주요 도구입니다. 페이지에서 요소를 더블 클릭하거나 왼쪽 요소 트리에서 한 번 클릭하면 이동 가능한 팝업이 나타나 여러 필드를 표시하여 사용자 정의를 위한 여러 옵션을 제공합니다.
The top bar
프로퍼티 편집기의 상단 표시줄은 요소 이름과 여러 아이콘으로 구성됩니다. 오른쪽에 있는 X는 요소 검사기를 닫습니다.
Element name
왼쪽에는 현재 선택된 요소의 이름이 표시됩니다. Bubble은 요소 유형 (예: 입력 또는 버튼)과 알파벳 순서 (예: A, B, C)로 구성된 이름을 자동으로 생성합니다.
이 필드는 편집 가능한 필드로 현재 선택된 요소에 원하는 이름을 지정할 수 있습니다.
Contextual video
플레이 기호가 표시된 첫 번째 아이콘을 클릭하면 현재 선택된 요소와 관련된 비디오 튜토리얼이 확장됩니다. 참고로 모든 요소에는 관련된 튜토리얼이 없을 수 있으며, 아이콘이 표시되지 않으면 비디오가 없는 것입니다.
Element inspector
두 번째 아이콘은 정보 기호가 표시됩니다. 이를 클릭하면 요소 검사기가 열리며,이 요소가 앱의 나머지 부분과 상호 작용하는 다양한 방법을 검사할 수 있습니다.
여기서는 버튼을 선택했습니다.
Custom states
현재 요소에 저장된 모든 사용자 정의 상태를 표시하며 해당 유형 및 기본값을 표시합니다. 여기서 새로운 사용자 정의 상태를 추가하거나 이름과 기본값을 수정하거나 삭제할 수 있습니다.
Evenets
이 섹션에는이 요소와 연결된 모든 이벤트가 나열됩니다. 위의 스크린샷 예에서 하나의 연결된 이벤트 (버튼 A가 클릭됨)가 있습니다. 이를 클릭하면 workflow 편집기와 관련된 workflow으로 이동합니다.
Actions
이 섹션에는이 요소와 연결된 동작이 나열됩니다. 위의 스크린샷 예에서 하나의 연결된 동작 (버튼 A 표시)이 있습니다. 이를 클릭하면 workflow 편집기와 관련된 동작으로 이동합니다.
Other elemnts
이 섹션에는 현재 선택된 요소를 동적 표현식에서 참조하는 요소가 나열됩니다. 또한 해당 요소의 부모 컨테이너 요소가 나열됩니다.
Comments
말풍선 아이콘을 표시하는 아이콘은 해당 요소에 대한 코멘트 편집기를 확장합니다. 이를 통해 현재 선택된 요소와 관련된 노트를 작성할 수 있습니다.
Tabs
상단 표시줄 아래에서 프로퍼티 편집기 탭을 찾을 수 있습니다. 각 탭은 선택된 요소에 적용할 수 있는 속성 범주를 나타냅니다.
Appearance
외관 탭에서는 요소의 시각적 외관을 설정하는 곳입니다. 배경 스타일, 테두리, 글꼴, 그림자, 투명도 및 전환과 같은 속성을 여기에서 설정할 수 있습니다. 여기에서 스타일을 적용하거나 분리할 수도 있습니다.
모든 외형 속성의 상세한 목록과 설명은 아래의 핵심 참조 항목을 참조하세요.
Layout
레이아웃 탭에서는 요소의 반응형 속성을 설정하는 곳입니다. 요소가 반응형 페이지의 다른 요소에 대해 어떻게 동작하는지를 결정하는 것입니다. 이에는 너비/높이, 패딩/여백 및 정렬과 같은 속성이 포함됩니다.
모든 반응형 속성에 대한 자세한 목록 및 설명은 아래의 핵심 참조 항목을 참조하세요. 반응형 디자인에 대해 더 알아보려면 아래의 기사도 확인할 수 있습니다.
Conditional
조건부 탭에서는 선택한 요소의 가시성 및 스타일을 제어하는 조건부 표현식을 설정하는 곳입니다. 예를 들어 사용자가 로그인했는지 여부에 따라 버튼 색상을 변경할 수 있습니다.
동적 표현식을 설정하고 해당 조건에서 사용하는 방법에 대해 자세히 알아보려면 아래의 기사를 참조하세요.
