# 내장 에디터에서 인앱 메시지 만들기

Pushwoosh 내장 에디터에서 코드를 작성하지 않고 인앱 메시지 템플릿을 만드세요. 콘텐츠 블록, 이미지, 버튼, 개인화된 텍스트가 포함된 재사용 가능한 레이아웃을 얻을 수 있으며, 이를 Customer Journey, 일회성 인앱 또는 푸시에서 표시할 수 있습니다.

<Aside type="note">
시작하기 전에 Pushwoosh SDK를 통합하여 앱에 인앱 메시지가 표시되도록 하세요. [자세히 알아보기](/ko/product/messaging-channels/in-apps/)
</Aside>

## 새 인앱 템플릿 만들기

인앱 템플릿은 한 번 만들어서 캠페인에서 사용자에게 보여주는 재사용 가능한 디자인입니다. 사용자 지정 HTML ZIP을 업로드하거나 내장 에디터에서 빌드하여 만들 수 있습니다. 이 문서는 내장 에디터에서 처음부터 템플릿을 만드는 방법을 다룹니다. 기존 템플릿을 사용자 지정할 때도 동일한 단계를 따르세요.

1. **콘텐츠** → **인앱**으로 이동합니다.
2. **템플릿 추가**를 클릭합니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="템플릿 목록 오른쪽 상단에 '템플릿 추가' 버튼이 있는 콘텐츠 인앱 페이지"/>

3. 템플릿 이름을 입력합니다.
4. 템플릿 생성 방법을 선택합니다:
   * **ZIP 업로드:** HTML 인앱 메시지가 포함된 [ZIP 파일 업로드](/ko/developer/guides/content/rich-media-templates-syntax).
   * **새 템플릿 만들기:** 내장 에디터에서 템플릿을 빌드합니다.
5. **새 템플릿 만들기**를 선택합니다.
6. **템플릿 추가**를 클릭합니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="이름 필드, ZIP 업로드 옵션, '새 템플릿 만들기'가 선택된 새 템플릿 양식"/>


### 에디터 레이아웃 살펴보기

내장 에디터에는 네 가지 영역이 있습니다. 각 영역은 명확한 역할을 합니다.

**상단 바**

