메인 콘텐츠로 건너뛰기

​
개요

팝업 에디터는 Notifly에서 새롭게 출시한 비주얼 팝업 제작 도구입니다. 코드 없이 블록을 조합하여 웹 팝업 템플릿을 직접 디자인할 수 있습니다. 좌측 블록 패널에서 원하는 요소를 클릭하면 캔버스 중앙에 즉시 배치되며, 우측 설정 패널에서 세부 스타일을 조정하는 구조로 이루어져 있습니다.

​
최소 기술 요구사항

새로운 웹 팝업 에디터를 사용해 팝업을 띄우고자 한다면 서비스에 설치된 Notifly SDK이 최소 버전 이상이어야 합니다.
  • JavaScript - 2.12.0

​
새 템플릿 만들기

좌측 메뉴바 ‘웹 팝업 템플릿’을 클릭하면 팝업 템플릿을 확인할 수 있습니다.
Webpopup New
가장 최근 수정된 팝업부터 미리보기 형식으로 확인할 수 있습니다. ’+ 새 템플릿 만들기’ 버튼을 클릭하여 새로운 템플릿을 만들어 보겠습니다.
Popup New
미리 준비된 레이아웃을 사용해 템플릿을 제작하실 수 있습니다. 처음부터 직접 만드시려면 ‘직접 만들기’를 선택해주세요.

​
화면 구성

에디터 화면은 크게 네 영역으로 나뉩니다.
Webpopup Editor
상단 툴바에는 공통 기능이 제공됩니다. 템플릿 이름 입력란, 실행 취소/다시 실행 버튼, 미리보기 및 저장을 지원합니다. 좌측 블록 패널에는 팝업에 추가할 수 있는 모든 블록 유형이 나열되어 있습니다. 콘텐츠 블록(Image, Text, Button, Divider, Spacer, HTML), 레이아웃 블록(Row), 캐러셀 블록(Carousel, Indicator)으로 분류됩니다. 중앙 캔버스는 실제 팝업이 어떻게 보이는지를 실시간으로 확인하는 편집 공간입니다. 상단에는 디바이스 유형(Mobile / Tablet / Desktop) 및 해상도를 선택하는 드롭다운이 있어, 다양한 화면 크기에서의 레이아웃을 미리 확인할 수 있습니다. 우측 설정 패널은 선택된 블록 또는 팝업 전체의 스타일 속성을 편집하는 공간입니다. 아무 블록도 선택하지 않으면 팝업 전체 설정이 표시되고, 특정 블록을 클릭하면 해당 블록의 편집 패널로 전환됩니다.

​
블록 추가하기

좌측 패널에서 원하는 블록을 클릭하면 캔버스 내 팝업에 즉시 추가됩니다. 추가된 블록은 클릭하면 파란색 테두리로 선택되며, 블록 위에 나타나는 툴바를 통해 다음 작업을 수행할 수 있습니다.
Toolbar
  • 위로 이동 / 아래로 이동: 팝업 내 블록 순서를 변경합니다.
  • 블록 복제: 동일한 설정의 블록을 하나 더 추가합니다.
  • 블록 삭제: 해당 블록을 제거합니다.
Block

​
콘텐츠 블록

