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

YouTube 동영상: 사용하기 쉬운 에디터에서 코딩 없이 인앱 만들기

새 템플릿 추가

인앱 템플릿을 만들려면 콘텐츠(Content) → **인앱(In-apps)**으로 이동하여 **템플릿 추가(Add template)**를 클릭하세요:

여기에서는 두 가지 방법으로 템플릿을 만들 수 있습니다:

1. ZIP 업로드 — HTML 인앱 메시지가 포함된 ZIP 파일을 업로드합니다.
2. 새 템플릿 만들기 — 시각적 에디터에서 템플릿을 만듭니다. 생성 후에는 미리 만들어진 템플릿이나 빈 템플릿으로 시작할 수 있습니다.

이 문서에서는 처음부터 템플릿을 만드는 방법을 살펴보겠습니다. 기존 템플릿을 사용자 정의하려면 동일한 단계를 따르세요.

템플릿 이름을 입력하고 **새 템플릿 만들기(Create new template)**를 선택한 다음 **템플릿 추가(Add template)**를 클릭하세요:

기본 템플릿을 기반으로 새 인앱 메시지 페이지를 만들거나 빈 템플릿을 선택하여 처음부터 시작할 수 있습니다.

일반 템플릿 설정

콘텐츠 블록을 추가하기 전에 팝업(Popup) 탭에서 템플릿을 구성하세요:

• 화면에서 팝업 위치를 설정합니다.
• 팝업 너비와 높이를 변경합니다.
• 테두리 둥글기를 조정합니다.
• 전체 템플릿에 대한 콘텐츠 설정 구성: 정렬, 너비, 글꼴 및 색상.
• 배경색을 설정하거나 배경 이미지를 추가합니다.
• 닫기 버튼의 위치와 모양을 사용자 정의합니다.

전체 화면 및 부분 화면 인앱은 동일한 에디터를 사용합니다. 아래에서 형식을 선택하고 팝업 너비와 높이를 일치하도록 설정하세요.

전체 화면 인앱 메시지

온보딩, 페이월, 오퍼월과 같은 프로모션에 전체 화면 인앱을 사용하세요.

팝업(Popup) 탭에서 너비와 높이를 대상 기기 화면 크기에 가깝게 설정하여 메시지가 디스플레이의 대부분을 덮도록 합니다.

전체 화면 인앱을 위한 이미지 권장 사항 (세로 방향)

이미지 및 텍스트	고해상도: 1200 x 1000 px 최소 크기: 600 x 500 px 종횡비: 6:5
이미지만	고해상도: 1200 x 2000 px 최소 크기: 600 x 1000 px 종횡비: 3:5

참고

네이티브 iOS 및 Android 앱의 경우 설정(Settings) → **인앱 설정(In-App Settings)**을 열고 메시지 위치를 **전체 화면(Fullscreen)**으로 설정하세요.

부분 화면 인앱 메시지

부분 화면 인앱은 팝업 뒤에 앱의 일부가 보이도록 하는 컴팩트한 오버레이 메시지입니다. 옵트인 프롬프트, 공지 및 프로모션 콘텐츠에 사용하세요.

팝업(Popup) 탭에서 팝업이 전체 화면을 덮지 않도록 더 작은 너비와 높이를 설정하세요.

참고

네이티브 iOS 및 Android 앱의 경우 설정(Settings) → **인앱 설정(In-App Settings)**을 열고 메시지 위치로 중앙(Center), 상단(Top) 또는 **하단(Bottom)**을 선택하세요.

팁

Customer Journey에서 푸시 권한 옵트인 및 옵트아웃 복구 팝업을 자동화하려면 옵트인 및 옵트아웃 팝업 만들기를 참조하세요.

콘텐츠 추가

콘텐츠 블록

필요한 콘텐츠 블록을 템플릿 본문으로 드래그 앤 드롭하여 템플릿 레이아웃을 정의합니다. 제목, 텍스트, 이미지, 버튼, 구분선, 채울 수 있는 양식, HTML 블록, 메뉴, 이미지 캐러셀, 카운트다운 타이머 및 테이블을 추가할 수 있습니다.

한 행에 두 개 이상의 콘텐츠 요소를 배치하려면 템플릿에 열(Columns) 요소를 추가하세요. 필요한 블록 유형을 선택하고 각 열에 콘텐츠를 추가합니다:

레이아웃의 배경색을 변경하려면 바깥쪽 여백을 클릭하세요. 전체 레이아웃이 선택되었는지 확인하고 색상을 선택하세요:

전체 레이아웃이 선택된 경우 패딩 설정을 편집하고 배경 이미지를 업로드할 수도 있습니다.

세로 및 가로 방향

Pushwoosh는 세로 및 가로 방향 모두에서 인앱 메시지 콘텐츠를 만들 수 있는 유연성을 제공합니다. 이를 통해 모든 기기에서 캠페인이 시각적으로 매력적이고 효과적이도록 보장합니다.

세로 (모바일 탭)

일반적으로 모바일 기기에서 사용되는 세로 방향으로 디자인된 인앱 메시지를 만들려면 에디터에서 **모바일 탭(Mobile tab)**으로 이동하세요. 여기에서 스마트폰 화면에 적합한 수직 레이아웃에 맞게 콘텐츠를 디자인할 수 있습니다.

가로 (데스크톱 탭)

일반적으로 더 넓은 화면에 선호되는 가로 방향 인앱 메시지의 경우 에디터 내의 **데스크톱 탭(Desktop tab)**으로 이동하세요. 여기에서 더 넓은 가로 공간을 활용하도록 인앱 메시지를 구성할 수 있습니다.

가로 레이아웃의 열

가로 인앱 메시지에 열을 추가해야 하는 경우 먼저 열(Column) 요소를 추가하세요. 필요한 열의 수와 레이아웃을 정의합니다.

열이 있는 가로 인앱 메시지를 디자인한 후 **모바일 탭(Mobile tab)**으로 전환하세요. 설정 패널 하단에 있는 반응형 디자인(RESPONSIVE DESIGN) 섹션으로 스크롤하여 모바일에서 쌓지 않기(Do Not Stack on Mobile) 옵션을 활성화하세요.

참고

이 단계는 모바일 기기에서 볼 때 가로 인앱 메시지의 의도된 디자인을 유지하는 데 매우 중요합니다. 열이 쌓이지 않고 나란히 유지되도록 보장합니다.

Pushwoosh는 또한 인앱 메시지에서 열 레이아웃을 혼합하고 일치시킬 수 있습니다. 특정 열은 수직으로 쌓고 다른 열은 수평으로 유지하도록 구성할 수 있습니다. 이렇게 하려면 각 열 블록을 필요에 따라 조정하세요.

콘텐츠 요소

제목

제목의 글꼴, 색상, 텍스트 정렬, 줄 높이 및 패딩 매개변수를 편집할 수 있습니다.

참고

각 사용자에 대해 제목을 개인화하려면 태그를 추가하세요.

AI가 제목 텍스트를 생성하도록 하여 시간을 절약할 수도 있습니다. 스마트 제목(Smart Headings) 섹션의 버튼을 클릭하고 몇 가지 키워드를 입력한 다음 **제안 받기(Get Suggestions)**를 클릭하세요:

텍스트

텍스트는 제목과 동일한 방식으로 사용자 정의할 수 있습니다 (에디터에서 이 블록은 **단락(Paragraph)**으로 표시됩니다). 글꼴, 색상, 텍스트 정렬, 줄 높이 및 패딩 매개변수를 변경할 수 있습니다.

참고

각 사용자에 대해 텍스트를 개인화하려면 태그를 추가하세요.

스마트 텍스트(Smart Text) 옵션을 사용하여 텍스트를 향상시킬 수도 있습니다:

이미지

이미지를 추가하려면 이미지 블록을 클릭하고 파일을 에디터 패널로 드래그하세요:

또는 파일을 업로드하는 대신 **이미지 URL(Image URL)**을 지정할 수 있습니다. 미디어 스토어의 이미지 URL을 이미지 URL(Image URL) 필드에 붙여넣을 수도 있습니다.

AI 이미지 생성을 실험해 볼 수도 있습니다. 이렇게 하려면 매직 이미지(Magic Image) 섹션의 버튼을 클릭하고 만들고 싶은 이미지를 설명한 다음 **이미지 생성(Generate Images)**을 클릭하세요:

이미지 위에 직접 텍스트를 배치하려면 이미지 블록을 선택하고 **효과 적용(Apply Effects)**을 클릭하세요. **텍스트(Text)**를 클릭하고 콘텐츠를 삽입한 다음 매개변수를 조정하세요:

