웹 팝업 콘텐츠

웹 팝업 콘텐츠는 웹 팝업이 웹사이트에 나타날 때 방문자가 보는 시각적 레이아웃입니다. 콘텐츠에서 빌드한 다음 웹 팝업 캠페인에 첨부하세요.

웹 팝업 콘텐츠 만들기

콘텐츠 → 웹 팝업 콘텐츠로 이동합니다.
웹 팝업 콘텐츠 만들기를 클릭합니다.
갤러리에서 시작 템플릿을 선택합니다. 오른쪽 상단의 카테고리 드롭다운을 사용하여 사용 사례별로 필터링하거나(프로모션 및 혜택, 게임 및 마켓플레이스, 피드백 및 설문조사 등) 모든 템플릿으로 둡니다. 빈 레이아웃 카테고리에는 구독 양식 블록이 이미 포함된 모달 + 구독 양식을 포함한 일반적인 시작점이 있습니다.

템플릿을 선택한 후 편집기에서 팝업을 사용자 정의합니다.

팝업 이름 지정

상단 바에서 팝업 이름을 클릭하여 편집합니다. 이 이름은 Pushwoosh 내 콘텐츠 목록 및 캠페인 마법사에서 이 콘텐츠를 식별합니다. 웹사이트 방문자에게는 보이지 않습니다.

팝업 설정 편집

캔버스 왼쪽의 설정 패널에서 팝업의 모양과 위치를 조정합니다:

이미지 및 비디오

레이아웃에 하나 이상의 미디어 블록이 포함된 경우, 각 블록은 패널 상단에 미리보기 및 컨트롤이 있는 자체 블록을 갖게 됩니다.

이미지 변경을 클릭하여 프로젝트의 미디어 스토어에서 파일을 선택하거나, 미디어를 비디오로 설정하여 정적 이미지 대신 비디오를 재생합니다.

미리보기 아래:

미디어: 이미지 또는 비디오.
맞춤: 이미지나 포스터가 프레임을 채우는 방식: 자연스럽게, 커버, 또는 포함. 항상 영역을 덮는 배경 이미지에는 표시되지 않습니다.
블러: 이미지나 포스터를 0에서 20px까지 부드럽게 처리합니다.
어둡게: 배경 미디어에만 해당됩니다. 이미지나 비디오 위에 어두운 스크림을 추가하여 그 위에 배치된 텍스트가 0에서 100%까지 가독성을 유지하도록 합니다.

미디어를 비디오로 설정하면 네 개의 필드가 추가됩니다:

비디오 URL: 비디오 파일에 대한 직접 링크입니다. 비디오는 외부 URL만 허용합니다. 미디어 스토어에 비디오를 업로드할 수 없습니다. “빠른 시작”(때로는 “웹 최적화”라고도 함)이 활성화된 MP4(H.264 비디오, AAC 오디오)로 내보내면 브라우저가 전체 파일을 다운로드하기 전에 재생을 시작할 수 있습니다. URL 로드에 실패하면 방문자는 포스터만 보게 됩니다.
반복: 한 번 재생 후 멈추는 대신 비디오를 계속해서 재생합니다.
컨트롤 표시: 브라우저의 내장 재생, 일시 중지 및 볼륨 컨트롤을 표시합니다. 비디오는 항상 음소거 상태로 시작하며, 이 옵션이 없으면 방문자는 소리를 켤 방법이 없습니다.
포스터 URL: 비디오가 로드되는 동안 표시되는 이미지입니다. 선택 사항이지만 권장됩니다. 비디오를 지원하지 않는 이전 팝업 스크립트를 실행하는 방문자에게 표시되는 유일한 것이기도 하므로, 비워두면 해당 방문자는 비디오가 있어야 할 곳에 아무것도 보지 못하게 됩니다.

일부 레이아웃에는 미디어 블록의 배치 설정을 위한 레이아웃 섹션도 추가됩니다:

이미지 너비: 팝업 너비의 비율(%).
이미지 위치: 텍스트 옆에 미디어가 있는 레이아웃의 경우 왼쪽 또는 오른쪽.

레이아웃 섹션은 현재 레이아웃에 이러한 설정이 있을 때만 나타납니다. 하단 바 레이아웃에서는 이미지 컨트롤 대신 버튼 너비를 제공합니다.

팝업 크기 및 스타일

팝업 섹션에서:

너비, 높이 (비어 있으면 자동): 콘텐츠에 맞게 크기가 조절되는 팝업의 경우 둘 다 비워두거나, 픽셀 단위로 고정 크기를 설정합니다. 여러 페이지가 있는 팝업에서는 각 페이지가 자체 크기를 가집니다.
모서리 반경, 그림자: 팝업의 모서리 둥글기 및 그림자 효과.
애니메이션: 팝업이 나타나는 방식: 없음, 페이드, 또는 슬라이드.