Image 블록은 팝업에 이미지를 삽입합니다. 우측 패널에서 이미지를 업로드하고, 너비(%), 높이(자동 또는 비율 지정), 모서리 둥글기, 바깥 여백(Margin), 클릭 액션을 설정할 수 있습니다. 대체 텍스트(Alt Text)도 입력할 수 있어 접근성을 높일 수 있습니다. Text 블록은 팝업에 텍스트를 삽입합니다. 우측 패널에서 텍스트를 직접 입력하고, 폰트, 크기, 줄 높이, 굵기(Regular / Medium / Bold 등), 글자 색, 정렬(좌 / 중앙 / 우)을 자유롭게 설정할 수 있습니다. 텍스트 서식 버튼(B, I, U, 색상)을 통해 부분적인 서식 지정도 가능합니다. Button 블록은 CTA(Call To Action) 버튼을 삽입합니다. 라벨 텍스트, 버튼 배경색, 배경 투명도, 모서리 둥글기, 테두리, 폰트 스타일, 글자 색, 정렬, 안쪽 여백(Padding)을 조정할 수 있습니다. 클릭 액션으로는 기본적으로 ‘닫기’가 설정되어 있으며, 딥링크 이동이나 이벤트 발송 등 다양한 액션을 연결할 수 있습니다. Divider 블록은 구분선을 삽입하여 콘텐츠 영역을 시각적으로 분리합니다. Spacer 블록은 블록 사이에 여백 공간을 추가합니다. HTML 블록은 HTML과 CSS를 직접 작성하여 기본 블록만으로 만들기 어려운 콘텐츠를 구성할 때 사용합니다. HTML 요소의 이벤트 속성에서는 notiflyPopup 메소드를 호출하여 팝업을 닫거나 링크를 열고, 캐러셀을 제어할 수 있습니다.

​
notiflyPopup 메소드 사용하기

다음과 같이 HTML 요소의 onclick 속성에서 메소드를 호출할 수 있습니다. 
<button onclick="notiflyPopup.openUrl('https://example.com', { openMode: 'new_tab' })">
  자세히 보기
</button>

<button onclick="notiflyPopup.hideForDays(7)">
  7일 동안 보지 않기
</button>
메소드설명
notiflyPopup.close()팝업을 닫습니다.
notiflyPopup.hideForDays(days)팝업을 닫고 지정한 일수 동안 같은 팝업을 노출하지 않습니다.
notiflyPopup.hideForever()팝업을 닫고 같은 팝업을 다시 노출하지 않습니다.
notiflyPopup.openUrl(url, options?)URL을 엽니다. openMode는 새 창에서 여는 new_tab과 현재 창에서 여는 current를 지원하며, 기본값은 new_tab입니다.
notiflyPopup.openDeepLink(url)지정한 딥링크를 엽니다.
notiflyPopup.nextSlide()캐러셀의 다음 슬라이드로 이동합니다.
notiflyPopup.prevSlide()캐러셀의 이전 슬라이드로 이동합니다.
notiflyPopup.goToSlide(index)지정한 캐러셀 슬라이드로 이동합니다. 첫 번째 슬라이드의 index는 0입니다.

​
버튼 클릭 이벤트 구분하기

Button 블록의 버튼 이름 (이벤트 파라미터) 속성을 설정하면 버튼 클릭 이벤트에 button_name 값이 함께 기록됩니다. 같은 팝업 안에 여러 버튼이 있거나, 닫기와 노출 제한 액션을 별도로 분석하고 싶을 때 버튼별 이름을 지정해 주세요.
버튼 이름 입력 예시버튼 액션발생 이벤트이벤트 파라미터
coupon_ctaURL 또는 딥링크 이동notifly__main_button_clickbutton_name = coupon_cta, campaign_id = aB3dE7
close_popup닫기notifly__close_button_clickbutton_name = close_popup, campaign_id = aB3dE7
dismiss_today다시 보지 않기 또는 N일간 보지 않기notifly__close_button_clickbutton_name = dismiss_today, campaign_id = aB3dE7

​
레이아웃 블록

Row 블록은 2~4개의 칼럼을 가로로 배치할 수 있는 레이아웃 컨테이너입니다. 칸 수(2, 3, 4), 각 칸의 비율, 세로 정렬 방식, 블록 간격, 배경색, 배경 투명도, 바깥 여백(Margin)을 설정할 수 있습니다. Row 안에 Image, Text, Button 등의 블록을 넣어 복잡한 레이아웃을 구성할 수 있습니다.

​
캐러셀 블록

