사용이 쉬운 워드프레스 팝업 플러그인 Brave Popup Builder

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스에는 무료로 사용할 수 있는 다양한 팝업 플러그인이 있습니다. 비교적 최근에 릴리즈된 Brave Popup Builder는 마치 페이지 빌더에서 모달 팝업을 만드는 것처럼 사용이 쉬운 워드프레스 팝업 플러그인으로 드래그 앤 드롭 방식으로 어렵지 않게 멋진 팝업을 만들 수 있습니다.

워드프레스 팝업 플러그인

우리나라 홈페이지들을 방문하면 팝업이 표시되는 경우가 많습니다. 하지만 팝업은 사용자 경험(UX)에 좋지 않기 때문에 가능한 경우 팝업을 표시하지 않는 것이 바람직합니다.

중요한 공지 사항이 있어 팝업을 꼭 띄워야 한다면 심플한 이미지 팝업 플러그인을 사용하는 것을 고려해볼 수 있습니다.

보다 정교한 워드프레스 사이트용 팝업을 원한다면 Popup Maker나 Popup Builder와 같은 무료 팝업 플러그인을 사용할 수 있습니다. 그리고 이 글에서 소개하는 Brave Popup Builder는 다른 팝업 플러그인에 비해 매우 쉽게 팝업을 만들 수 있는 솔루션을 제공하고, 고정된 사이드바나 상단이나 하단에 고정된 내비게이션을 표시하는 용도로도 사용이 가능합니다.

사용이 쉬운 워드프레스 팝업 플러그인 - Brave Popup Builder

드래그 & 드롭 방식의 비주얼 팝업 빌더

사용이 쉬운 워드프레스 팝업 플러그인 Brave Popup Builder

Brave Popup Builder은 비교적 최근에 만들어진 워드프레스 플러그인으로 다른 팝업 플러그인과 비교하여 마치 페이지 빌더를 사용하듯 요소를 끌어다 놓는 방식으로 팝업을 쉽게 만들 수 있는 것이 가장 큰 특징 같습니다.

그리고 무료 버전에서도 MailChimp 등의 이메일 발송 서비스와 통합이 가능하므로 이 플러그인을 사용하여 이메일을 수집하여 뉴스레터를 운영할 수 있습니다.

Brave Popup Builder - 구독 팝업
사용자로부터 이메일을 수집할 수 있는 구독용 팝업 템플릿.

이 플러그인은 플로팅 상자(Floating Box), 상단 바 또는 하단 바(Stickybar), 사이드바(Sidebar), 모달(Modal), 설문조사(Survey), 피드백(Feedback) 등 다양한 용도로 활용이 가능합니다.

Brave Popup Builder를 사용하여 팝업 만들기

플러그인 설치하기

먼저 Brave Popup Builder를 설치하도록 합니다. 플러그인 > 새로 추가에서 'brave popup builder'로 검색하여 플러그인을 설치한 다음 활성화하도록 합니다.

Brave Popup Builder 플러그인 설치하기

새 팝업 만들기

플러그인을 활성화하면 왼쪽 메뉴에 Brave Popups가 추가됩니다. Brave Popups > All Popups를 클릭합니다. 그러면 생성한 팝업 목록이 표시됩니다.

워드프레스 팝업 생성하기

오른쪽 상단의 플러스 아이콘을 클릭하여 새로운 팝업을 만들도록 합니다.

Brave 팝업 플러그인

팝업 생성 화면이 표시되면 Popup Title에 팝업 이름을 입력하고 Popup Goal에서 만들려는 팝업의 종류를 선택합니다. 다음과 같은 팝업 (모달)을 만들 수 있습니다.

  • Newsletter Subscription (뉴스레터 구독)
  • Collect Feedback (피드백 수집)
  • Show Promo Message (홍보 메시지)
  • Show information (정보 표시)
  • Sales/Woocommerce (할인/우커머스)
  • Reduce Cart Abandonment (할인 쿠폰 번호 표시)
  • Increase Post Views (포스트 표시)
  • Increase Social Engagement (소셜 아이콘 표시 - 팔로우 버튼)
  • WP Login/SignUp (워드프레스 로그인/회원가입)
  • Banner Ad (배너 광고)
  • Custom Goal (사용자 지정)

PRO로 표시된 항목은 유료 버전에서만 사용이 가능합니다. 유료 버전에서는 무료 버전보다 더 많은 템플릿과 기능이 제공됩니다. 예를 들어, PRO 버전을 사용할 경우, 이 플러그인을 사용하여 로그인/회원 가입 팝업 플러그인으로 사용할 수 있습니다.

