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

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

Brave를 사용하여 콘텐츠 잠금 기능을 쉽게 구현할 수 있고 A/B 테스트 기능을 활용하여 여러 개의 팝업을 랜덤하게 표시하는 것도 가능합니다. 콘텐츠 잠금 기능을 응용하여 뉴스픽의 일부 글에서 표시되는 "쿠팡 방문하고 계속 읽기" 팝업을 표시할 수 있습니다("배너를 클릭해야 글을 볼 수 있도록 하는 방법" 참고).

워드프레스 팝업 플러그인

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

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

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

참고로 Brave 팝업 빌더에서 닫기 버튼을 지연 표시하는 기능이 추가되었습니다. 닫기 버튼 지연 옵션을 활성화하면 카운트다운 타이머가 표시된 후에 Close 버튼이 표시됩니다. 아래의 "2024년 3월 추가: 카운트다운 타이머 기능 추가 (닫기 버튼 지연 표시)" 부분을 참고해보세요.

사용이 쉬운 워드프레스 팝업 플러그인 - 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 홈페이지를 참고해보세요.

2024년 3월 추가: 카운트다운 타이머 기능 추가 (닫기 버튼 지연 표시)

쿠팡 방문하기 팝업을 표시하는 경우 5초 카운트다운 후 닫기 버튼이 표시되도록 규정하고 있습니다. 저는 Brave 팝업 플러그인의 기능이 마음에 들어서 유료 버전을 사용하고 있습니다.

별 기대를 하지 않고 Brave 팝업에 닫기 버튼을 지연하여 표시하도록 하는 기능을 요청했습니다. 기능을 요청하지 며칠 만에 업데이트되면서 닫기 버튼 지연 표시 기능이 추가되었네요.😄😄

최신 버전으로 업데이트하면 닫기 버튼 설정에 Delay Appearance 옵션이 표시됩니다. 이 옵션을 활성화하고 지연 시간(예: 5초)을 지정할 수 있습니다. 그러면 카운트다운 타이머가 표시된 후에 닫기 버튼이 표시됩니다.

Brave 팝업 카운트다운 닫기 버튼 표시

마치며

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

참고