액션(Action) 섹션에서 액션 유형(Action Type) 드롭다운을 열어 이미지를 클릭했을 때 발생하는 작업을 설정합니다: URL 또는 딥링크(URL or Deeplink) (웹사이트 또는 앱 내 페이지로의 딥링크 열기), 팝업 닫기(Close Popup) 또는 사용자 정의 Javascript(Custom Javascript) (사용자 정의 JavaScript 핸들러 삽입). 아무 작업도 필요하지 않은 경우 **팝업 닫기(Close Popup)**를 선택된 상태로 둡니다.

참고

이미지를 클릭했을 때 모바일 앱의 페이지를 열려면 URL 또는 딥링크(URL or Deeplink) 옵션을 선택하고 딥링크를 삽입하세요.

버튼

버튼이 템플릿에 추가되면 텍스트, 색상, 패딩 및 테두리를 사용자 정의할 수 있습니다.

참고

각 사용자에 대해 버튼 텍스트를 개인화하려면 태그를 추가하세요.

AI가 버튼 텍스트를 만드는 데 도움을 줄 수 있습니다. 스마트 버튼(Smart Buttons) 섹션의 버튼을 클릭하고 키워드를 입력한 다음 **제안 받기(Get Suggestions)**를 클릭하세요:

버튼을 클릭한 후 수행해야 할 작업을 지정하려면 액션(Action) 섹션으로 이동하여 액션 유형(Action Type) 드롭다운을 엽니다: URL 또는 딥링크(URL or Deeplink) (웹사이트 또는 딥링크 열기), 팝업 닫기(Close Popup) 또는 사용자 정의 Javascript(Custom Javascript) (사용자 정의 JavaScript 핸들러 삽입).

참고

버튼을 클릭했을 때 모바일 앱의 페이지를 열려면 URL 또는 딥링크(URL or Deeplink) 옵션을 선택하고 딥링크를 삽입하세요.

구분선

구분선은 콘텐츠 블록 사이에 배치할 수 있는 선입니다. 이를 사용하여 템플릿을 구조화하고 가장 중요한 블록을 강조하세요. 구분선의 너비, 선 유형, 정렬 및 패딩 설정을 변경할 수 있습니다.

양식

참고

이 요소를 구성하려면 개발자의 도움이 필요합니다.

양식을 사용하면 사용자의 이메일, 전화번호, 선호도 및 향후 커뮤니케이션에 유용할 수 있는 기타 정보를 수집할 수 있습니다. 이 요소는 표준 HTML 양식으로 구성됩니다: 데이터는 URL 필드에 지정된 주소로 GET 또는 POST 요청으로 전송됩니다.

필드 이름을 클릭하여 매개변수를 구성하세요:

• 필드 유형: 필드에서 전송되어야 하는 데이터 유형;
• 필드 이름: 필드의 데이터가 전달되는 매개변수 이름;
• 필드 레이블: 필드 위에 표시되는 텍스트;
• 플레이스홀더 텍스트;
• 양식 제출에 필드가 필수인지 여부를 나타내는 확인란.

다른 필드를 추가하려면 **새 필드 추가(Add New Field)**를 클릭하고 데이터 유형을 선택하세요:

너비, 정렬, 필드 간 간격, 버튼 텍스트, 색상, 글꼴과 같은 양식 매개변수를 사용자 정의할 수 있습니다.

HTML

HTML 블록을 사용하면 템플릿에 사용자 정의 HTML 코드를 추가할 수 있습니다.

이는 대화형 또는 시각적으로 매력적인 요소로 인앱 메시지를 향상시키는 데 특히 유용할 수 있습니다. 예를 들어, 설문조사를 위한 사용자 정의 양식을 만들고 싶다면 HTML 블록을 사용하여 직접 디자인한 양식을 포함할 수 있습니다.

양식을 설정한 후 Pushwoosh 내에서 직접 통계를 추적하여 결과 및 사용자 상호 작용을 쉽게 분석할 수 있습니다. 이를 구현하려면 개발팀의 도움이 필요하므로 이 링크를 공유해 주세요.

기본 템플릿에는 사용자 정의 설문조사 양식이 포함된 미리 디자인된 인앱 메시지 템플릿이 있습니다. 이를 참조하거나 자신만의 설문조사 양식을 위한 시작점으로 사용할 수 있습니다.

또한, 동영상을 삽입하여 인앱 메시지를 향상시켜 더욱 매력적인 사용자 경험을 제공할 수 있습니다. 다음은 HTML을 사용하여 YouTube 동영상을 삽입하는 예시입니다:

<!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>

메뉴

메뉴(Menu) 요소를 사용하면 여러 개의 클릭 가능한 항목을 행이나 열에 배치할 수 있습니다. 예를 들어, 탐색 모음이나 회사 연락처를 추가할 수 있습니다.

메뉴 항목을 추가하려면 **새 항목 추가(Add New Item)**를 클릭하세요:

항목 텍스트를 추가하고 항목을 클릭했을 때 수행되어야 할 작업을 설정하세요:

가로 또는 세로 메뉴 유형을 선택하고 필요한 경우 항목 사이에 구분선을 추가하세요:

이미지 캐러셀

캐러셀(Carousel) 요소는 단일 인앱 메시지 내에서 스와이프 가능한 슬라이더에 여러 이미지를 표시합니다. 여러 제품, 스크린샷 또는 온보딩 단계를 보여주는 데 사용하세요.

캐러셀을 설정하려면:

1. 캐러셀(Carousel) 블록이 선택된 상태에서 패널 상단의 **모바일(Mobile)**과 데스크톱(Desktop) 사이를 전환하여 각 보기를 구성합니다.

2. 이미지(Images) 섹션에서 이미지 1(Image 1), 이미지 2(Image 2), 이미지 3(Image 3) 등의 탭을 사용하여 슬라이드를 선택합니다. **+**를 클릭하여 다른 슬라이드를 추가하거나 삭제 아이콘을 클릭하여 활성 슬라이드를 제거합니다.

3. 선택한 슬라이드에 대해 **이미지 업로드(Upload Image)**를 클릭하거나 **더 많은 이미지(More Images)**에서 옵션을 선택합니다. 미디어 스토어의 이미지를 포함하여 호스팅된 링크를 **이미지 URL(Image URL)**에 붙여넣을 수도 있습니다.

4. 슬라이드에 대한 **대체 텍스트(Alternate Text)**를 입력합니다. 이미지 자체를 조정하려면 썸네일 미리보기 옆의 **이미지 편집(Edit Image)**을 클릭합니다.

5. 추가 슬라이드 설정이 필요한 경우 패널 하단의 **더 많은 옵션 표시(Show More Options)**를 클릭합니다.

카운트다운 타이머

타이머(Timer) 요소는 인앱 메시지에 카운트다운을 추가합니다. 기간 한정 제안, 반짝 세일, 이벤트 알림에 사용하세요. 목표 날짜와 시간을 설정한 다음 타이머의 모양을 사용자 정의하세요.

타이머를 설정하려면:

1. 타이머(Timer) 블록이 선택된 상태에서 패널 상단의 **모바일(Mobile)**과 데스크톱(Desktop) 사이를 전환하여 각 보기를 구성합니다.

2. 카운트다운(Countdown) 섹션에서 **종료 시간(End Time)**을 카운트다운이 0에 도달해야 하는 날짜와 시간으로 설정합니다. 타이머 레이블의 **시간대(Timezone)**와 **언어(Language)**를 선택합니다.

3. **레이블(Labels)**을 켜서 숫자 아래에 일(Days), 시간(Hours), 분(Minutes), **초(Seconds)**를 표시하거나, 꺼서 카운트다운 숫자만 표시합니다.

4. 스타일링(Styling) 섹션에서 배경(Background), 숫자 색상(Digits Color), **레이블 색상(Labels Color)**을 설정합니다. 숫자 글꼴(Digits Font), 숫자 글꼴 크기(Digits Font Size), 레이블 글꼴(Labels Font), **레이블 글꼴 크기(Labels Font Size)**를 선택합니다.

5. 필요에 따라 이미지(Image), 액션(Action), **일반(General)**의 다른 옵션을 구성합니다.

테이블

테이블(Table) 요소를 사용하면 요금제 비교, 가격 책정 또는 기능 목록과 같은 구조화된 콘텐츠를 행과 열로 표시할 수 있습니다. 행과 열을 추가 또는 제거하고 테두리, 패딩, 텍스트 스타일을 사용자 정의하세요.

테이블을 설정하려면:

1. 테이블(Table) 블록이 선택된 상태에서 패널 상단의 **모바일(Mobile)**과 데스크톱(Desktop) 사이를 전환하여 각 보기를 구성합니다.