워드프레스 로그인/회원가입 팝업
워드프레스 로그인/회원가입 팝업

팝업 유형을 선택한 후에 Next 버튼을 누르면 템플릿을 지정하는 화면이 표시됩니다. Collect Feedback을 선택할 경우 다음과 같은 템플릿을 선택할 수 있습니다.

쉬운 워드프레스 팝업 플러그인

무료 버전에서는 하나만 선택 가능하고 나머지는 PRO 버전에서만 선택이 가능합니다. 빈 팝업에서 시작하려면 Start With Blank를 클릭합니다. 템플릿을 선택한 다음 Create Popup을 클릭합니다.

팝업 설정하기

팝업을 생성하면 팝업을 편집할 수 있는 화면이 표시됩니다.

Brave Popup 팝업 편집 화면

인터페이스가 직관적이고 사용이 편하기 때문에 별도로 설명드릴 필요가 없을 정도로 사용이 쉬운 편입니다. 영어에 익숙하면 어렵지 않게 설정이 가능할 것입니다.

편집 화면 가운데에 사이트에 표시되는 팝업 레이아웃이 표시되고, 오른쪽과 위쪽에서 팝업 설정 관련 옵션이 제공되고 왼쪽에는 팝업에 끌어다 놓을 수 있는 요소들이 배치되어 있습니다.

오른쪽에서 팝업 레이아웃, 팝업 크기, 팝업 스타일, 팝업 애니메이션, 팝업 오버레이, 팝업 닫기 등에 대한 옵션을 설정할 수 있습니다.

Popup Layout 섹션에서는 팝업이 어떤 형태로 표시될 것인지 레이아웃을 선택할 수 있습니다.

팝업 레이아웃

팝업 레이아웃으로 무료 버전에서는 세 가지 유형 중에서 선택할 수 있습니다.

  • Boxed - 일반적인 팝업을 표시할 경우에 선택합니다.
  • Sticky Bar - 상단이나 하단에 막대 표시줄을 표시하려는 경우에 선택할 수 있습니다. 이 옵션을 선택하면 팝업을 상단 또는 하단에 배치할 수 있습니다.
  • Sidebar - 고정 사이드바를 표시할 수 있습니다. 이 옵션을 선택하면 팝업을 왼쪽 또는 오른쪽에 배치할 수 있습니다.

PRO 버전에는 위의 세 옵션 외에 숏코드로 임베드할 수 있는 Embedded 옵션이 하나 더 있습니다.

팝업 레이아웃 - 임베디드

Popup Style에서는 팝업의 폰트, 배경색, 음영, 테두리 속성(둥글게 만들기) 등을 지정할 수 있습니다.

Popup Overlay에서는 팝업 오버레이 활성화 여부를 지정할 수 있습니다. 팝업 오버레이를 활성화하면 팝업이 강조되어 표시되고, 해당 페이지는 어두운 투명 배경색으로 표시되면서 선택할 수 없게 됩니다.

Brave Popups 워드프레스 팝업 플러그인
팝업 오버레이 설정.

상단의 Settings를 클릭하면 팝업을 표시할 페이지, 기기 등에 대한 설정을 지정할 수 있습니다.

워드프레스 모달 팝업 플러그인

Placement에서 팝업일 표시할 페이지를 지정할 수 있습니다. Whole Site (전체 사이트), Homepage (홈페이지), Selected Pages (선택한 페이지) 중에서 선택할 수 있고, PRO 버전에서는 Custom URL (사용자 지정 URL) 옵션도 이용할 수 있습니다.

Selected Pages 옵션을 통해 페이지, 포스트, 카테고리, 상품 페이지 등을 선택할 수 있습니다. Custom URL을 선택하면 팝업이 표시될 URL을 직접 입력할 수 있습니다.

팝업 플러그인 - 팝업 설정

Settings 페이지 아래에서는 팝업이 표시될 대상(로그인 사용자, 비회원)과 팝업이 표시될 빈도를 지정할 수 있습니다. 그리고 표시할 기기도 지정할 수 있습니다.

워드프레스 팝업 플러그인 - Brave Popups

User Type(사용자 유형)Traffic Source(트래픽 소스)는 유료 버전에서만 제공됩니다. Traffic Source에서는 Referral Web page를 지정할 수 있습니다. 가령 특정 리퍼럴 사이트에서 유입되는 사용자에게만 팝업을 표시하고자 할 때 이 기능을 사용할 수 있습니다.

Frequency에서는 팝업을 표시할 빈도를 지정할 수 있습니다. 특정 횟수 이상 표시하지 않도록 하려면 Do Not Show More Than [ ] Times에 숫자를 지정하도록 합니다.

