BricksExtra의 이미지 핫스팟 요소를 사용하면 이미지를 보다 직관적이고 상호작용적으로 만들 수 있습니다. 이 요소는 이미지 위에 핫스팟(마커)을 추가하여 사용자에게 정보를 제공하거나 특정 콘텐츠를 강조할 수 있는 기능을 제공합니다. 핫스팟은 수동으로 추가할 수 있을 뿐만 아니라, **쿼리 루프(Query loop)**를 사용해 동적으로 생성할 수도 있습니다.
이미지 핫스팟은 선호하는 위치에 마커를 배치할 수 있으며, 동적 데이터를 사용해 각 마커의 위치 및 팝오버 콘텐츠를 조절할 수 있습니다. 이를 통해 다양한 사용 사례에 맞춰 유연하게 핫스팟을 설정하고 웹사이트의 상호작용성을 크게 향상시킬 수 있습니다.
이번 블로그에서는 이미지 핫스팟 요소의 설정 방법을 단계별로 안내하여 여러분의 웹사이트에 매력적인 핫스팟 기능을 쉽게 추가하는 방법을 살펴보겠습니다.
이미지 핫스팟 설정 방법
이미지 핫스팟 요소는 두 가지 주요 부분으로 구성됩니다: 이미지 자체와 그 안에 위치한 개별 마커들입니다. 마커는 수동으로 추가하거나 Bricks의 쿼리 루프(Query loop) 기능을 사용해 동적으로 생성할 수 있습니다. 각 마커는 사용자가 상호작용할 때 표시되는 ‘팝오버 콘텐츠’를 가지고 있어, 정보 전달 및 사용자 참여를 유도할 수 있습니다.
Image 설정
- Image: 핫스팟을 추가하려는 이미지를 선택하고 이미지 크기를 설정합니다. 이미지는 미디어 라이브러리에서 가져올 수 있으며, 동적 데이터를 통해 추가할 수도 있습니다.
Marker 설정
- Marker 추가: 새로운 마커를 수동으로 하나씩 추가하거나 쿼리 루프를 사용하여 다수의 마커를 동적으로 추가할 수 있습니다.
- 수동 추가 시: 마커의 수평/수직 위치를 설정하고, 라벨과 팝오버에 표시할 콘텐츠를 추가합니다. 특정 마커가 링크 역할을 하도록 하고 싶다면, ‘Marker Action’을 ‘Link’로 변경할 수 있습니다.
- 쿼리 루프 사용 시: 마커의 위치, 콘텐츠, 링크나 팝오버 표시 여부(기본값은 팝오버), 그리고 팝오버 콘텐츠 모두 쿼리 루프에서 동적 데이터를 통해 설정해야 합니다.
- Marker Image (BricksExtras v1.5.0부터 지원): 기본 마커 아이콘 대신 사용자 정의 이미지를 추가할 수 있으며, 이는 동적 데이터로 채울 수 있습니다. Marker Styles 탭에서 이미지에 필요한 스타일을 추가할 수 있습니다.
Marker / Popover Styles 설정
- Marker / Popover Styles: 마커에 상호작용할 때 나타나는 팝업 콘텐츠에 대한 일반적인 스타일을 설정할 수 있습니다.
Popup Behaviour 설정
- Offset Skidding: 팝업이 나타날 마커 측면을 따라 팝업 위치를 조정합니다.
- Offset Distance: 마커의 가장자리와 팝업 사이에 공간을 추가합니다.
- Preferred Popup Placement: 기본적으로 팝업은 공간이 있는 곳에 표시됩니다. 자동 설정을 통해 기기별로 항상 적절한 공간이 확보되도록 할 수 있습니다. 특정 방향으로 강제하고 싶다면 이 설정을 사용할 수 있습니다.
- User Interaction to Open: ‘Click’을 선택하면 클릭 및 탭으로 팝업이 열립니다. 호버 시 열기를 원한다면 ‘mouseenter click’을 사용합니다. 이렇게 하면 데스크톱에서는 호버로, 모바일에서는 탭으로 팝업을 열 수 있습니다.
- Move Focus to Popover Content on Tab: 팝오버를 연 후 탭 키를 눌렀을 때 초점이 팝오버 콘텐츠로 이동하도록 설정할 수 있습니다. 이 기능을 비활성화하면 다음 마커로 초점을 이동할 수 있습니다.
Pulses 설정
- Pulses: 마커 주변에 애니메이션된 그림자 펄스를 커스터마이즈할 수 있습니다. 색상, 크기, 지속 시간 및 펄스 개수를 변경할 수 있으며, 팝업이 열리고 마커가 활성화된 경우 펄스를 제거할 수도 있습니다.
이러한 설정들을 통해 이미지 핫스팟 요소를 효과적으로 활용하여 웹사이트의 상호작용성을 높이고, 사용자 경험을 더욱 흥미롭게 만들 수 있습니다.