15개 댓글

  1. 혹시 기존에 다른 팝업빌더를 사용하고 있었는데요. 이 팝업을 동시에 설치해서 사용할 수 있나요?

    1. 안녕하세요, 현둘감자님. 가급적 하나의 팝업 빌더 플러그인을 사용하는 것이 좋을 것 같습니다. brave로 쉽게 기존 팝업을 새로 만들 수 있을 것입니다.

  2. 덕분에 잘 받아서 사용했어요ㅠ
    아무리 해도 안되서, 해외 지인의 카드로 긁는 방법으로 구매 했답니다.
    근데 너무 아쉬운점이 직관적인 인터페이스와 훌륭한 기능들이 만족스럽지만
    팝업이 뜨고 안뜨고의 설정을 한참 찾아야한다거나
    숫자키의 디테일한 수정이 안된다거나, 하나의 오브젝트를 잡고 옮길때 다른 오브젝트가 같이 움직이는 등의 버그들이 아직 많습니다.
    업데이트 버전을 잘 확인 하면서 구독기간 내에 계속해서 플러그인을 업데이트 해야할것같아요

    좋은 플러그인 소개 감사합니다!

    1. Brave Popup Builder에서 이용하는 PG에서는 신기(?)하게 중국과 우리나라 등 몇 개 나라에서만 페이팔 결제가 안 되네요.ㅠ 아마 우리나라 정부의 규제와 관련이 있을 않을까 나름대로 의심해봅니다.

      버그가 있다면 개발자에게 연락하면 잘 대응을 해주는 것 같습니다.

      플러그인이 개발된 지 얼마 되지 않아서 사용자가 그리 많은 편은 아니지만, 기능적인 면에서는 좋은 것 같습니다. 그리고 업데이트가 자주 이루어지므로 조만간 더 안정적으로 사용이 가능할 것으로 보입니다.

  3. 계속해서 답변 주셔서 감사합니다ㅠ
    VPN 설치와 접속후 페이팔 아이콘까지 다 나와서 문제 없이 진행하고 있었어요
    근데 또 예상치 못한 문제가..

    https://www.dropbox.com/s/fk3mbu98j0wj7ur/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202020-08-21%20%EC%98%A4%ED%9B%84%206.45.22.png?dl=0

    이 링크의 캡쳐 보시면, 결제 단계에서
    저의 페이팔 계정의 국가가 한국으로 되어있어서 결제를 할 수 없다고 뜨는것 같아요

    핳핳핳
    이제는 정말 답이 없는걸까요 ㅋㅋ
    너무 감사해요 ㅠ

  4. 좋은 콘텐츠 감사합니다.
    마음에 드는 기능이어서 pro 버전으로 구매하려고 하니,
    연간 결제 하는 형태로 되어있더라구요
    ( 결제 팝업 단계에서 연간 81,184원 청구됨 연간 이라고 뜸 )
    이건 1회 다운받아 연간결제 되지 않게 할 방법은 없겠죠? ㅠ

    1. 안녕하세요, sky님.

      아시다시피 요즘 연간 구독 형식으로 판매되는 테마와 플러그인이 늘어나고 있습니다.
      엘리멘터 페이지 빌더도 초기에는 Lifetime 플랜이 있었다고 하지만 지금은 연간 결제 상품밖에 없습니다.ㅠ

      구입을 하고 1년이 지난 후에 갱신을 하지 않고 그대로 사용하는 것이 가능하지만, 그럴 경우 업데이트를 받지 못하여 추후 워드프레스 버전과 충돌을 일으킬 가능성이 있습니다.

      1. 답변 감사해요!
        근데 참 문제네요ㅋㅋㅋ 업데이트 안되도 걍 구매 해서 쓰고 싶은데,
        중간에 갱신을 어떻게 끊는지 방법은 알 수 가 없네요 ㅠㅠㅠ

      2. 혹시 이플러그인 구매 하셨을까요?
        답변 대로 paypal 결제가 된다면 좋겠지만 paypal 결제가 되지 않네요ㅠ
        그래서 마스터카드로 결제 해보려해도

        귀하의 주문을 받을 수 없어 유감입니다. 저희는 귀하의 비즈니스를 소중하게 여기며 이 주문을 완료하는 데 도움을 드리고자 합니다. 도움이 필요하면 저희에게 연락하세요.

        라는문구와 함께 결제가 안되네요ㅠ
        난항입니다 ㅎㅎ

      3. 해외 결제가 가능한 마스터카드인가요?

        저는 이 플러그인을 구매하여 사용하고 있습니다.

        결제에 대해 판매자에게 문의 메일을 하나 보내보겠습니다. 답변을 받으면 공유하도록 하겠습니다.

      4. 정말 미치겠네요 ㅇㅅㅇ!!
        저는 그 버튼이 없이 나와요ㅠㅠ
        그리고.. 회원가입을 해야 나오는걸까 싶어서 가입을 하려 해도
        로그인버튼만 보이네요ㅠ
        급히 저도 이 플러그인이 쓸일이 있는데 좀처럼 쉽지않네요 ㅠㅠ

      5. VPN으로 접속하면 표시되네요.

        ZenMate와 같은 무료 크롬용 앱을 설치한 다음, 미국 지역으로 접속해보시겠어요?

        https://www.screencast.com/t/Bws41hZcH

        ZenMate는 https://www.thewordcracker.com/miscellaneous/zenmate-chrome-vpn/ 글을 참고해보세요.

        살펴보니 매년 결제가 이루어질 수 있으므로, 자동 결제가 되지 않도록 취소시키시기 바랍니다(https://www.thewordcracker.com/miscellaneous/%ED%8E%98%EC%9D%B4%ED%8C%94%EC%97%90%EC%84%9C-%EC%9E%90%EB%8F%99-%EA%B2%B0%EC%A0%9C-%EC%B7%A8%EC%86%8C%ED%95%98%EA%B8%B0/ ). 그리고 Zip 코드에는 미국 우편번호를 검색하여 적당한 지역의 우편번호를 입력하면 결제가 될 것 같습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.