# 인앱 에디터 블록 참조

[내장 에디터](/ko/product/content/in-apps/no-code-in-app-editor/create-rich-media-in-the-built-in-editor/) 캔버스에 추가할 수 있는 모든 블록에 대한 참조입니다.

각 블록 유형은 메시지에서 다른 목적을 수행합니다:

* **[제목](#heading-and-text):** 제목 및 짧은 헤드라인
* **[텍스트](#heading-and-text):** 본문 및 긴 설명
* **[버튼](#button):** 탭할 수 있는 클릭 유도 문구
* **[이미지](#image):** [미디어 스토어](/ko/product/content/media-store/)의 사진, 업로드 또는 URL
* **[비디오](#video):** YouTube 또는 Vimeo 비디오를 여는 탭 가능한 비디오 썸네일
* **[카드](#card):** 이미지, 제목, 텍스트, 버튼이 하나의 레이아웃에 포함된 카드
* **[구분선](#divider):** 섹션을 구분하는 선
* **[열](#columns):** 나란히 배치된 레이아웃 (2, 3 또는 4개의 동일한 열, 또는 33/67 및 67/33 분할)
* **[타이머](#countdown-timer):** 제안 및 마감일을 위한 카운트다운
* **[메뉴](#menu):** 탐색 또는 연락처 링크의 행 또는 열
* **[소셜](#social):** 소셜 프로필로 연결되는 아이콘
* **[HTML](#html):** 양식, 설문조사 또는 임베디드 비디오와 같은 사용자 지정 HTML
* **[제품](#products):** [제품 카탈로그](/ko/product/content/product-catalog/) 또는 사용자의 장바구니에 담긴 상품의 제품 카드 그리드

## 에디터 블록 구성 방법

**블록** 탭에서 블록을 캔버스로 드래그하거나 클릭하여 끝에 추가합니다. 블록을 선택하여 오른쪽 패널에서 설정을 열고 콘텐츠, 링크, 크기 및 간격을 구성합니다.

<Aside type="tip">
모든 블록에는 **가시성** 및 **표시 조건** 설정도 있습니다. 이를 사용하여 휴대폰이나 데스크톱에서 블록을 숨기거나 특정 사용자에게만 표시할 수 있습니다. [자세히 알아보기](/ko/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
</Aside>

### 제목 및 텍스트

**제목** 및 **텍스트** 블록은 사용자가 인앱 메시지에서 읽는 문구를 담습니다. 캔버스에서 텍스트를 편집하고 도구 모음으로 서식을 지정합니다.

**제목** 또는 **텍스트** 블록을 클릭하여 캔버스에서 문구를 편집합니다. 텍스트를 선택하면 서식 도구 모음이 나타납니다: 굵게, 기울임꼴, 밑줄, 정렬, 링크 버튼 및 **텍스트 스타일** 드롭다운.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="캔버스에서 제목 블록이 선택되어 있고 텍스트 서식 도구 모음에 스타일 및 서식 옵션이 표시됨"/>

Merge Tags는 사용자의 프로필에서 [Tag](/ko/product/audience-data-and-segmentation/user-data-tags/tags/) 값을 메시지에 삽입하는 자리 표시자로, 각 구독자가 개인화된 문구를 볼 수 있도록 합니다. 추가하려면 텍스트를 선택하고 도구 모음에서 **Merge Tags**를 클릭한 다음 계정에서 Tag를 선택합니다. [개인화된 인앱 메시지에 대해 자세히 알아보기](/ko/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### 이미지

**이미지** 블록은 인앱 템플릿에 사진을 표시합니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-40.webp" alt="캔버스의 이미지 블록과 이미지 설정에 이미지 교체, 이미지 URL, 대체 텍스트, AI로 대체 텍스트 생성, 프롬프트, 너비, 높이, 모서리 반경 및 정렬이 표시됨" width="600"/>


캔버스에서 선택하여 오른쪽 패널에서 **이미지** 설정을 엽니다.

* **이미지 추가** / **이미지 교체:** 블록이 비어 있을 때 **이미지 추가**를 클릭하거나 사진이 이미 설정되어 있을 때 **이미지 교체**를 클릭합니다. 파일을 업로드하거나 [미디어 스토어](/ko/product/content/media-store/)에서 하나를 선택할 수 있습니다.
* **이미지 URL:** 호스팅된 이미지 링크를 붙여넣습니다.
* **대체 텍스트:** 접근성을 위해 이미지를 설명합니다.
* **프롬프트:** **AI로 생성**을 사용하여 만든 이미지에 대한 AI 생성 프롬프트입니다.
* **너비 (px)** / **높이 (px):** 이미지를 픽셀 크기로 고정합니다. 필드를 비워두면 자동으로 크기가 조정됩니다.
* **모서리 반경 (px):** 이미지의 모서리를 둥글게 만듭니다.
* **정렬:** 왼쪽, 가운데 또는 오른쪽.

**링크**에서 **액션 유형**(예: **웹사이트 열기** 또는 **URL 또는 딥링크**)과 해당 **URL**을 설정하여 이미지를 탭했을 때 무언가를 열고, **링크 대상**을 설정하여 동일한 탭이나 새 탭에서 열도록 합니다.

**간격**에서 **패딩**을 켜서 이미지 주위에 공간을 추가합니다. 모든 면에 동일한 패딩을 적용하려면 **모든 면**을 사용하거나, **추가 옵션**을 켜서 각 면을 개별적으로 설정합니다.

### 비디오

**비디오** 블록은 YouTube 또는 Vimeo 비디오를 탭 가능한 썸네일로 메시지에 추가합니다. 메시지에는 ▶ 오버레이가 있는 정지 이미지가 표시됩니다. 이를 탭하면 YouTube 또는 Vimeo 앱이나 브라우저에서 비디오가 열립니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-38.webp" alt="캔버스의 비디오 블록과 비디오 설정에 비디오 URL, 대체 텍스트, 썸네일 교체, 썸네일 URL 및 재생 버튼 오버레이가 표시됨" width="600"/>

캔버스에서 블록을 선택하여 설정을 엽니다:

* **비디오 URL:** YouTube 또는 Vimeo 링크를 붙여넣습니다. 에디터가 자동으로 썸네일을 가져옵니다.
* **대체 텍스트:** 접근성을 위해 비디오를 설명합니다.
* **썸네일 URL:** 자동으로 가져온 썸네일을 유지하거나, **썸네일 추가** / **썸네일 교체**를 클릭하여 [미디어 스토어](/ko/product/content/media-store/)에서 하나를 선택하거나, 호스팅된 링크를 직접 붙여넣습니다.
* **재생 버튼 오버레이:** 기본적으로 켜져 있습니다. ▶ 오버레이 없이 일반 썸네일을 표시하려면 끕니다.
* **너비 (px)**, **모서리 반경 (px)** 및 **정렬:** 썸네일의 모양과 레이아웃에서의 위치를 제어합니다.


### 카드

**카드** 블록은 이미지와 제목, 텍스트, 버튼을 하나의 기성 레이아웃으로 짝을 이루므로 네 개의 개별 블록을 수동으로 배치하고 정렬할 필요가 없습니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-37.webp" alt="캔버스의 카드 블록과 카드 설정에 레이아웃, 이미지 교체, 이미지 URL, 대체 텍스트, 프롬프트, 패딩 및 모서리 반경이 표시됨" width="600"/>

* **레이아웃:** 콘텐츠를 기준으로 이미지가 어느 쪽에 위치할지 선택하거나 **이미지 주위로 텍스트 줄 바꿈**을 켭니다.
* **이미지:** 이미지를 추가 또는 교체하고, 대체 텍스트를 설정하고, AI 생성 **프롬프트**를 편집하고, **패딩**을 추가하고, **모서리 반경 (px)**을 설정합니다.
* **크기 및 맞춤:** 이미지의 **너비**, **높이**, **자르기**(원본 또는 고정 비율) 및 **맞춤**(커버 또는 초점)을 설정합니다. 정확한 필드는 선택한 **레이아웃**에 따라 다릅니다.
* **링크:** 전체 카드를 탭했을 때 URL을 열도록 합니다.

카드의 제목, 텍스트 및 버튼은 독립형 [제목, 텍스트](#heading-and-text) 및 [버튼](#button) 블록을 편집하는 것과 동일한 방식으로 편집합니다.

### 버튼

**버튼**은 인앱 메시지에서 탭할 수 있는 클릭 유도 문구입니다. 이를 사용하여 URL을 열거나, 사용자 지정 JavaScript를 실행하거나, 메시지를 닫을 수 있습니다.

**버튼** 블록을 클릭하여 캔버스에서 레이블을 편집합니다. 도구 모음을 사용하여 글꼴 크기, 텍스트 색상, 굵게, 기울임꼴, 밑줄 및 정렬을 변경합니다.

사용자가 버튼을 탭했을 때 발생하는 작업을 설정하려면:

1. 도구 모음에서 링크 아이콘을 클릭하여 **링크 삽입/편집**을 엽니다.
2. **액션 유형**을 선택합니다: **웹사이트 열기**, **URL 또는 딥링크** 또는 **사용자 지정 Javascript**.
3. 해당 작업에 대한 필드를 채웁니다(아래 참조).
4. **저장**을 클릭합니다.

#### 웹사이트 열기

**웹사이트 열기**는 사용자가 버튼을 탭했을 때 웹 페이지를 엽니다. **URL**에 주소를 입력합니다(예: `https://example.com`).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="버튼에 대한 링크 삽입 편집 대화 상자, 액션 유형은 웹사이트 열기이고 URL 필드가 있음"/>

#### URL 또는 딥링크

**URL 또는 딥링크**는 사용자가 버튼을 탭했을 때 링크 또는 딥링크를 엽니다. **URL**에 주소를 입력합니다(예: 앱 화면: `myapp://screen`).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-45.webp" alt="버튼 도구 모음에 링크 삽입 편집 대화 상자가 열려 있고, 액션 유형은 URL 또는 딥링크이며, URL은 myapp://screen으로 설정됨"/>

#### 사용자 지정 JavaScript 실행

**사용자 지정 Javascript**는 사용자가 버튼을 탭했을 때 코드를 실행합니다. **onClick** 필드에 코드를 입력합니다.

탭이 링크를 여는 것뿐만 아니라 Pushwoosh에서 무언가를 해야 할 때 사용합니다. 앱의 사용자는 여전히 일반 버튼을 봅니다. 그들은 태그나 이벤트를 보지 않습니다. 화면에서 다음에 일어날 일은 사용자가 결정합니다: 메시지를 열어 두거나 동일한 **onClick**에서 닫습니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="버튼에 대한 링크 삽입 편집 대화 상자, 액션 유형은 사용자 지정 Javascript이고 onClick은 closeInApp으로 설정됨"/>

**onClick에서 사용 가능한 메서드**

* `pushwoosh.closeInApp()`: 인앱 메시지를 닫습니다. 탭 후 메시지를 열어 두려면 생략합니다.
* `pushwoosh.sendTags({...})`: 나중 캠페인을 위해 값을 [기기 태그](/ko/product/audience-data-and-segmentation/user-data-tags/tags/)로 저장합니다.
* `pushwoosh.postEvent(...)`: [사용자 지정 이벤트](/ko/product/audience-data-and-segmentation/events/custom-events/)를 보냅니다(예: Customer Journey 시작).
* `pushwoosh.getTags(...)`: 현재 태그를 읽습니다. 사용자 지정 HTML에서 메시지가 표시하는 내용을 변경하는 데 유용합니다.
* `pushwoosh.getCustomData()`: 이 인앱을 연 푸시에서 전달된 사용자 지정 데이터를 읽습니다.

##### 예: 사용자가 관심사를 선택하고 나중 캠페인을 위해 저장하도록 하기

1. **텍스트** 또는 **제목** 블록에 질문을 추가합니다(예: "어떤 스포츠에 관심이 있으신가요?").
2. 옵션당 하나의 **버튼**을 추가합니다(예: **요가** 및 **헬스**).

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="요가 및 헬스 버튼이 있는 인앱 템플릿과 요가 버튼에 대한 사용자 지정 Javascript onClick"/>

3. 각 버튼에 대해 **액션 유형**을 **사용자 지정 Javascript**로 설정합니다.
4. **요가** 버튼의 경우 **onClick**에 다음을 붙여넣습니다:

```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```

5. **헬스** 버튼의 경우 **onClick**에 다음을 붙여넣습니다:

```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```


사용자가 **요가**를 탭하면 Pushwoosh는 기기에 `interest` 태그를 쓰고 인앱을 닫습니다. 그런 다음 [세그먼트](/ko/product/audience-data-and-segmentation/segmentation/) 또는 [Customer Journey](/ko/product/customer-journey/journey-elements/#in-app)에서 해당 사용자를 타겟팅할 수 있습니다.

<LinkCard title="JavaScript로 인앱을 만드는 방법에 대해 자세히 알아보기" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### 구분선

**구분선**은 콘텐츠 블록 사이의 수평선입니다. 템플릿에서 시각적으로 섹션을 구분하는 데 사용합니다.

설정 패널에서 **선 스타일**(실선, 파선, 점선), **색상**, **두께** 및 **너비**를 구성합니다.

### HTML

**HTML** 블록을 사용하면 사용자 지정 HTML을 인앱 템플릿에 붙여넣을 수 있습니다. 인앱 메시지 전용 양식 블록이 없을 때 사용자 지정 양식, 설문조사 또는 임베디드 비디오에 사용합니다.


##### 예시

아래 예시는 인앱 템플릿에서 HTML 블록을 사용하는 일반적인 방법을 보여줍니다: 리드 양식, 설문조사 및 임베디드 비디오.

<Aside type="note">
양식 및 설문조사 예시는 기기 태그를 저장하고 Pushwoosh를 통해 이벤트를 보냅니다. 캠페인에서 사용하기 전에 계정에서 사용자 지정 이벤트를 생성하십시오.
</Aside>

<Tabs>
<TabItem label="리드 양식">

이 리드 양식은 이름과 이메일을 태그로 쓰고, `promo_requested` 이벤트를 보내고, 감사 메시지를 표시한 다음 인앱을 닫습니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="인앱 에디터의 HTML 리드 양식, 이름과 이메일 필드 및 코드 보내기 버튼이 있음" width="360"/>

<details>
<summary>HTML 코드</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="설문조사">

이 설문조사는 선택한 운동 시간을 태그로 저장하고, `schedule_survey_completed` 이벤트를 보내고, 감사 메시지를 표시한 다음 인앱을 닫습니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="인앱 에디터의 HTML 설문조사, 사용자가 선호하는 운동 시간을 묻고 네 가지 시간 옵션이 있음" width="360"/>

<details>
<summary>HTML 코드</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="비디오">

이 예시는 YouTube 비디오를 인앱 메시지에 임베드합니다.

<details>
<summary>HTML 코드</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>
```


</details>

</TabItem>
</Tabs>



### 메뉴

**메뉴** 블록은 여러 개의 클릭 가능한 항목을 행이나 열에 배치합니다. 탐색 모음이나 회사 연락처 목록에 사용합니다.

각 메뉴 항목에 대해 다음을 설정합니다:

* **레이블:** 사용자가 보는 텍스트
* **URL:** 항목이 열리는 위치
* **대상:** 동일한 탭 또는 새 탭

블록 설정에서 다음을 설정할 수도 있습니다:

* **방향:** 가로 또는 세로
* **정렬:** 왼쪽, 가운데 또는 오른쪽
* **구분 기호:** 항목 사이에 선택적 구분선
* 글꼴, 크기, 굵기, 글자 간격 및 링크/텍스트 색상

### 소셜

**소셜** 블록은 프로필에 연결되는 소셜 미디어 아이콘 행을 표시합니다. 인앱 메시지에서 사용자를 Facebook, Instagram, X 및 기타 플랫폼으로 보내는 데 사용합니다.

플랫폼 항목을 추가한 다음 정렬, 아이콘 크기 및 아이콘 사이의 간격을 설정합니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="TikTok, Instagram, Facebook 링크와 정렬, 아이콘 크기, 간격이 있는 소셜 블록 설정" width="320"/>

### 카운트다운 타이머

**타이머** 블록은 인앱 메시지의 카운트다운입니다. 기간 한정 제안, 깜짝 세일 및 이벤트 알림에 사용합니다.

설정 방법:

1. **카운트다운**에서 **종료 날짜**와 **종료 시간**을 설정한 다음, 타이머 레이블에 대한 **시간대**와 **언어**를 선택합니다.
2. **레이블**을 켜서 숫자 아래에 "일 / 시간 / 분 / 초" 캡션을 표시하거나, 숫자만 표시하려면 끕니다.
3. **모양**에서 **배경**, **숫자 색상**, **레이블 색상** 및 숫자(기본 40px)와 레이블(기본 16px)의 글꼴 크기를 설정합니다.
4. 필요에 따라 **간격**(패딩)을 조정합니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="카운트다운 종료 날짜 및 시간, 레이블, 모양 및 간격 옵션이 있는 타이머 블록 설정"/>

### 열

**열**은 캔버스를 나란히 있는 섹션으로 분할하여 한 행에 콘텐츠를 서로 옆에 배치할 수 있도록 합니다.

다음 블록 중 하나를 캔버스로 드래그합니다:

* **2열:** 두 개의 동일한 열
* **3열:** 세 개의 동일한 열
* **4열:** 네 개의 동일한 열
* **33 / 67:** 왼쪽 열 약 33% 너비, 오른쪽 약 67%
* **67 / 33:** 왼쪽 열 약 67% 너비, 오른쪽 약 33%

그런 다음 각 열에 콘텐츠를 추가합니다. 템플릿의 모든 열에 대한 간격을 변경하려면 **설정** → **열 기본값**을 열고 외부 패딩, 열 패딩 및 열 사이의 간격을 조정합니다.

### 제품

**제품** 블록은 하나의 공유 템플릿에서 제품 카드 그리드를 표시합니다. 각 카드에는 이미지, 제목, 설명, 가격 및 구매 버튼이 포함될 수 있습니다. 템플릿은 모든 제품에 대해 반복됩니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-47.webp" alt="이미지, 제목, 설명, 가격 및 지금 쇼핑하기 버튼이 표시된 두 개의 제품 카드가 있는 제품 블록"/>

설정 패널의 **소스**에서 제품의 출처를 선택합니다:

* **수동:** 제품을 직접 입력하거나 **카탈로그에서 선택...**을 클릭하여 [제품 카탈로그](/ko/product/content/product-catalog/)에서 ID로 특정 항목을 선택합니다. 동일한 블록에서 둘 다 혼합할 수 있습니다.
* **카탈로그 규칙:** 메시지가 표시될 때 카탈로그에서 최신 정보로 확인된 카테고리 및 정렬 순서에 따라 제품을 자동으로 가져옵니다.
* **장바구니:** 각 사용자의 현재 장바구니에 담긴 상품을 표시합니다. [장바구니 포기 캠페인 설정 방법](/ko/product/how-to-guides/lifecycle-marketing-campaigns/how-to-set-up-an-abandoned-cart-campaign/)

<Aside type="note">
**카탈로그 규칙** 및 **장바구니**는 플랜에 **콘텐츠 템플릿**이 필요하며, [API 액세스 토큰](/ko/developer/api-reference/api-access-token/)(**설정 → API 액세스**)이 필요합니다. **소스** 선택기가 이들 중 하나로 전환되지 않거나 블록이 제품을 렌더링하지 않는 경우, 지원팀이나 계정 관리자에게 문의하거나 토큰을 생성하고 소스를 다시 선택하십시오.
</Aside>

소스를 선택했으면 다음 설정으로 그리드와 카드의 모양을 제어합니다:

* **제품 수**(또는 **장바구니**의 경우 **최대 표시 제품 수**): 표시할 카드 수.
* **열:** 행당 1, 2 또는 3개의 카드.
* **간격:** 카드 사이의 공간.
* **설명 제한:** 카드가 일관된 크기를 유지하도록 설명 텍스트가 잘리는 문자 제한.
* **카드 템플릿:** 레이아웃을 선택한 다음 모든 카드에 대해 **카드 배경**, **카드 모서리 반경** 및 **콘텐츠 패딩**을 설정합니다.

## 블록 저장 및 재사용

블록을 저장하여 매번 다시 만들지 않고 이 템플릿이나 다른 인앱 템플릿에서 재사용할 수 있습니다.

1. 캔버스에서 블록을 선택합니다.
2. 블록의 도구 모음에서 북마크 아이콘(**재사용을 위해 블록 저장**)을 클릭하고 이름을 지정합니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-42.webp" alt="위로 이동, 아래로 이동, 복제, 삭제, 재사용을 위해 블록 저장 및 AI에게 묻기 아이콘이 있는 카드 블록 도구 모음"/>

저장된 블록은 **블록** 탭 하단의 **저장된 블록** 아래에 나타납니다.

* 저장된 블록을 캔버스로 드래그하거나 클릭하여 템플릿의 끝에 추가합니다.
* 저장된 블록의 타일에서 **×**를 클릭하여 삭제합니다.

### 사본 동기화 유지

블록을 저장할 때 **사본 동기화 유지**를 켜서 삽입된 모든 사본을 동일한 소스에 연결합니다. 소스를 한 번 편집하면 해당 블록이 사용되는 모든 곳에 변경 사항이 적용됩니다.

동기화된 사본은 캔버스에서 잠겨 있습니다. 직접 편집할 수 없습니다. 사본을 선택하여 설정을 엽니다:

* **동기화된 블록 편집:** 이 사본의 잠금을 해제하여 변경할 수 있도록 합니다. 상단에 배너가 나타납니다. **모두에게 적용**을 클릭하여 변경 사항을 소스 및 다른 모든 사본에 저장하거나, **취소**를 클릭하여 변경 사항을 취소합니다. 한 번에 하나의 동기화된 블록만 잠금 해제할 수 있습니다.
* **소스에서 업데이트:** 이 사본을 소스의 최신 버전으로 교체합니다.
* **소스에서 분리:** 이 사본을 소스에서 연결 해제하여 자체적으로 편집할 수 있도록 합니다.

<Aside type="note">
인앱 템플릿을 열 때마다 Pushwoosh는 동기화된 사본을 확인하고 오래된 사본을 업데이트합니다. 토스트 메시지로 새로고침된 수를 표시합니다. 소스에 최신 콘텐츠가 있는 경우, 템플릿을 다시 열거나 **소스에서 업데이트**를 클릭할 때까지 사본의 설정에 경고가 표시됩니다. 소스가 삭제된 경우, 사본은 마지막 콘텐츠를 유지하며 **소스에서 분리**만 할 수 있습니다.
</Aside>