내장 편집기에서 인앱 메시지 만들기

Youtube 동영상: 사용하기 쉬운 편집기에서 코딩 없이 인앱 만들기

새 템플릿 추가

인앱 템플릿을 만들려면 콘텐츠 → 인앱으로 이동하여 템플릿 추가를 클릭합니다:

여기서 템플릿을 만드는 두 가지 방법이 있습니다:

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

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

템플릿 이름을 입력하고 새 템플릿 만들기를 선택한 후 템플릿 추가를 클릭합니다:

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

일반 템플릿 설정

콘텐츠 블록을 추가하기 전에 팝업 탭에서 템플릿을 구성합니다:

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

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

전체 화면 인앱 메시지

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

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

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

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

참고

네이티브 iOS 및 Android 앱의 경우, 설정 → 인앱 설정을 열고 메시지 위치를 전체 화면으로 설정하세요.

부분 화면 인앱 메시지

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

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

참고

네이티브 iOS 및 Android 앱의 경우, 설정 → 인앱 설정을 열고 메시지 위치로 중앙, 상단 또는 하단을 선택하세요.

팁

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

콘텐츠 추가

콘텐츠 블록

필요한 콘텐츠 블록을 템플릿 본문으로 끌어다 놓아 템플릿 레이아웃을 정의합니다. 제목, 텍스트, 이미지, 버튼, 구분선, 입력 가능한 양식, HTML 블록, 메뉴, 이미지 캐러셀, 카운트다운 타이머 및 표를 추가할 수 있습니다.

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

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

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

세로 및 가로 방향

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

세로(모바일 탭)

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

가로(데스크톱 탭)

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

가로 레이아웃의 열

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

열이 있는 가로 인앱 메시지를 디자인한 후 모바일 탭으로 전환합니다. 설정 패널 하단에 있는 반응형 디자인 섹션으로 스크롤하여 모바일에서 쌓지 않기 옵션을 활성화합니다.

참고

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

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

콘텐츠 요소

제목

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

참고

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

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

텍스트

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

참고

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

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

이미지

이미지를 추가하려면 이미지 블록을 클릭하고 파일을 편집기 패널로 드래그합니다:

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

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

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

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

참고

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

버튼

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

참고

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

AI가 버튼 텍스트를 생각해 내는 데 도움을 줄 수 있습니다. 스마트 버튼 섹션의 버튼을 클릭하고 키워드를 입력한 다음 제안 받기를 클릭하기만 하면 됩니다:

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

참고

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

구분선

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

양식

참고

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

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

필드 이름을 클릭하여 매개변수를 구성합니다:

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

다른 필드를 추가하려면 새 필드 추가를 클릭하고 데이터 유형을 선택합니다:

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

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>

메뉴

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

메뉴 항목을 추가하려면 새 항목 추가를 클릭합니다:

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

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

이미지 캐러셀

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

캐러셀을 설정하려면:

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

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

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

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

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

카운트다운 타이머

타이머 요소는 인앱 메시지에 카운트다운을 추가합니다. 기간 한정 혜택, 플래시 세일 및 이벤트 알림에 사용하세요. 목표 날짜와 시간을 설정한 다음 타이머의 모양을 사용자 지정합니다.

타이머를 설정하려면:

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

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

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

4. 스타일링 섹션에서 배경, 숫자 색상, 레이블 색상을 설정합니다. 숫자 글꼴, 숫자 글꼴 크기, 레이블 글꼴, 레이블 글꼴 크기를 선택합니다.

5. 필요에 따라 이미지, 액션, 일반에서 다른 옵션을 구성합니다.

표

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

표를 설정하려면:

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

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

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

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

5. 헤더 및 콘텐츠에서 헤더 및 본문 셀에 대한 글꼴, 색상 및 텍스트 정렬을 사용자 지정합니다.

6. 필요에 따라 링크, 일반, 반응형 디자인을 구성합니다.

콘텐츠 개인화

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

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

다국어 템플릿

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

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

참고

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

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

인앱 설정을 사용하여 네이티브 iOS 및 Android 앱에서 인앱 메시지가 어떻게 보이고 동작하는지 제어하세요. 화면 위치를 조정하고, 애니메이션을 선택하고, 스와이프로 닫기 제스처를 활성화할 수 있습니다.

인앱 설정을 구성하려면:

1. 화면 상단의 설정을 클릭합니다.

2. 설정 창에서 사용 가능한 옵션을 조정하여 인앱 메시지가 어떻게 보이고 동작할지 선택합니다:

화면에 메시지 위치 설정

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

옵션에는 전체 화면, 상단, 중앙, 하단이 포함됩니다.

시작 애니메이션 선택

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

• 위로
• 아래로
• 왼쪽으로
• 오른쪽으로
• 페이드: 메시지가 서서히 나타납니다.
• 없음: 메시지가 애니메이션 없이 즉시 나타납니다.
• 기본값: 앱 코드에 정의된 애니메이션을 사용합니다(SDK 기본값).

종료 애니메이션 선택

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

• 위로
• 아래로
• 왼쪽으로
• 오른쪽으로
• 페이드: 메시지가 서서히 사라집니다.
• 없음: 메시지가 애니메이션 없이 즉시 사라집니다.
• 기본값: 앱 코드에 정의된 애니메이션을 사용합니다(SDK 기본값).

참고

페이드와 없음은 현재 Android에서 작동합니다. iOS에서는 모달이 즉시 나타나거나 사라집니다(정렬 기능은 곧 제공될 예정입니다).

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

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

옵션에는 왼쪽, 오른쪽, 위, 아래가 포함됩니다.

3. 기본 설정을 선택한 후 적용을 클릭하여 변경 사항을 저장하거나 취소를 클릭하여 취소합니다.

템플릿 저장 및 사용

저장을 클릭하여 변경 사항을 적용합니다.

참고

편집기는 저장되지 않은 변경 사항을 브라우저에 초안으로 보관합니다. 동일한 템플릿을 다시 열 때 저장되지 않은 변경 사항을 복원하시겠습니까? 대화 상자에서 복원을 클릭하여 초안에서 계속하거나 폐기를 클릭하여 마지막으로 저장된 버전을 엽니다.

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

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