상단 바를 사용하여 템플릿 이름을 바꾸거나, 실수를 되돌리거나, 작업을 저장하거나, 메시지가 기기에 표시되는 방식을 변경해야 할 때 **인앱 설정**을 엽니다. [기기에서 인앱이 어떻게 보이는지 구성하기](#configure-how-the-in-app-looks-on-device)를 참조하세요.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="템플릿 이름, 실행 취소, 다시 실행, 인앱 설정, 저장이 있는 인앱 에디터의 상단 바"/>

**캔버스**

캔버스를 사용하여 사용자가 보게 될 메시지를 확인하고 레이아웃에서 직접 텍스트, 이미지, 버튼을 편집합니다. 빈 템플릿에는 **블록으로 시작**이 표시됩니다. 캔버스 위에는 휴대폰/태블릿 토글이 있어 미리보기 너비를 전환합니다. 이는 레이아웃을 변경하는 것이 아니라 미리보는 화면의 너비를 변경하는 것입니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="중앙에 '블록으로 시작' 프롬프트가 있는 인앱 에디터의 빈 캔버스" width="480"/>

**레이어**

레이어 패널은 템플릿의 모든 블록을 캔버스와 동일한 순서로 트리 구조로 나열합니다. 중첩된 블록(예: 그룹 내의 버튼)을 선택하거나 행을 드래그하여 콘텐츠 순서를 변경하고 싶을 때 왼쪽 가장자리에서 엽니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="카드, 이미지, 제목, 텍스트, 타이머, 버튼, 바닥글을 트리 구조로 나열하는 레이어 패널"/>

**오른쪽 패널**

오른쪽 패널의 **블록**을 사용하여 메시지에 콘텐츠를 추가하고, 전체 템플릿에 한 번에 적용되는 스타일링을 원할 때는 **설정**을 사용합니다. [템플릿 전체 스타일링 구성하기](#configure-template-wide-styling)를 참조하세요.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="제목, 텍스트, 버튼, 이미지 및 기타 콘텐츠 블록이 있는 오른쪽 패널의 블록 탭" width="320"/>

### 템플릿 빌드 시작하기

템플릿을 생성하면 에디터가 빈 캔버스와 오른쪽에 **블록** 탭이 열린 상태로 열립니다.

1. **블록** 패널에서 캔버스로 블록을 드래그하거나 패널에서 블록을 클릭하여 추가합니다.
2. 레이아웃이 준비될 때까지 같은 방식으로 블록을 계속 추가합니다.
3. 템플릿 전체 스타일링이 필요할 때 **설정** 탭을 엽니다.


<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="캔버스에 '블록으로 시작'이 있고 블록 패널이 열려 있는 빈 인앱 에디터"/>

### 콘텐츠 블록 추가하기

콘텐츠 블록은 내장 에디터에서 인앱 템플릿을 구성하는 요소입니다. 제목, 텍스트, 이미지, 버튼 및 기타 블록을 하나의 레이아웃으로 결합합니다.

**블록** 탭을 열고 캔버스로 블록을 드래그하거나 블록을 클릭하여 추가합니다. 사용 가능한 블록:

* **[제목](#heading-and-text):** 메시지의 제목 및 짧은 헤드라인
* **[텍스트](#heading-and-text):** 본문 및 긴 설명
* **[버튼](#button):** 탭 가능한 행동 유도 문구
* **[이미지](#image):** [미디어 스토어](/ko/product/content/media-store/)의 사진, 업로드 또는 URL
* **[구분선](#divider):** 섹션을 시각적으로 구분하는 선
* **[2열](#columns):** 나란히 있는 두 개의 동일한 열
* **[3열](#columns):** 나란히 있는 세 개의 동일한 열
* **[4열](#columns):** 나란히 있는 네 개의 동일한 열
* **[33 / 67](#columns):** 왼쪽이 너비의 약 33%, 오른쪽이 약 67%를 차지하는 두 개의 열
* **[67 / 33](#columns):** 왼쪽이 너비의 약 67%, 오른쪽이 약 33%를 차지하는 두 개의 열
* **[타이머](#countdown-timer):** 제안 및 마감일을 위한 카운트다운
* **[메뉴](#menu):** 탐색 또는 연락처와 같은 링크의 행 또는 열
* **[소셜](#social):** 소셜 프로필로 연결되는 아이콘
* **[HTML](#html):** 양식이나 내장 비디오와 같은 사용자 지정 HTML

### 제목 및 텍스트

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="스타일 및 서식 옵션을 보여주는 텍스트 서식 도구 모음이 있는 캔버스에서 선택된 제목 블록"/>

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


### 이미지

**이미지** 블록은 인앱 템플릿에 사진을 표시합니다. 캔버스에서 선택하여 오른쪽 패널에서 **이미지** 설정을 엽니다.

* **이미지 추가** / **이미지 교체:** 블록이 비어 있을 때 **이미지 추가**를 클릭하거나 사진이 이미 설정되어 있을 때 **이미지 교체**를 클릭합니다. 파일을 업로드하거나 [미디어 스토어](/ko/product/content/media-store/)에서 선택할 수 있습니다.
* **이미지 URL:** 호스팅된 이미지 링크를 붙여넣습니다.
* **대체 텍스트:** 접근성을 위해 이미지를 설명합니다.
* **링크 URL:** 이미지를 탭했을 때 웹사이트를 엽니다.
* **링크 대상:** 링크를 같은 탭 또는 새 탭에서 엽니다.
* **파일:** 이미지를 추가한 후 사용 중인 파일의 경로를 표시합니다.

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="이미지 추가, 이미지 URL, 대체 텍스트, 링크 URL, 간격 설정을 보여주는 캔버스의 빈 이미지 블록" width="600"/>

### 버튼

**버튼**은 인앱 메시지에서 탭 가능한 행동 유도 문구입니다. URL을 열거나, 사용자 지정 JavaScript를 실행하거나, 메시지를 닫는 데 사용합니다.

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

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

1. 도구 모음에서 링크 아이콘을 클릭하여 **링크 삽입/편집**을 엽니다.
2. **작업 유형**을 선택합니다.
3. 해당 작업에 대한 필드를 채웁니다(아래 참조).
4. **저장**을 클릭합니다.

#### 웹사이트 열기

**웹사이트 열기**는 사용자가 버튼을 탭했을 때 링크를 엽니다. **URL**에 주소를 입력합니다. 입력할 수 있는 내용:

* 웹사이트: `https://example.com`
* 앱 내 화면을 여는 앱 링크: `myapp://promo`
* JavaScript 없이 인앱 닫기: `pushwoosh://close`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="작업 유형이 '웹사이트 열기'이고 URL 필드가 있는 버튼의 링크 삽입/편집 대화상자"/>

#### 사용자 지정 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(...)`: 예를 들어 Customer Journey를 시작하기 위해 [사용자 지정 이벤트](/ko/product/audience-data-and-segmentation/events/custom-events/)를 보냅니다.
* `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-17.webp" alt="문서, 팝업, 블록 및 열에 대한 기본 스타일 섹션이 있는 설정 탭" width="320"/>

사용 가능한 섹션:

* **문서:** 전체 메시지 영역의 크기 및 모양: 너비, 패딩, 배경색 또는 이미지, 텍스트 색상, 글꼴 계열 및 블록 사이의 간격.
* **팝업:** 어두운 배경 위에 메시지가 어떻게 위치하는지: 모서리 반경, 오버레이 색상 및 불투명도.
* **블록 기본값:** 나중에 추가하는 블록에 대한 공유 시작 스타일로, 캔버스에서 블록을 재정의할 때까지 새 콘텐츠가 템플릿과 일치하도록 합니다.
* **열 기본값:** 모든 열 레이아웃의 간격: 외부 패딩, 각 열 내부의 패딩 및 열 사이의 간격.
* **카드 기본값:** 레이아웃에서 콘텐츠를 그룹화하는 카드 컨테이너의 시작 모양으로, 카드를 개별적으로 스타일링할 때까지 적용됩니다.
* **버튼 그룹 기본값:** 여러 버튼이 그룹으로 함께 있을 때의 간격 및 정렬.
* **버튼 기본값:** 새 버튼 블록의 시작 모양으로, CTA가 템플릿 전체에서 일관성을 유지하도록 하며, 개별적으로 스타일링할 때까지 적용됩니다.
* **구분선 기본값:** 새 구분선 블록의 시작 선 스타일, 색상, 두께 및 너비.

기본값은 개별 블록이 재정의하지 않는 모든 곳에 적용됩니다.


<Aside type="note">
높이 설정은 없습니다. 팝업은 콘텐츠에 따라 커집니다. 전체 화면 메시지의 경우 **설정**에서 **너비**를 설정하고 **인앱 설정**에서 **전체 화면**을 선택하세요.
</Aside>

## 템플릿 현지화하기

다국어 템플릿은 하나의 인앱 디자인에 각 언어에 대한 현지화된 문구를 저장합니다. 캔버스 위의 언어 전환기를 사용하여 언어를 추가하고 언어별로 콘텐츠를 편집합니다. 채널 전반에 걸친 다국어 메시징 작동 방식에 대해서는 [다국어 메시징](/ko/product/personalization/multi-language/)을 참조하세요.

현재 언어에 대해 아직 번역하지 않은 콘텐츠는 흐리게 표시됩니다. 입력을 시작하여 번역을 생성합니다. 그렇게 할 때까지 기본 언어가 계속 표시됩니다.

<Aside type="note">
추가하는 모든 블록은 모든 언어에 대해 동일한 콘텐츠로 나타납니다. 템플릿에서 사용하는 모든 언어에 대해 새 텍스트 및 버튼 레이블을 번역하는 것을 잊지 마세요.
</Aside>

## 기기에서 인앱이 어떻게 보이는지 구성하기

**인앱 설정**은 메시지가 기기에서 어떻게 나타나고 동작하는지를 제어합니다: 위치, 애니메이션, 스와이프 제스처 및 닫기 버튼. 이 설정은 iOS 및 Android Native에만 적용됩니다.

상단 바에서 **인앱 설정**을 클릭합니다:

* **화면 위치:** 전체 화면, 상단, 중앙 또는 하단.
* **표시 애니메이션** / **닫기 애니메이션:** 없음, 페이드, 왼쪽, 오른쪽, 위 또는 아래, 또는 앱의 SDK 기본값을 사용하려면 기본값.

<Aside type="note">
**없음**과 **페이드**는 현재 Android에서 작동합니다. iOS에서는 메시지가 즉시 나타나고 사라집니다(정렬은 곧 제공될 예정입니다).
</Aside>

* **애니메이션 지속 시간(MS):** 100 ~ 3000 밀리초. SDK 기본 타이밍을 사용하려면 비워 둡니다.
* **스와이프로 닫기:** 왼쪽, 오른쪽, 위, 아래의 조합을 활성화합니다.
* **닫기 버튼 표시:** 닫기 컨트롤을 켜거나 끕니다. 켜져 있을 때 **위치**(오른쪽 상단, 왼쪽 상단, 오른쪽 하단, 왼쪽 하단), **배경**(색상 또는 **투명**), **아이콘 색상**을 설정합니다. 이 모달의 다른 설정과 달리 닫기 버튼의 모양은 메시지 자체에 렌더링되며 iOS 및 Android Native뿐만 아니라 모든 플랫폼에 표시됩니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="위치, 애니메이션, 스와이프하여 닫기, 닫기 버튼 옵션이 있는 인앱 설정 모달"/>

**적용**을 클릭하여 선택 사항을 저장하거나 **취소**를 클릭하여 취소합니다.

## 템플릿 저장하기

상단 바에서 **저장**을 클릭하여 변경 사항을 저장합니다. 상단 바의 **실행 취소**/**다시 실행**을 사용하여 편집 내용을 앞뒤로 이동합니다.

<Aside type="note">
저장하면 인앱 템플릿이 **콘텐츠** → **인앱**에 저장됩니다. 여기에서 템플릿을 미리 보고, 편집하고, 관리할 수 있습니다. [자세히 알아보기](/ko/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## 저장된 템플릿 사용하기

인앱 템플릿을 저장한 후에는 Customer Journey, 일회성 인앱 또는 사용자가 푸시를 탭했을 때 사용자에게 표시할 수 있습니다.

* [고객 여정의 일부로 인앱 표시하기](/ko/product/customer-journey/journey-elements/#in-app)
* [클릭 시 인앱을 여는 푸시 보내기](/ko/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
* [사용자에게 단일 인앱 표시하기](/ko/product/messaging-channels/in-apps/)