이 섹션에서는 스크롤 위치에 관계없이 그룹을 화면 한쪽에 연결하는 데 주로 사용되는 그룹 유형인 Floating Group(플로팅 그룹)에 대해 설명합니다.
(1) Floating Group의 특징 및 예시
플로팅 그룹은 페이지의 다른 element 위로 마우스를 가져가도록 설정할 수 있는 그룹 유형으로, 화면의 어느 쪽 면(side)에든 붙일 수 있으며 사용자가 위아래로 스크롤하는지 여부에 관계없이 그 자리에 머무를 수 있습니다.
: Floating Group의 몇 가지 일반적인 사용 사례는 다음과 같습니다.
- 탐색 메뉴
- 사용자가 페이지를 아래로 스크롤하는 동안 화면 상단에 유지되는 플로팅 메뉴 모음입니다.
- 소셜 미디어 아이콘
- 일반적으로 화면 모서리에 고정된 위치에 머무르며 소셜 미디어 프로필에 빠르게 액세스 할 수 있는 부동 아이콘입니다.
- 챗봇
- Floating Group에 팝업되는 채팅 위젯으로 사용자가 고객 지원 에이전트 또는 AI 챗봇과 통신할 수 있습니다.
- 쇼핑 카트
- 사용자가 장바구니에 추가한 항목을 표시하고 사이트 어디에서나 결제할 수 있는 플로팅 카트입니다.
- Back-to-top 버튼
- 사용자가 페이지를 아래로 스크롤할 때 나타나는 플로팅 버튼으로 페이지 상단으로 빠르게 돌아갈 수 있습니다.
Floating Group의 일반적인 사용사례는 화면 상단에 고정되는 탐색 헤더를 설정하는 것입니다. 위의 예시는 Bubble을 사용하여 구축된 Bubble의 홈페이지에서 가져온 것입니다.
(2) Floating Group을 화면 가장자리에 고정
Floating Group은 사용자가 스크롤하더라도 화면 가장자리를 따라 유지되도록 설정할 수 있습니다. 화면 가장자리를 정확히 배치되거나 여백을 사용하여 지정된 거리에 배치할 수 있습니다.
- Floating Group이 가장자리에 고정되도록 설정하려면 그룹이 부동 상태를 유지할 수직 및 수평 축을 선택해야 합니다. Floating Group에 대한 속성 편집기를 열고 다음 설정을 변경하여 이 작업을 수행합니다.
- Floating Group의 속성 편집기에 있는 두 가지 상단 설정을 사용하면 그룹이 수직 및 수평 축 모두에 상대적으로 움직이지 않도록 할 수 있습니다.
(3) Z-index란 무엇입니까? (위 그림의 Floating zindex)
Z- index을 사용하면 플로팅 그룹이 다른 element(페이지 자체를 포함)의 위 또는 아래에 떠 있어야 하는지를 선택할 수 있습니다.
- Z-index은 CSS라는 웹 디자인 언어에서 온 용어입니다.
- 페이지의 element가 쌓이는 순서를 결정하는 숫자 값입니다.
- 즉, 두 요소가 겹치는 경우 다른 요소 위에 있어야 합니다.
- Bubble은 페이지를 디자인할 때 Z-index를 자동으로 처리하지만 Floating Group 유형의 경우 다른 모든 요소 아래에 나타나도록 설정할 수 있습니다.
주의)
속성 편집기의 설정을 Beneath the page로 변경하면 플로팅 그룹이 말 그대로 ‘페이지 자체 아래’에 있게 됩니다. 결과적으로 페이지에 배경 스타일이 있는 경우 플로팅 그룹이 보이지 않을 수 있습니다. (상단 그림 참고)
