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

새 템플릿 추가하기

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

여기에는 세 가지 옵션이 있습니다:

HTML 인앱 메시지가 포함된 ZIP 파일 업로드.
사전 빌드된 템플릿 중 하나를 선택하고 사용자 정의.
처음부터 직접 템플릿 만들기.

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

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

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

콘텐츠 추가하기

레이아웃

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

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

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

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

세로 및 가로 모드 인앱 메시지 만들기

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

세로 모드 인앱 메시지

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

가로 모드 인앱 메시지

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

가로 모드 인앱 메시지에 열 추가하기

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

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

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

콘텐츠 요소

제목

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

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

텍스트

텍스트는 제목과 동일한 방식으로 사용자 정의할 수 있습니다. 글꼴, 색상, 텍스트 정렬, 줄 높이 및 패딩 매개변수를 변경할 수 있습니다.

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

이미지

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

또는 파일을 업로드하는 대신 **이미지 URL(Image URL)**을 지정할 수 있습니다.

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

액션(Action) 섹션에서 이미지를 클릭했을 때 수행되어야 할 작업을 설정할 수 있습니다. 웹사이트(또는 앱 내 페이지로의 딥 링크)를 열거나 팝업을 닫을 수 있습니다. 사용자 정의 JavaScript 핸들러 속성을 삽입하여 이미지 클릭 작업을 설정할 수도 있습니다. 작업이 필요하지 않은 경우 이 설정을 무시하세요.

버튼

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

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

버튼을 클릭한 후 수행되어야 할 작업을 지정하려면 액션(Action) 섹션으로 이동하여 필요한 옵션을 선택하세요. 웹사이트를 열거나 팝업을 닫을 수 있습니다. 사용자 정의 JavaScript 핸들러 속성을 삽입하여 버튼 클릭 작업을 설정할 수도 있습니다.

구분선

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

양식

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

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

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

필드 유형, 이름, 레이블 및 플레이스홀더 설정을 보여주는 양식 필드 매개변수 구성

다른 필드를 추가하려면 **새 필드 추가(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>