색상

색상을 클릭하여 팝업의 색상 팔레트를 확장합니다:

배경, 강조 (버튼): 팝업 배경 및 버튼에 적용되는 강조 색상.
텍스트, 보조 텍스트: 본문 텍스트 및 캡션, 아이브로우와 같은 보조 텍스트의 색상.
이미지 위 텍스트: 배경 이미지 위에 텍스트가 있는 레이아웃에만 표시됩니다. 해당 텍스트에 사용되는 색상을 설정합니다.

다크 모드

다크 모드를 켜서 기기가 다크 색상 구성으로 설정된 방문자에게 두 번째 팔레트를 제공합니다. 이 기능이 꺼져 있으면 팝업은 모든 방문자에게 항상 위의 라이트 팔레트로 렌더링됩니다.

다크 모드가 켜지면:

색상 필드 위의 라이트 / 다크 스위치를 사용하여 편집할 팔레트를 선택합니다. 캔버스는 해당 구성으로 다시 그려지므로 각 모드에서 팝업이 실제로 어떻게 보일지 확인할 수 있습니다.
라이트에서 자동을 클릭하여 현재 라이트 색상에서 다크 팔레트를 (재)생성합니다: 표면은 어두워지고 글자는 밝아지며, 강조 및 이미지 위 텍스트는 변경 없이 유지됩니다. 이후 다섯 개의 필드 중 하나를 편집하여 결과를 미세 조정할 수 있습니다.
다크 모드를 다시 끄더라도 다크 팔레트는 버려지지 않고 유지되므로, 다시 켜면 처음부터 다시 생성하는 대신 편집 내용이 복원됩니다.

방문자의 브라우저는 OS 수준의 다크 모드 설정에 따라 어떤 팔레트를 볼지 결정합니다. 팝업 자체에는 라이트/다크 토글이 없습니다. 사이트는 OS 설정과 관계없이 모든 사람에게 하나의 구성을 강제할 수 있습니다. Web SDK 문서의 webPopups.colorScheme을 참조하세요.

배치 및 오버레이

배치 섹션에서:

위치: 3×3 그리드를 사용하여 페이지에서 팝업이 고정될 위치를 선택합니다.
가장자리 오프셋: 선택한 가장자리로부터의 거리를 픽셀 단위로 설정합니다.

오버레이 섹션에서:

페이지 배경 어둡게 하기: 팝업이 표시되는 동안 페이지의 나머지 부분을 어둡게 하려면 켭니다.
색상, 불투명도: 오버레이 색상과 불투명도를 0에서 1까지 설정합니다.

텍스트 편집

팝업의 텍스트 블록을 클릭하여 인라인으로 편집합니다. 그 위에 도구 모음이 나타납니다:

굵게, 기울임꼴, 또는 밑줄 서식을 적용합니다.
링크를 추가하거나 제거합니다.
왼쪽, 가운데 또는 오른쪽 정렬을 설정합니다.
텍스트 스타일 선택: 아이콘, 아이브로우, 제목 1–3, 본문, 또는 캡션.

버튼 편집

버튼을 클릭하여 도구 모음을 엽니다:

버튼 스타일 선택: 기본 또는 보조.
버튼의 동작 선택:
- 링크 열기: 대상 URL을 입력합니다.
- 팝업 닫기.
- 페이지로 이동: 전환할 팝업의 다른 페이지를 선택합니다. 이 옵션은 팝업에 페이지가 두 개 이상 있을 때 나타납니다. 여러 페이지로 작업하기를 참조하세요.

구독 양식 추가

구독 양식 블록을 추가하여 팝업에서 직접 이메일 가입 및 기타 필드를 수집합니다. 구독 양식에 대해 자세히 알아보기.

블록 추가

캔버스에서 텍스트 블록, 버튼 또는 다른 요소를 선택합니다.
도구 모음에서 추가를 클릭합니다.
구독 양식을 선택합니다. 블록은 기본 이메일 필드와 구독 버튼과 함께 즉시 나타납니다.

양식 소스 선택

구독 양식 블록을 클릭하여 양식 도구 모음을 엽니다. 첫 번째 드롭다운은 블록을 프로젝트의 구독 양식에 연결합니다. 새 양식을 만들거나 이미 존재하는 양식을 선택할 수 있습니다:

옵션	사용 시기
새 양식 — 저장 시 생성됨 (기본값)	가장 빠른 시작: 팝업을 저장할 때 Pushwoosh가 “팝업 이름 — 웹 팝업”이라는 이름으로 양식을 생성합니다.
+ 새 양식 만들기…	팝업을 저장하기 전에 양식의 이름을 지정하고 설정하고 싶을 때. 새 구독 양식 대화 상자가 열립니다. 이름을 입력한 다음 아래와 같은 방식으로 필드, 제출 텍스트, 개인정보를 설정하고 만들기를 클릭합니다.
드롭다운에서 기존 양식 선택	이미 구독자가 있거나 이중 옵트인이 구성된 양식을 재사용합니다.