Carousel 블록은 여러 슬라이드를 넘겨보는 형태의 콘텐츠를 구성합니다. 우측 패널에서 다음 기능을 설정할 수 있습니다.
  • 슬라이드 관리: 슬라이드를 추가하거나, 각 슬라이드를 선택하여 순서 변경, 복제, 삭제할 수 있습니다.
  • 슬라이드 전환: 애니메이션 유형(Slide / Fade / 없음), 스와이프 허용 여부, 루프 여부를 설정합니다.
  • 자동 재생: 슬라이드 자동 전환 기능을 활성화합니다. 활성화 하면 재생 간격 속도를 조절할 수 있습니다.
  • 인디케이터: 하단 점(도트) 또는 숫자 형태의 페이지 표시를 설정하며, 위치(상단/하단, 좌/중/우), 오프셋, 기본 색상 및 완성 색상, 크기, 간격을 조정할 수 있습니다.
Indicator 블록은 Carousel 블록과 함께 사용하며, 별도 영역에 인디케이터를 배치하고 싶을 때 활용합니다.

​
팝업 전체 설정

캔버스의 빈 곳을 클릭하거나 우측 패널 상단의 ‘팝업’ 버튼을 클릭하면 팝업 전체 속성을 편집할 수 있습니다.

​
팝업 타입

팝업의 노출 방식을 세 가지 중에서 선택합니다.
  • Dialog: 화면 중앙에 팝업이 표시되는 기본 형태입니다.
  • Bottom Sheet: 화면 하단에서 슬라이드 업되는 시트 형태입니다.
  • Full Screen: 화면 전체를 채우는 풀스크린 팝업입니다.

​
배경

팝업 콘텐츠 영역의 배경색, 배경 투명도, 배경 이미지를 설정합니다.

​
팝업 스타일

팝업 창의 최대 너비(px), 모서리 둥글기(px), 안쪽 여백(Padding, 위아래/좌우 개별 설정 가능), 블록 간격을 지정합니다. 모서리 둥글기와 안쪽 여백은 상하좌우 개별 입력 전환 버튼을 통해 각 방향을 따로 설정할 수도 있습니다.

​
오버레이

팝업 뒤 배경의 색상, 투명도를 설정하고, 클릭 시 닫기 옵션을 켜면 오버레이 영역 클릭 시 팝업이 자동으로 닫힙니다.

​
애니메이션

팝업이 나타날 때(등장)와 사라질 때(사라짐)의 애니메이션 효과를 각각 설정합니다. 지원 옵션은 없음, Fade, Slide Up, Slide Down, Slide Left, Slide Right입니다.

​
닫기 버튼

팝업 우측 상단에 닫기(X) 버튼의 표시 여부, 위치(좌측 상단 / 우측 상단), 배치(팝업 안쪽 / 바깥쪽), 크기(px), 굵기, 아이콘 색상, 가로 및 세로 위치 오프셋을 세밀하게 조정할 수 있습니다.

​
저장 및 활용

편집이 완료되면 상단의 저장 버튼을 클릭하여 템플릿을 저장합니다. 저장된 템플릿은 웹 팝업 템플릿 목록에서 관리할 수 있으며, 캠페인 또는 유저 여정에서 해당 템플릿을 선택하여 발송에 활용할 수 있습니다.

​
FAQ

팝업 타입 변경 시 배치된 블록과 콘텐츠는 유지되지만, 일부 스타일 속성은 타입에 따라 초기화될 수 있으므로 타입 결정 후 상세 스타일을 편집하는 것을 권장합니다.
별도 제한 없이 슬라이드 추가 버튼을 통해 원하는 만큼 슬라이드를 추가할 수 있습니다. 단, 너무 많은 슬라이드는 사용자 경험에 영향을 줄 수 있으므로 3~5장 내외로 구성하는 것을 권장합니다. 
폰트 드롭다운 맨 아래로 내려주시면 ‘+폰트 추가’ 버튼이 있습니다. Google fonts 사이트에서 원하시는 폰트를 검색하여 클릭 > ‘Get font’ 버튼 클릭 > ‘Get embed code’ 클릭 > ‘https://fonts.googleapis.com/‘로 시작하는 웹폰트 url을 복사한 뒤 커스텀 폰트로 추가할 수 있습니다.*주의사항: 폰트명에는 정확한 폰트명을 입력해주셔야 합니다.