워드프레스에 MailChimp 구독 팝업창 추가하기

워드프레스 사이트에 뉴스레터 구독(subscription) 기능을 추가하는 방법은 다양합니다. 그중 많이들 사용하는 방법, 그리고 아마도 가장 간단한 방법 중 하나는 메일침프(MailChimp)의 구독 기능을 사용하는 방법일 것입니다.

MailChimp 구독 폼 플러그인

시중에는 워드프레스 사이트에 구독 폼을 추가해주는 플러그인들이 많이 나와 있습니다.

몇 가지만 예를 들어 볼까요?

• MailChimp for WordPress | WordPress.org
• Easy Forms for MailChimp – YIKES WordPress Plugins
• Bloom Email Opt-In Plugin For WordPress

MailChimp가 제공하는 구독 폼

하지만 간단하게 사이트에 구독 폼만 추가할 거면 굳이 번거롭게 이런 플러그인을 설치할 필요 없습니다. 메일침프에서 제공하는 구독 폼(Signup forms) 기능만을 사용해도 충분한 경우가 많죠!

메일침프(MailChimp)에서는 사용자가 뉴스레터를 구독할 수 있는 다음 4가지 유형의 구독 폼을 제공합니다.

• Form builder: 구독 폼만 있는 페이지를 만듭니다.
• Embedded forms: 내 웹사이트 페이지의 특정 부분(예를 들면, 사이드바나 푸터 영역 등)에 내장하는 형태의 구독폼을 만듭니다.
• Subscriber pop-up: 팝업창 형태의 구독폼입니다.
• Form integrations: 메일침프 아닌 다른 서비스와의 연동 시에 사용됩니다.

여기서는 이 중 팝업창 형태의 구독폼 사용법을 간단하게 소개 합니다.

메일침프로 웹사이트에 뉴스레터 기능을 추가하는 자세한 내용은 아래 글을 참고 바랍니다.

웹사이트에 뉴스레터 구독 추가하기 – Usefulparadigm blog

구독 팝업 추가하기

메일침프 구독 팝업 창을 만드는 방법은 간단합니다. 메일침프 대시보드에서 구독자 목록(Lists)으로 들어가면 다음과 같이 ‘Signup forms’ 메뉴가 뜹니다.

이 메뉴를 클릭하면 구독 폼 유형을 선택하는 화면이 표시됩니다. 여기서 ‘Subscriber pop-up’을 선택합니다.

이어지는 단계에서는 팝업 창을 디자인합니다. 메일 침프에서는 현재 모달(Modal), 슬라이드(Slide), 고정(Fixed) 등 3유형의 팝업 창을 지원합니다.

내 사이트에 맞는, 마음에 드는 유형을 정하고 표시(Display) 방식, 표시될 텍스트, 이미지 업로드 처리 등 필요한 셋팅을 완료했다면 마지막으로 화면 우측 하단에 있는 ‘Generate Code’ 버튼을 클릭합니다.

팝업창이 뜨면서 사이트에 붙여 넣을 구독 팝업 코드가 제시 됩니다. 이 코드를 복사하여 내 사이트에 붙여 넣으면 모든 게 완료됩니다.

워드프레스에 팝업 코드 추가하기

워드프레스에 이 코드를 추가하는 방법 역시 다양합니다. 테마의 템플릿 파일 속에 직접 붙여 넣어도 되고 Insert Headers and Footers 같은 플러그인을 사용 중이라면 플러그인에서 제공하는 푸터 영역에 붙여 넣어도 되고 젯팩(Jetpack)을 사용 중이라면 젯팩에서 제공하는 MailChimp Subscriber Popup Widget 을 써도 됩니다.

WordPress 사이트에서 메타 태그 관리하기

여기서는 그냥 간단하게 워드프레스의 기본 위젯 중 하나인 사용자 정의 HTML 위젯에 코드를 붙여 넣고 적당한 위젯 영역에 추가했습니다. 단, 이 때 위젯 타이틀 창은 그냥 공란으로 비워 두세요!

이제 워드프레스 사이트에서 확인해 보면 방금 등록한 구독 팝업창이 제대로 표시될 것입니다.

모바일 구독 팝업창 처리

메일침프 구독 팝업창은 데스크톱(Desktop) 버전과 모바일(Mobile) 버전을 별도로 제공합니다. 모바일 버전에서는 검색엔진(구글)의 모바일 콘텐츠 액세스 권장 사항에 맞춰 사용성을 높이기 위해 팝업이 아닌 배너의 형태로 먼저 표시됩니다.

이 메일침프의 기본 모바일 팝업 방식을 변경할 수는 없지만, 스타일링을 조정하는 방법으로 약간의 수정은 가능합니다.

예를 들어, 모바일 구독 폼을 화면 상단이 아닌 화면 중앙에 표시하려면 다음 CSS를 추가해 주면 됩니다.

@media only screen and (max-width: 768px) {
  .mc-banner { top: 50% !important; }
}

혹은, 화면 맨 하단에 표시할 수도 있죠.

@media only screen and (max-width: 768px) {
  .mc-banner {
        top: auto !important;
        bottom: 0 !important;
        border-top: 1px solid #e0e0e0;
    }
}

아니면 아예 모바일 디바이스에서는 팝업창이 표시되지 않게 하는 것도 한 방법이구요.

@media only screen and (max-width: 768px) {
  .mc-banner { display: none !important; }
}

그 밖의 고려 사항

메일침프의 구독 폼 기능은 굳이 워드프레스에만 사용할 수 있도록 만들어 진 것은 아닙니다. 일반적인 웹사이트 어디든 붙여서 쓸 수 있죠. 그러다보니 워드프레스 테마에 적용할 경우 종종 테마 디자인과 잘 맞지 않는 경우가 발생하곤 합니다. 아쉽게도 이 문제는 하나의 정해진 답이 있는 게 아니라 ‘그때 그때’ 상황에 맞게 대처할 방법 밖엔 없습니다.

혹시라도 적용하다가 문제가 발생하거나 할 경우에 아래 댓글로 남겨 주시거나 컨택 폼을 통해 문의 주시면 도움 드리도록 하겠습니다. 감사합니다. 🙂