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

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)합니다.
   * **네이티브 리치 미디어 만들기:** SDK 렌더링 네이티브 인앱을 빌드합니다. [자세히 알아보기](/ko/product/content/in-apps/create-native-in-app-messages/)
5. **새 템플릿 만들기**를 선택합니다.
6. **템플릿 추가**를 클릭합니다.

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="이름 필드, 새 템플릿 만들기 선택, ZIP 업로드 및 네이티브 리치 미디어 만들기 옵션이 있는 새 템플릿 추가 대화 상자"/>

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

내장 에디터는 네 가지 영역으로 구성되어 있습니다. 각 영역은 명확한 역할을 합니다.

### 상단 바

상단 바는 템플릿 전체를 관리하는 곳입니다: 이름, 실행 취소 기록, 저장 상태, 기기에서의 모양(**인앱 설정**), 언어(**자동 번역** 및 언어 전환기), 휴대폰 또는 데스크톱 미리보기 너비. [기기에서 인앱이 어떻게 보이는지 구성하기](/ko/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) 및 [템플릿 현지화하기](#localize-the-template)를 참조하세요.

<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-44.webp" alt="휴대폰 및 데스크톱 토글, 다시 시작, 그리고 이미지, 제안 텍스트, 타이머 및 요청 버튼을 보여주는 인앱 메시지가 있는 미리보기 패널" width="480"/>

미리보기에서 작동하는 기능:

* 버튼과 다중 화면 플로우는 실제로 실행됩니다.
* 링크와 딥 링크는 열리지 않고 보고됩니다.
* SDK 호출 및 열기/클릭 통계는 비활성화됩니다.
* 언어는 언어 전환기와 일치합니다. 병합 태그는 플레이스홀더로 유지됩니다.

미리보기 헤더에서 휴대폰과 데스크톱 간에 전환하여 두 레이아웃을 모두 볼 수 있습니다. **다시 시작**을 클릭하여 메시지를 처음부터 다시 표시합니다. 미리보기를 종료하려면 Esc 키를 누르거나 패널 외부를 클릭하세요.

#### 브랜드 북

* **브랜드 북:** 계정 [브랜드 북](/ko/product/content/brand-book/)을 엽니다.
* **브랜드 북 스타일 적용:** 템플릿을 브랜드 북과 일치하도록 스타일을 다시 지정합니다(브랜드 북을 설정한 후).
* **사용자 지정 스타일 재설정:** 템플릿의 스타일 재정의를 제거하고 기본값으로 돌아갑니다.


### 캔버스

캔버스에서 메시지를 편집합니다: 텍스트, 이미지, 버튼을 클릭하여 변경합니다. 상단 바의 휴대폰/데스크톱 토글을 사용하여 각 너비에서 레이아웃이 어떻게 보이는지 확인합니다. 토글은 레이아웃 자체가 아닌 미리보기만 변경합니다.

### 레이어

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

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

### 오른쪽 패널

세 개의 탭 간에 전환합니다:

* **블록:** 메시지에 콘텐츠를 추가합니다. [인앱 에디터 블록 참조](/ko/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/)를 참조하세요.
* **설정:** 전체 템플릿에 한 번에 스타일을 적용합니다. [인앱 템플릿 설정 구성](/ko/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)을 참조하세요.
* **AI:** AI 어시스턴트와 채팅하여 프롬프트에서 콘텐츠를 생성하거나 편집합니다.

<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="캔버스에 블록으로 시작하고 블록 패널이 열려 있는 빈 인앱 에디터"/>

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

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

각 블록의 설정에 대해서는 [인앱 에디터 블록 참조](/ko/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/)를, [블록 저장 및 재사용 방법](/ko/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks)을 참조하세요.

### 특정 사용자에게 블록 표시하기

모든 사용자가 동일한 블록을 볼 필요는 없습니다. 블록에 **표시 조건**을 설정하여 사용자의 [태그](/ko/product/audience-data-and-segmentation/user-data-tags/tags/)에 따라 표시하거나 숨길 수 있습니다. 여전히 하나의 템플릿을 보내지만, 각 사용자는 자신에게 적용되는 부분만 보게 됩니다.

캔버스에서 블록을 선택하고 오른쪽 패널에서 **표시 조건**을 연 다음 **이 블록을 조건부로 표시**를 켭니다. [자세히 알아보기](/ko/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)

## 템플릿 현지화하기

다국어 템플릿은 하나의 인앱 디자인에 각 언어에 대한 현지화된 사본을 저장합니다. 상단 바의 언어 전환기를 사용하여 언어를 추가하고 언어별로 콘텐츠를 편집합니다. **자동 번역**을 클릭하여 번역을 생성합니다. 채널 전반에 걸쳐 다국어 메시징이 작동하는 방식에 대해서는 [다국어 메시징](/ko/product/personalization/multi-language/)을 참조하세요.

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

## 템플릿 설정 구성하기

메시지를 스타일링하고 배치하는 두 곳을 사용합니다:

* **설정** 탭(오른쪽 패널): 문서 크기, 색상, 타이포그래피 및 블록의 기본 스타일.
* **인앱 설정**(상단 바): 화면에서의 위치, 애니메이션 및 닫기 버튼.

[자세히 알아보기](/ko/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)

## 템플릿 저장하기

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

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