웹 팝업 콘텐츠

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

웹 팝업 콘텐츠 만들기

Content → 웹 팝업 콘텐츠로 이동합니다.
웹 팝업 콘텐츠 만들기를 클릭합니다.
갤러리에서 시작 템플릿을 선택합니다. 오른쪽 상단의 카테고리 드롭다운을 사용하여 사용 사례(예: 프로모션 및 혜택 또는 게임 및 마켓플레이스)별로 필터링하거나 모든 템플릿으로 그대로 둡니다.

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

팝업 이름 지정하기

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

팝업 설정 편집하기

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

이미지

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

이미지 변경을 클릭하여 프로젝트의 미디어 스토어에서 파일을 선택합니다.

미리보기 아래:

Fit: 이미지가 프레임을 채우는 방식: Natural, Cover 또는 Contain. 배경 이미지는 항상 해당 영역을 덮으므로 표시되지 않습니다.
Blur: 이미지를 0에서 20px까지 부드럽게 처리합니다.
Dim: 배경 이미지에만 해당됩니다. 사진 위에 어두운 막을 추가하여 그 위에 놓인 텍스트를 0에서 100%까지 읽을 수 있도록 유지합니다.

일부 레이아웃에는 이미지 배치 설정이 있는 Layout 섹션도 추가됩니다:

Image width: 팝업 너비의 비율(백분율).
Image position: 텍스트 옆에 이미지가 있는 레이아웃의 경우 Left 또는 Right.

Layout 섹션은 현재 레이아웃에 이와 같은 설정이 있을 때만 나타납니다. 하단 바 레이아웃에서는 이미지 컨트롤 대신 Buttons width를 제공합니다.

팝업 크기 및 스타일

Popup 섹션에서:

Width, Height (비어 있으면 자동): 콘텐츠에 맞게 크기가 조정되는 팝업의 경우 둘 다 비워두거나 픽셀 단위로 고정 크기를 설정합니다. 여러 페이지가 있는 팝업에서는 각 페이지마다 고유한 크기가 있습니다.
Corner radius, Shadow: 팝업의 모서리 둥글기 및 그림자 효과.
Animation: 팝업이 나타나는 방식: None, Fade 또는 Slide.

색상

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

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

배치 및 오버레이

PLACEMENT 섹션에서:

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

OVERLAY 섹션에서:

Dim the page behind: 팝업이 표시되는 동안 페이지의 나머지 부분을 어둡게 하려면 켭니다.
Color, Opacity: 오버레이 색상과 불투명도를 0에서 1 사이로 설정합니다.

텍스트 편집하기

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

굵게, 기울임꼴 또는 밑줄 서식을 적용합니다.
링크를 추가하거나 제거합니다.
왼쪽, 가운데 또는 오른쪽 정렬을 설정합니다.
텍스트 스타일을 선택합니다: Icon, Eyebrow, Heading 1–3, Body 또는 Caption.

버튼 편집하기

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

버튼 스타일을 선택합니다: Primary 또는 Secondary.
버튼의 동작을 선택합니다:
- Open a link: 대상 URL을 입력합니다.
- Close the popup.
- Go to page: 전환할 팝업의 다른 페이지를 선택합니다. 이 옵션은 팝업에 페이지가 두 개 이상 있을 때 나타납니다. 여러 페이지 작업하기를 참조하세요.

구독 양식 추가하기

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

블록 추가하기

캔버스에서 텍스트 블록, 버튼 또는 다른 요소를 선택합니다.
도구 모음에서 Add를 클릭합니다.
Subscription form을 선택합니다. 블록이 기본 Email 필드와 Subscribe 버튼과 함께 즉시 나타납니다.

양식 소스 선택하기

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

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

필드 및 제출 동작 설정하기

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

**Fields…**를 클릭하여 팝오버를 엽니다. 여기서 Email(항상 필수)을 유지하고 First name, Last name, Phone 또는 Custom을 추가하고, 방문자가 제출한 후 표시되는 Success 및 Confirm email 텍스트를 설정할 수 있습니다.

여러 페이지 작업하기

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

페이지 추가하기

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

현재 페이지 복제: 수정한 내용을 포함하여 활성 페이지를 새 페이지로 복사합니다.
단일 페이지 레이아웃 중 하나를 선택하여 해당 레이아웃의 데모 콘텐츠가 포함된 새 페이지를 추가합니다. 새 페이지는 다른 페이지와 독립적이므로 다른 레이아웃을 사용할 수 있습니다.

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

시작 페이지 설정하기

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

페이지 삭제하기

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

콘텐츠 저장하기

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

캠페인에서 콘텐츠 사용하기

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

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

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