필드 및 제출 동작 설정

양식 도구 모음에서 제출 버튼 스타일을 설정합니다:
- 기본: 팝업 강조 색상으로 채워진 버튼. 구독이 페이지의 주요 작업일 때 가장 좋습니다.
- 보조: 테두리와 강조 색상 레이블이 있는 윤곽선 버튼. 팝업에 이미 기본 버튼이 있거나 더 가벼운 느낌을 원할 때 가장 좋습니다.
개인정보를 켜서 양식 아래에 개인정보 동의 줄을 추가한 다음, 나타나는 필드에 개인정보 처리방침 URL을 입력합니다.

**필드…**를 클릭하여 팝오버를 열고, 여기서 이메일(항상 필수)을 유지하고 이름, 성, 전화번호 또는 사용자 정의를 추가하고, 방문자가 제출한 후 표시되는 성공 및 이메일 확인 텍스트를 설정할 수 있습니다.

카운트다운 추가

카운트다운 블록을 추가하여 팝업에서 실시간으로 시간이 줄어드는 마감일로 긴급성을 조성합니다.

캔버스에서 텍스트 블록, 버튼 또는 다른 요소를 선택합니다.
도구 모음에서 추가를 클릭하고 카운트다운을 선택합니다.
카운트다운을 클릭하여 도구 모음을 엽니다:
- 마감일: 카운트다운이 0에 도달하는 날짜와 시간.
- 시간대: 마감일이 읽히는 시간대. UTC의 경우 비워 둡니다.
- 언어: 단위 레이블(일, 시간 등)의 언어. **영어(기본값)**로 두거나 13개의 다른 언어 중에서 선택합니다.
- 레이블: 숫자 옆에 단위 레이블을 표시하려면 켭니다.
- 마감일이 지나면:
  - 0 표시: 카운트다운이 계속 00:00:00을 표시합니다.
  - 팝업 표시 안 함: 마감일이 지나면 전체 팝업이 건너뛰어집니다.
  - 페이지로 이동: 마감일이 지나면 팝업의 다른 페이지로 이동합니다. 팝업에 페이지가 두 개 이상 있을 때만 제공됩니다. 나타나는 드롭다운에서 대상 페이지를 선택합니다. 여러 페이지로 작업하기를 참조하세요.

아이콘 추가

아이콘 블록을 추가하여 세일을 위한 퍼센트 기호, 드롭을 위한 선물 등 작은 픽토그램을 문구 옆에 배치합니다.

요소를 선택하고 추가를 클릭한 다음 아이콘을 선택합니다.
아이콘을 클릭하여 도구 모음을 엽니다:
- 아이콘: 20개의 고정된 아이콘 세트(종, 선물, 카트, 차트, 자물쇠, 달력, 체크, 별, 시계, 태그, 메일, 전화, 다운로드, 재생, 방패, 반짝임, 퍼센트, 트럭, 티켓, 사용자) 중에서 선택합니다. 사용자 정의 아이콘 업로드는 지원되지 않습니다.
- 크기: 24, 32 또는 48px.
- 강조: 기본적으로 켜져 있어 아이콘이 팝업의 강조 색상과 일치합니다. 사용자 정의 색상을 선택하려면 끕니다.

주제 선택기 추가

주제 선택기 블록을 추가하여 방문자가 체크박스나 칩으로 관심사를 직접 선택하게 합니다. 선택 사항은 기기의 태그에 기록됩니다.

블록 추가 및 태그 바인딩

요소를 선택하고 추가를 클릭한 다음 주제 선택기를 선택합니다. 두 개의 자리 표시자 옵션과 바인딩된 태그 없이 도착합니다. 태그를 선택할 때까지 아무것도 기록하지 않습니다.
블록을 클릭하여 도구 모음을 엽니다. 첫 번째 드롭다운은 프로젝트의 목록 유형 태그에 연결됩니다. 기존 태그를 선택하거나 목록 태그 만들기를 선택하여 편집기를 나가지 않고 태그를 만듭니다.

옵션 및 제한 설정

도구 모음에서 계속:

컨트롤: 옵션을 체크박스 또는 칩으로 표시합니다.
최소 / 최대 선택: 방문자가 선택해야 하거나 선택할 수 있는 옵션의 수. 양쪽 끝에 0은 제한이 없음을 의미하지만, 최소가 0이더라도 제출하려면 항상 하나 이상의 선택이 필요합니다. 최대를 초과하여 선택하거나 최소 미만으로 제출하려고 하면 아무것도 보내는 대신 블록 옆에 인라인 메시지가 표시됩니다.
옵션을 클릭하여 옵션 패널을 엽니다:
- 각 옵션의 레이블(방문자가 읽는 내용)과 태그 값(태그에 기록되는 내용)을 편집합니다. 태그 값을 비워두면 Pushwoosh는 옵션의 내부 ID(option-1, option-2 등)를 대신 기록합니다. 태그에서 읽을 수 있는 값이 필요한 경우 채워 넣으세요.
- + 옵션은 총 12개까지 다른 행을 추가합니다.
- 버튼 레이블과 전송 후 메시지를 설정합니다.

평가 추가

평가 블록을 추가하여 NPS, 별점 또는 좋아요/싫어요와 같은 빠른 점수를 사용자 정의 이벤트로 수집합니다.

블록 추가 및 이벤트 설정

요소를 선택하고 추가를 클릭한 다음 평가를 선택합니다. 이벤트가 설정되지 않은 상태로 도착합니다. 이벤트를 선택할 때까지 아무것도 보내지 않습니다.
블록을 클릭하여 도구 모음을 열고 프로젝트의 기존 이벤트에서 이벤트를 선택하거나, 이벤트 만들기를 선택하여 팝업을 나가지 않고 새 이벤트를 정의합니다. Pushwoosh는 블록이 보내는 score, scale, slotKey 속성으로 이벤트를 설정합니다. 점수는 해당 이벤트로 Pushwoosh에 게시됩니다. 다른 이벤트와 동일한 방식으로 세그먼트나 고객 여정에서 사용하세요.

블록에 바인딩된 이벤트가 나중에 다른 곳에서 이름이 변경되거나 삭제되거나, 이 필드가 선택기가 되기 전에 입력된 경우, 선택기는 조용히 삭제하거나 교체하는 대신 **누락: <이벤트 이름>**으로 표시합니다. 다른 이벤트를 선택하여 바인딩을 수정하세요.

척도 구성

도구 모음에서 계속:

척도: NPS 0–10, 별점(1~5), 또는 좋아요/싫어요(위 또는 아래).

점수가 전송될 때: 탭 시는 방문자가 값을 선택하는 순간 점수를 보냅니다. 버튼 사용은 제출 버튼을 클릭할 때까지 기다립니다. 이 옵션을 선택하면 레이블을 설정합니다.
척도의 양쪽 끝에 선택적 레이블 및 전송 후 메시지.

여러 페이지로 작업하기

웹 팝업은 여러 페이지를 가질 수 있습니다. 예를 들어 방문자를 짧은 다단계 제안으로 안내할 수 있습니다.

페이지 추가

+ 페이지 추가를 클릭하여 페이지 추가 메뉴를 엽니다:

현재 페이지 복제: 편집한 내용을 포함하여 활성 페이지를 새 페이지로 복사합니다. 원본 페이지에 구독 양식이 있는 경우, 사본은 구독 양식 없이 생성됩니다. 팝업은 하나의 구독 양식만 가질 수 있습니다.
단일 페이지 레이아웃 중 하나를 선택하여 해당 레이아웃의 데모 콘텐츠로 새 페이지를 추가합니다. 새 페이지는 다른 페이지와 독립적이므로 다른 레이아웃을 사용할 수 있습니다. 모달 + 구독 양식은 이러한 레이아웃 중 하나이며, 구독 양식 블록이 이미 포함되어 있습니다.

각 탭은 하나의 페이지입니다. 탭을 클릭하여 전환합니다.

시작 페이지 설정

★ 표시가 있는 탭은 시작 페이지로, 방문자가 처음 보는 페이지입니다. 변경하려면 다른 탭을 열고 해당 탭에서 ☆를 클릭합니다.

페이지 삭제

활성 탭에서 **✕**를 클릭합니다. 확인 대화 상자가 열립니다. 삭제를 클릭하여 페이지를 제거합니다. 이 작업은 되돌릴 수 없습니다.

콘텐츠 저장

콘텐츠, 이미지 및 비디오, 버튼 작업을 검토합니다. 완료되면 상단 바에서 저장을 클릭합니다.

캠페인에서 콘텐츠 사용

저장 후 콘텐츠는 콘텐츠 → 웹 팝업 콘텐츠에 나타납니다. 목록에서 열어 계속 편집할 수 있습니다.

사이트에 표시하려면 캠페인 → 웹 팝업으로 이동하여 캠페인을 만들거나 편집하고 콘텐츠 단계에서 이 콘텐츠를 선택합니다.

그런 다음 잠재고객, 표시 설정, 빈도 및 시작 옵션을 구성합니다. 전체 흐름은 웹 팝업 캠페인 만들기를 참조하세요.