팝업을 일정 기간 동안 특정 횟수만 표시되도록 하는 기능은 PRO 버전에서만 제공됩니다. 예를 들어, "오늘 하루 동안 팝업 표시하지 않기" 같은 기능을 이용할 때 사용할 수 있습니다. 하지만 무료 버전에서는 기간에 관계없이 특정 횟수만 표시하도록 지정할 수 있는 기능이 제공되므로 이 기능을 잘 활용하면 유용할 것 같습니다.

왼쪽에서는 이제 팝업에 표시할 요소가 배치되어 있습니다. 요소를 끌어다 팝업 내의 원하는 위치로 놓으면 해당 요소가 표시됩니다.

예를 들어, 텍스트 요소를 끌어다 닫기 (X) 아이콘 옆에 추가하고 "하루 동안 열지 않기" 텍스트를 표시할 수 있습니다.

팝업 하루 동안 열지 않기 문구 추가하기

More를 클릭하면 더 많은 요소를 볼 수 있습니다.

Brave Popups 요소

다음과 같은 요소를 사용할 수 있습니다.

  • 텍스트
  • 이미지
  • 도형 (Shape)
  • 스티커 (Sticker)
  • 버튼
  • 폼 (컨택트 폼)
  • 동영상 (Video)
  • 타이머 (Timer)
  • 캐러셀 (Carousel)
  • 검색 (Search)
  • 로그인 (Login)
  • 포스트 (Post)
  • 포스트 목록 (Posts)
  • 상품 (Product)
  • 소셜 (Social)
  • 코드 (Code)

동영상 등 일부 요소는 PRO 버전에서만 지원됩니다.

팝업 화면에서 요소를 클릭하면 해당 요소의 설정이 오른쪽에 표시됩니다. 예를 들어, 문의 폼을 클릭하면 오른쪽에 문의 양식의 필드, 스타일을 지정할 수 있고, 받는 사람 이메일 주소, 이메일 제목, 구독 이메일 리스트에 추가 여부 등 컨택트 폼에 필요한 각종 설정을 지정할 수 있습니다.

팝업 플러그인 컨택트 폼 요소 설정

텍스트를 클릭하면 Text Settings 섹션이 오른쪽에 표시되어 텍스트와 관련된 설정을 지정할 수 있습니다(예: 폰트 크기, 글자색 등).

쉬운 워드프레스 팝업 플러그인 텍스트 요소 설정

요소를 마우스로 끌어다가 원하는 곳에 자유롭게 배치가 가능하므로 수월하게 팝업을 만들 수 있을 것입니다.

팝업 편집이 완료되었으면 오른쪽 상단의 Publish Popup을 클릭하여 팝업을 공개할 수 있습니다.

무료 버전과 유료 버전

Brave Popup Builder는 무료 버전으로도 웬만한 팝업을 만들 수 있을 것 같습니다. 보다 정교한 팝업을 만들거나 고급 기능이 필요한 경우 PRO 버전을 고려해볼 수 있습니다.

무료 버전에서는 무제한 팝업, 8개의 요소(Element), 10개의 템플릿, 제한된 우커머스 팝업 기능이 제공됩니다. 유료 버전에서는 무제한 팝업, 18개의 요소와 100개 이상의 템플릿, 그리고 전체 우커머스 팝업 기능이 제공됩니다. 이외에도 다음 기능을 PRO 버전에서 이용할 수 있습니다.

  • 멀티스텝 팝업
  • 멀티스텝 폼 (단계별 폼)
  • 무제한 폼 필드
  • 수 백만 개의 무료 자산(Asset)
  • 고급 추적 기능
  • 고급 타겟팅
  • 포스트/페이지에 임베드 (숏코드로)
  • 콘텐츠 잠금 기능
  • 고급 애니메이션
  • Zapier 통합
  • 업데이트: 1년

자세한 정보는 Brave Popup Builder 홈페이지를 참고해보세요.

마치며

이상으로 드래그 앤 드롭(Drag & Drop) 방식으로 쉽게 팝업을 만들 수 있는 Brave Popup Builder 플러그인에 대해 살펴보았습니다. 이 플러그인은 팝업 (모달) 기능 외에, 고정 사이드바, 상단 또는 하단 배너를 표시하는 용도로도 사용이 가능하고, 뉴스레터 운영을 위해 이메일을 수집하는 플러그인, 워드프레스 팝업 로그인/회원가입 플러그인 등의 기능도 제공하고 있습니다.

참고



댓글 남기기