페이지(html page)는 앱의 사용자 인터페이스를 디자인하는 빈 캔버스입니다.
- Bubble의 디자인 및 사용자 인터페이스와 관련된 모든 것의 핵심은 페이지입니다.
- 이것은 입력창, 텍스트, 이미지, 아이콘, 비디오 및 사용자가 애플리케이션을 사용하는 데 필요한 모든 것을 배치하는 캔버스입니다.
(1) 페이지(html Page)란 무엇입니까?
: 간단한 웹 사이트에서 복잡한 전자 상거래 플랫폼에 이르기까지 어떤 종류의 애플리케이션을 구축하든 관계없이 페이지는 모든 디자인 및 개발 작업의 출발점입니다.
- 페이지 자체는 페이지 구조의 계층 구조에서 가장 낮은 밑바탕으로 볼 수 있으며 여기에 추가하는 모든 element(요소)는 해당 페이지 내에 포함됩니다.
버블의 페이지 계층구조 (The element hierarchy) 이해 > 바로가기
(2) Default page (기본 페이지)
새 Bubble 애플리케이션을 만들 때 기본적으로 몇 페이지가 포함됩니다. 이 페이지에는 몇 가지 공통점이 있습니다.
1. 기본 페이지의 특성
- 앱이 생성될 때 항상 존재
- 기본 페이지들의 이름 변경 불가
- 삭제 불가
2. index
- 인덱스 페이지는 앱의 기본 페이지입니다.
- 앱이 브라우저에서 처음 호출 될 때 항상 불러오는 페이지입니다. (하단 설명)
3. 404
- 404 페이지는 도메인이 포함된 URL을 URL 표시줄에 입력했지만 입력한 페이지 이름이 존재하지 않는 경우 사용자가 이동하는 페이지입니다.
- https://appname.bubbleapps.io/non-existing-page
- 404는 페이지가 존재하지 않음을 브라우저에 알리는 데 사용되는 http 오류 코드입니다.
- 404 페이지는 다른 페이지와 마찬가지로 자유롭게 편집할 수 있지만 삭제할 수는 없습니다.
- 이 페이지를 사용하여 사용자에게 페이지를 찾을 수 없음을 알리고 다른 페이지로 이동시킬 수 있습니다.
4. reset_pw
- 이것은 사용자가 암호를 재설정해야 하는 경우 이동하는 페이지입니다. 사용자들 대부분은 이 페이지에서 비밀번호 재설정을 위해 이메일 수신함으로 이동할 것입니다.
- reset_pw 페이지는 사용자가 비밀번호를 안전하게 재설정할 수 있는 특별한 페이지입니다. 이는 Bubble의 핵심 기능 중 일부이며 제거하거나 이름을 바꿀 수 없습니다.
(3) index page (인덱스 페이지)
인덱스 페이지는 애플리케이션의 기본 페이지로, 사용자가 브라우저의 URL 표시줄에 앱의 도메인 주소를 입력했을 때 호출되는 첫 번째 페이지입니다. 페이지 이름을 표시하지 않고 도 호출할 수 있는 유일한 페이지이기도 합니다.
예를 들어 아래 URL은 URL에 페이지 이름을 포함하지 않더라도 인덱스 페이지로 이동합니다.
1) 개인 구매 도메인 없음
| 버전 | URL |
| 개발버전 | https://appname.bubbleapps.io/version-test |
| live버전 | https://appname.bubbleapps.io |
2) 개인 구매 도메인 사용
| 버전 | URL |
| 개발버전 | https://www.mydomain.com/version-test |
| live버전 | https://www.mydomain.com |
앱에 버전 제어에 설정된 사용자 지정 분기(custom branch)가 있는 경우 URL의 버전 테스트 부분이 현재 활성 분기(branch)의 ID로 대체됩니다.
1. 인덱스 페이지로 설정
Bubble에서 앱을 생성하면 인덱스 페이지가 자동으로 생성됩니다. 다른 페이지를 index라는 이름으로 지정할 수 없지만, 이 페이지를 새 index 페이지로 만들기 기능 (Make this page the new index)을 사용하여 바꿀 수 있습니다.
(*메인 Panel에서 상단의 Edit 클릭 시 드롭다운 메뉴에서 선택가능)
이전 index 페이지의 이름은 old_index로 자동 저장됩니다.
2. 페이지 URL
자동으로 추가하는 모든 기본 페이지에는 다른 웹사이트와 마찬가지로 사용자가 해당 페이지를 방문하기 위해 액세스 할 수 있는 고유한 URL이 할당됩니다.
모든 페이지는 애플리케이션의 루트 URL을 페이지 이름과 결합하여 동일한 URL 패턴을 따릅니다.
1) 개인 구매 도메인 없음
| 버전 | URL |
| 개발버전 | https://myapp.bubbleapps.io/version-test/ 페이지 이름 |
| live버전 | https://myapp.bubbleapps.io/ 페이지 이름 |
2) 개인 구매 도메인 사용
| 버전 | URL |
| 개발버전 | https://mydomain.com/version-test/ 페이지 이름 |
| live버전 | https://mydomain.com/ 페이지 이름 |
(4) 새 페이지(HTML page) 만들기
: 새 페이지를 만들려면 메인 Panel 편집기의 왼쪽 상단 모서리에 있는 Bubble 로고 바로 옆에 있는 드롭다운을 클릭합니다.
- 드롭다운에서 add a new page…(새 페이지 추가)를 클릭합니다.
- 새 페이지의 이름과 기존 페이지를 복제할지 여부를 묻는 메시지가 표시됩니다.
- 복제가 아니면 안전하고 고유한 이름을 지정할 수 있습니다.
1. 페이지 이름 지정 시 주의사항
1) 고유한 이름으로 페이지를 얼마든지 만들 수 있습니다.
2) 이름 지정시 URL이 *안전해야 하다는 점을 항상 염두해야 합니다.
*URL 안전이란 텍스트(이름으로 사용한 문자)가 브라우저가 읽을 수 있는 형식이어야 함을 의미합니다. 특수 문자(예: 공백, 슬래시, 앰퍼샌드 등)는 문제를 일으킬 수 있으므로 피해야 합니다.
3) 당신이 지정하는 안전하지 않은 URL 이름은 자동으로 *URL 인코딩 됩니다.
*URL 인코딩은 브라우저가 오류를 생성하지 않고 읽을 수 있는 형식으로 텍스트 문자열을 변환하는 것을 의미합니다. (Bubble은 필요한 모든 페이지 이름에 URL 인코딩을 자동으로 적용합니다.)
4) 페이지 이름에 대한 간단한 법칙은 영문자 az와 숫자 0-9만 사용하고 공백을 대시로 바꾸는 것입니다.
2. Bubble의 URL 인코딩시 수행작업
- 텍스트를 소문자로 변경
- 공백을 - 로 교체
- 특수 문자를 _로 교체
(5) 페이지 복제
페이지를 복제한다는 것은 새 이름으로 해당 페이지의 정확한 복사본을 만드는 것을 의미합니다. 모든 element(요소)와 workflow(워크플로)를 포함한 전체 페이지가 복사됩니다.
페이지를 복제하는 방법에는 두 가지가 있습니다.
1. Add a new page에서 Clone from 사용
- 메인 Panel 상단 좌측 구석에서 페이지 탐색창을 클릭 index 페이지 하단에 보면 Add a new page를 선택 메뉴 항목을 사용할 수 있습니다.
- 여기서 새로운 페이지를 생성할 때 기존 페이지에서 복사하여 생성할 수 있습니다.
- 생성페이지에서 하단의 clone from에서 복사할 페이지를 선택합니다.
2. 상단의 Edit에서 clone this page 사용
- 복제하려는 페이지를 편집기에서 연 상태에서 페이지를 복제를 선택하여 페이지를 복제할 수도 있습니다.
- 복제하려는 페이지를 열고 상단의 Edit 선택 드롭다운 메뉴 중 clone this page를 선택합니다.
- 생성 페이지에서 하단의 clone from에서 복사할 페이지를 선택합니다.
(6) 페이지 속성(Property)
각 페이지에는 해당 페이지의 모양과 작동 방식에 영향을 주는 고유한 개별 설정이 구성되어 있을 수 있습니다. 속성 편집기(Property editor)에서 설정을 할 수 있습니다.
1. 페이지 설정 접근
: 페이지 설정에 접근하는 방법에는 두 가지가 있습니다.
1) 페이지의 아무 곳이나 마우스 왼쪽 버튼으로 두 번 클릭합니다.
- 다른 그룹이나 요소를 클릭하지 마십시오
2) 페이지의 좌측 편 element tree에서 페이지 클릭
- element tree(요소 트리)를 사용하면 페이지 또는 다른 element(요소)의 property(속성) 편집기에 쉽게 접속할 수 있습니다.
2. 페이지 설정 탭
1) Appearance
- Appearance(모양) 탭을 사용하면 배경 스타일 및 색상과 같은 페이지의 시각적 속성은 물론 페이지가 보유해야 하는 데이터의 종류와 해당 SEO 메타데이터를 제어할 수 있습니다.
2) Layout
- 레이아웃 탭을 사용하면 페이지의 반응 속성 또는 레이아웃이 구성되는 방식과 다양한 화면 크기에 따라 변경되는 방식을 제어할 수 있습니다. 반응형 디자인 가이드에서 레이아웃에 대해 자세히 알아볼 수 있습니다 .
3) Conditional
- 조건 탭에서는 하나 이상의 특정 조건이 참인 경우 페이지 제목과 배경 스타일을 변경할 수 있습니다. 이에 대한 자세한 내용은 조건 문서에서 확인할 수 있습니다.
(7) 페이지 폴더 구성
1. 페이지 폴더 구성하기
- 페이지를 쉽게 찾을 수 있도록 말풍선 편집기에서 폴더로 구성할 수 있습니다.
- 페이지를 폴더로 구성하면 편집기에서 열어야 하는 페이지를 더 쉽게 찾을 수 있습니다.
- 앱의 기능 측면에서 페이지의 URL 또는 탐색 환경에는 아무런 영향을 미치지 않습니다.
2. 폴더에 페이지 추가
페이지를 특정 폴더로 이동하려면 다음을 수행하십시오.
- 페이지 자체의 아무 곳이나 두 번 클릭하여 페이지의 속성 편집기를 엽니다.(다른 그룹이나 요소가 아님)
- Property Editor에서 Appearance 탭으로 이동하여 맨 아래로 스크롤합니다.
- 폴더를 선택하거나 새 폴더를 만듭니다.
- 드롭다운을 비워두면 폴더에서 제거할 수 있습니다.
3. 폴더 탐색
페이지 탐색기의 오른쪽 상단 모서리(메인 panel 편집기의 왼쪽 상단 모서리에 있음)에서 생성한 모든 폴더를 찾을 수 있습니다.
- 폴더를 사용하면 앱에서 페이지를 쉽게 찾을 수 있도록 구성할 수 있습니다.
- 폴더는 Bubble 앱의 페이지 URL에 영향을 주지 않습니다.
(8) 페이지 관련 FAQ (자주 묻는 질문)
1. 내 URL 구조에 페이지 폴더를 추가할 수 있습니까?
- Bubble은 앱 URL의 페이지 폴더를 지원하지 않습니다. 따라서 모든 페이지는 위에서 설명한 것과 동일한 구조를 따릅니다.
2. 페이지를 게시하거나 게시 취소할 수 있습니까?
- 모든 페이지는 공개됩니다. 즉, 페이지를 만드는 즉시 앱에서 액세스 할 수 있습니다.
- 라이브 앱에 변경 사항이 게시되기 위해서 변경된 페이지를 배포(Deploy) 해야 한다는 점을 명심하십시오
