이 섹션에서는 화면의 한쪽에 그룹을 부착하는 데 주로 사용되는 Floating Group 유형을 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
Floating Groups은 페이지의 다른 요소 위에 떠다니도록 설정할 수 있으며 화면의 어느 쪽이든 부착할 수 있어 사용자가 페이지를 스크롤해도 해당 위치에 머무를 수 있습니다.
Floating Groups의 일반적인 사용 사례에는 다음이 포함됩니다:
•
내비게이션 메뉴: 사용자가 페이지를 스크롤해도 화면 상단에 머무는 플로팅 메뉴 바.
•
소셜 미디어 아이콘: 일반적으로 화면 모서리에 고정된 위치에 머무는 플로팅 아이콘으로 소셜 미디어 프로필에 빠르게 액세스할 수 있습니다.
•
챗봇: 플로팅 창에 팝업되는 챗 위젯으로 사용자가 고객 지원 요원이나 AI 챗봇과 소통할 수 있습니다.
•
쇼핑 카트: 사용자가 장바구니에 추가한 상품을 표시하고 어디서든 결제할 수 있는 플로팅 카트.
•
맨 위로 이동 버튼: 사용자가 페이지를 아래로 스크롤할 때 나타나 페이지 맨 위로 빠르게 이동할 수 있는 플로팅 버튼.
Sticking Floating Groups to the screen edge
Floating Groups은 사용자가 스크롤해도 화면 가장자리에 머무를 수 있도록 설정할 수 있습니다. 화면 가장자리를 정확하게 따를 수도 있고 여백을 사용하여 특정 거리에 배치할 수도 있습니다.
Floating Group을 화면 가장자리에 고정하려면 그룹의 Property Editor를 열고 다음 설정을 변경해야 합니다:
What is the z-index?
z-index는 Floating Group이 페이지 자체를 포함한 다른 요소 위에 떠다니는지 여부를 선택할 수 있게 해줍니다.
아래 설정을 '페이지 아래로'로 변경하면 그룹이 페이지 자체 아래에 있게 되며 페이지의 요소들만 아니라 페이지 자체 아래에 있게 됩니다.
결과적으로 페이지에 배경 스타일이 있으면 Floating Group이 가려질 수 있습니다.
Other ways to learn
Core reference: floating group settings
Video lessons
