페이지 구조 만들기

애플리케이션에는 필요한 만큼의 페이지를 만들 수 있습니다. 한 페이지는 일반적으로 가입 페이지, 정보 페이지, 홈페이지 등 한 가지 용도로 유용합니다.

새 페이지 추가

편집기의 상단 표시줄에서 새 페이지를 만들 수 있습니다. 페이지는 공백으로 시작하거나 다른 페이지의 복제본이 될 수 있습니다. 페이지가 복제되면 워크플로를 포함한 전체 페이지가 복사되어 새 페이지의 기초로 사용됩니다.

⁠

페이지 간 사용자 탐색

앱 페이지 사이에서 사용자를 탐색하는 방법에는 두 가지가 있습니다. 링크 요소를 사용하거나 워크플로에서 탐색을 수행해야 하는 경우 '페이지 작업으로 이동'을 사용할 수 있습니다. 브라우저 기본 링크 요소에 의존하므로 페이지를 변경하는 워크플로를 트리거하는 버튼을 사용하는 대신 링크를 사용하는 것을 선호해야 합니다. 페이지 변경이 더 빠르며 사용자가 링크를 마우스 오른쪽 버튼으로 클릭하여 새 탭에서 페이지를 열 수 있습니다. 반면, 페이지 변경 작업은 브라우저의 팝업 방지 기능에 의해 탭 생성이 차단되므로 다른 탭을 열 수 없습니다.

페이지가 변경되면 워크플로가 종료됩니다. 따라서 페이지 변경 작업은 워크플로우의 마지막 작업이어야 하며 이슈 검사기는 그렇지 않은 상황을 포착합니다. 변경 페이지 작업에 조건을 사용하는 경우 이슈 검사기는 이를 이슈로 표시하지 않지만, 그러한 작업(조건이 있는 변경 페이지 작업)이 실행되는 경우 다음 작업이 실행될 필요가 없는지 확인하는 것은 사용자의 책임입니다. 대상 페이지에 콘텐츠 유형이 있는 경우 링크 또는 작업 수준 모두에서 해당 페이지로 보낼 내용을 정의해야 합니다.

다중 페이지 앱과 단일 페이지 앱

일반적으로 앱을 빌드하는 데 사용할 수 있는 두 가지 주요 옵션이 있습니다. 여러 페이지를 사용하거나(다중 페이지 애플리케이션) 페이지 수를 제한하고 하나의 페이지를 다기능으로 만들거나(단일 페이지 애플리케이션), 특정 조건에서 표시하고 숨기는 그룹을 사용하여 특정 상황에서 페이지의 모양과 기능을 표시할 수 있습니다.

단일 페이지 애플리케이션을 구축할 때 조건 및 사용자 지정 상태는 표시되는 요소와 시기를 제어하는 데 매우 유용합니다. 성능 측면에서 두 옵션은 서로 다른 장단점이 있습니다. 다중 페이지 애플리케이션은 페이지 로딩 속도가 빨라지지만 페이지 변경이 더 자주 발생하는 반면, 단일 페이지 앱은 초기 페이지 로딩 속도가 느려지지만 페이지 전환이 발생하지 않습니다. 물론 최종 선택은 두 경로의 중간 형태가 될 수 있습니다.

애플리케이션을 구성하는 것은 정확한 과학이라기보다는 예술에 가깝습니다. 많은 상황에서 두 가지 이상의 옵션이 앱에 적합한 경로가 될 수 있습니다. 앱을 구축할 때 경험과 개인적 선호도가 핵심이 될 것입니다. 앱 구성은 다른 사용자가 큰 도움을 줄 수 있으므로 포럼에서 도움을 요청하는 것이 좋습니다. 일반적인 규칙은 자신에게 맞는 것을 구축하는 것입니다.

내비게이션에 대한 고급 FAQ

새 URL을 명시적으로 다시 로드하거나 "이동..."을 수행하지 않고 페이지의 매개변수 또는 경로를 변경할 수 있나요?

이는 단일 페이지 애플리케이션에서 특히 자주 요청되는 기능입니다. 현재로서는 실제로 해당 페이지로 '이동'하지 않고도 페이지의 URL을 변경할 수 있는 기본 방법은 없지만, Bubble 에코시스템의 타사 플러그인 몇 가지가 이 기능을 제공합니다.

앵커 링크를 구현할 수 있나요(예: URL에 #이오브젝트를 넣으면 이오브젝트까지 페이지가 스크롤되는 방식)?

예. 다음을 통해 요소에 HTML ID를 추가하는 기능을 활성화할 수 있습니다.Settings > General > General Appearance. 요소에 ID를 추가하면 해당 페이지의 URL로 이동하는 링크를 해당 페이지에 추가할 수 있습니다."#[element's id]" 를 추가합니다. 또한 유사한 동작을 수행할 수 있는 워크플로 작업 '스크롤하여'를 사용하는 것도 고려해 보세요.

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.