이 섹션에서는 화면의 모든 다른 요소 위에 그룹을 설정하는 컨테이너 그룹유형인 Popup을 다룹니다.
(1) 팝업의 특징 및 예시
Popup 그룹 유형은 페이지의 스크롤 위치에 관계없이 모든 요소 위에 표시되며 화면 중앙에 배치되는 그룹입니다.
- Popup아래를 숨기거나 흐리게 하도록 설정할 수 있습니다. 따라서 중요한 메시지나 양식을 표시하여 사용자의 주의를 즉시 끌 수 있는 유용한 방법입니다.
: 팝업의 일반적인 사용 사례는 다음과 같습니다.
- 오류 메시지 및 경고
- 등록 양식
- 문의/피드백 양식
- 뉴스레터 가입 양식
- 판촉 행사 및 할인
팝업을 사용하여 사용자의 관심을 즉시 끌 수 있습니다.
(2) 팝업표시 및 숨기기
팝업은 기본적으로 화면 로드 시 표시되지 않으며 조건을 사용하여 표시할 수 없습니다.
이런 식으로 팝업은 다른 그룹과 조금 다릅니다.
:팝업의 표시 방법은 다음 두 가지 방법을 사용합니다.
- 1. workflow 에서 element(요소) show action을 사용하여 팝업을 표시할 수 있습니다. Bubble은 그룹이 표시되고 숨겨질 때 그룹에 약간의 페이드 애니메이션을 자동으로 적용합니다.
- 2. workflow 에서 element(요소) animation(애니메이션) Action을 사용하여 팝업을 표시하는 데 사용할 애니메이션 종류를 선택하는 것입니다.
(3) Custom Event for Popup (팝업용 맞춤 이벤트)
Workflow(워크플로)는 Event와 Action의 조합으로 구성됩니다.
Event(이벤트)는 Action의 집합을 실행해야 하는 시기를 결정하는 데 사용됩니다.
: 페이지에 팝업을 추가하면 워크플로를 트리거하는 데 사용할 수 있는 두 가지 이벤트가 더 제공됩니다.
- 팝업이 열리거나 닫힐 때마다 이들 event가 트리거 되게 됩니다.
1. A popup is closed (팝업이 닫힐 때)
- element 숨기기 또는 element 애니메이션 작업을 사용하여 특정 팝업이 닫힐 때마다 트리거 됩니다.
2. A popup is opened (팝업이 열릴 때)
- element 표시 또는 element 애니메이션 작업을 사용하여 특정 팝업이 닫힐 때마다 트리거 됩니다.
(4) 팝업 및 보안
특정 색상이나 Blur 필터로 페이지의 콘텐츠를 가리도록 팝업을 설정할 수 있지만 민감한 정보를 숨기는 방법으로 간주해서는 안 됩니다.
*주의)
: 만약 사용자가 기술에 정통한 개발자일 때 팝업을 숨겨서 아래 내용을 드러낼 수 있는 기술적인 능력이 있습니다.