2. 레이아웃(Layout) 섹션에서 + 및 - 버튼으로 **열(Columns)**과 **행(Rows)**을 설정합니다.

3. **배경색(Background Color)**을 선택합니다. **테두리(Border)**를 켜서 스타일, 두께, 색상을 설정하거나 고급 테두리 설정을 위해 **더 많은 옵션(More Options)**을 사용합니다. **줄무늬 행(Striped Rows)**을 켜서 행 배경을 번갈아 가며 표시합니다.

4. 미리보기에서 셀을 클릭하여 헤더 또는 본문 텍스트를 입력합니다.

5. 헤더(Header) 및 **콘텐츠(Content)**에서 헤더 및 본문 셀의 글꼴, 색상, 텍스트 정렬을 사용자 정의합니다.

6. 필요에 따라 링크(Links), 일반(General), **반응형 디자인(Responsive Design)**을 구성합니다.

콘텐츠 개인화

본문, 헤더 또는 버튼 텍스트를 개인화하여 콘텐츠를 더욱 관련성 있고 매력적으로 만드세요. 예를 들어, 사용자의 이름으로 부르거나 선호도를 언급할 수 있습니다.

먼저 태그를 설정하고 사용자로부터 데이터 수집을 구성해야 합니다(예: 피드백 양식을 통해). 인앱 메시지를 만들 때 필요한 콘텐츠 블록을 선택하고 **태그 병합(Merge Tags)**을 클릭한 다음 사용할 태그를 선택하세요:

다국어 템플릿

사용자가 사용하는 각 언어에 대해 인앱 메시지 템플릿의 텍스트를 현지화할 수 있습니다. 이렇게 하려면 편집 가능한 언어(Editable language) 목록에서 언어 간에 전환하고 각 언어의 콘텐츠를 별도로 편집하세요:

콘텐츠가 현지화되지 않은 경우 **언어 설정(Language settings)**에서 **기본값(default)**으로 지정된 언어로 표시됩니다.

참고

템플릿에 추가하는 모든 요소는 모든 언어에 대해 동일한 콘텐츠로 나타납니다. 템플릿에서 사용하는 모든 언어에 대해 추가된 텍스트(버튼 텍스트 포함)를 현지화하는 것을 잊지 마세요.

인앱 메시지 모양 및 동작 사용자 정의 (iOS 및 Android 네이티브)

**인앱 설정(In-App Settings)**을 사용하여 네이티브 iOS 및 Android 앱에서 인앱 메시지의 모양과 동작을 제어할 수 있습니다. 화면 위치를 조정하고, 애니메이션을 선택하고, 스와이프하여 닫기 제스처를 활성화할 수 있습니다.

인앱 설정을 구성하려면:

1. 화면 상단의 **설정(Settings)**을 클릭합니다.

2. 설정 창에서 사용 가능한 옵션을 조정하여 인앱 메시지의 모양과 동작을 원하는 대로 선택합니다:

화면에 메시지 위치 설정

메시지가 나타날 위치를 선택합니다.

옵션: 전체 화면(Fullscreen), 상단(Top), 중앙(Center), 하단(Bottom)

시작 애니메이션 선택

메시지가 화면에 나타나는 방식을 선택합니다. 설정에서는 표시 애니메이션(Present Animation) 옵션입니다.

옵션: 위로(Up), 아래로(Down), 왼쪽(Left), 오른쪽(Right)

종료 애니메이션 선택

메시지가 사라지는 방식을 선택합니다. 설정에서는 닫기 애니메이션(Close Animation) 옵션입니다.

옵션: 위로(Up), 아래로(Down), 왼쪽(Left), 오른쪽(Right)

스와이프하여 닫기 활성화 (선택 사항)

사용자가 하나 이상의 방향으로 스와이프하여 메시지를 닫을 수 있도록 허용합니다.

옵션: 왼쪽(Left), 오른쪽(Right), 위로(Up), 아래로(Down)

3. 선호 사항을 선택한 후 **적용(Apply)**을 클릭하여 변경 사항을 저장하거나 **취소(Cancel)**를 클릭하여 취소하세요.

템플릿 저장 및 사용

**저장(Save)**을 클릭하여 변경 사항을 적용하세요.

이제 다음 방법 중 하나로 인앱 메시지 템플릿을 사용할 수 있습니다:

• 고객 여정의 일부로 인앱 표시;
• 클릭 시 인앱을 여는 푸시 보내기;
• 사용자에게 단일 인앱 표시.