코딩 없이 워드프레스에 팝업을 추가하는 방법

워드프레스 팝업은 방문자에게 제안을 제시하기 위해 페이지 위에 나타나는 메시지입니다. 예를 들어 결제 전 할인 혜택이나 이메일 주소를 제공하는 대가로 무료 가이드를 제공하는 것과 같습니다.

제안을 제대로 한다면 사람들은 반드시 가입할 것입니다. Omnisend는 12억 4천만 개의 팝업 디스플레이를 분석했으며, 2025년에는 2.1%가 이메일 가입으로 전환된 것을 발견했습니다. 방문자에게 여유를 줄 수도 있습니다. 지연 시간을 사용하거나 스크롤할 때까지 기다리거나 사이트를 떠날 준비가 된 것 같을 때 종료 의도 제안을 표시해 보세요.

워드프레스에 팝업을 추가하는 방법을 찾고 있다면, 워드프레스는 페이지를 제공하지만 팝업은 직접 설정해야 한다는 점을 알아야 합니다. 기본 구텐베르크 편집기에는 이러한 고급 트리거를 위한 내장 블록이 없으므로 사용자 정의 코드, 플러그인 또는 호스팅된 위젯이 필요합니다.

아래에서 후자의 두 가지 옵션에 대해 자세히 알아보겠습니다.

Watch on youtube

How to Create a Popup Form in WordPress

옵션 1: 전용 워드프레스 팝업 플러그인 설치하기

워드프레스 대시보드에서 시작하세요. 이 가이드에서는 사이트를 MyPopUps 빌더에 연결하는 Pop-up by Inisev를 사용합니다. 다른 플러그인도 사용할 수 있습니다.

무료 플러그인이라도 호스팅에 따른 제약이 있다는 점에 유의하세요. WordPress.com에서는 플러그인을 설치하려면 유료 플랜이 필요합니다. 하지만 다른 제공업체에서 워드프레스 사이트를 호스팅하는 경우 업그레이드를 건너뛸 수 있습니다.

1. 플러그인 찾기: 플러그인을 열고 “pop up”을 검색합니다. 표준 WP 관리자 인터페이스에서 먼저 새 플러그인 추가를 선택합니다. Pop-up by Inisev를 선택합니다.

2. 설치 및 활성화: 플러그인의 최근 업데이트 및 워드프레스 호환성을 확인한 후, 설치하고 활성화합니다.

3. MyPopUps에 연결: 플러그인 설정을 열고 MyPopUps에 연결하라는 메시지가 표시되면 Yes(예)를 선택합니다. 해당 서비스의 빌더를 사용하여 팝업을 만들게 됩니다.
4. 팝업 제작: MyPopUps 링크를 따라가 디자인을 만듭니다.
5. 실행 및 확인: MyPopUps에서 팝업을 실행한 다음 워드프레스의 플러그인 화면으로 돌아가 Refresh(새로 고침)를 클릭합니다. 거기에서 팝업을 활성화하거나 비활성화할 수 있습니다.

팝업 제작은 완료되었을지 몰라도, 플러그인은 여전히 관리가 필요합니다. Patchstack의 2026년 워드프레스 보안 보고서에 따르면, 2025년에 발견된 11,334개의 새로운 취약점 중 91%가 플러그인에서 발생했습니다.

가끔 진행하는 세일을 알리는 팝업의 경우, 유지 관리 부담이 적은 것을 선호할 수 있습니다. 워드프레스에 팝업을 추가하는 방법을 고민하고 계신다면, 다음 옵션이 적합할 수 있습니다.

옵션 2: 무료 인터랙티브 팝업 위젯 추가하기

Jform 팝업 위젯을 사용하면 워드프레스 외부에서 팝업을 제작하고 임베드 코드로 쉽게 삽입하여 워드프레스에 팝업을 추가하는 방법을 실천할 수 있습니다.

WordPress.com 사이트의 경우, 팝업이 편집기 미리보기에 나타나더라도 임베드를 실행하려면 호스팅 기능이 활성화된 유료 플랜이 필요합니다.

워드프레스에 팝업을 추가하는 방법으로, 시작하는 단계는 다음과 같습니다:

1. 제안 내용 작성: 일반(General) 아래에서 제목과 설명을 편집합니다. 저는 헤드라인 위에 “제한 시간(Limited time)”을 표시하기 위해 배지(Badge)를 활성화한 다음, CTA 버튼(CTA button) 옵션을 활성화하여 “지금 쇼핑하기(Shop now)”를 사용했습니다. 버튼 링크(Button link) 아래에 목적지 URL을 추가하세요. 쿠폰(Coupon), 타이머(Timer) 또는 Jform 양식(Jform form)을 활성화할 수도 있습니다. 계속(Continue)을 클릭합니다.

2. 사이트에 맞게 스타일 지정: 스타일(Styles) 아래에서 둥근 모서리와 라이트 테마를 선택하고, 제안 내용이 페이지에서 돋보이도록 오버레이(Overlay)를 활성화했습니다. 또한 제안 내용에만 집중할 수 있도록 Jform 브랜딩(Jform branding)을 껐습니다. 계속(Continue)을 클릭합니다.

3. 레이아웃 및 동작 선택: 레이아웃(Layout) 아래에서 팝업의 위치와 콘텐츠 모두 중앙(Center)을 선택했습니다. 방문자가 읽고 있던 페이지를 대체하지 않고 제안 페이지가 열리도록 새 탭에서 링크 열기(Open links in new tab)를 활성화했습니다. 제가 여기서 가장 좋아하는 제어 기능은 다시 열기 버튼(Reopen button)입니다. 이 기능을 사용하면 팝업을 닫은 후에도 “제안 열기(Open offer)” 버튼을 계속 남겨둘 수 있습니다.

4. 임베드 코드 복사하기: 웹사이트에서 무료로 사용해 보기(Try it on your website for free)를 클릭한 다음 코드 복사(Copy Code)를 클릭합니다.

이제 워드프레스에 팝업을 추가해 보겠습니다(how to add a popup on wordpress).

1. 사용자 정의 HTML 블록 추가: 외모(Appearance) > 위젯(Widgets)으로 이동하여 위젯 영역을 선택합니다. +를 클릭하고 “사용자 정의 HTML(Custom HTML)”을 검색하여 블록을 추가합니다. 특정 글이나 페이지에 팝업을 추가하려면 해당 글이나 페이지의 편집기에 직접 동일한 블록을 추가하세요.

2. 붙여넣기 및 저장: HTML 편집(Edit HTML)을 선택하고 Jform의 전체 스니펫을 붙여넣습니다. 코드 옆에 미리보기가 표시됩니다. 업데이트(Update)를 클릭한 다음 위젯 편집기에서 변경 사항을 저장합니다.

팝업 외에도 Jform을 다양하게 활용해 보세요

작업을 완료하기 전에 페이지의 나머지 부분을 한 번 더 훑어보는 것이 좋습니다. 제안을 클릭한 사용자는 여전히 반품이 가능한지, 해당 지역으로 배송되는지 알고 싶어 할 수 있습니다.

이때 수많은 무료 웹사이트 위젯을 제공하는 Jform 웹사이트 위젯 디렉터리가 유용하게 쓰입니다. 다음은 고려해 볼 만한 몇 가지 추가 기능입니다.

• 이메일로 답변하기 번거로운 질문을 위한 FAQ 위젯: 배송 세부 정보, 환불 조건 또는 교육 과정 요건을 관련 페이지에 배치하세요. 목록이 길어지면 검색 기능을 활성화할 수도 있습니다.
• 예약 또는 문의 섹션 옆에 배치하는 Google 리뷰 위젯: 서비스의 장점을 어필했다면, 이전 고객들의 생생한 후기도 함께 보여주세요.
• 카탈로그, 메뉴 또는 디지털 매거진을 위한 플립북 위젯: 방문자가 주문을 결정하기 전에 사이트에서 직접 페이지를 넘겨볼 수 있게 하세요.

그런 다음 방문자가 응답할 수 있는 공간을 제공하세요. Jform의 워드프레스 임베드 양식 플러그인을 사용하여 견적 요청, 등록 또는 뉴스레터 가입을 위한 워드프레스 양식을 임베드해 보세요. 단계별 지침은 워드프레스 사용자를 위한 양식 임베드 가이드를 참조하세요.

Jform 웹사이트 위젯은 2027년 1월까지 모든 기능을 무제한으로 무료 제공합니다. 워드프레스 플러그인에 돈을 쓰기 전에 몇 가지를 시도해 보세요.