페이지는 앱의 사용자 인터페이스를 디자인하는 데 사용하는 빈 캔버스입니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
Bubble과 관련된 모든 것의 핵심은 페이지입니다.
이것은 사용자가 응용 프로그램을 사용하는 데 필요한 입력 요소, 텍스트, 이미지, 아이콘, 비디오 등을 배치하는 캔버스입니다.
페이지는 비전을 구축할 수 있는 빈 캔버스를 제공합니다.
What is a page?
어떤 종류의 응용 프로그램을 만들고 있든, 간단한 웹 사이트에서 복잡한 전자 상거래 플랫폼까지, 페이지는 모든 디자인 및 개발 노력의 시작점입니다. 페이지 자체를 페이지 구조의 계층 구조에서 가장 낮은 수준으로 볼 수 있으며 거기에 추가하는 모든 요소는 해당 페이지 내에 포함됩니다.
페이지의 계층 구조란 무엇인가?
Default pages
새로운 Bubble 애플리케이션을 만들면 몇 개의 페이지가 기본적으로 포함됩니다. 이러한 페이지에는 몇 가지 공통점이 있습니다.
•
앱이 생성될 때 항상 존재합니다.
•
이름을 변경할 수 없습니다.
•
삭제할 수 없습니다.
index
404
404 페이지는 사용자가 도메인을 포함한 URL 표시줄에 입력한 페이지 이름이 존재하지 않을 때 사용자가 이동하는 곳입니다.
https://appname.bubbleapps.io/non-existing-page
JavaScript
복사
404은 페이지가 존재하지 않음을 브라우저에 알리기 위해 사용되는 HTTP 오류 코드입니다.
404 페이지는 다른 페이지처럼 자유롭게 편집할 수 있지만 삭제할 수는 없습니다.
이 페이지를 사용하여 사용자에게 페이지를 찾을 수 없다고 알리고 다른 방향으로 안내할 수 있습니다.
reset_pw
이 페이지는 사용자가 비밀번호를 재설정해야 할 때 해당 페이지로 이동합니다. 사용자는 대부분 비밀번호 재설정 이메일을 따라 이 페이지로 이동합니다.
reset_pw 페이지는 사용자가 안전하게 비밀번호를 재설정할 수 있도록 하는 특수 페이지로 Bubble의 핵심 기능이며 제거하거나 이름을 바꿀 수 없습니다.
The index page
index 페이지는 애플리케이션의 주요 페이지로 사용자가 브라우저의 URL 표시줄에 앱 도메인을 입력할 때 로드되는 첫 번째 페이지입니다. 또한 페이지의 이름을 표시하지 않고도 표시할 수 있는 유일한 페이지입니다.
예를 들어 아래 URL은 페이지의 이름을 URL에 포함하지 않아도 index 페이지로 이동합니다.
No custom domain
Developement Ver.
https://appname.bubbleapps.io/version-test
Live ver.
https://appname.bubbleapps.io
JavaScript
복사
Custom domain
Developement Ver.
https://www.mydomain.com/version-test
Live ver.
https://www.mydomain.com/
JavaScript
복사
앱에 버전 제어로 설정된 사용자 정의 브랜치가 있는 경우 URL의 version-test 부분은 현재 활성 상태의 브랜치 ID로 대체됩니다.
Setting an index page
Bubble에서 앱을 생성하면 index 페이지가 자동으로 생성됩니다. 다른 페이지를 index로 지정할 수 없지만 Make this page the new index 기능을 사용하여 교체할 수 있습니다.
이전 index 페이지는 old_index로 명명됩니다.
The page URL
추가하는 모든 페이지에는 사용자가 해당 페이지를 방문할 수 있는 고유한 URL이 자동으로 할당됩니다. 이 URL은 모든 웹 사이트와 마찬가지로 앱의 루트 URL과 페이지의 이름을 결합하여 구성됩니다.
No custom domain
Developement Ver.
https://myapp.bubbleapps.io/version-test/page-name
Live ver.
https://myapp.bubbleapps.io/page-name
JavaScript
복사
Custom domain
사용자 정의 도메인에 앱을 연결한 경우 URL은 다음과 같습니다.
Developement Ver.
https://mydomain.com/version-test/page-name
Live ver.
https://mydomain.com/page-name
JavaScript
복사
앱에 버전 제어로 설정된 사용자 정의 브랜치가 있는 경우 URL의 version-test 부분은 현재 활성 상태의 브랜치 ID로 대체됩니다.
Creating a new page
새 페이지를 만들려면 Bubble 편집기 상단 왼쪽에 Bubble 로고 바로 옆에있는 드롭다운을 클릭하십시오. 드롭다운에서 Add a new page...를 클릭하십시오.
새 페이지의 이름과 페이지를 추가할지 여부를 지정하라는 메시지가 표시됩니다. 페이지에는 이 응용 프로그램에서 URL로 안전하고 고유한 이름이라면 원하는 대로 지정할 수 있습니다.
Naming your pages
중복되지 않는 고유한 이름을 가진 페이지를 원하는 만큼 만들 수 있습니다. 페이지 이름을 정할 때 유의해야 할 점은 URL은 브라우저가 읽을 수 있어야 합니다. 이를 위해 페이지 이름은 a ~z의 알파벳, 0 ~ 9의 숫자를 사용하고, 여백은 - 으로 대체해야 합니다. 그러면, 페이지 이름이 자동으로 URL 인코딩됩니다.
Cloning a page
페이지를 복제하면 해당 페이지의 정확한 사본이 새 이름으로 생성됩니다. 페이지에 포함된 모든 요소 및 워크플로우가 복사됩니다.
페이지를 복제하는 두 가지 방법이 있습니다.
Add new page... 메뉴 항목을 사용하여 페이지를 복제할 수 있습니다
또는 페이지 편집기에서 복제할 페이지를 열고 Edit - Clone this page를 선택합니다.
선택한 방법에 상관없이 클론할 페이지의 이름을 지정하고 아래에 표시된 페이지 드롭다운에서 어떤 페이지를 복제할지 확인하라는 메시지가 나타납니다.
Page properties
각 페이지는 해당 페이지의 모양과 동작에 영향을주는 고유한 설정을 가질 수 있습니다. 설정은 Property Editor에서 사용할 수 있습니다.
페이지 설정에 액세스하는 두 가지 방법이 있습니다.
•
페이지 자체 어느 곳에서도 왼쪽 마우스 버튼을 더블 클릭합니다(다른 그룹이나 요소가 아닌 페이지 위를 클릭하세요).
•
페이지의 요소 트리에서 페이지를 클릭합니다.
요소 트리를 사용하면 페이지의 속성 편집기 또는 다른 요소로 쉽게 액세스할 수 있습니다.
페이지의 모든 설정 목록은 아래를 참조하세요.
페이지의 설정은 다음과 같이 Property Editor에서 사용할 수 있습니다.
Appearance
외형 탭을 사용하면 페이지의 시각적 속성을 제어할 수 있습니다. 배경 스타일 및 색상뿐만 아니라 페이지가 보유해야 하는 데이터 유형 및 SEO 메타데이터에 대한 설정도 포함됩니다.
Layout
레이아웃 탭을 사용하면 페이지의 응답 형 속성 또는 레이아웃이 구조화되고 다양한 화면 크기에 따라 변경되는 방식을 제어할 수 있습니다. 읽어볼 수 있습니다. 아래에서 레이아웃에 대해 자세히 알아보십시오.
Conditions
조건 탭을 사용하면 하나 이상의 특정 조건이 충족될 때 페이지 제목 및 배경 스타일을 변경할 수 있습니다. 아래에서 자세히 알아보십시오.
Organizing your pages
Bubble 편집기에서 페이지를 폴더에 구성하여 찾기 쉽게 만들 수 있습니다.
페이지를 폴더로 구성하면 편집기에서 열어야 할 페이지를 쉽게 찾을 수 있지만 페이지의 URL 또는 앱 내 탐색 경험에 영향을주지 않습니다.
Adding a page to a folder
페이지를 특정 폴더로 이동하려면 다음 단계를 수행하십시오.
•
페이지 자체 어느 곳에서나 왼쪽 마우스 버튼을 더블 클릭하여 페이지의 Property Editor를 엽니다(다른 그룹이나 요소가 아닌 페이지 위를 클릭하세요).
•
Property Editor에서 Appearance 탭으로 이동하고 아래로 스크롤합니다.
•
폴더를 선택하거나 새로 만듭니다. 드롭다운을 비워두면 폴더에서 제거됩니다.
Navigating your folders
만든 모든 폴더는 Bubble 편집기의 왼쪽 상단에있는 페이지 네비게이터의 오른쪽 상단에서 찾을 수 있습니다.
폴더를 사용하면 앱에서 페이지를 찾기 쉽게 구성할 수 있습니다. 폴더는 Bubble 앱의 페이지 URL에 영향을주지 않습니다.
Frequently asked questions
Can I add page folders to my URL structure?
Can I publish and un-publish pages?
모든 페이지는 공개되어 있으며 한 번 만들면 앱에서 액세스 할 수 있습니다. 변경 사항은 라이브 앱에서 표시되기 전에 배포해야 합니다. 페이지에도 적용됩니다.
