# Web placement
**Web Placement** 요소를 사용하여 Journey의 이 단계에 도달한 사용자에게 웹사이트에서 [웹 콘텐츠](/ko/product/content/web-popup-content/web-content/)를 표시합니다. 콘텐츠는 사용자의 다음 페이지 조회 시 또는 이벤트 직후에 페이지 위의 팝업이나 페이지 요소 안의 인라인 블록으로 나타납니다.
규칙에 맞는 모든 방문자를 대상으로 하는 [웹 팝업 캠페인](/ko/product/messaging-channels/web-popups/)과 달리 placement는 개인화되어 있습니다. 해당 요소에 도달한 사용자만 볼 수 있으며, 설정한 기간 동안만 유지됩니다.
placement가 사용자에 대해 대기열에 추가되는 즉시 사용자는 다음 요소로 이동합니다. 사용자가 placement로 한 행동에 반응하려면 그 뒤에 [Wait for Trigger](#react-to-shows-clicks-and-closes) 요소를 추가하세요.
**Channels**에서 **Web Placement** 요소를 캔버스로 끌어온 다음 클릭하여 설정을 엽니다.
## 콘텐츠 선택
**Web pop-up content**에서 표시할 웹 콘텐츠를 선택합니다. 목록에는 Journey 애플리케이션의 웹 콘텐츠가 표시됩니다. 양식 필드(이메일 입력, 태그 입력, 동의 또는 제출)가 있는 웹 콘텐츠는 여기서 사용할 수 없습니다. 방문자 데이터를 수집하려면 [웹 양식](/ko/product/content/web-popup-content/web-forms/)이 포함된 [웹 팝업 캠페인](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/)을 사용하세요.
카탈로그의 상품을 placement에 표시하려면 콘텐츠에 [Products 블록](/ko/product/content/web-popup-content/blocks/#products)을 추가하세요.
## 유형 선택
* **Popup:** 페이지 위에 표시됩니다.
* **Inline:** 페이지 요소 안에 삽입됩니다. 다음을 설정합니다:
* **CSS selector of the element:** 블록이 들어갈 요소(예: `#cart-slot`). 최대 255자입니다. 해당 요소가 이미 사이트에 있어야 합니다.
* **Width:** 블록의 CSS 너비(예: `100%` 또는 `320px`). 요소 자체의 너비를 유지하려면 비워 둡니다.
인라인 블록은 수명이 끝나거나, 사용자가 닫거나, 숨기기 이벤트가 발생할 때까지 해당 요소가 있는 모든 페이지에 남아 있습니다. 팝업은 한 번만 표시됩니다.
다음 예에서는 요소가 **Free shipping nudge with cart items** 콘텐츠를 `#pw-cart-slot` 요소 안에 인라인 블록으로 표시합니다:
## 우선순위와 수명 설정
* **Priority:** **High**, **Medium**(기본값) 또는 **Low**. 여러 placement가 같은 요소를 대상으로 하거나 여러 팝업이 동시에 표시될 예정이면 사용자는 우선순위가 가장 높은 것을 봅니다. 우선순위가 같으면 가장 최근 것을 봅니다. 한 페이지에는 팝업이 최대 하나, 요소마다 인라인 블록이 최대 하나 표시됩니다.
* **Lifetime:** placement가 사용자를 기다리며 사이트에 머무는 시간으로, 분, 시간 또는 일 단위입니다. 1분부터 7일까지 설정할 수 있습니다. 기본값은 1시간입니다. 사용자가 수명 내에 사이트를 방문하지 않으면 placement는 표시되지 않습니다.
## 하루 팝업 표시 횟수 제한
팝업의 경우 **Show at most, times a day**를 설정합니다. 한 사용자가 하루에 이 요소의 팝업을 볼 수 있는 횟수로, 0부터 100까지입니다. `0`은 제한 없음을 의미합니다. 이 제한은 같은 사용자가 요소에 여러 번 도달할 때, 예를 들어 Journey에 다시 진입하거나 [Loop](/ko/product/customer-journey/journey-elements/flow-controls/loop/)를 통과할 때 의미가 있습니다. 인라인 블록에는 이 제한이 없습니다.
## 사용자가 placement를 닫도록 허용
**The user can close it**은 기본적으로 켜져 있습니다. placement에 닫기 버튼(✕)이 표시됩니다. 콘텐츠에서 **Close the popup** 액션이 지정된 버튼(예: **Keep shopping**)도 같은 방식으로 placement를 닫습니다. 닫힌 placement는 다시 나타나지 않으며, 닫기는 클릭이 아니라 `PW_WebPlacementDismiss`로만 집계됩니다.
이 설정이 꺼져 있으면 인라인 블록에 ✕가 없고 콘텐츠의 **Close the popup** 버튼도 표시되지 않습니다.
## placement 표시 시점 선택
**Show**에서 다음 중 하나를 선택합니다:
* **On the next page view:** 사용자가 사이트의 아무 페이지나 열면 바로 placement가 나타납니다.
* **On event:** placement는 선택한 이벤트를 기다렸다가 사용자가 이벤트를 트리거한 직후에 나타납니다. 필요하면 **Add condition**을 클릭하여 이벤트를 속성으로 필터링할 수 있습니다.
**On event** 모드에서는 사용자가 요소에 도달한 후에 전송된 이벤트만 인정됩니다. 수명 내에 이벤트가 발생하지 않으면 placement는 표시되지 않습니다.
## 이벤트 후 placement 숨기기
사용자가 주문하는 등 어떤 행동을 했을 때 사이트에서 placement를 내리려면 **Hide after an event**를 켜고 이벤트를 선택합니다. 이벤트가 발생하면 placement가 표시되었는지 여부와 관계없이 제거됩니다.
사용자가 Journey를 떠나거나 Journey가 중지되어도 해당 사용자의 placement가 제거됩니다.
## 테스트 기기에서 미리보기
Journey를 시작하기 전에 사이트에서 placement를 확인하려면:
1. **Preview**에서 애플리케이션의 [테스트 기기](/ko/product/first-steps/start-with-your-project/test-your-integration/test-devices/)를 선택합니다. 기기는 웹사이트가 열려 있는 브라우저여야 합니다.
2. **Show on test device**를 클릭합니다.
3. 해당 기기에서 사이트의 페이지를 열거나 새로 고칩니다.
미리보기는 양식의 설정을 사용하므로 Journey를 먼저 저장할 필요가 없습니다. **Show** 이벤트를 무시하고 다음 페이지 조회 시 나타납니다. 미리보기는 1시간 동안 유지되며 Journey 통계에 집계되지 않습니다.
## 표시, 클릭, 닫기에 반응하기
placement는 사용자에 대해 세 가지 이벤트를 보냅니다:
| 이벤트 | 전송 시점 |
| :---- | :---- |
| `PW_WebPlacementShow` | placement가 표시될 때. 인라인 블록은 스크롤되어 화면에 보이면 표시된 것으로 집계됩니다. |
| `PW_WebPlacementClick` | 사용자가 placement의 링크나 버튼을 클릭할 때(닫기 버튼 제외). |
| `PW_WebPlacementDismiss` | 사용자가 ✕ 또는 **Close the popup** 버튼으로 placement를 닫을 때. |
각 이벤트에는 웹 콘텐츠 코드가 담긴 `content_code` 속성이 있으므로 조건에서 placement를 구분할 수 있습니다.
이벤트 사용 방법:
* **Web Placement** 요소 뒤의 [Wait for Trigger](/ko/product/customer-journey/journey-elements/flow-controls/wait-for-trigger/) 요소에서 사용합니다. 예를 들어 `PW_WebPlacementClick`을 사용하는 **Clicked** 분기와 푸시를 보내는 **Not triggered** 분기를 만듭니다.
* Journey의 [전환 목표](/ko/product/customer-journey/journey-settings/#conversion-goals)로 사용합니다.
이벤트는 애플리케이션이 해당 이벤트를 한 번 이상 수신한 후에 이벤트 목록에 나타납니다. 시작 전에 목록에 추가하려면 테스트 기기에서 placement를 미리 보고 클릭하거나 닫으세요.
## Placement 통계
실행 중인 Journey의 캔버스와 요소 세부 정보에서 **Web Placement** 요소에는 다음이 표시됩니다:
* **Shown:** placement가 표시된 횟수.
* **Interactions:** placement가 클릭된 횟수.
두 카운터 모두 고유 사용자 수가 아니라 이벤트 합계입니다. 다섯 페이지에서 인라인 블록을 본 사용자는 표시 횟수를 5만큼 늘립니다.
## 웹사이트 설정
1. Web SDK 3.108.1 이상을 사용합니다.
2. 방문자가 로그인하면 Pushwoosh에서 해당 사용자가 가진 것과 같은 사용자 ID로 `setUserId`를 호출합니다. placement는 사용자 ID로 전달됩니다. `setUserId`가 없으면 사이트는 로그인한 사용자의 placement가 아니라 이 브라우저 자체에 대해 대기열에 추가된 placement만 받습니다.
3. 인라인 placement의 경우 블록이 들어갈 요소를 추가합니다(예: ``).
SDK가 최신 상태이면 placement는 기본적으로 켜져 있습니다. 사이트에서 placement를 무시하려면 Web SDK 가이드의 [Web placements](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#web-placements)를 참조하세요.
## 콘텐츠 선택
**Web pop-up content**에서 표시할 웹 콘텐츠를 선택합니다. 목록에는 Journey 애플리케이션의 웹 콘텐츠가 표시됩니다. 양식 필드(이메일 입력, 태그 입력, 동의 또는 제출)가 있는 웹 콘텐츠는 여기서 사용할 수 없습니다. 방문자 데이터를 수집하려면 [웹 양식](/ko/product/content/web-popup-content/web-forms/)이 포함된 [웹 팝업 캠페인](/ko/product/messaging-channels/web-popups/create-web-popups-campaigns/)을 사용하세요.
카탈로그의 상품을 placement에 표시하려면 콘텐츠에 [Products 블록](/ko/product/content/web-popup-content/blocks/#products)을 추가하세요.
## 유형 선택
* **Popup:** 페이지 위에 표시됩니다.
* **Inline:** 페이지 요소 안에 삽입됩니다. 다음을 설정합니다:
* **CSS selector of the element:** 블록이 들어갈 요소(예: `#cart-slot`). 최대 255자입니다. 해당 요소가 이미 사이트에 있어야 합니다.
* **Width:** 블록의 CSS 너비(예: `100%` 또는 `320px`). 요소 자체의 너비를 유지하려면 비워 둡니다.
인라인 블록은 수명이 끝나거나, 사용자가 닫거나, 숨기기 이벤트가 발생할 때까지 해당 요소가 있는 모든 페이지에 남아 있습니다. 팝업은 한 번만 표시됩니다.
다음 예에서는 요소가 **Free shipping nudge with cart items** 콘텐츠를 `#pw-cart-slot` 요소 안에 인라인 블록으로 표시합니다:
## 우선순위와 수명 설정
* **Priority:** **High**, **Medium**(기본값) 또는 **Low**. 여러 placement가 같은 요소를 대상으로 하거나 여러 팝업이 동시에 표시될 예정이면 사용자는 우선순위가 가장 높은 것을 봅니다. 우선순위가 같으면 가장 최근 것을 봅니다. 한 페이지에는 팝업이 최대 하나, 요소마다 인라인 블록이 최대 하나 표시됩니다.
* **Lifetime:** placement가 사용자를 기다리며 사이트에 머무는 시간으로, 분, 시간 또는 일 단위입니다. 1분부터 7일까지 설정할 수 있습니다. 기본값은 1시간입니다. 사용자가 수명 내에 사이트를 방문하지 않으면 placement는 표시되지 않습니다.
## 하루 팝업 표시 횟수 제한
팝업의 경우 **Show at most, times a day**를 설정합니다. 한 사용자가 하루에 이 요소의 팝업을 볼 수 있는 횟수로, 0부터 100까지입니다. `0`은 제한 없음을 의미합니다. 이 제한은 같은 사용자가 요소에 여러 번 도달할 때, 예를 들어 Journey에 다시 진입하거나 [Loop](/ko/product/customer-journey/journey-elements/flow-controls/loop/)를 통과할 때 의미가 있습니다. 인라인 블록에는 이 제한이 없습니다.
## 사용자가 placement를 닫도록 허용
**The user can close it**은 기본적으로 켜져 있습니다. placement에 닫기 버튼(✕)이 표시됩니다. 콘텐츠에서 **Close the popup** 액션이 지정된 버튼(예: **Keep shopping**)도 같은 방식으로 placement를 닫습니다. 닫힌 placement는 다시 나타나지 않으며, 닫기는 클릭이 아니라 `PW_WebPlacementDismiss`로만 집계됩니다.
이 설정이 꺼져 있으면 인라인 블록에 ✕가 없고 콘텐츠의 **Close the popup** 버튼도 표시되지 않습니다.
## placement 표시 시점 선택
**Show**에서 다음 중 하나를 선택합니다:
* **On the next page view:** 사용자가 사이트의 아무 페이지나 열면 바로 placement가 나타납니다.
* **On event:** placement는 선택한 이벤트를 기다렸다가 사용자가 이벤트를 트리거한 직후에 나타납니다. 필요하면 **Add condition**을 클릭하여 이벤트를 속성으로 필터링할 수 있습니다.
**On event** 모드에서는 사용자가 요소에 도달한 후에 전송된 이벤트만 인정됩니다. 수명 내에 이벤트가 발생하지 않으면 placement는 표시되지 않습니다.
## 이벤트 후 placement 숨기기
사용자가 주문하는 등 어떤 행동을 했을 때 사이트에서 placement를 내리려면 **Hide after an event**를 켜고 이벤트를 선택합니다. 이벤트가 발생하면 placement가 표시되었는지 여부와 관계없이 제거됩니다.
사용자가 Journey를 떠나거나 Journey가 중지되어도 해당 사용자의 placement가 제거됩니다.
## 테스트 기기에서 미리보기
Journey를 시작하기 전에 사이트에서 placement를 확인하려면:
1. **Preview**에서 애플리케이션의 [테스트 기기](/ko/product/first-steps/start-with-your-project/test-your-integration/test-devices/)를 선택합니다. 기기는 웹사이트가 열려 있는 브라우저여야 합니다.
2. **Show on test device**를 클릭합니다.
3. 해당 기기에서 사이트의 페이지를 열거나 새로 고칩니다.
미리보기는 양식의 설정을 사용하므로 Journey를 먼저 저장할 필요가 없습니다. **Show** 이벤트를 무시하고 다음 페이지 조회 시 나타납니다. 미리보기는 1시간 동안 유지되며 Journey 통계에 집계되지 않습니다.
## 표시, 클릭, 닫기에 반응하기
placement는 사용자에 대해 세 가지 이벤트를 보냅니다:
| 이벤트 | 전송 시점 |
| :---- | :---- |
| `PW_WebPlacementShow` | placement가 표시될 때. 인라인 블록은 스크롤되어 화면에 보이면 표시된 것으로 집계됩니다. |
| `PW_WebPlacementClick` | 사용자가 placement의 링크나 버튼을 클릭할 때(닫기 버튼 제외). |
| `PW_WebPlacementDismiss` | 사용자가 ✕ 또는 **Close the popup** 버튼으로 placement를 닫을 때. |
각 이벤트에는 웹 콘텐츠 코드가 담긴 `content_code` 속성이 있으므로 조건에서 placement를 구분할 수 있습니다.
이벤트 사용 방법:
* **Web Placement** 요소 뒤의 [Wait for Trigger](/ko/product/customer-journey/journey-elements/flow-controls/wait-for-trigger/) 요소에서 사용합니다. 예를 들어 `PW_WebPlacementClick`을 사용하는 **Clicked** 분기와 푸시를 보내는 **Not triggered** 분기를 만듭니다.
* Journey의 [전환 목표](/ko/product/customer-journey/journey-settings/#conversion-goals)로 사용합니다.
이벤트는 애플리케이션이 해당 이벤트를 한 번 이상 수신한 후에 이벤트 목록에 나타납니다. 시작 전에 목록에 추가하려면 테스트 기기에서 placement를 미리 보고 클릭하거나 닫으세요.
## Placement 통계
실행 중인 Journey의 캔버스와 요소 세부 정보에서 **Web Placement** 요소에는 다음이 표시됩니다:
* **Shown:** placement가 표시된 횟수.
* **Interactions:** placement가 클릭된 횟수.
두 카운터 모두 고유 사용자 수가 아니라 이벤트 합계입니다. 다섯 페이지에서 인라인 블록을 본 사용자는 표시 횟수를 5만큼 늘립니다.
## 웹사이트 설정
1. Web SDK 3.108.1 이상을 사용합니다.
2. 방문자가 로그인하면 Pushwoosh에서 해당 사용자가 가진 것과 같은 사용자 ID로 `setUserId`를 호출합니다. placement는 사용자 ID로 전달됩니다. `setUserId`가 없으면 사이트는 로그인한 사용자의 placement가 아니라 이 브라우저 자체에 대해 대기열에 추가된 placement만 받습니다.
3. 인라인 placement의 경우 블록이 들어갈 요소를 추가합니다(예: ``).
SDK가 최신 상태이면 placement는 기본적으로 켜져 있습니다. 사이트에서 placement를 무시하려면 Web SDK 가이드의 [Web placements](/ko/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#web-placements)를 참조하세요.