# 웹 팝업 콘텐츠

**웹 팝업 콘텐츠**는 웹사이트에 웹 팝업이 표시될 때 방문자가 보는 시각적 레이아웃입니다. **콘텐츠**에서 빌드한 다음 [웹 팝업 캠페인](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/)에 첨부하세요.

## 웹 팝업 콘텐츠 만들기

1. **콘텐츠** → **웹 팝업 콘텐츠**로 이동합니다.
2. **웹 팝업 콘텐츠 만들기**를 클릭합니다.
3. 갤러리에서 시작 템플릿을 선택합니다.

<img src="/content-web-popups-content-1.webp" alt="모달, 이미지, 하단 바, 다중 페이지 제품 둘러보기 시작 템플릿을 보여주는 웹 팝업 템플릿 갤러리"/>
4. 템플릿을 선택한 후 편집기에서 팝업을 사용자 정의합니다.

### 팝업 이름 지정

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

### 팝업 설정 편집

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

<Aside type="note">
이 설정은 팝업 디자인만 제어합니다. 대상, 페이지 타겟팅, 지연, 빈도 및 실행 설정은 [웹 팝업 캠페인](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/#start-a-new-campaign)에서 구성됩니다.
</Aside>

#### 이미지

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

**이미지 변경**을 클릭하여 프로젝트의 [미디어 스토어](/ko/product/content/media-store/)에서 파일을 선택합니다.

<img src="/content-web-popups-content-2.webp" alt="웹 팝업 편집기에서 빈 이미지 미리보기와 이미지 변경 버튼이 있는 팝업 설정 섹션"/>

미리보기 아래:

- **맞춤:** 이미지가 프레임을 채우는 방식: **자연스럽게**, **채우기** 또는 **포함**. 배경 이미지에는 표시되지 않으며, 항상 해당 영역을 덮습니다.
- **흐림:** 이미지를 0에서 20px까지 부드럽게 만듭니다.
- **어둡게:** 배경 이미지에만 해당됩니다. 사진 위에 어두운 막을 추가하여 그 위에 놓인 텍스트를 0에서 100%까지 읽을 수 있도록 유지합니다.

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

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

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

#### 팝업 크기 및 스타일

**팝업** 섹션에서:

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

<img src="/content-web-popups-content-3.webp" alt="너비, 높이, 모서리 반경, 그림자 및 애니메이션 컨트롤이 있는 설정 패널의 팝업 섹션"/>

#### 색상

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

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

<img src="/content-web-popups-content-11.webp" alt="배경, 강조, 텍스트, 보조 텍스트 및 이미지 위 텍스트 선택기를 보여주는 확장된 색상 섹션"/>

#### 배치 및 오버레이

**배치** 섹션에서:

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

**오버레이** 섹션에서:

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

<img src="/content-web-popups-content-4.webp" alt="배치 그리드 및 오버레이 컨트롤을 포함하는 POPUP, PLACEMENT, OVERLAY 섹션이 있는 웹 팝업 설정 패널"/>

### 텍스트 편집

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

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

<img src="/content-web-popups-content-5.webp" alt="서식, 정렬, 링크 및 스타일 컨트롤을 보여주는 인라인 편집 도구 모음이 있는 웹 팝업 캔버스의 선택된 텍스트"/>

### 버튼 편집

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

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

<img src="/content-web-popups-content-8.webp" alt="버튼 편집 도구 모음이 열려 있는 웹 팝업 캔버스에서 선택된 버튼"/>

<Aside type="tip">
텍스트 블록이나 버튼이 선택되었을 때, 도구 모음에서 **+T** 또는 **+B**를 사용하여 그 아래에 텍스트 블록이나 버튼을 추가하고, 위아래 화살표를 사용하여 페이지에서 이동시키고, 삭제 아이콘을 사용하여 제거합니다. 페이지의 마지막 남은 요소는 삭제할 수 없습니다.

팝업 아래의 **+ 추가**를 클릭하여 페이지 끝에 텍스트 블록이나 버튼을 추가합니다.
</Aside>

## 여러 페이지 작업하기

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

### 페이지 추가

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

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

<img src="/content-web-popups-content-6.webp" alt="여러 페이지, 시작 페이지 마커 및 페이지 추가가 있는 웹 팝업 편집기 페이지 탭"/>

<Aside type="note">
**제품 둘러보기(다중 페이지)**와 같은 다중 페이지 예제 레이아웃은 항상 전체 페이지 세트로 제공되므로 이 메뉴가 아닌 시작 갤러리에서만 사용할 수 있습니다.
</Aside>


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

### 시작 페이지 설정

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

<img src="/content-web-popups-content-7.webp" alt="한 탭에 시작 페이지 별표 마커가 있고 활성 탭에 삭제 컨트롤이 있는 페이지 탭"/>

### 페이지 삭제

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

<Aside type="note">
삭제된 페이지를 가리키는 **페이지로 이동** 작업이 있는 버튼은 **시작 페이지**로 대체됩니다.
</Aside>

## 콘텐츠 저장

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

<Aside type="note">
콘텐츠를 저장해도 웹사이트에 웹 팝업이 표시되지 않습니다. 콘텐츠는 웹 팝업 캠페인에서 선택하고 캠페인을 시작한 후에만 사이트에 나타납니다.
</Aside>

## 캠페인에서 콘텐츠 사용

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

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

그런 다음 대상, 표시 설정, 빈도 및 실행 옵션을 구성합니다. 전체 흐름은 [웹 팝업 캠페인 만들기](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/)를 참조하세요.